Skip to content

Theme canvas settings #1247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Oct 25, 2024
Merged

Theme canvas settings #1247

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
1616232
theme canvas settings
raheeliftikhar5 Oct 8, 2024
420c56f
set default values for canvas settings
raheeliftikhar5 Oct 8, 2024
dba9097
theme canvas settings
raheeliftikhar5 Oct 10, 2024
e76ef90
canvas setting in theme and app
raheeliftikhar5 Oct 10, 2024
81a55be
small fix
raheeliftikhar5 Oct 10, 2024
21ced62
add rowCount in readonly view
raheeliftikhar5 Oct 11, 2024
9c11938
replaced color picker to allow gradient selection
raheeliftikhar5 Oct 15, 2024
c459d56
Timeline: added gradient
raheeliftikhar5 Oct 16, 2024
1c33fd0
added canvas bg color option in app Settings
raheeliftikhar5 Oct 16, 2024
4f19e7b
added background style utility
raheeliftikhar5 Oct 16, 2024
419c11c
ShapeComp: added gradient
raheeliftikhar5 Oct 16, 2024
aba86a6
Containers: added gradient
raheeliftikhar5 Oct 16, 2024
91d8e3a
List/GridView: added gradient
raheeliftikhar5 Oct 16, 2024
f462970
Modal/Drawer: added gradients
raheeliftikhar5 Oct 16, 2024
92292c3
added gradient
raheeliftikhar5 Oct 16, 2024
0d4b64d
Table: added gradient
raheeliftikhar5 Oct 17, 2024
f560a9a
Table: added gradients
raheeliftikhar5 Oct 18, 2024
557407f
fixed canvas settings
raheeliftikhar5 Oct 18, 2024
2f0a51a
set app default canvas settings
raheeliftikhar5 Oct 18, 2024
6c16141
show theme colors in preset colors for color picker
raheeliftikhar5 Oct 21, 2024
b09e024
separate app settings, canvas settings and js settings
raheeliftikhar5 Oct 21, 2024
89aa5d0
move theme selection in color settings
raheeliftikhar5 Oct 22, 2024
bd028f3
fix opacity not working
raheeliftikhar5 Oct 25, 2024
dd50f07
hide gradient selection in color picker for text/border colors
raheeliftikhar5 Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fixed canvas settings
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Oct 25, 2024
commit 557407f00ade9e77ba7907397f4c927948baf5fb
37 changes: 32 additions & 5 deletions client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ const EmptySet = new Set<string>();

export const CanvasView = React.memo((props: ContainerBaseProps) => {
const currentTheme = useContext(ThemeContext)?.theme;
const isDefaultTheme = useContext(ThemeContext)?.themeId === 'default-theme-id';
const isPreviewTheme = useContext(ThemeContext)?.themeId === 'preview-theme';
const editorState = useContext(EditorContext);
const [dragSelectedComps, setDragSelectedComp] = useState(EmptySet);
const scrollContainerRef = useRef(null);
Expand Down Expand Up @@ -124,6 +126,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {

const bgColor = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.canvas ?? defaultTheme.canvas;

const themeGridBgColor = preventStylesOverwriting ? undefined : currentTheme?.canvas;
return themeGridBgColor || appSettings.gridBg || defaultTheme.canvas;
},
Expand All @@ -132,6 +136,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {

const bgImage = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.gridBgImage;

const themeGridBgImage = preventStylesOverwriting ? undefined : currentTheme?.gridBgImage;
return themeGridBgImage || appSettings.gridBgImage;
},
Expand All @@ -140,34 +146,44 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {

const bgImageRepeat = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.gridBgImageRepeat ?? defaultTheme.gridBgImageRepeat;

const themeGridBgImageRepeat = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageRepeat;
return themeGridBgImageRepeat || appSettings.gridBgImageRepeat || defaultTheme?.gridBgImageRepeat;
},
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
);
const bgImageSize = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.gridBgImageSize ?? defaultTheme.gridBgImageSize;

const themeGridBgImageSize = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageSize;
return themeGridBgImageSize || appSettings.gridBgImageSize || defaultTheme?.gridBgImageSize;
},
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
);
const bgImagePosition = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.gridBgImagePosition ?? defaultTheme.gridBgImagePosition;

const themeGridBgImagePosition = preventStylesOverwriting ? undefined : currentTheme?.gridBgImagePosition;
return themeGridBgImagePosition || appSettings.gridBgImagePosition || defaultTheme?.gridBgImagePosition;
},
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
);
const bgImageOrigin = useMemo(
() => {
if (isPreviewTheme) return currentTheme?.gridBgImageOrigin ?? defaultTheme.gridBgImageOrigin;

const themeGridBgImageOrigin = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageOrigin;
return themeGridBgImageOrigin || appSettings.gridBgImageOrigin || defaultTheme?.gridBgImageOrigin;
},
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
);

const defaultGrid = useMemo(() => {
if (isPreviewTheme) return currentTheme?.gridColumns ?? defaultTheme.gridColumns ?? String(DEFAULT_GRID_COLUMNS);

const themeGridColumns = preventStylesOverwriting ? undefined : currentTheme?.gridColumns;
return themeGridColumns
|| String(appSettings?.gridColumns)
Expand All @@ -176,6 +192,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);

const defaultRowHeight = useMemo(() => {
if (isPreviewTheme) return currentTheme?.gridRowHeight ?? defaultTheme.gridRowHeight ?? String(DEFAULT_ROW_HEIGHT);

const themeGridRowHeight = preventStylesOverwriting ? undefined : currentTheme?.gridRowHeight;
return themeGridRowHeight
|| String(appSettings?.gridRowHeight)
Expand All @@ -184,6 +202,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);

const defaultRowCount = useMemo(() => {
if (isPreviewTheme) return currentTheme?.gridRowCount ?? defaultTheme.gridRowCount;

const themeGridRowCount = preventStylesOverwriting ? undefined : currentTheme?.gridRowCount;
return themeGridRowCount
|| appSettings?.gridRowCount
Expand All @@ -192,13 +212,20 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);

const defaultContainerPadding: [number, number] = useMemo(() => {
if (isMobile) return DEFAULT_MOBILE_PADDING;
const DEFAULT_PADDING = isMobile ? DEFAULT_MOBILE_PADDING : DEFAULT_CONTAINER_PADDING;

if (isPreviewTheme) {
return [
currentTheme?.gridPaddingX ?? defaultTheme.gridPaddingX ?? DEFAULT_PADDING[0],
currentTheme?.gridPaddingY ?? defaultTheme.gridPaddingY ?? DEFAULT_PADDING[1],
];
}

const themeGridPaddingX = preventStylesOverwriting ? undefined : currentTheme?.gridPaddingX;
const themeGridPaddingY = preventStylesOverwriting ? undefined : currentTheme?.gridPaddingY;
const themeGridPaddingX = preventStylesOverwriting || isDefaultTheme ? undefined : currentTheme?.gridPaddingX;
const themeGridPaddingY = preventStylesOverwriting || isDefaultTheme ? undefined : currentTheme?.gridPaddingY;

let paddingX = themeGridPaddingX || appSettings?.gridPaddingX || defaultTheme?.gridPaddingX || DEFAULT_CONTAINER_PADDING[0];
let paddingY = themeGridPaddingY || appSettings?.gridPaddingY || defaultTheme?.gridPaddingY || DEFAULT_CONTAINER_PADDING[1];
let paddingX = themeGridPaddingX ?? appSettings?.gridPaddingX ?? defaultTheme?.gridPaddingX ?? DEFAULT_PADDING[0];
let paddingY = themeGridPaddingY ?? appSettings?.gridPaddingY ?? defaultTheme?.gridPaddingY ?? DEFAULT_PADDING[1];

return [paddingX, paddingY];
}, [preventStylesOverwriting, appSettings, isMobile, currentTheme, defaultTheme]);
Expand Down
7 changes: 4 additions & 3 deletions client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,10 @@ function getLineStyle(

return `
border: ${GRID_ITEM_BORDER_WIDTH}px ${borderStyle} ${borderColor};
padding: ${isHidden || !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
padding-left: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
padding-right: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
padding: 0px;
// padding: ${isHidden || !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
// padding-left: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
// padding-right: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
`;
}

Expand Down
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/pages/setting/theme/detail/previewDsl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -677,6 +677,7 @@ const dsl = {
settings: {
maxWidth: { dropdown: "3200", input: "3200" },
themeId: "",
preventStylesOverwriting: false,
},
preload: { libs: [], script: "", css: "" },
};
Expand Down