From d7ca5c553353cd86ad82e43aabb2f2faea74f1fa Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 15:03:49 +0200 Subject: [PATCH 1/3] hidding panels in filename --- shesha-reactjs/src/components/customFile/index.tsx | 1 + .../components/storedFilesRendererBase/index.tsx | 6 +++++- .../storedFilesRendererBase/styles/styles.ts | 6 ++++-- .../_settings/utils/border/utils.tsx | 6 +++--- .../attachmentsEditor/attachmentsEditor.tsx | 1 + .../attachmentsEditor/settings.ts | 14 +++++++++++++- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/shesha-reactjs/src/components/customFile/index.tsx b/shesha-reactjs/src/components/customFile/index.tsx index 36e77db804..85351a7a77 100644 --- a/shesha-reactjs/src/components/customFile/index.tsx +++ b/shesha-reactjs/src/components/customFile/index.tsx @@ -27,6 +27,7 @@ export interface ICustomFileProps extends IInputStyles { borderRadius?: number; hideFileName?: boolean; container?: IStyleType; + primaryColor?: string; } export const CustomFile: FC = (props) => { diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx index 26b4bccea8..b95103347d 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx +++ b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx @@ -67,6 +67,7 @@ export interface IStoredFilesRendererBaseProps extends IInputStyles { hideFileName?: boolean; gap?: number; container?: IStyleType; + primaryColor?: string; } export const StoredFilesRendererBase: FC = ({ @@ -87,6 +88,7 @@ export const StoredFilesRendererBase: FC = ({ validFileTypes = [], maxFileLength = 0, isDragger = false, + primaryColor, disabled, isStub = false, allowedFileTypes = [], @@ -158,8 +160,10 @@ export const StoredFilesRendererBase: FC = ({ const { styles } = useStyles({ containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle }, - style: finalStyle, model: { gap, layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger } + style: finalStyle, model: { gap, layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger }, + primaryColor }); + const listTypeAndLayout = listType === 'text' || !listType || isDragger ? 'text' : 'picture-card'; const openFilesZipNotification = () => diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts index aa00a5ad35..977b3fe195 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts +++ b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts @@ -1,6 +1,6 @@ import { createStyles } from '@/styles'; -export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, model, containerStyles }) => { +export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, model, containerStyles, primaryColor }) => { const { background, backgroundImage, borderRadius, borderWidth, borderTopWidth, width, minWidth, maxWidth, borderBottomWidth, borderLeftWidth, borderLeftColor, borderLeftStyle, borderRightColor, borderRightStyle, borderColor, borderTopStyle, borderTopColor, borderTop, boxShadow, borderBottom, borderBottomColor, borderBottomStyle, borderRight, borderRightWidth, backgroundColor, backgroundPosition, @@ -41,9 +41,10 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .ant-upload:not(.ant-upload-disabled) { .icon { - color: ${token.colorPrimary} !important; + color: ${primaryColor ?? token.colorPrimary} !important; }; } + .ant-upload-list-item { --ant-line-width: 0px !important; @@ -136,6 +137,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m } .ant-btn { + color: ${primaryColor || token.colorPrimary} !important; padding: 0; *{ font-size: ${fontSize ?? '14px'} !important; diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx index 29cb9a598a..7954636211 100644 --- a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx +++ b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx @@ -18,7 +18,7 @@ import { readThemeColor } from "@/components/colorPicker"; export const getBorderStyle = (input: IBorderValue, jsStyle: React.CSSProperties, theme?: IConfigurableTheme): React.CSSProperties => { if (!input) return {}; - + const style: React.CSSProperties = {}; const border = input.border || {}; const { all = {}, top = {}, right = {}, bottom = {}, left = {} } = border; @@ -155,9 +155,9 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true) => { { id: nanoid(), type: 'tooltip', - label: 'Icon', + label: '', hideLabel: true, - propertyName: 'borderIcon', + propertyName: '', icon: 'BorderOutlined', width: 20, tooltip: `Styles will apply to all border`, diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx index 1cbb380977..f8544e996b 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx @@ -45,6 +45,7 @@ export interface IAttachmentsEditorProps extends IConfigurableFormComponent, IIn borderRadius?: number; hideFileName?: boolean; container?: IStyleType; + primaryColor?: string; } const AttachmentsEditor: IToolboxComponent = { diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts index 31fcbab00a..85298de1bb 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts @@ -19,7 +19,7 @@ export const getSettings = () => { tabs: [ { key: '1', - title: 'Display', + title: 'Common', id: '11114bf6-f76d-4139-a850-c99bf06c8b69', components: [ ...new DesignerToolbarSettings() @@ -355,6 +355,13 @@ export const getSettings = () => { }, ], }) + .addSettingsInput({ + id: 'primary-color', + propertyName: 'primaryColor', + label: 'Primary Color', + inputType: 'colorPicker', + jsSetting: true, + }) .toJson() ] } @@ -367,6 +374,7 @@ export const getSettings = () => { labelAlign: 'right', ghost: true, collapsible: 'header', + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, content: { id: 'dimensionsStylePnl', components: [...new DesignerToolbarSettings() @@ -453,6 +461,7 @@ export const getSettings = () => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, content: { id: 'borderStylePnl', components: [...new DesignerToolbarSettings() @@ -495,6 +504,7 @@ export const getSettings = () => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, content: { id: 'backgroundStylePnl', components: [ @@ -660,6 +670,7 @@ export const getSettings = () => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, content: { id: 'shadowStylePnl', components: [...new DesignerToolbarSettings() @@ -726,6 +737,7 @@ export const getSettings = () => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, content: { id: 'stylePnl-M500-911MFR', components: [...new DesignerToolbarSettings() From 872ab0ea9602b3f08190c6e19c5cc0041df34ca0 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 16:41:52 +0200 Subject: [PATCH 2/3] button overflow --- .../mainLayout/styles/indexStyles.ts | 1 - .../components/mainLayout/styles/styles.ts | 2 +- .../button/configurableButton/index.tsx | 4 +++- .../button/configurableButton/style.ts | 21 +++++++++++++++++++ .../src/designer-components/button/util.ts | 3 +-- .../propertiesTabs/style.ts | 14 ++++++++++++- 6 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 shesha-reactjs/src/designer-components/button/configurableButton/style.ts diff --git a/shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts b/shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts index cbe7f2c1c0..bcfd514902 100644 --- a/shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts +++ b/shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts @@ -147,7 +147,6 @@ export const GlobalSheshaStyles = createGlobalStyle` .sha-toolbar-btn-configurable { display: flex; align-items: center; - max-width: 100%; span { max-width: 100%; overflow: hidden; diff --git a/shesha-reactjs/src/components/mainLayout/styles/styles.ts b/shesha-reactjs/src/components/mainLayout/styles/styles.ts index 60c58d5f57..71b13a5232 100644 --- a/shesha-reactjs/src/components/mainLayout/styles/styles.ts +++ b/shesha-reactjs/src/components/mainLayout/styles/styles.ts @@ -156,7 +156,7 @@ export const useStyles = createStyles(({ css, cx, responsive, token, prefixCls } .${prefixCls}-layout-sider-children { width: ${shaSiderExpandedWidth} !important; - +z .logo { margin-top: ${layoutTriggerHeight} !important; // It should use a config } diff --git a/shesha-reactjs/src/designer-components/button/configurableButton/index.tsx b/shesha-reactjs/src/designer-components/button/configurableButton/index.tsx index 49e558e465..53595af2d4 100644 --- a/shesha-reactjs/src/designer-components/button/configurableButton/index.tsx +++ b/shesha-reactjs/src/designer-components/button/configurableButton/index.tsx @@ -8,6 +8,7 @@ import { useConfigurableActionDispatcher } from '@/providers/configurableActions import { useAvailableConstantsData } from '@/providers/form/utils'; import { isNavigationActionConfiguration, useShaRouting, useTheme } from '@/index'; import { useAsyncMemo } from '@/hooks/useAsyncMemo'; +import { useStyles } from './style'; export interface IConfigurableButtonProps extends Omit { style?: CSSProperties; form: FormInstance; @@ -22,6 +23,7 @@ export const ConfigurableButton: FC = props => { const dynamicContext = useActionDynamicContext(actionConfiguration); const { theme } = useTheme(); + const { styles } = useStyles(); const [loading, setLoading] = useState(false); const [isModal, setModal] = useState(false); @@ -73,7 +75,7 @@ export const ConfigurableButton: FC = props => { danger={props.danger} icon={props.icon ? : undefined} iconPosition={props.iconPosition} - className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable')} + className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable', styles.configurableButton)} size={props?.size} disabled={buttonDisabled} style={{ ...props?.style, ...(isSameUrl && { background: theme.application.primaryColor, color: theme.text.default }) }} diff --git a/shesha-reactjs/src/designer-components/button/configurableButton/style.ts b/shesha-reactjs/src/designer-components/button/configurableButton/style.ts new file mode 100644 index 0000000000..c1c1d35bcd --- /dev/null +++ b/shesha-reactjs/src/designer-components/button/configurableButton/style.ts @@ -0,0 +1,21 @@ +import { createStyles } from "@/styles"; + +export const useStyles = createStyles(({ css, cx }) => { + const configurableButton = cx("flex-container", css` + .sha-toolbar-btn-configurable { + display: flex; + align-items: center; + max-width: 100%; + span { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + } + `); + return { + configurableButton, + }; +}); \ No newline at end of file diff --git a/shesha-reactjs/src/designer-components/button/util.ts b/shesha-reactjs/src/designer-components/button/util.ts index 476e55a3f0..91d4b3cb7c 100644 --- a/shesha-reactjs/src/designer-components/button/util.ts +++ b/shesha-reactjs/src/designer-components/button/util.ts @@ -44,8 +44,7 @@ export const defaultStyles = (prev): IStyleType => { blurRadius: 0, spreadRadius: 0, }, - // stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}', - dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' } + dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: '100%' } }; }; diff --git a/shesha-reactjs/src/designer-components/propertiesTabs/style.ts b/shesha-reactjs/src/designer-components/propertiesTabs/style.ts index bc6e0cbd94..ca9acbeb43 100644 --- a/shesha-reactjs/src/designer-components/propertiesTabs/style.ts +++ b/shesha-reactjs/src/designer-components/propertiesTabs/style.ts @@ -8,7 +8,6 @@ export const useStyles = createStyles(({ css, cx, }) => { `); const content = cx(css` - .ant-tabs-tab, .ant-tabs-nav-operations { height: 24px; } @@ -16,6 +15,19 @@ export const useStyles = createStyles(({ css, cx, }) => { .ant-tabs-tab { --ant-tabs-card-padding-sm: 0 8px; } + + .sha-toolbar-btn-configurable, .ant-btn { + display: flex; + align-items: center; + max-width: 100%; + span { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + } `); return { From 3eba27b31247912aa63116f74bea88057e6ed70e Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 17:18:49 +0200 Subject: [PATCH 3/3] ?? vs || --- .../components/storedFilesRendererBase/styles/styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts index 977b3fe195..4455194665 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts +++ b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts @@ -41,7 +41,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .ant-upload:not(.ant-upload-disabled) { .icon { - color: ${primaryColor ?? token.colorPrimary} !important; + color: ${primaryColor || token.colorPrimary} !important; }; } @@ -49,9 +49,9 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .ant-upload-list-item { --ant-line-width: 0px !important; --ant-padding-xs: 0px !important; - --font-size: ${fontSize ?? '14px'} !important; - --ant-font-size: ${fontSize ?? '14px'} !important; - border-radius: ${borderRadius ?? '8px'} !important; + --font-size: ${fontSize || '14px'} !important; + --ant-font-size: ${fontSize || '14px'} !important; + border-radius: ${borderRadius || '8px'} !important; display: flex; width: ${layout ? (width ?? '54px') : ''}; height: ${layout ? (height ?? '54px') : ''};