From 231f71d8dca1255d7313f8d016320a465a8c944e Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 00:00:52 +0530 Subject: [PATCH 001/136] Added indicator in switchPage function for browser navigation and also added page id and handle in url state. --- .../Viewer/MobileNavigationMenu.jsx | 2 +- .../Viewer/ViewerSidebarNavigation.jsx | 2 +- .../src/AppBuilder/_stores/slices/appSlice.js | 23 +++++++++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx index e6c8179328..bf4b6b50b4 100644 --- a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx +++ b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx @@ -134,7 +134,7 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan version: selectedVersionName, env: selectedEnvironmentName, }; - switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), true); + switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams)); }; var styles = { bmBurgerButton: { diff --git a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx index d913bffd91..a7111a48a0 100644 --- a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx +++ b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx @@ -95,7 +95,7 @@ export const ViewerSidebarNavigation = ({ version: selectedVersionName, env: selectedEnvironmentName, }; - switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), true); + switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams)); }; const isLicensed = diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js index 560dabdec8..6635519def 100644 --- a/frontend/src/AppBuilder/_stores/slices/appSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/appSlice.js @@ -93,7 +93,7 @@ export const createAppSlice = (set, get) => ({ console.error('Error updating page:', error); } }, - switchPage: (pageId, handle, queryParams = []) => { + switchPage: (pageId, handle, queryParams = [], isBackOrForward = false) => { get().debugger.resetUnreadErrorCount(); // reset stores if (get().pageSwitchInProgress) { @@ -134,14 +134,19 @@ export const createAppSlice = (set, get) => ({ const queryParamsString = filteredQueryParams.map(([key, value]) => `${key}=${value}`).join('&'); const slug = get().app.slug; - navigate( - `/${isPreview ? 'applications' : getWorkspaceId() + '/apps'}/${slug ?? appId}/${handle}?${queryParamsString}`, - { - state: { - isSwitchingPage: true, - }, - } - ); + if (!isBackOrForward) { + navigate( + `/${isPreview ? 'applications' : getWorkspaceId() + '/apps'}/${slug ?? appId}/${handle}?${queryParamsString}`, + { + state: { + isSwitchingPage: true, + id: pageId, + handle: handle, + }, + } + ); + } + const newPage = pages.find((p) => p.id === pageId); setResolvedPageConstants({ id: newPage?.id, From 23e103ad96bb515c21ce8c33099b4742eefdb86d Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 01:29:14 +0530 Subject: [PATCH 002/136] Added function set page id and handle in the url state on first load. --- frontend/src/AppBuilder/AppBuilder.jsx | 9 +++++++++ frontend/src/AppBuilder/Viewer/Viewer.jsx | 10 ++++++++++ frontend/src/AppBuilder/_utils/misc.js | 9 +++++++++ 3 files changed, 28 insertions(+) diff --git a/frontend/src/AppBuilder/AppBuilder.jsx b/frontend/src/AppBuilder/AppBuilder.jsx index 30b0d6d97b..9a414f55f5 100644 --- a/frontend/src/AppBuilder/AppBuilder.jsx +++ b/frontend/src/AppBuilder/AppBuilder.jsx @@ -14,6 +14,7 @@ import EditorHeader from '@/AppBuilder/Header'; import LeftSidebar from '@/AppBuilder/LeftSidebar'; import Popups from './Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; +import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; // const EditorHeader = lazy(() => import('@/AppBuilder/Header')); // const LeftSidebar = lazy(() => import('@/AppBuilder/LeftSidebar')); @@ -26,6 +27,14 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod useAppData(appId, moduleId, darkMode); const isEditorLoading = useStore((state) => state.isEditorLoading); const currentMode = useStore((state) => state.currentMode); + const currentPageId = useStore((state) => state.currentPageId); + const currentPageHandle = useStore((state) => state.currentPageHandle); + + useEffect(() => { + if (currentPageId && currentPageHandle) { + setPageStateOnLoad(currentPageId, currentPageHandle); + } + }, [currentPageId, currentPageHandle]); const updateIsTJDarkMode = useStore((state) => state.updateIsTJDarkMode); diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx index af820fca13..fa4a4e1883 100644 --- a/frontend/src/AppBuilder/Viewer/Viewer.jsx +++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx @@ -15,6 +15,7 @@ import ViewerSidebarNavigation from './ViewerSidebarNavigation'; import { shallow } from 'zustand/shallow'; import Popups from '../Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; +import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMode, environmentId, versionId } = {}) => { const DEFAULT_CANVAS_WIDTH = 1292; @@ -30,6 +31,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod selectedVersion, currentCanvasWidth, currentPageId, + currentPageHandle, globalSettings, pages, pageSettings, @@ -50,6 +52,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod appName: state.app.appName, homePageId: state?.app.homepageId, currentPageId: state.currentPageId, + currentPageHandle: state.currentPageHandle, globalSettings: state.globalSettings, pages: state.modules.canvas.pages, modules: state.modules, @@ -110,6 +113,13 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod const changeToDarkMode = (newMode) => { switchDarkMode(newMode); }; + + useEffect(() => { + if (currentPageId && currentPageHandle) { + setPageStateOnLoad(currentPageId, currentPageHandle); + } + }, [currentPageId, currentPageHandle]); + useEffect(() => { const isMobileDevice = deviceWindowWidth < 600; toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop'); diff --git a/frontend/src/AppBuilder/_utils/misc.js b/frontend/src/AppBuilder/_utils/misc.js index 14929007f8..6fb5db56b9 100644 --- a/frontend/src/AppBuilder/_utils/misc.js +++ b/frontend/src/AppBuilder/_utils/misc.js @@ -15,6 +15,15 @@ export const navigate = (url, options = {}) => { ); }; +export const setPageStateOnLoad = (pageId, pageHandle) => { + // function to set page id and handle in the url state on first load + const currentState = history.state || {}; + if (currentState.isSwitchingPage) return; + + const newState = { ...currentState, id: pageId, handle: pageHandle }; + history.replaceState(newState, '', window.location.href); +}; + export async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); From 62c3d884417b83164fd1c8d10712efa16f3e609a Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 02:08:10 +0530 Subject: [PATCH 003/136] Added event listener for forward and backward navigation. --- frontend/src/Routes/AppsRoute.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/Routes/AppsRoute.jsx b/frontend/src/Routes/AppsRoute.jsx index 7ed530162d..70a4b508d6 100644 --- a/frontend/src/Routes/AppsRoute.jsx +++ b/frontend/src/Routes/AppsRoute.jsx @@ -8,6 +8,7 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { handleAppAccess } from '@/_helpers/handleAppAccess'; import { getQueryParams } from '@/_helpers/routes'; import queryString from 'query-string'; +import useStore from '@/AppBuilder/_stores/store'; export const AppsRoute = ({ children, componentType }) => { const params = useParams(); @@ -20,6 +21,7 @@ export const AppsRoute = ({ children, componentType }) => { }); const clonedElement = React.cloneElement(children, extraProps); const navigate = useNavigate(); + const switchPage = useStore((state) => state.switchPage); /* any extra logic specifc to the route can be done @@ -29,6 +31,8 @@ export const AppsRoute = ({ children, componentType }) => { if (isValidSession) { onValidSession(); } + + return () => window.removeEventListener('popstate'); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isValidSession]); @@ -67,6 +71,12 @@ export const AppsRoute = ({ children, componentType }) => { setExtraProps(restDetails); setLoading(false); } + + // handle back and forward navigation + window.addEventListener('popstate', (e) => { + const { id, handle } = e.state; + switchPage(id, handle, [], true); + }); }; return {clonedElement}; From c70892ba802b22c8136fc2e5c3996350477e5a13 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Wed, 26 Feb 2025 23:16:29 +0530 Subject: [PATCH 004/136] Fixed bug causing component definition to be copied on copying text --- frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 04ae6aa896..027734a6a1 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -240,6 +240,12 @@ const getSelectedText = () => { // TODO: Move this function to componentSlice export const copyComponents = ({ isCut = false, isCloning = false }) => { + const selectedText = window.getSelection()?.toString().trim(); + if (selectedText) { + navigator.clipboard.writeText(selectedText); + return; + } + const selectedComponents = useStore.getState().getSelectedComponentsDefinition(); if (selectedComponents.length < 1) return getSelectedText(); const allComponents = useStore.getState().getCurrentPageComponents(); From 161fffcb42785b4f8aef48ee9371c5a4a21e7756 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Thu, 27 Feb 2025 02:44:31 +0530 Subject: [PATCH 005/136] Automatically resizing codehinter input based on content --- .../QueryEditors/Restapi/TabContent.jsx | 4 ++-- .../TooljetDatabase/DropDownSelect.jsx | 4 +++- .../TooljetDatabase/JoinConstraint.jsx | 3 +-- .../TooljetDatabase/JoinSelect.jsx | 5 +---- .../QueryEditors/TooljetDatabase/JoinSort.jsx | 5 +---- .../TooljetDatabase/JoinTable.jsx | 3 +-- .../TooljetDatabase/RenderColumnUI.jsx | 5 +---- .../TooljetDatabase/RenderFilterSectionUI.jsx | 5 +---- .../TooljetDatabase/RenderSortUI.jsx | 5 +---- frontend/src/_styles/queryManager.scss | 21 +++++++++++++++++-- frontend/src/_styles/theme.scss | 1 + 11 files changed, 32 insertions(+), 29 deletions(-) diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx index cf47ded427..ee55937b1c 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx @@ -30,7 +30,7 @@ export default ({ return ( <>
-
+
) : ( -
+
{index > 0 && ( diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx index 4734addb26..863c826b8a 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx @@ -340,10 +340,7 @@ const JsonBfieldsForSelect = ({ selectedJsonbColumns, handleJSonChange, table }) handleRemove(colDetails.id, colDetails.name, colDetails.table)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx index 2d5a2de518..9e129e9eb4 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx @@ -164,10 +164,7 @@ export default function JoinSort({ darkMode }) { setJoinOrderByOptions(joinOrderByOptions.filter((opt, idx) => idx !== i))} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx index eba36f37a3..cf14448967 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx @@ -535,12 +535,11 @@ const RenderFilterSection = ({ darkMode }) => { removeFilterConditionEntry(index)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx index 1766691d66..89323c1c3c 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx @@ -54,10 +54,7 @@ const RenderColumnUI = ({ removeColumnOptionsPair(id)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx index 983019697a..cd7f94abf3 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx @@ -117,10 +117,7 @@ const RenderFilterSectionUI = ({ removeFilterConditionPair(id)} > diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx index b5021974ba..a349b9e5ed 100644 --- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx +++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx @@ -86,10 +86,7 @@ const RenderSortUI = ({ removeSortConditionPair(id)} > diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss index 8a9eaf972a..ece491e06a 100644 --- a/frontend/src/_styles/queryManager.scss +++ b/frontend/src/_styles/queryManager.scss @@ -1851,8 +1851,9 @@ $border-radius: 4px; .tjdb-codhinter-wrapper{ .codehinter-input{ .cm-editor{ - height: 30px !important; + // height: 30px !important; min-height: 30px !important; + max-height:100px !important; border-radius: 0 !important; border-right: 0 ; } @@ -1860,8 +1861,9 @@ $border-radius: 4px; } .tjdb-limit-offset-codehinter{ .cm-editor{ - height: 30px !important; + // height: 30px !important; min-height: 30px !important; + max-height:100px !important; } } @@ -1899,4 +1901,19 @@ $border-radius: 4px; line-height: 18px; } } +} + + +.qm-delete-btn { + min-height: 30px; + height: 100% !important; + align-items: flex-start !important; + padding-top: 6px; +} + +.restapi-key-value { + .code-hinter-wrapper, .code-editor-basic-wrapper, .codehinter-container, .cm-codehinter, .code-editor-query-panel{ + height:100%; + max-height: 100px; + } } \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index c999eaa525..5a223dd733 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -15810,6 +15810,7 @@ tbody { } .rest-api-options-codehinter { + height: 100%; .cm-content>.cm-line { // max-width: 357px !important; } From 6952cd2292e79d36b127f247ec92949f6f70e598 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Sun, 2 Mar 2025 00:57:01 +0530 Subject: [PATCH 006/136] Fixed query panel resizing causing black bars issue --- .../src/AppBuilder/LeftSidebar/LeftSidebar.jsx | 14 ++++++++++---- frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx | 1 + frontend/src/_styles/left-sidebar.scss | 1 + 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx index 4146c4a28e..aaf12714b9 100644 --- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx @@ -34,6 +34,7 @@ export const BaseLeftSidebar = ({ resetUnreadErrorCount, toggleLeftSidebar, isSidebarOpen, + isDraggingQueryPane, ] = useStore( (state) => [ state.isLeftSideBarPinned, @@ -46,6 +47,7 @@ export const BaseLeftSidebar = ({ state.debugger.resetUnreadErrorCount, state.toggleLeftSidebar, state.isSidebarOpen, + state.queryPanel.isDraggingQueryPane, ], shallow ); @@ -68,11 +70,15 @@ export const BaseLeftSidebar = ({ }; useEffect(() => { - setPopoverContentHeight( - ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100 - ); + if (!isDraggingQueryPane) { + setPopoverContentHeight( + ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100 + ); + } else { + setPopoverContentHeight(100); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [queryPanelHeight]); + }, [queryPanelHeight, isDraggingQueryPane]); const renderPopoverContent = () => { if (selectedSidebarItem === null || !isSidebarOpen) return null; diff --git a/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx b/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx index 827efe6d33..ea8623b0c1 100644 --- a/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx +++ b/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx @@ -185,6 +185,7 @@ export const QueryPanel = ({ darkMode }) => { id="query-manager" style={{ height: `calc(100% - ${isExpanded ? height : 100}%)`, + maxHeight: '93.5%', cursor: isDraggingQueryPane || isTopOfQueryPanel ? 'row-resize' : 'default', ...(!isExpanded && { border: 'none', diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss index 3f68e1486b..82b6762b54 100644 --- a/frontend/src/_styles/left-sidebar.scss +++ b/frontend/src/_styles/left-sidebar.scss @@ -701,6 +701,7 @@ .sidebar-h-100-popover { position: relative; height: 100vh; + overflow-y:scroll !important; margin-top: 0px; border-radius: 0px !important; From b4ff440e8705d56207cfa7e8fd8255af6dc5caaf Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Sun, 2 Mar 2025 13:09:56 +0530 Subject: [PATCH 007/136] Fixed popover values not saving when clicking on draggable items on inspector --- .../RightSideBar/Inspector/Components/Select.jsx | 5 +++++ .../RightSideBar/Inspector/Components/Table/Table.jsx | 8 +++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index a57c879121..d0b058b7b0 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -388,6 +388,11 @@ export function Select({ componentMeta, darkMode, ...restProps }) { placement="left" rootClose overlay={_renderOverlay(item, index)} + onToggle={(isOpen) => { + if (!isOpen) { + document.activeElement?.blur(); // Manually trigger blur when popover closes + } + }} >
this.setState({ showPopOver: showing })} + onToggle={(showing) => { + if (!showing) { + document.activeElement?.blur(); // Manually trigger blur when popover closes + } + this.setState({ showPopOver: showing }); + }} >
@@ -647,6 +652,7 @@ class TableComponent extends React.Component { if (show) { this.handleToggleColumnPopover(index); } else { + document.activeElement?.blur(); // Manually trigger blur when popover closes this.handleToggleColumnPopover(null); } }} From 3c68cd6f5a6c3b2fe390e5570b5afc7795ea99fb Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Mon, 3 Mar 2025 02:39:32 +0530 Subject: [PATCH 008/136] Code hinter issue fix --- .../src/AppBuilder/CodeEditor/PreviewBox.jsx | 16 ++- .../CodeEditor/SingleLineCodeEditor.jsx | 120 +++++++++++------- .../src/AppBuilder/CodeEditor/styles.scss | 5 + frontend/src/_styles/theme.scss | 7 +- 4 files changed, 99 insertions(+), 49 deletions(-) diff --git a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx index 2429973c25..ce12c1b250 100644 --- a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx +++ b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx @@ -294,13 +294,9 @@ const PreviewContainer = ({ ...restProps }) => { const { validationSchema, isWorkspaceVariable, errorStateActive, previewPlacement, validationFn } = restProps; - const [errorMessage, setErrorMessage] = useState(''); - const typeofError = getCurrentNodeType(errorMessage); - const errorMsg = typeofError === 'Array' ? errorMessage[0] : errorMessage; - const darkMode = localStorage.getItem('darkMode') === 'true'; const popover = ( { + // Force position update on first render + // This is done to avoid scroll issue + if (state.elements.popper) { + state.elements.popper.style.position = 'fixed'; + } + }, }} > {(props) => React.cloneElement(popover, props)} diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx index 1243f26f43..98325df3a8 100644 --- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx +++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx @@ -1,5 +1,5 @@ /* eslint-disable import/no-unresolved */ -import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { PreviewBox } from './PreviewBox'; import { ToolTip } from '@/Editor/Inspector/Elements/Components/ToolTip'; import { useTranslation } from 'react-i18next'; @@ -31,6 +31,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r const [currentValue, setCurrentValue] = useState(''); const [errorStateActive, setErrorStateActive] = useState(false); const [cursorInsidePreview, setCursorInsidePreview] = useState(false); + const [showSuggestions, setShowSuggestions] = useState(true); const validationFn = restProps?.validationFn; const componentDefinition = useStore((state) => state.getComponentDefinition(componentId), shallow); const parentId = componentDefinition?.component?.parent; @@ -38,6 +39,30 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r const customVariables = customResolvables?.[parentId]?.[0] || {}; + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.intersectionRatio < 1) { + setShowPreview(false); + setShowSuggestions(false); + } else { + setShowSuggestions(true); + } + }, + { root: null, threshold: [1] } // Fires when any part of the element is out of view + ); + + if (wrapperRef.current) { + observer.observe(wrapperRef.current); + } + + return () => { + if (wrapperRef.current) { + observer.unobserve(wrapperRef.current); + } + }; + }, []); + const isPreviewFocused = useRef(false); const wrapperRef = useRef(null); @@ -136,6 +161,7 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r componentName={componentName} setShowPreview={setShowPreview} showPreview={showPreview} + showSuggestions={showSuggestions} {...restProps} />
@@ -168,6 +194,7 @@ const EditorInput = ({ previewRef, setShowPreview, onInputChange, + showSuggestions, }) => { const getSuggestions = useStore((state) => state.getSuggestions, shallow); function autoCompleteExtensionConfig(context) { @@ -223,7 +250,7 @@ const EditorInput = ({ defaultKeymap: true, positionInfo: () => { return { - class: 'cm-completionInfo-top cm-custom-completion-info', + class: 'cm-completionInfo-top cm-custom-completion-info cm-custom-singleline-completion-info', }; }, maxRenderedOptions: 10, @@ -339,15 +366,6 @@ const EditorInput = ({ data-cy={`${cyLabel}-input-field`} > {/* sticky element to position the preview box correctly on top without flowing out of container */} -
{usePortalEditor && ( - { - setFirstTimeFocus(false); - handleOnChange(val); - onInputChange && onInputChange(val); +
handleFocus()} - onBlur={() => handleOnBlur()} - className={customClassNames} - theme={theme} - indentWithTab={false} - readOnly={disabled} - /> + className="check-here" + ref={previewRef} + > + { + setFirstTimeFocus(false); + handleOnChange(val); + onInputChange && onInputChange(val); + }} + basicSetup={{ + lineNumbers: showLineNumbers, + syntaxHighlighting: true, + bracketMatching: true, + foldGutter: false, + highlightActiveLine: false, + autocompletion: showSuggestions, + completionKeymap: true, + searchKeymap: false, + }} + onMouseDown={() => handleFocus()} + onBlur={() => handleOnBlur()} + className={customClassNames} + theme={theme} + indentWithTab={false} + readOnly={disabled} + /> +
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss index c646fd30b1..73ba4ac36e 100644 --- a/frontend/src/AppBuilder/CodeEditor/styles.scss +++ b/frontend/src/AppBuilder/CodeEditor/styles.scss @@ -651,4 +651,9 @@ .cm-searchMatch.cm-searchMatch-selected { background-color: #F28F2D; +} + + +.cm-custom-singleline-completion-info { + display: none; } \ No newline at end of file diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index c999eaa525..84b1d6dc80 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -1544,7 +1544,7 @@ button { .tab-content { overflow-y: auto; // TAB HEADER HEIGHT + FOOTER HEIGHT + Extra padding = 120px - height: calc(100vh - 7.5rem); + height: calc(100vh - 10.4rem); // Hide scrollbar -ms-overflow-style: none; /* IE and Edge */ @@ -18562,4 +18562,9 @@ section.ai-message-prompt-input-wrapper { margin-left: 8px; flex-grow: 1; } +} + + +.cm-tooltip { + z-index: 9999 !important; } \ No newline at end of file From 5e826c2f6fe60575760d6fd02f91fd59a09f8f78 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Mon, 3 Mar 2025 12:33:17 +0530 Subject: [PATCH 009/136] Dropdown breaking fix --- .../RightSideBar/Inspector/Components/Select.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index d0b058b7b0..456b54cd02 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -297,7 +297,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
{options?.map((item, index) => { return ( - + {(provided, snapshot) => (
-
+
setHoveredOptionIndex(index)} @@ -406,7 +406,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
- {getResolvedValue(item.label)} + {getResolvedValue(item?.label)}
{index === hoveredOptionIndex && ( From 3ae51282819b441d3f15cdfdf1d5903d3153038b Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 4 Mar 2025 01:44:42 +0530 Subject: [PATCH 010/136] Swatches component and theme selection dropdown base --- .../AppBuilder/CodeBuilder/Elements/Color.jsx | 9 +- .../CodeBuilder/Elements/ColorSwatches.jsx | 82 +++++++++++ .../CodeEditor/DynamicFxTypeRenderer.jsx | 2 + frontend/src/AppBuilder/CodeEditor/utils.js | 1 + .../GlobalSettings/ThemeSelect.jsx | 131 ++++++++++++++++++ .../LeftSidebar/GlobalSettings/index.jsx | 2 + .../WidgetManager/widgets/textinput.js | 2 +- frontend/src/_styles/theme.scss | 63 +++++++++ .../ui/Checkbox/CheckboxUtils/CheckIcon.jsx | 4 +- .../apps/services/widget-config/textinput.js | 2 +- 10 files changed, 292 insertions(+), 6 deletions(-) create mode 100644 frontend/src/AppBuilder/CodeBuilder/Elements/ColorSwatches.jsx create mode 100644 frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx index e37b545ef2..691e299d45 100644 --- a/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx +++ b/frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx @@ -15,6 +15,9 @@ export const Color = ({ outerWidth = '142px', component, styleDefinition, + componentType = 'color', + CustomOptionList = () => {}, + SwatchesToggle = () => {}, }) => { value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value; const [showPicker, setShowPicker] = useState(false); @@ -68,9 +71,11 @@ export const Color = ({ const ColorPicker = () => { return ( <> - {showPicker && ( + {SwatchesToggle()} + {showPicker && componentType === 'swatches' && CustomOptionList()} + {showPicker && componentType === 'color' && (
-
setShowPicker(false)} /> + {/*
setShowPicker(false)} /> */}
setShowPicker(true)} diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/ColorSwatches.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/ColorSwatches.jsx new file mode 100644 index 0000000000..17bc178862 --- /dev/null +++ b/frontend/src/AppBuilder/CodeBuilder/Elements/ColorSwatches.jsx @@ -0,0 +1,82 @@ +import React, { useState } from 'react'; +import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup'; +import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem'; +import cx from 'classnames'; +import { Color } from './Color'; +import CheckIcon from '@/components/ui/Checkbox/CheckboxUtils/CheckIcon'; + +export const ColorSwatches = ({ + value, + onChange, + pickerStyle = {}, + cyLabel, + asBoxShadowPopover = true, + meta, + outerWidth = '142px', + component, + styleDefinition, +}) => { + const [componentType, setComponentType] = useState('color'); + + return ( + ( + <> + + + )} + CustomOptionList={() => ( +
+ + + + +
+ )} + /> + ); +}; + +const SwatchesToggle = ({ value, onChange }) => { + return ( +
+
+ { + onChange(value); + }} + defaultValue={value} + > + + Swatches + + + Color picker + + +
+
+ ); +}; + +const CustomOption = () => { + return ( +
+
+ +
+ Test +
+
+ ); +}; diff --git a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx index 20b196476d..2e2d17d4af 100644 --- a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx +++ b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx @@ -18,9 +18,11 @@ import { NumberInput } from '../CodeBuilder/Elements/NumberInput'; import { Datepicker } from '../CodeBuilder/Elements/Datepicker'; import TableRowHeightInput from '../CodeBuilder/Elements/TableRowHeightInput'; import { TimePicker } from '../CodeBuilder/Elements/TimePicker'; +import { ColorSwatches } from '../CodeBuilder/Elements/ColorSwatches'; const AllElements = { Color, + ColorSwatches, Json, Toggle, Select, diff --git a/frontend/src/AppBuilder/CodeEditor/utils.js b/frontend/src/AppBuilder/CodeEditor/utils.js index 03473a629f..73d11e6f62 100644 --- a/frontend/src/AppBuilder/CodeEditor/utils.js +++ b/frontend/src/AppBuilder/CodeEditor/utils.js @@ -337,6 +337,7 @@ export const FxParamTypeMapping = Object.freeze({ color: 'Color', json: 'Json', code: 'Code', + colorSwatches: 'ColorSwatches', toggle: 'Toggle', select: 'Select', alignButtons: 'AlignButtons', diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx new file mode 100644 index 0000000000..74817c21c6 --- /dev/null +++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx @@ -0,0 +1,131 @@ +import React from 'react'; +import Select from '@/_ui/Select'; +import CheckMark from '@/_ui/Icon/bulkIcons/CheckMark'; +import { components } from 'react-select'; +import { ButtonSolid } from '@/_ui/AppButton/AppButton'; + +const ThemeSelect = ({ darkMode }) => { + const customSelectStyles = { + control: (provided) => ({ + ...provided, + width: '158px', + height: '32px', + minHeight: '32px', + }), + input: (provided) => ({ + ...provided, + width: '150px', + height: 'auto', + padding: '0px', + }), + valueContainer: (provided, _state) => ({ + ...provided, + fontSize: '12px', + height: '100%', + }), + menu: (provided) => ({ + ...provided, + width: '220px', + right: '0', + left: 'auto', + }), + menuList: (provided) => ({ + ...provided, + width: '220px', + textAlign: 'left', + overflowY: 'auto', // Enable scrolling if needed + scrollbarWidth: 'none', // Hide scrollbar for Firefox + borderRadius: '8px', + }), + option: (provided, state) => ({ + ...provided, + backgroundColor: state.isFocused + ? '#f0f0f0' // Hover color + : state.isSelected + ? '#e6e6e6' // Selected background color + : 'white', + color: state.isSelected ? '#333' : 'black', // Adjust text color for selected state + padding: '0px', + paddingLeft: '20px', + + position: 'relative', + }), + }; + + const CustomOption = (props) => { + const { data, isSelected } = props; + + return ( + +
+ {isSelected && ( + + )} +
+ {data.label} +
+ + ); + }; + + const CustomMenuList = (props) => { + return ( + +
+ On your workspace +
+ {props.children} +
+ {}} + variant="tertiary" + leftIcon="addrectangle" + fill="var(--primary-brand)" + iconWidth="16" + className="tj-text-xsm theme-create-btn" + > + Create a new theme + +
+ + ); + }; + + return ( +
+
+

Theme

+
+ {}} + options={themesList} + value={selectedTheme?.id} + onChange={(themeId) => { + setTheme(themeId); + globalSettingsChanged({ theme: themesList.find((theme) => theme.value === themeId)?.theme }); + }} width={'100%'} + isDisabled={!licenseValid || !featureAccess?.customThemes} useMenuPortal={true} styles={customSelectStyles} useCustomStyles={true} diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index a8fac45c48..c074e4a426 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/frontend/src/AppBuilder/_hooks/useAppData.js @@ -27,6 +27,7 @@ import { distinctUntilChanged } from 'rxjs'; import { convertAllKeysToSnakeCase } from '../_stores/utils'; import { getPreviewQueryParams } from '@/_helpers/routes'; import { useLocation, useMatch, useParams } from 'react-router-dom'; +import useThemeAccess from './useThemeAccess'; /** * this is to normalize the query transformation options to match the expected schema. Takes care of corrupted data. @@ -101,12 +102,14 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v const selectedEnvironment = useStore((state) => state.selectedEnvironment); const setIsEditorFreezed = useStore((state) => state.setIsEditorFreezed); const appMode = useStore((state) => state.globalSettings.appMode); + const selectedTheme = useStore((state) => state.globalSettings.theme); const previousEnvironmentId = usePrevious(selectedEnvironment?.id); const isComponentLayoutReady = useStore((state) => state.isComponentLayoutReady, shallow); const pageSwitchInProgress = useStore((state) => state.pageSwitchInProgress); const setPageSwitchInProgress = useStore((state) => state.setPageSwitchInProgress); const selectedVersion = useStore((state) => state.selectedVersion); const setIsPublicAccess = useStore((state) => state.setIsPublicAccess); + const themeAccess = useThemeAccess(); const setConversation = useStore((state) => state.ai?.setConversation); const setDocsConversation = useStore((state) => state.ai?.setDocsConversation); @@ -428,6 +431,16 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v fetchAndSetWindowTitle({ page: pageTitles.EDITOR, appName: app.appName }); }, [app.appName]); + useEffect(() => { + if (!themeAccess) return; + const root = document.documentElement; + const brandColors = selectedTheme?.definition?.brand?.colors || {}; + Object.keys(brandColors).forEach((colorType) => { + const color = brandColors[colorType][darkMode ? 'dark' : 'light']; + root.style.setProperty(`--${colorType}-brand`, color); + }); + }, [darkMode, selectedTheme, themeAccess]); + useEffect(() => { const exposedTheme = appMode && appMode !== 'auto' ? appMode : localStorage.getItem('darkMode') === 'true' ? 'dark' : 'light'; diff --git a/frontend/src/AppBuilder/_hooks/useThemeAccess.js b/frontend/src/AppBuilder/_hooks/useThemeAccess.js new file mode 100644 index 0000000000..c38318194b --- /dev/null +++ b/frontend/src/AppBuilder/_hooks/useThemeAccess.js @@ -0,0 +1,10 @@ +import useStore from '@/AppBuilder/_stores/store'; +import { shallow } from 'zustand/shallow'; + +const useThemeAccess = () => { + const featureAccess = useStore((state) => state?.license?.featureAccess, shallow); + const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid; + return licenseValid && featureAccess?.customThemes; +}; + +export default useThemeAccess; diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss index 192915bec9..8927cf416e 100644 --- a/frontend/src/_styles/tabler.scss +++ b/frontend/src/_styles/tabler.scss @@ -6110,11 +6110,22 @@ fieldset:disabled .btn { vertical-align: text-bottom; border: 2px solid currentColor; border-right-color: transparent; - border-radius: 50%; + border-radius: 50%; -webkit-animation: .75s linear infinite spinner-border; animation: .75s linear infinite spinner-border } +.spinner-border-filepicker { + display: inline-block; + width: 1.5rem; + height: 1.5rem; + vertical-align: text-bottom; + border: 2px solid var(--primary-brand); + border-right-color: transparent; + border-radius: 50%; + -webkit-animation: .75s linear infinite spinner-border; + animation: .75s linear infinite spinner-border +} .spinner-light { color: var(--indigo9) !important; } diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index e9836529b8..ca32cdaf68 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -1655,7 +1655,7 @@ button { .pagination { .page-item.active { a.page-link { - background-color: $primary-light; + background-color: var(--primary-brand); } } } @@ -2475,32 +2475,32 @@ body { .CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover { - background: $primary; - border: 1px double $primary; + background: var(--primary-brand); + border: 1px double var(--primary-brand); } .CalendarDay__selected_span { - background: $primary; - border: $primary; + background: var(--primary-brand); + border: var(--primary-brand); } .CalendarDay__selected_span:active, .CalendarDay__selected_span:hover { - background: $primary; - border: 1px double $primary; + background: var(--primary-brand); + border: 1px double var(--primary-brand); color: #ffffff; } .CalendarDay__hovered_span:active, .CalendarDay__hovered_span:hover { - background: $primary; - border: 1px double $primary; + background: var(--primary-brand); + border: 1px double var(--primary-brand); color: #ffffff; } .CalendarDay__hovered_span { - background: #83b8e7; - border: 1px double #83b8e7; + background: var(--primary-brand); + border: 1px double var(--primary-brand); color: #ffffff; } @@ -3858,7 +3858,7 @@ input[type="text"] { } .react-datepicker__day--selected { - background-color: $primary-light; + background-color: var(--primary-brand); } } @@ -4111,6 +4111,8 @@ input[type="text"] { .rbc-event-label { display: none; } + background-color: var(--primary-brand) !important; + border: transparent } .rbc-off-range-bg { @@ -4402,6 +4404,14 @@ input[type="text"] { } } +.color-icon { + width: 18px; + height: 18px; + border-radius: 4px; + border: 1.5px solid #CCD1D5; + background-color: #0091FF; +} + .portal-header { display: flex; align-items: center; @@ -18625,4 +18635,48 @@ section.ai-message-prompt-input-wrapper { height:32px; color:#000; border: 1px solid var(--Border-brand-weak, #97AEFC); +} + + +.theme-default-pill { + font-size: 11px; + background-color: #CCD1D54D; + color: #6A727C; + width: 49px; + height: 18px; + border-radius: 20px +} + +.no-scroll { + overflow: hidden; +} + + +.textarea-widget:focus { + border-color: var(--primary-brand); +} + +.multiselct-widget-option{ + input:checked { + background-color: var(--primary-brand); + } +} + +.multiselect-box { + .options{ + input:checked { + background-color: var(--primary-brand); + } + } +} + +.timer-btn { + background-color: var(--primary-brand); + &:hover { + background-color: var(--primary-brand); + } +} + +.timer-btn-hover:hover { + background-color: var(--primary-brand); } \ No newline at end of file From 07af772bd600fd177f4da32c82ad22e23e0265f4 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 4 Mar 2025 02:42:34 +0530 Subject: [PATCH 012/136] Config changes --- frontend/ee | 2 +- .../WidgetManager/widgets/button.js | 14 +- .../WidgetManager/widgets/buttonGroup.js | 12 +- .../AppBuilder/WidgetManager/widgets/chart.js | 8 +- .../WidgetManager/widgets/checkbox.js | 12 +- .../widgets/circularProgressbar.js | 10 +- .../WidgetManager/widgets/colorPicker.js | 6 +- .../WidgetManager/widgets/container.js | 6 +- .../WidgetManager/widgets/datepickerV2.js | 16 +- .../WidgetManager/widgets/daterangepicker.js | 16 +- .../WidgetManager/widgets/datetimepickerV2.js | 16 +- .../WidgetManager/widgets/divider.js | 2 +- .../WidgetManager/widgets/dropdown.js | 2 +- .../WidgetManager/widgets/dropdownV2.js | 14 +- .../AppBuilder/WidgetManager/widgets/form.js | 4 +- .../AppBuilder/WidgetManager/widgets/icon.js | 2 +- .../AppBuilder/WidgetManager/widgets/image.js | 4 +- .../WidgetManager/widgets/kanban.js | 4 +- .../WidgetManager/widgets/kanbanBoard.js | 2 +- .../AppBuilder/WidgetManager/widgets/link.js | 2 +- .../WidgetManager/widgets/listview.js | 4 +- .../AppBuilder/WidgetManager/widgets/modal.js | 12 +- .../WidgetManager/widgets/multiselectV2.js | 16 +- .../WidgetManager/widgets/numberinput.js | 18 +- .../WidgetManager/widgets/passwordinput.js | 18 +- .../WidgetManager/widgets/radioButtonV2.js | 12 +- .../WidgetManager/widgets/radiobutton.js | 8 +- .../WidgetManager/widgets/rangeslider.js | 8 +- .../WidgetManager/widgets/spinner.js | 6 +- .../WidgetManager/widgets/starrating.js | 4 +- .../WidgetManager/widgets/statistics.js | 8 +- .../AppBuilder/WidgetManager/widgets/steps.js | 10 +- .../AppBuilder/WidgetManager/widgets/table.js | 8 +- .../AppBuilder/WidgetManager/widgets/tabs.js | 6 +- .../AppBuilder/WidgetManager/widgets/text.js | 6 +- .../WidgetManager/widgets/textinput.js | 16 +- .../WidgetManager/widgets/timeline.js | 2 +- .../WidgetManager/widgets/timepicker.js | 14 +- .../WidgetManager/widgets/toggleswitch.js | 6 +- .../WidgetManager/widgets/toggleswitchv2.js | 12 +- .../WidgetManager/widgets/treeSelect.js | 6 +- .../WidgetManager/widgets/verticalDivider.js | 2 +- frontend/src/AppBuilder/Widgets/Modal.jsx | 1 + frontend/src/Editor/Components/DropDown.jsx | 2 +- frontend/src/Editor/Components/FilePicker.jsx | 7 +- .../Components/MultiselectV2/CustomOption.jsx | 2 +- frontend/src/Editor/Components/TextArea.jsx | 2 +- frontend/src/Editor/Components/Timer.jsx | 12 +- .../services/widget-config/timepickerV2.js | 351 ------------------ .../{widget-config => widgets}/boundedBox.js | 0 .../{widget-config => widgets}/button.js | 19 +- .../{widget-config => widgets}/buttonGroup.js | 12 +- .../{widget-config => widgets}/calendar.js | 0 .../{widget-config => widgets}/chart.js | 8 +- .../{widget-config => widgets}/checkbox.js | 12 +- .../circularProgressbar.js | 10 +- .../{widget-config => widgets}/codeEditor.js | 0 .../{widget-config => widgets}/colorPicker.js | 6 +- .../{widget-config => widgets}/container.js | 8 +- .../customComponent.js | 0 .../{widget-config => widgets}/datepicker.js | 0 .../datepickerV2.js | 16 +- .../daterangepicker.js | 16 +- .../datetimepickerV2.js | 16 +- .../{widget-config => widgets}/divider.js | 2 +- .../{widget-config => widgets}/dropdown.js | 2 +- .../{widget-config => widgets}/dropdownV2.js | 14 +- .../{widget-config => widgets}/filepicker.js | 0 .../{widget-config => widgets}/form.js | 5 +- .../{widget-config => widgets}/html.js | 0 .../{widget-config => widgets}/icon.js | 2 +- .../{widget-config => widgets}/iframe.js | 0 .../{widget-config => widgets}/image.js | 4 +- .../{widget-config => widgets}/index.js | 47 +-- .../{widget-config => widgets}/kanban.js | 4 +- .../{widget-config => widgets}/kanbanBoard.js | 2 +- .../{widget-config => widgets}/link.js | 2 +- .../{widget-config => widgets}/listview.js | 4 +- .../{widget-config => widgets}/map.js | 0 .../{widget-config => widgets}/modal.js | 25 +- .../{widget-config => widgets}/multiselect.js | 0 .../multiselectV2.js | 16 +- .../{widget-config => widgets}/numberinput.js | 23 +- .../{widget-config => widgets}/pagination.js | 0 .../passwordinput.js | 18 +- .../{widget-config => widgets}/pdf.js | 0 .../{widget-config => widgets}/qrscanner.js | 0 .../radioButtonV2.js | 12 +- .../{widget-config => widgets}/radiobutton.js | 16 +- .../{widget-config => widgets}/rangeslider.js | 8 +- .../richtextarea.js | 0 .../{widget-config => widgets}/spinner.js | 6 +- .../{widget-config => widgets}/starrating.js | 4 +- .../{widget-config => widgets}/statistics.js | 8 +- .../{widget-config => widgets}/steps.js | 8 +- .../{widget-config => widgets}/svgImage.js | 0 .../{widget-config => widgets}/table.js | 15 +- .../{widget-config => widgets}/tabs.js | 6 +- .../{widget-config => widgets}/tags.js | 0 .../{widget-config => widgets}/text.js | 6 +- .../{widget-config => widgets}/textarea.js | 0 .../{widget-config => widgets}/textinput.js | 16 +- .../{widget-config => widgets}/timeline.js | 2 +- .../{widget-config => widgets}/timepicker.js | 14 +- .../{widget-config => widgets}/timer.js | 0 .../toggleswitch.js | 6 +- .../toggleswitchv2.js | 12 +- .../{widget-config => widgets}/treeSelect.js | 6 +- .../verticalDivider.js | 2 +- 109 files changed, 386 insertions(+), 787 deletions(-) delete mode 100644 server/src/modules/apps/services/widget-config/timepickerV2.js rename server/src/modules/apps/services/{widget-config => widgets}/boundedBox.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/button.js (94%) rename server/src/modules/apps/services/{widget-config => widgets}/buttonGroup.js (94%) rename server/src/modules/apps/services/{widget-config => widgets}/calendar.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/chart.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/checkbox.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/circularProgressbar.js (92%) rename server/src/modules/apps/services/{widget-config => widgets}/codeEditor.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/colorPicker.js (83%) rename server/src/modules/apps/services/{widget-config => widgets}/container.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/customComponent.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/datepicker.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/datepickerV2.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/daterangepicker.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/datetimepickerV2.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/divider.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/dropdown.js (99%) rename server/src/modules/apps/services/{widget-config => widgets}/dropdownV2.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/filepicker.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/form.js (98%) rename server/src/modules/apps/services/{widget-config => widgets}/html.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/icon.js (99%) rename server/src/modules/apps/services/{widget-config => widgets}/iframe.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/image.js (99%) rename server/src/modules/apps/services/{widget-config => widgets}/index.js (74%) rename server/src/modules/apps/services/{widget-config => widgets}/kanban.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/kanbanBoard.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/link.js (98%) rename server/src/modules/apps/services/{widget-config => widgets}/listview.js (98%) rename server/src/modules/apps/services/{widget-config => widgets}/map.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/modal.js (89%) rename server/src/modules/apps/services/{widget-config => widgets}/multiselect.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/multiselectV2.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/numberinput.js (94%) rename server/src/modules/apps/services/{widget-config => widgets}/pagination.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/passwordinput.js (95%) rename server/src/modules/apps/services/{widget-config => widgets}/pdf.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/qrscanner.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/radioButtonV2.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/radiobutton.js (91%) rename server/src/modules/apps/services/{widget-config => widgets}/rangeslider.js (94%) rename server/src/modules/apps/services/{widget-config => widgets}/richtextarea.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/spinner.js (90%) rename server/src/modules/apps/services/{widget-config => widgets}/starrating.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/statistics.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/steps.js (94%) rename server/src/modules/apps/services/{widget-config => widgets}/svgImage.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/table.js (89%) rename server/src/modules/apps/services/{widget-config => widgets}/tabs.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/tags.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/text.js (99%) rename server/src/modules/apps/services/{widget-config => widgets}/textarea.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/textinput.js (96%) rename server/src/modules/apps/services/{widget-config => widgets}/timeline.js (80%) rename server/src/modules/apps/services/{widget-config => widgets}/timepicker.js (97%) rename server/src/modules/apps/services/{widget-config => widgets}/timer.js (100%) rename server/src/modules/apps/services/{widget-config => widgets}/toggleswitch.js (93%) rename server/src/modules/apps/services/{widget-config => widgets}/toggleswitchv2.js (95%) rename server/src/modules/apps/services/{widget-config => widgets}/treeSelect.js (93%) rename server/src/modules/apps/services/{widget-config => widgets}/verticalDivider.js (97%) diff --git a/frontend/ee b/frontend/ee index 48b34618a9..8abe6a2691 160000 --- a/frontend/ee +++ b/frontend/ee @@ -1 +1 @@ -Subproject commit 48b34618a96d70a64fa6579a54da941e457899d0 +Subproject commit 8abe6a26910d0e1758f5fa3684c81187afdb2e33 diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/button.js b/frontend/src/AppBuilder/WidgetManager/widgets/button.js index 67da105c55..d5b6a58214 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/button.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/button.js @@ -61,7 +61,7 @@ export const buttonConfig = { accordian: 'button', }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, @@ -74,7 +74,7 @@ export const buttonConfig = { accordian: 'button', }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -83,7 +83,7 @@ export const buttonConfig = { accordian: 'button', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, @@ -92,7 +92,7 @@ export const buttonConfig = { accordian: 'button', }, loaderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Loader color', validation: { schema: { type: 'string' }, @@ -110,7 +110,7 @@ export const buttonConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Icon color', validation: { schema: { type: 'string' } }, accordian: 'button', @@ -219,10 +219,10 @@ export const buttonConfig = { events: [], styles: { textColor: { value: '#FFFFFF' }, - borderColor: { value: '#4368E3' }, + borderColor: { value: 'var(--primary-brand)' }, loaderColor: { value: '#FFFFFF' }, borderRadius: { value: '{{6}}' }, - backgroundColor: { value: '#4368E3' }, + backgroundColor: { value: 'var(--primary-brand)' }, iconColor: { value: '#FFFFFF' }, direction: { value: 'left' }, padding: { value: 'default' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js index c0fa889dd5..49957bc03e 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js @@ -68,7 +68,7 @@ export const buttonGroupConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -76,7 +76,7 @@ export const buttonGroupConfig = { }, }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -108,7 +108,7 @@ export const buttonGroupConfig = { }, }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Selected text colour', validation: { schema: { type: 'string' }, @@ -116,11 +116,11 @@ export const buttonGroupConfig = { }, }, selectedBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Selected background color', validation: { schema: { type: 'string' }, - defaultValue: '#007bff', + defaultValue: 'var(--primary-brand)', }, }, }, @@ -147,7 +147,7 @@ export const buttonGroupConfig = { borderRadius: { value: '{{4}}' }, disabledState: { value: '{{false}}' }, selectedTextColor: { value: '#FFFFFF' }, - selectedBackgroundColor: { value: '#4368E3' }, + selectedBackgroundColor: { value: 'var(--primary-brand)' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js index 72ab688056..81dbd2547a 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js @@ -39,13 +39,13 @@ export const chartConfig = { }, }, markerColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Marker color', validation: { schema: { type: 'string', }, - defaultValue: '#CDE1F8', + defaultValue: 'var(--primary-brand)', }, }, showAxes: { @@ -134,7 +134,7 @@ export const chartConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, }, @@ -192,7 +192,7 @@ export const chartConfig = { }, properties: { title: { value: 'This title can be changed' }, - markerColor: { value: '#CDE1F8' }, + markerColor: { value: 'var(--primary-brand)' }, showAxes: { value: '{{true}}' }, showGridLines: { value: '{{true}}' }, plotFromJson: { value: '{{false}}' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js index c9b6424020..ca509979cb 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js @@ -70,7 +70,7 @@ export const checkboxConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -78,7 +78,7 @@ export const checkboxConfig = { accordian: 'label', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, @@ -86,7 +86,7 @@ export const checkboxConfig = { accordian: 'switch', }, checkboxColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Checked color', validation: { schema: { type: 'string' }, @@ -94,7 +94,7 @@ export const checkboxConfig = { accordian: 'switch', }, uncheckedColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Unchecked color', validation: { schema: { type: 'string' }, @@ -102,7 +102,7 @@ export const checkboxConfig = { accordian: 'switch', }, handleColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Handle color', validation: { schema: { type: 'string' }, @@ -183,7 +183,7 @@ export const checkboxConfig = { styles: { disabledState: { value: '{{false}}' }, textColor: { value: '#1B1F24' }, - checkboxColor: { value: '#4368E3' }, + checkboxColor: { value: 'var(--primary-brand)' }, uncheckedColor: { value: '#E4E7EB' }, borderColor: { value: '#CCD1D5' }, handleColor: { value: '#FFFFFF' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js index a7ffd551af..2babc27a12 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js @@ -32,15 +32,15 @@ export const circularProgressbarConfig = { events: {}, styles: { color: { - type: 'color', - displayName: 'Color', + type: 'colorSwatches', + displayName: 'colorSwatches', validation: { schema: { type: 'string' }, - defaultValue: '#375FCF', + defaultValue: 'var(--primary-brand)', }, }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text Color', validation: { schema: { type: 'string' }, @@ -104,7 +104,7 @@ export const circularProgressbarConfig = { }, events: [], styles: { - color: { value: '' }, + color: { value: 'var(--primary-brand)' }, textColor: { value: '' }, textSize: { value: '{{16}}' }, strokeWidth: { value: '{{8}}' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js index b2fddd7e4c..6ecdede1a8 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js @@ -4,7 +4,7 @@ export const colorPickerConfig = { description: 'Choose colors from a palette', component: 'ColorPicker', properties: { - defaultColor: { type: 'color', displayName: 'Default color' }, + defaultColor: { type: 'colorSwatches', displayName: 'Default color' }, }, defaultSize: { width: 9, @@ -14,7 +14,9 @@ export const colorPickerConfig = { { displayName: 'Set Color', handle: 'setColor', - params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }], + params: [ + { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' }, + ], }, ], others: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/container.js b/frontend/src/AppBuilder/WidgetManager/widgets/container.js index 37a895f553..c4f5ac8d49 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/container.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/container.js @@ -71,7 +71,7 @@ export const containerConfig = { events: {}, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, @@ -80,7 +80,7 @@ export const containerConfig = { accordian: 'container', }, headerBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, @@ -89,7 +89,7 @@ export const containerConfig = { accordian: 'header', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js index 87de5d137b..ea56598d2e 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js @@ -169,8 +169,8 @@ export const datePickerV2Config = { ], styles: { labelColor: { - type: 'color', - displayName: 'Color', + type: 'colorSwatches', + displayName: 'colorSwatches', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', }, @@ -220,31 +220,31 @@ export const datePickerV2Config = { isFxNotRequired: true, }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' }, accordian: 'field', @@ -257,7 +257,7 @@ export const datePickerV2Config = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: '', showLabel: false, validation: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js index 1f38a8df6d..2fcd5bfb42 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js @@ -199,8 +199,8 @@ export const daterangepickerConfig = { ], styles: { labelColor: { - type: 'color', - displayName: 'Color', + type: 'colorSwatches', + displayName: 'colorSwatches', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', }, @@ -250,31 +250,31 @@ export const daterangepickerConfig = { isFxNotRequired: true, }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' }, accordian: 'field', @@ -287,7 +287,7 @@ export const daterangepickerConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: '', showLabel: false, validation: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js index 388eb9786c..658cc31c01 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js @@ -214,8 +214,8 @@ export const datetimePickerV2Config = { ], styles: { labelColor: { - type: 'color', - displayName: 'Color', + type: 'colorSwatches', + displayName: 'colorSwatches', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', }, @@ -265,31 +265,31 @@ export const datetimePickerV2Config = { isFxNotRequired: true, }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' }, accordian: 'field', @@ -302,7 +302,7 @@ export const datetimePickerV2Config = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: '', showLabel: false, validation: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js index 045f894816..3905c7583d 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js @@ -15,7 +15,7 @@ export const dividerConfig = { events: {}, styles: { dividerColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Divider color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js index b2c58acc7a..b8b090af24 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js @@ -128,7 +128,7 @@ export const dropdownConfig = { defaultValue: true, }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Selected text color', validation: { schema: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js index 247af3ccef..8e5355f789 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js @@ -101,7 +101,7 @@ export const dropdownV2Config = { }, styles: { labelColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -153,31 +153,31 @@ export const dropdownV2Config = { }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, accordian: 'field', @@ -190,7 +190,7 @@ export const dropdownV2Config = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: '', showLabel: false, validation: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/form.js b/frontend/src/AppBuilder/WidgetManager/widgets/form.js index 0e9f5f4ce3..6dab504819 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/form.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/form.js @@ -249,7 +249,7 @@ export const formConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -267,7 +267,7 @@ export const formConfig = { }, }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/icon.js b/frontend/src/AppBuilder/WidgetManager/widgets/icon.js index aea06c976c..761a2da425 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/icon.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/icon.js @@ -61,7 +61,7 @@ export const iconConfig = { }, styles: { iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js index c4bd7b6147..f3014e3e02 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js @@ -144,7 +144,7 @@ export const imageConfig = { accordian: 'Image', }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, @@ -153,7 +153,7 @@ export const imageConfig = { accordian: 'Container', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js index 0705581c51..cd39d0bd7b 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js @@ -77,7 +77,7 @@ export const kanbanConfig = { styles: { disabledState: { type: 'toggle', displayName: 'Disable' }, visibility: { type: 'toggle', displayName: 'Visibility' }, - accentColor: { type: 'color', displayName: 'Accent color' }, + accentColor: { type: 'colorSwatches', displayName: 'Accent color' }, }, actions: [ { @@ -157,7 +157,7 @@ export const kanbanConfig = { styles: { visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, - accentColor: { value: '#4d72fa' }, + accentColor: { value: 'var(--primary-brand)' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js b/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js index 4929bad9fe..4363c0d0b7 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js @@ -30,7 +30,7 @@ export const kanbanBoardConfig = { visibility: { type: 'toggle', displayName: 'Visibility' }, width: { type: 'number', displayName: 'Width' }, minWidth: { type: 'number', displayName: 'Min Width' }, - accentColor: { type: 'color', displayName: 'Accent color' }, + accentColor: { type: 'colorSwatches', displayName: 'Accent color' }, }, exposedVariables: { columns: {}, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js index bf419e16c0..d04d72dffa 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js @@ -46,7 +46,7 @@ export const linkConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js index a813bb5a0b..fbd3c76a59 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js @@ -120,7 +120,7 @@ export const listviewConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -128,7 +128,7 @@ export const listviewConfig = { }, }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js index 42740ad9c1..c0a0844607 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js @@ -81,7 +81,7 @@ export const modalConfig = { }, styles: { headerBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Header background color', validation: { schema: { type: 'string' }, @@ -89,7 +89,7 @@ export const modalConfig = { }, }, headerTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Header title color', validation: { schema: { type: 'string' }, @@ -97,7 +97,7 @@ export const modalConfig = { }, }, bodyBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Body background color', validation: { schema: { type: 'string' }, @@ -121,7 +121,7 @@ export const modalConfig = { }, }, triggerButtonBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Trigger button background color', validation: { schema: { type: 'string' }, @@ -129,7 +129,7 @@ export const modalConfig = { }, }, triggerButtonTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Trigger button text color', validation: { schema: { type: 'string' }, @@ -175,7 +175,7 @@ export const modalConfig = { bodyBackgroundColor: { value: '#ffffffff' }, disabledState: { value: '{{false}}' }, visibility: { value: '{{true}}' }, - triggerButtonBackgroundColor: { value: '#4D72FA' }, + triggerButtonBackgroundColor: { value: 'var(--primary-brand)' }, triggerButtonTextColor: { value: '#ffffffff' }, }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 6aefd71067..2bc4cae17b 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -165,7 +165,7 @@ export const multiselectV2Config = { styles: { labelColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -218,32 +218,32 @@ export const multiselectV2Config = { }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error Text', validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, accordian: 'field', @@ -256,7 +256,7 @@ export const multiselectV2Config = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Icon color', validation: { schema: { type: 'string' }, @@ -365,7 +365,7 @@ export const multiselectV2Config = { icon: { value: 'IconHome2' }, iconVisibility: { value: false }, iconColor: { value: '#6A727C' }, - accentColor: { value: '#4368E3' }, + accentColor: { value: 'var(--primary-brand)' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js index fe3947e47b..cba9c04cd1 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js @@ -72,7 +72,7 @@ export const numberinputConfig = { }, styles: { color: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -124,31 +124,31 @@ export const numberinputConfig = { }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', - validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' }, accordian: 'field', }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, accordian: 'field', @@ -161,7 +161,7 @@ export const numberinputConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Icon color', validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, accordian: 'field', @@ -279,7 +279,7 @@ export const numberinputConfig = { borderRadius: { value: '{{6}}' }, backgroundColor: { value: '#fff' }, borderColor: { value: '#CCD1D5' }, - accentColor: { value: '#4368E3' }, + accentColor: { value: 'var(--primary-brand)' }, errTextColor: { value: '#D72D39' }, textColor: { value: '#1B1F24' }, color: { value: '#1B1F24' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js index 92a4a4711c..fad0d00735 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js @@ -84,7 +84,7 @@ export const passinputConfig = { }, styles: { color: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -136,31 +136,31 @@ export const passinputConfig = { }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', - validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' }, accordian: 'field', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, accordian: 'field', @@ -173,7 +173,7 @@ export const passinputConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Icon color', validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, accordian: 'field', @@ -278,7 +278,7 @@ export const passinputConfig = { borderRadius: { value: '{{6}}' }, backgroundColor: { value: '#fff' }, borderColor: { value: '#CCD1D5' }, - accentColor: { value: '#4368E3' }, + accentColor: { value: 'var(--primary-brand)' }, errTextColor: { value: '#D72D39' }, textColor: { value: '#1B1F24' }, iconColor: { value: '#CFD3D859' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js index 2ff6ca6c7c..62a084d75a 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js @@ -89,7 +89,7 @@ export const radiobuttonV2Config = { }, styles: { labelColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -139,7 +139,7 @@ export const radiobuttonV2Config = { isFxNotRequired: true, }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, @@ -147,7 +147,7 @@ export const radiobuttonV2Config = { accordian: 'switch', }, switchOnBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Checked background', validation: { schema: { type: 'string' }, @@ -158,7 +158,7 @@ export const radiobuttonV2Config = { tooltipPlacement: 'bottom', }, switchOffBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Unchecked background', validation: { schema: { type: 'string' }, @@ -169,7 +169,7 @@ export const radiobuttonV2Config = { tooltipPlacement: 'bottom', }, handleColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Handle color', validation: { schema: { type: 'string' }, @@ -177,7 +177,7 @@ export const radiobuttonV2Config = { accordian: 'switch', }, optionsTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js index d6ec057526..66d055ca5e 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js @@ -53,7 +53,7 @@ export const radiobuttonConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -61,11 +61,11 @@ export const radiobuttonConfig = { }, }, activeColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Active color', validation: { schema: { type: 'string' }, - defaultValue: '#000000', + defaultValue: 'var(--primary-brand)', }, }, visibility: { @@ -113,7 +113,7 @@ export const radiobuttonConfig = { events: [], styles: { textColor: { value: '' }, - activeColor: { value: '' }, + activeColor: { value: 'var(--primary-brand)' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js index 151dca3384..320e7a6741 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js @@ -53,7 +53,7 @@ export const rangeSliderConfig = { }, styles: { lineColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Line color', validation: { schema: { type: 'string' }, @@ -61,7 +61,7 @@ export const rangeSliderConfig = { }, }, handleColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Handle color', validation: { schema: { type: 'string' }, @@ -69,7 +69,7 @@ export const rangeSliderConfig = { }, }, trackColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Track color', validation: { schema: { type: 'string' }, @@ -109,7 +109,7 @@ export const rangeSliderConfig = { styles: { lineColor: { value: '' }, handleColor: { value: '' }, - trackColor: { value: '' }, + trackColor: { value: 'var(--primary-brand)' }, visibility: { value: '{{true}}' }, }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js index a6bf80b9be..c38bfdc468 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js @@ -23,11 +23,11 @@ export const spinnerConfig = { }, }, colour: { - type: 'color', + type: 'colorSwatches', displayName: 'Colour', validation: { schema: { type: 'string' }, - defaultValue: '#0565ff', + defaultValue: 'var(--primary-brand)', }, }, size: { @@ -54,7 +54,7 @@ export const spinnerConfig = { styles: { visibility: { value: '{{true}}' }, size: { value: 'sm' }, - colour: { value: '#0565ff' }, + colour: { value: 'var(--primary-brand)' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js index 01240d0369..8cb239133d 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js @@ -58,7 +58,7 @@ export const starratingConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Star color', validation: { schema: { type: 'string' }, @@ -66,7 +66,7 @@ export const starratingConfig = { }, }, labelColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Label color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js index d364d78524..ecf1f70aed 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js @@ -55,22 +55,22 @@ export const statisticsConfig = { events: {}, styles: { primaryLabelColour: { - type: 'color', + type: 'colorSwatches', displayName: 'Primary label colour', validation: { schema: { type: 'string' }, defaultValue: '#8092AB' }, }, primaryTextColour: { - type: 'color', + type: 'colorSwatches', displayName: 'Primary text colour', validation: { schema: { type: 'string' }, defaultValue: '#000000' }, }, secondaryLabelColour: { - type: 'color', + type: 'colorSwatches', displayName: 'Secondary label colour', validation: { schema: { type: 'string' }, defaultValue: '#8092AB' }, }, secondaryTextColour: { - type: 'color', + type: 'colorSwatches', displayName: 'Secondary text colour', validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js index a39c634919..0a6a2cd575 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js @@ -45,15 +45,15 @@ export const stepsConfig = { }, styles: { color: { - type: 'color', - displayName: 'Color', + type: 'colorSwatches', + displayName: 'colorSwatches', validation: { schema: { type: 'string' }, - defaultValue: '#000000', + defaultValue: 'var(--primary-brand)', }, }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -101,7 +101,7 @@ export const stepsConfig = { styles: { visibility: { value: '{{true}}' }, theme: { value: 'titles' }, - color: { value: '' }, + color: { value: 'var(--primary-brand)' }, textColor: { value: '' }, }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js index 8a89701494..9f0c4fd723 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js @@ -157,7 +157,7 @@ export const tableConfig = { defaultValue: 'clientSide', }, actionButtonBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -165,7 +165,7 @@ export const tableConfig = { }, }, actionButtonTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, @@ -293,7 +293,7 @@ export const tableConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text Color', validation: { schema: { type: 'string' }, @@ -404,7 +404,7 @@ export const tableConfig = { accordian: 'Container', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js index a397979a3e..3f55c7ea90 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js @@ -109,11 +109,11 @@ export const tabsConfig = { events: { onTabSwitch: { displayName: 'On tab switch' } }, styles: { highlightColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Highlight color', validation: { schema: { type: 'string' }, - defaultValue: '#375FCF', + defaultValue: 'var(--primary-brand)', }, }, visibility: { @@ -174,7 +174,7 @@ export const tabsConfig = { }, events: [], styles: { - highlightColor: { value: '#375FCF' }, + highlightColor: { value: 'var(--primary-brand)' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, tabWidth: { value: 'auto' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/text.js b/frontend/src/AppBuilder/WidgetManager/widgets/text.js index ada530d127..8ed1edffd1 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/text.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/text.js @@ -105,7 +105,7 @@ export const textConfig = { accordian: 'Text', }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, @@ -185,7 +185,7 @@ export const textConfig = { }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, @@ -195,7 +195,7 @@ export const textConfig = { colorPickerPosition: 'top', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js index 83efe72b87..e259ecddd0 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js @@ -80,7 +80,7 @@ export const textinputConfig = { }, styles: { color: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -132,13 +132,13 @@ export const textinputConfig = { }, backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', @@ -146,17 +146,17 @@ export const textinputConfig = { accentColor: { type: 'colorSwatches', displayName: 'Accent', - validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' }, accordian: 'field', }, textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, accordian: 'field', @@ -169,7 +169,7 @@ export const textinputConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Icon color', validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, accordian: 'field', @@ -283,7 +283,7 @@ export const textinputConfig = { styles: { textColor: { value: '#1B1F24' }, borderColor: { value: '#CCD1D5' }, - accentColor: { value: '#4368E3' }, + accentColor: { value: 'var(--primary-brand)' }, errTextColor: { value: '#D72D39' }, borderRadius: { value: '{{6}}' }, backgroundColor: { value: '#fff' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js index 6ece608f5c..63776f0b99 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js @@ -48,7 +48,7 @@ export const timelineConfig = { properties: { data: { value: - "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}", + "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}", }, hideDate: { value: '{{false}}' }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js index 79a3d05d4e..a5a1fb6b06 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js @@ -164,7 +164,7 @@ export const timePickerConfig = { ], styles: { labelColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Color', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'label', @@ -215,31 +215,31 @@ export const timePickerConfig = { isFxNotRequired: true, }, fieldBackgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background', validation: { schema: { type: 'string' }, defaultValue: '#fff' }, accordian: 'field', }, fieldBorderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border', validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, accordian: 'field', }, accentColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Accent', validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, accordian: 'field', }, selectedTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text', validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, accordian: 'field', }, errTextColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Error text', validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' }, accordian: 'field', @@ -252,7 +252,7 @@ export const timePickerConfig = { visibility: false, }, iconColor: { - type: 'color', + type: 'colorSwatches', displayName: '', showLabel: false, validation: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js index ec3a97450d..bd646a47f3 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js @@ -32,14 +32,14 @@ export const toggleswitchConfig = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text color', validation: { schema: { type: 'string' }, }, }, toggleSwitchColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Toggle switch color', validation: { schema: { type: 'string' }, @@ -75,7 +75,7 @@ export const toggleswitchConfig = { events: [], styles: { textColor: { value: '' }, - toggleSwitchColor: { value: '' }, + toggleSwitchColor: { value: 'var(--primary-brand)' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js index 6753fbb50d..4bc21f3a86 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js @@ -71,7 +71,7 @@ export const toggleSwitchV2Config = { }, styles: { textColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Text Color', validation: { schema: { type: 'string' }, @@ -79,7 +79,7 @@ export const toggleSwitchV2Config = { accordian: 'label', }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, @@ -87,7 +87,7 @@ export const toggleSwitchV2Config = { accordian: 'switch', }, toggleSwitchColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Checked color', validation: { schema: { type: 'string' }, @@ -95,7 +95,7 @@ export const toggleSwitchV2Config = { accordian: 'switch', }, uncheckedColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Unchecked color', validation: { schema: { type: 'string' }, @@ -103,7 +103,7 @@ export const toggleSwitchV2Config = { accordian: 'switch', }, handleColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Handle color', validation: { schema: { type: 'string' }, @@ -181,7 +181,7 @@ export const toggleSwitchV2Config = { events: [], styles: { textColor: { value: '#1B1F24' }, - toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility + toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility uncheckedColor: { value: '#E4E7EB' }, borderColor: { value: '#E4E7EB' }, handleColor: { value: '#FFFFFF' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js index 1d7485b47a..898f0b3ed0 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js @@ -23,8 +23,8 @@ export const treeSelectConfig = { onUnCheck: { displayName: 'On uncheck' }, }, styles: { - textColor: { type: 'color', displayName: 'Text Color' }, - checkboxColor: { type: 'color', displayName: 'Checkbox color' }, + textColor: { type: 'colorSwatches', displayName: 'Text Color' }, + checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' }, visibility: { type: 'toggle', displayName: 'Visibility' }, disabledState: { type: 'toggle', displayName: 'Disable' }, }, @@ -71,7 +71,7 @@ export const treeSelectConfig = { events: [], styles: { textColor: { value: '' }, - checkboxColor: { value: '' }, + checkboxColor: { value: 'var(--primary-brand)' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js index 443526c3b8..e43b81adf7 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js @@ -15,7 +15,7 @@ export const verticalDividerConfig = { events: {}, styles: { dividerColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Divider color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/Widgets/Modal.jsx b/frontend/src/AppBuilder/Widgets/Modal.jsx index 5543ce4ee0..e63118a4e6 100644 --- a/frontend/src/AppBuilder/Widgets/Modal.jsx +++ b/frontend/src/AppBuilder/Widgets/Modal.jsx @@ -178,6 +178,7 @@ export const Modal = function Modal({ display: visibility ? '' : 'none', '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(), boxShadow, + borderColor: 'var(--primary-brand)', }, }; diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx index 891391f0f4..b98be4e57d 100644 --- a/frontend/src/Editor/Components/DropDown.jsx +++ b/frontend/src/Editor/Components/DropDown.jsx @@ -236,7 +236,7 @@ export const DropDown = function DropDown({ minWidth: 'max-content', } : { - backgroundColor: state.value === currentValue ? '#7A95FB' : 'white', + backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white', color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black', ':hover': { backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9', diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx index b2e2b1ff86..29b127ec7c 100644 --- a/frontend/src/Editor/Components/FilePicker.jsx +++ b/frontend/src/Editor/Components/FilePicker.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useRef } from 'react'; +// eslint-disable-next-line import/no-unresolved import { useDropzone } from 'react-dropzone'; import { toast } from 'react-hot-toast'; // eslint-disable-next-line import/no-unresolved @@ -311,7 +312,11 @@ export const FilePicker = ({
- + {showSelectedFiles && !accepted ? ( diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx index ab87fb22b7..56b38b2edb 100644 --- a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx @@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils'; const CustomOption = (props) => { return (