[feature] add theme font light, regular and bold controls

This commit is contained in:
zombieFox 2020-01-08 11:45:27 -07:00
parent cff0ebad36
commit d906c4ad8c
3 changed files with 119 additions and 0 deletions

View File

@ -1375,6 +1375,17 @@
<div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="form-inline">
<div class="button-wrap">
<button class="control-theme-font-display-light button mb-0" tabindex="-1">Light</button>
</div>
<div class="button-wrap">
<button class="control-theme-font-display-regular button mb-0" tabindex="-1">Regular</button>
</div>
<div class="button-wrap">
<button class="control-theme-font-display-bold button mb-0" tabindex="-1">Bold</button>
</div>
</div>
<p class="control-theme-font-display-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
<hr>
<div class="input-wrap">
@ -1409,6 +1420,17 @@
<div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="form-inline">
<div class="button-wrap">
<button class="control-theme-font-ui-light button mb-0" tabindex="-1">Light</button>
</div>
<div class="button-wrap">
<button class="control-theme-font-ui-regular button mb-0" tabindex="-1">Regular</button>
</div>
<div class="button-wrap">
<button class="control-theme-font-ui-bold button mb-0" tabindex="-1">Bold</button>
</div>
</div>
<p class="control-theme-font-ui-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
<hr>
<div class="input-wrap">

View File

@ -2586,6 +2586,30 @@ var control = (function() {
theme.render.font.display.weight();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-font-display-light"),
type: "button",
func: function() {
theme.mod.font.display.light();
theme.render.font.display.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-display-regular"),
type: "button",
func: function() {
theme.mod.font.display.regular();
theme.render.font.display.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-display-bold"),
type: "button",
func: function() {
theme.mod.font.display.bold();
theme.render.font.display.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-display-weight-style-default"),
type: "button",
@ -2644,6 +2668,30 @@ var control = (function() {
theme.render.font.ui.weight();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-font-ui-light"),
type: "button",
func: function() {
theme.mod.font.ui.light();
theme.render.font.ui.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-ui-regular"),
type: "button",
func: function() {
theme.mod.font.ui.regular();
theme.render.font.ui.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-ui-bold"),
type: "button",
func: function() {
theme.mod.font.ui.bold();
theme.render.font.ui.weight();
render.update();
}
}, {
element: helper.e(".control-theme-font-ui-weight-style-default"),
type: "button",

View File

@ -1106,6 +1106,55 @@ var theme = (function() {
}
};
mod.font = {
display: {
light: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.display.weight",
newValue: 300
});
},
regular: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.display.weight",
newValue: 400
});
},
bold: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.display.weight",
newValue: 700
});
}
},
ui: {
light: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.ui.weight",
newValue: 300
});
},
regular: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.ui.weight",
newValue: 400
});
},
bold: function() {
helper.setObject({
object: state.get.current(),
path: "theme.font.ui.weight",
newValue: 700
});
}
}
};
var render = {};
render.style = {