Skip to content

Commit efc307d

Browse files
siddacoolsiddacool
committed
Customize added
1 parent b522584 commit efc307d

File tree

4 files changed

+131
-10
lines changed

4 files changed

+131
-10
lines changed

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</script>
88

99
<div class="Config">
10+
<h3>Auto Customize</h3>
1011
<ColorTool
1112
label="Primary Color:"
1213
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
@@ -86,20 +87,44 @@
8687
<ValueSilder
8788
label="Roundness:"
8889
value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
89-
min={-4}
90+
min={-5}
9091
max={7}
9192
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
9293
/>
9394

95+
<ValueSilder
96+
label="Size:"
97+
value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
98+
min={-5}
99+
max={7}
100+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
101+
/>
102+
103+
<ValueSilder
104+
label="Border:"
105+
value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
106+
min={0}
107+
max={7}
108+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
109+
/>
110+
111+
<ValueSilder
112+
label="Space:"
113+
value={useAutoCustomizeConfigStore.data.space || 0}
114+
min={-5}
115+
max={15}
116+
oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
117+
/>
118+
119+
<div class="Export">
120+
<Export />
121+
</div>
122+
94123
<div class="Reset">
95124
<Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
96125
Reset
97126
</Button>
98127
</div>
99-
100-
<div class="Export">
101-
<Export />
102-
</div>
103128
</div>
104129

105130
<style lang="scss">
@@ -117,7 +142,7 @@
117142
overflow: auto;
118143
}
119144
120-
.Export {
145+
.Reset {
121146
margin-top: calc(var(--dodo-ui-space) * 4);
122147
}
123148
}

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,34 @@
5959
6060
rawText += `
6161
62-
/* Roundness */
62+
/* Component: Roundness */
6363
--dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
6464
--dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
65-
--dodo-ui-element-roundness-3: ${1.9375 + roundness}em;
65+
--dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
66+
}
6667
67-
`;
68+
if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
69+
const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
70+
const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
71+
72+
rawText += `
73+
74+
/* Component: Size */
75+
--dodo-ui-element-height-small: ${34 + elementHeight}px;
76+
--dodo-ui-element-height-normal: ${40 + elementHeight}px;
77+
--dodo-ui-element-height-large: ${50 + elementHeight}px;
78+
--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px;
79+
--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px;
80+
--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px;`;
81+
}
82+
83+
if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
84+
const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
85+
86+
rawText += `
87+
88+
/* Component: Border */
89+
--dodo-ui-element-border-width: ${2 + borderWidth}px;`;
6890
}
6991
7092
// end

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte‎

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
import Button from '$lib/stories/components/Form/Button/Button.svelte';
33
import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
4+
import Column from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
5+
import Grid from '$lib/stories/components/Layout/Grid/Grid.svelte';
46
import Paper from '$lib/stories/components/Layout/Paper/Paper.svelte';
57
import {
68
colorPalette,
@@ -61,6 +63,33 @@
6163
newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
6264
}
6365
66+
if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
67+
const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
68+
const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
69+
70+
newCssvariables.push(`--dodo-ui-element-height-small: ${34 + elementHeight}px`);
71+
newCssvariables.push(`--dodo-ui-element-height-normal: ${40 + elementHeight}px`);
72+
newCssvariables.push(`--dodo-ui-element-height-large: ${50 + elementHeight}px`);
73+
74+
newCssvariables.push(`--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px`);
75+
newCssvariables.push(`--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px`);
76+
newCssvariables.push(`--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px`);
77+
}
78+
79+
if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
80+
const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
81+
82+
newCssvariables.push(`--dodo-ui-element-border-width: ${1 + borderWidth}px`);
83+
}
84+
85+
if (useAutoCustomizeConfigStore.data.space) {
86+
const space = useAutoCustomizeConfigStore.data.space;
87+
88+
newCssvariables.push(`--dodo-ui-space-small: ${6 + space}px`);
89+
newCssvariables.push(`--dodo-ui-space: ${8 + space}px`);
90+
newCssvariables.push(`--dodo-ui-space-large: ${10 + space}px`);
91+
}
92+
6493
cssVariables = [...newCssvariables];
6594
});
6695
</script>
@@ -111,13 +140,48 @@
111140
<div class="section">
112141
<div class="column">
113142
<Paper shadow={1} width="150px" height="180px">
114-
<div style="padding: 16px">Hola!</div>
143+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
115144
</Paper>
116145
</div>
117146
<div class="column">
118147
<RangeSlider value={50} min={20} max={70} />
119148
</div>
120149
</div>
150+
151+
<div class="section">
152+
<Grid class="GridSection">
153+
<Column md={6}>
154+
<Paper shadow={1}>
155+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
156+
</Paper>
157+
</Column>
158+
<Column md={6}>
159+
<Paper shadow={1}>
160+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
161+
</Paper>
162+
</Column>
163+
<Column md={4}>
164+
<Paper shadow={1}>
165+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
166+
</Paper>
167+
</Column>
168+
<Column md={3}>
169+
<Paper shadow={1}>
170+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
171+
</Paper>
172+
</Column>
173+
<Column md={2}>
174+
<Paper shadow={1}>
175+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
176+
</Paper>
177+
</Column>
178+
<Column md={3}>
179+
<Paper shadow={1}>
180+
<div style="padding: var(--dodo-ui-space)">Hola!</div>
181+
</Paper>
182+
</Column>
183+
</Grid>
184+
</div>
121185
</div>
122186

123187
<style lang="scss">
@@ -155,5 +219,9 @@
155219
margin: 4px;
156220
display: inline-flex;
157221
}
222+
223+
:global(.GridSection) {
224+
width: 100%;
225+
}
158226
}
159227
</style>

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ export type AutoCustomizeConfigDataColors = {
1313

1414
export type AutoCustomizeConfigDataComponents = {
1515
roundness?: number;
16+
elementHeight?: number;
17+
borderWidth?: number;
1618
};
1719

1820
export type AutoCustomizeConfigData = {
1921
colors?: AutoCustomizeConfigDataColors;
2022
components?: AutoCustomizeConfigDataComponents;
23+
space?: number;
2124
};
2225

2326
export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
@@ -31,7 +34,10 @@ export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
3134
},
3235
components: {
3336
roundness: 0,
37+
elementHeight: 0,
38+
borderWidth: 0,
3439
},
40+
space: 0,
3541
};
3642

3743
function getDefaultData() {

0 commit comments

Comments
 (0)