Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 13:37:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #13564 from ToolJet/fix/css

Browse source 
Fix/css
This commit is contained in:
Johnson Cherian 2025-07-31 16:31:53 +05:30 committed by GitHub
commit 756eef0fe6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 67 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
View file

@ -451,6 +451,31 @@ export const Inspector = ({
return <Accordion items={items} />;
};
const renderDocumentationLink = () => {
return (
<span className="widget-documentation-link">
<a href={getDocsLink(componentMeta)} target="_blank" rel="noreferrer" data-cy="widget-documentation-link">
<span>
<Student width={13} fill={'#3E63DD'} />
<small className="widget-documentation-link-text">
{t('widget.common.documentation', 'Read documentation for {{componentMeta}}', {
componentMeta:
componentMeta.displayName === 'Toggle Switch (Legacy)'
? 'Toggle (Legacy)'
: componentMeta.displayName === 'Toggle Switch'
? 'Toggle Switch'
: componentMeta.component,
})}
</small>
</span>
<span>
<ArrowRight width={20} fill={'#3E63DD'} />
</span>
</a>
</span>
);
};
const propertiesTab = isMounted && (
<div className={`${shouldFreeze && 'disabled'}`}>
<GetAccordion
@ -630,26 +655,7 @@ export const Inspector = ({
{renderTabs()}
</div>
</div>
<span className="widget-documentation-link">
<a href={getDocsLink(componentMeta)} target="_blank" rel="noreferrer" data-cy="widget-documentation-link">
<span>
<Student width={13} fill={'#3E63DD'} />
<small className="widget-documentation-link-text">
{t('widget.common.documentation', 'Read documentation for {{componentMeta}}', {
componentMeta:
componentMeta.displayName === 'Toggle Switch (Legacy)'
? 'Toggle (Legacy)'
: componentMeta.displayName === 'Toggle Switch'
? 'Toggle Switch'
: componentMeta.component,
})}
</small>
</span>
<span>
<ArrowRight width={20} fill={'#3E63DD'} />
</span>
</a>
</span>
{renderDocumentationLink()}
</div>
);
};

2
frontend/src/AppBuilder/WidgetManager/widgets/calendar.js
View file

@ -74,7 +74,7 @@ export const calendarConfig = {
},
events: {
value:
"{{[\n\t\t{\n\t\t\t title: 'Sample event',\n\t\t\t start: `${moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t end: `${moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t allDay: false,\n\t\t\t color: '#4D72DA'\n\t\t}\n]}}",
"{{[\n\t\t{\n\t\t\t title: 'Sample event',\n\t\t\t start: `${moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t end: `${moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t allDay: false\n\t\t}\n]}}",
},
resources: {
value: '{{[]}}',

4
frontend/src/AppBuilder/Widgets/Calendar/Calendar.jsx
View file

@ -58,14 +58,14 @@ export const Calendar = function ({
const isInitialRender = useRef(true);
const eventPropGetter = (event) => {
const backgroundColor = event.color;
const backgroundColor = event.color ?? 'var(--cc-primary-brand)';
const textStyle =
event.textOrientation === 'vertical' && currentView != 'month'
? { writingMode: 'vertical-rl', textOrientation: 'mixed' }
: {};
const color = event.textColor ?? 'white';
const style = { backgroundColor, ...textStyle, padding: 3, paddingLeft: 5, paddingRight: 5, color };
return { style };
};

4
frontend/src/AppBuilder/Widgets/Calendar/Calendar.scss
View file

@ -28,12 +28,12 @@
.rbc-row-segment {
.rbc-event {
background-color: var(--cc-primary-brand) !important;
// background-color: var(--cc-primary-brand) !important;
}
}
.rbc-events-container {
.rbc-event {
background-color: var(--cc-primary-brand) !important;
// background-color: var(--cc-primary-brand) !important;
}
}
.rbc-header {

3
frontend/src/AppBuilder/Widgets/Form/Form.jsx
View file

@ -50,6 +50,7 @@ const FormComponent = (props) => {
const { moduleId } = useModuleContext();
const childComponents = useStore((state) => state.getChildComponents(id, moduleId), checkDiff);
const isJSONSchema = useStore((state) => state.isJsonSchemaInGenerateFormFrom(id, moduleId), shallow);
const themeChanged = useStore((state) => state.themeChanged);
const { borderRadius, borderColor, boxShadow, footerBackgroundColor, headerBackgroundColor } = styles;
@ -434,7 +435,7 @@ const FormComponent = (props) => {
onOptionsChange={onOptionsChange}
styles={{
backgroundColor: computedStyles.backgroundColor,
overflow: 'hidden auto',
// overflow: 'hidden auto',
height: '100%',
}}
darkMode={darkMode}

44
frontend/src/AppBuilder/Widgets/Form/form.scss
View file

@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
height: 100%;
scrollbar-color: var(--cc-form-scroll-bar-color) transparent;
}
.wj-form-header {
@ -126,27 +125,32 @@
}
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
.hide-scrollbar {
scrollbar-width: none;
&:hover {
scrollbar-color: var(--cc-form-scroll-bar-color) transparent;
scrollbar-width: auto;
}
}
/* Show scrollbar on hover for Chrome, Safari and Opera */
.show-scrollbar-on-hover:hover::-webkit-scrollbar {
display: block;
width: 6px;
}
// /* Show scrollbar on hover for Chrome, Safari and Opera */
// .show-scrollbar-on-hover:hover::-webkit-scrollbar {
// display: block;
// width: 6px;
// }
/* Scrollbar styling when visible on hover */
.show-scrollbar-on-hover:hover::-webkit-scrollbar-track {
background: #e7eaef;
border-radius: 4px;
}
// /* Scrollbar styling when visible on hover */
// .show-scrollbar-on-hover:hover::-webkit-scrollbar-track {
// background: #e7eaef;
// border-radius: 4px;
// }
.show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
background: #a0a6ae;
border-radius: 4px;
}
// .show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
// background: #a0a6ae;
// border-radius: 4px;
// }
.show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
// .show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb:hover {
// background: rgba(0, 0, 0, 0.3);
// }

3
frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
View file

@ -401,8 +401,9 @@ export const DropdownV2 = ({
color: selectedTextColor !== '#1B1F24' ? selectedTextColor : 'var(--cc-primary-text)',
borderRadius: _state.isFocused && '8px',
padding: '8px 6px 8px 38px',
opacity: _state.isDisabled ? 0.3 : 1,
'&:hover': {
backgroundColor: 'var(--interactive-overlays-fill-hover)',
backgroundColor: _state.isDisabled ? 'var(--cc-surface1-surface)' : 'var(--interactive-overlays-fill-hover)',
borderRadius: '8px',
},
display: 'flex',

3
frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
View file

@ -430,8 +430,9 @@ export const MultiselectV2 = ({
color: selectedTextColor !== '#1B1F24' ? selectedTextColor : 'var(--cc-primary-text)',
borderRadius: _state.isFocused && '8px',
padding: '8px 6px 8px 12px',
opacity: _state.isDisabled ? 0.3 : 1,
'&:hover': {
backgroundColor: 'var(--interactive-overlays-fill-hover)',
backgroundColor: _state.isDisabled ? 'var(--cc-surface1-surface)' : 'transparent',
borderRadius: '8px',
},
cursor: 'pointer',

9
frontend/src/_styles/theme.scss
View file

@ -1552,7 +1552,7 @@ button {
.tab-content {
overflow-y: auto;
// TAB HEADER HEIGHT + FOOTER HEIGHT + Extra padding = 120px
height: calc(100vh - 10.4rem);
height: calc(100vh - 12.8rem);
// Hide scrollbar
-ms-overflow-style: none;
/* IE and Edge */
@ -3005,8 +3005,8 @@ input:focus-visible {
}
.widget-documentation-link {
position: fixed;
bottom: 0;
// position: relative;
// top: 0px;
background: var(--indigo3);
width: 18.75rem; // 300px
z-index: 999;
@ -4151,7 +4151,7 @@ input[type="text"] {
}
.rbc-event {
background-color: var(--primary-brand) !important;
background-color: var(--primary-brand);
border: transparent;
.rbc-event-label {
@ -18777,6 +18777,7 @@ section.ai-message-prompt-input-wrapper {
.scrollbar-container {
scrollbar-width: 8px;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
&::-webkit-scrollbar {
width: 16px;

2
server/src/modules/apps/services/widget-config/calendar.js
View file

@ -74,7 +74,7 @@ export const calendarConfig = {
},
events: {
value:
"{{[\n\t\t{\n\t\t\t title: 'Sample event',\n\t\t\t start: `${moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t end: `${moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t allDay: false,\n\t\t\t color: '#4D72DA'\n\t\t}\n]}}",
"{{[\n\t\t{\n\t\t\t title: 'Sample event',\n\t\t\t start: `${moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t end: `${moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t allDay: false\n\t\t}\n]}}",
},
resources: {
value: '{{[]}}',