Skip to content

Commit 69b0d2b

Browse files
zombieFoxzombieFox
committed
[refactor] improve custom and preset theme by removing duplicate code
1 parent f44587e commit 69b0d2b

File tree

4 files changed

+54
-86
lines changed

4 files changed

+54
-86
lines changed

‎src/css/theme.css‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.theme-preset-item,
22
.theme-custom-item{
3-
width:var(--theme-preset-preview-size);
4-
height:var(--theme-preset-preview-size);
3+
width:var(--theme-preview-size);
4+
height:var(--theme-preview-size);
55
border-radius:var(--theme-radius);
66
padding:0;
77
margin:0.5em;
@@ -13,8 +13,8 @@
1313
.theme-custom-button{
1414
padding:0;
1515
border-radius:0;
16-
width:var(--theme-preset-preview-size);
17-
height:var(--theme-preset-preview-size);
16+
width:var(--theme-preview-size);
17+
height:var(--theme-preview-size);
1818
line-height:1.6;
1919
position: absolute;
2020
top:0;
@@ -31,7 +31,7 @@
3131
}
3232

3333
.theme-custom-control{
34-
width:var(--theme-preset-preview-size);
34+
width:var(--theme-preview-size);
3535
height:0;
3636
position: absolute;
3737
bottom:0;
@@ -53,7 +53,7 @@
5353
}
5454

5555
.is-theme-custom-edit .theme-custom-button{
56-
height:calc(var(--theme-preset-preview-size) -var(--theme-custom-edit-height));
56+
height:calc(var(--theme-preview-size) -var(--theme-custom-edit-height));
5757
box-shadow:var(--theme-shadow-bottom-medium);
5858
}
5959

@@ -63,8 +63,8 @@
6363

6464
.theme-preset-preview,
6565
.theme-custom-preview{
66-
width:var(--theme-preset-preview-size);
67-
height:var(--theme-preset-preview-size);
66+
width:var(--theme-preview-size);
67+
height:var(--theme-preview-size);
6868
position: absolute;
6969
top:0;
7070
left:0;
@@ -268,10 +268,17 @@
268268
}
269269

270270
.theme-shadow-box{
271+
background-color:rgb(var(--theme-color-02));
271272
border-radius:var(--theme-radius);
272273
margin:0;
274+
padding:0.5em;
273275
width:5em;
274276
height:5em;
277+
display: flex;
278+
justify-content: center;
279+
align-items: center;
280+
text-align: center;
281+
white-space: normal;
275282
}
276283

277284
.theme-shadow-box-small{

‎src/css/variables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
--theme-shade-pos-08:25,25,25;
3333
--theme-shade-pos-09:25,25,25;
3434
--theme-shade-pos-10:25,25,25;
35-
--theme-preset-preview-size:6em;
35+
--theme-preview-size:6em;
3636
--theme-custom-edit-height:2.5em;
3737
--theme-shadow:1;
3838
--theme-shadow-offset-y:0.02em;

‎src/index.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1662,19 +1662,16 @@ <h1 class="menu-item-header-text">Shadow</h1>
16621662
<buttonclass="control-theme-shadow-default button mb-0" tabindex="-1">Default shadow size</button>
16631663
</div>
16641664
<hr>
1665-
<divclass="p-wrap">
1666-
<p>Small, Medium and Large shadows</p>
1667-
</div>
16681665
<divclass="form-group-wrap">
16691666
<divclass="form-group form-group-block mb-0">
16701667
<divclass="form-group-text form-group-text-transparent form-group-text-borderless">
1671-
<divclass="theme-shadow-box theme-shadow-box-small"></div>
1668+
<divclass="theme-shadow-box theme-shadow-box-small">Small shadow</div>
16721669
</div>
16731670
<divclass="form-group-text form-group-text-transparent form-group-text-borderless">
1674-
<divclass="theme-shadow-box theme-shadow-box-medium"></div>
1671+
<divclass="theme-shadow-box theme-shadow-box-medium">Medium shadow</div>
16751672
</div>
16761673
<divclass="form-group-text form-group-text-transparent form-group-text-borderless">
1677-
<divclass="theme-shadow-box theme-shadow-box-large"></div>
1674+
<divclass="theme-shadow-box theme-shadow-box-large">Large shadow</div>
16781675
</div>
16791676
</div>
16801677
</div>

‎src/js/theme.js‎

Lines changed: 35 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,39 @@ var theme = (function(){
3333

3434
varmod={};
3535

36+
mod.apply=function(data){
37+
helper.setObject({
38+
object: state.get.current(),
39+
path: "theme.font",
40+
newValue: data.font
41+
});
42+
helper.setObject({
43+
object: state.get.current(),
44+
path: "theme.color",
45+
newValue: data.color
46+
});
47+
helper.setObject({
48+
object: state.get.current(),
49+
path: "theme.accent.current",
50+
newValue: data.accent
51+
});
52+
helper.setObject({
53+
object: state.get.current(),
54+
path: "theme.radius",
55+
newValue: data.radius
56+
});
57+
helper.setObject({
58+
object: state.get.current(),
59+
path: "theme.style",
60+
newValue: data.style
61+
});
62+
helper.setObject({
63+
object: state.get.current(),
64+
path: "theme.shadow",
65+
newValue: data.shadow
66+
});
67+
};
68+
3669
mod.style={
3770
light: function(){
3871
helper.setObject({
@@ -136,38 +169,6 @@ var theme = (function(){
136169
};
137170

138171
mod.preset={
139-
set: function(themePreset){
140-
helper.setObject({
141-
object: state.get.current(),
142-
path: "theme.font",
143-
newValue: themePreset.font
144-
});
145-
helper.setObject({
146-
object: state.get.current(),
147-
path: "theme.color",
148-
newValue: themePreset.color
149-
});
150-
helper.setObject({
151-
object: state.get.current(),
152-
path: "theme.accent.current",
153-
newValue: themePreset.accent
154-
});
155-
helper.setObject({
156-
object: state.get.current(),
157-
path: "theme.radius",
158-
newValue: themePreset.radius
159-
});
160-
helper.setObject({
161-
object: state.get.current(),
162-
path: "theme.style",
163-
newValue: themePreset.style
164-
});
165-
helper.setObject({
166-
object: state.get.current(),
167-
path: "theme.shadow",
168-
newValue: themePreset.shadow
169-
});
170-
},
171172
get: function(index){
172173
returnJSON.parse(JSON.stringify(mod.preset.all[index]));
173174
},
@@ -1087,38 +1088,6 @@ var theme = (function(){
10871088
};
10881089

10891090
mod.custom={
1090-
set: function(themeCustom){
1091-
helper.setObject({
1092-
object: state.get.current(),
1093-
path: "theme.font",
1094-
newValue: themeCustom.font
1095-
});
1096-
helper.setObject({
1097-
object: state.get.current(),
1098-
path: "theme.color",
1099-
newValue: themeCustom.color
1100-
});
1101-
helper.setObject({
1102-
object: state.get.current(),
1103-
path: "theme.accent.current",
1104-
newValue: themeCustom.accent
1105-
});
1106-
helper.setObject({
1107-
object: state.get.current(),
1108-
path: "theme.radius",
1109-
newValue: themeCustom.radius
1110-
});
1111-
helper.setObject({
1112-
object: state.get.current(),
1113-
path: "theme.style",
1114-
newValue: themeCustom.style
1115-
});
1116-
helper.setObject({
1117-
object: state.get.current(),
1118-
path: "theme.shadow",
1119-
newValue: themeCustom.shadow
1120-
});
1121-
},
11221091
get: function(index){
11231092
returnJSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
11241093
},
@@ -1405,7 +1374,7 @@ var theme = (function(){
14051374
formInline.appendChild(themePresetItem);
14061375

14071376
themePresetButton.addEventListener("click",function(){
1408-
mod.preset.set(mod.preset.get(index));
1377+
mod.apply(mod.preset.get(index));
14091378
data.save();
14101379
render.font.display.name();
14111380
render.font.display.weight();
@@ -1492,7 +1461,7 @@ var theme = (function(){
14921461
varcopyStagedThemeCustom=JSON.parse(JSON.stringify(stagedThemeCustom));
14931462

14941463
themeCustomButton.addEventListener("click",function(){
1495-
mod.custom.set(mod.custom.get(index));
1464+
mod.apply(mod.custom.get(index));
14961465
data.save();
14971466
render.font.display.name();
14981467
render.font.display.weight();
@@ -1686,10 +1655,6 @@ var theme = (function(){
16861655
}
16871656
}
16881657

1689-
varpreset=function(name){
1690-
mod.preset.set(name);
1691-
};
1692-
16931658
varcustom={
16941659
add: function(){
16951660
render.custom.add();
@@ -1725,7 +1690,6 @@ var theme = (function(){
17251690
render: render,
17261691
style: style,
17271692
accent: accent,
1728-
preset: preset,
17291693
custom: custom
17301694
};
17311695

0 commit comments

Comments
(0)