shesha-io · James-Baloyi · Apr 3, 2025 · Apr 2, 2025 · Apr 2, 2025 · Apr 2, 2025
diff --git 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<ICustomFileProps> = (props) => {

diff --git 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
@@ -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/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<IStoredFilesRendererBaseProps> = ({
@@ -87,6 +88,7 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
   validFileTypes = [],
   maxFileLength = 0,
   isDragger = false,
+  primaryColor,
   disabled,
   isStub = false,
   allowedFileTypes = [],
@@ -158,8 +160,10 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
 
   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
@@ -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,16 +41,17 @@ 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;
       --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') : ''};
@@ -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
@@ -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
@@ -45,6 +45,7 @@ export interface IAttachmentsEditorProps extends IConfigurableFormComponent, IIn
   borderRadius?: number;
   hideFileName?: boolean;
   container?: IStyleType;
+  primaryColor?: string;
 }
 
 const AttachmentsEditor: IToolboxComponent<IAttachmentsEditorProps> = {

diff --git 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()

diff --git 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<IButtonItem, 'style' | 'itemSubType'> {
   style?: CSSProperties;
   form: FormInstance<any>;
@@ -22,6 +23,7 @@ export const ConfigurableButton: FC<IConfigurableButtonProps> = 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<IConfigurableButtonProps> = props => {
       danger={props.danger}
       icon={props.icon ? <ShaIcon iconName={props.icon as IconType} /> : 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
@@ -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,
+    };
+});
diff --git 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
@@ -8,7 +8,6 @@ export const useStyles = createStyles(({ css, cx, }) => {
         `);
 
     const content = cx(css`
-
             .ant-tabs-tab, .ant-tabs-nav-operations {
                 height: 24px;
             }
-Original file line number
+Diff line change
@@ Expand Up @@
         .${prefixCls}-layout-sider-children {
           width: ${shaSiderExpandedWidth}  !important;
+    z
           .logo {
             margin-top: ${layoutTriggerHeight}  !important; // It should use a config
           }
@@ Expand Down @@