From 0184d5fff01f03d099de50773e59cb6363c5bede Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Nov 2018 23:34:04 +0300 Subject: whoops --- src/components/style_switcher/style_switcher.scss | 192 ++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 src/components/style_switcher/style_switcher.scss (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss new file mode 100644 index 00000000..6e34a0f7 --- /dev/null +++ b/src/components/style_switcher/style_switcher.scss @@ -0,0 +1,192 @@ +@import '../../_variables.scss'; +.style-switcher { + .preset-switcher { + margin-right: 1em; + } + + .style-control { + display: flex; + align-items: baseline; + margin-bottom: 5px; + + .label { + flex: 1; + } + + input, select { + min-width: 3em; + margin: 0; + flex: 0; + + &[type=color] { + padding: 1px; + cursor: pointer; + height: 29px; + min-width: 2em; + border: none; + align-self: stretch; + } + + &[type=number] { + min-width: 5em; + } + + &[type=range] { + flex: 1; + min-width: 3em; + } + + &[type=checkbox] + label { + margin: 6px 0; + } + + &:not([type=number]):not([type=text]) { + align-self: center; + } + + &.disabled *:not(.exlcude-disabled) { + opacity: .5 + } + } + } + + .import-warning { + color: $fallback--cRed; + color: var(--cRed, $fallback--cRed); + } + + .apply-container, + .radius-container, + .color-container, + .presets-container { + display: flex; + + p { + margin-left: 1em + } + } + + .radius-container { + flex-direction: column; + } + + .color-container{ + flex-wrap: wrap; + justify-content: space-between; + } + + .presets-container, + .shadow-selector { + display: flex; + justify-content: center; + align-items: baseline; + + .import-export { + display: flex; + + .btn { + margin-left: .5em; + } + } + .override { + margin-left: .5em; + } + } + + .preview-container { + border-top: 1px dashed; + border-bottom: 1px dashed; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 1em -1em 0; + padding: 1em; + background: var(--body-background-image); + background-size: cover; + background-position: 50% 50%; + + .btn { + margin-top: 1em; + min-height: 30px; + width: 10em; + } + } + + .apply-container { + justify-content: center; + } + + .radius-item, + .color-item { + min-width: 20em; + margin: 5px 6px 0 0; + display:flex; + flex-direction: column; + flex: 1 1 0; + + &.wide { + min-width: 60% + } + &:not(.wide):nth-child(2n+1) { + margin-right: 7px; + + } + + .color, .opacity { + display:flex; + align-items: baseline; + } + + h4 { + margin-top: 1em; + } + } + + .radius-item { + flex-basis: auto; + } + + .theme-radius-rn, + .theme-color-cl { + border: 0; + box-shadow: none; + background: transparent; + color: var(--faint, $fallback--faint); + align-self: stretch; + } + + .theme-color-cl, + .theme-radius-in, + .theme-color-in { + margin-left: 4px; + } + + .theme-radius-in { + min-width: 1em; + } + + .theme-radius-in { + max-width: 7em; + flex: 1; + } + + .theme-radius-lb{ + max-width: 50em; + } + + .theme-preview-content { + padding: 20px; + } + + .dummy { + .avatar { + background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); + color: black; + text-align: center; + height: 48px; + line-height: 48px; + width: 48px; + float: left; + margin-right: 1em; + } + } +} -- cgit v1.2.3-70-g09d2 From 73a9370710f46c0594eda01ac8fe016e87c7e18c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 03:14:59 +0300 Subject: fixed and updated roundness tab --- src/components/range_input/range_input.vue | 48 +++++++++++++++++++++++ src/components/style_switcher/style_switcher.js | 23 ++++++----- src/components/style_switcher/style_switcher.scss | 12 ++++-- src/components/style_switcher/style_switcher.vue | 42 ++++---------------- src/services/style_setter/style_setter.js | 25 ++++-------- 5 files changed, 84 insertions(+), 66 deletions(-) create mode 100644 src/components/range_input/range_input.vue (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue new file mode 100644 index 00000000..3e50664b --- /dev/null +++ b/src/components/range_input/range_input.vue @@ -0,0 +1,48 @@ + + + diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index acb1764d..d0f72427 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -2,9 +2,10 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/c import { set, delete as del } from 'vue' import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js' import ColorInput from '../color_input/color_input.vue' +import RangeInput from '../range_input/range_input.vue' +import OpacityInput from '../opacity_input/opacity_input.vue' import ShadowControl from '../shadow_control/shadow_control.vue' import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' -import OpacityInput from '../opacity_input/opacity_input.vue' import TabSwitcher from '../tab_switcher/tab_switcher.jsx' // List of color values used in v1 @@ -171,7 +172,7 @@ export default { } }, previewRadii () { - return generateRadii(this.currentRadii) + return generateRadii({ radii: this.currentRadii }) }, previewShadows () { return generateShadows({ shadows: this.shadowsLocal }) @@ -181,6 +182,7 @@ export default { }, previewTheme () { if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } + console.log(this.preview.theme.radii) return this.preview.theme }, // This needs optimization maybe @@ -286,6 +288,7 @@ export default { components: { ColorInput, OpacityInput, + RangeInput, ContrastRatio, ShadowControl, TabSwitcher @@ -379,6 +382,8 @@ export default { normalizeLocalState (input, version = 0) { const colors = input.colors || input const radii = input.radii || input + console.log('Benis') + console.log(JSON.stringify(radii, null, 2)) const opacity = input.opacity || input const shadows = input.shadows || {} @@ -417,13 +422,13 @@ export default { }) // TODO optimize this - this.btnRadiusLocal = radii.btnRadius || 4 - this.inputRadiusLocal = radii.inputRadius || 4 - this.panelRadiusLocal = radii.panelRadius || 10 - this.avatarRadiusLocal = radii.avatarRadius || 5 - this.avatarAltRadiusLocal = radii.avatarAltRadius || 50 - this.tooltipRadiusLocal = radii.tooltipRadius || 2 - this.attachmentRadiusLocal = radii.attachmentRadius || 5 + this.btnRadiusLocal = radii.btn + this.inputRadiusLocal = radii.input + this.panelRadiusLocal = radii.panel + this.avatarRadiusLocal = radii.avatar + this.avatarAltRadiusLocal = radii.avatarAlt + this.tooltipRadiusLocal = radii.tooltip + this.attachmentRadiusLocal = radii.attachment this.shadowsLocal = shadows diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 6e34a0f7..6c6e913a 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -13,6 +13,14 @@ flex: 1; } + &.disabled { + input, select { + &:not(.exclude-disabled) { + opacity: .5 + } + } + } + input, select { min-width: 3em; margin: 0; @@ -43,10 +51,6 @@ &:not([type=number]):not([type=text]) { align-self: center; } - - &.disabled *:not(.exlcude-disabled) { - opacity: .5 - } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 5cf75636..54ea072f 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -135,41 +135,13 @@

{{$t('settings.radii_help')}}

-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
+ + + + + + +
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index e7d8252c..69a1b899 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -81,7 +81,6 @@ const setColors = (input, commit) => { head.appendChild(styleEl) const styleSheet = styleEl.sheet - console.log(rules) styleSheet.toString() styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max') styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') @@ -108,7 +107,6 @@ const getCssShadow = (input) => { } const generateColors = (input) => { - console.log(input.opacity) const colors = {} const opacity = Object.assign({ alert: 0.5, @@ -120,7 +118,6 @@ const generateColors = (input) => { } return acc }, {})) - console.log(colors, opacity) const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => { if (typeof v === 'object') { acc[k] = v @@ -216,26 +213,19 @@ const generateColors = (input) => { } const generateRadii = (input) => { - const inputRadii = input.radii || { - btn: input.btnRadius, - input: input.inputRadius, - panel: input.panelRadius, - avatar: input.avatarRadius, - avatarAlt: input.avatarAltRadius, - tooltip: input.tooltipRadius, - attachment: input.attachmentRadius - } - - const radii = { + console.log(input) + const radii = Object.entries(input.radii).filter(([k, v]) => v).reduce((acc, [k, v]) => { + acc[k] = v + return acc + }, { btn: 4, input: 4, panel: 10, avatar: 5, avatarAlt: 50, tooltip: 2, - attachment: 5, - ...inputRadii - } + attachment: 5 + }) return { rules: { @@ -259,7 +249,6 @@ const generateShadows = (input) => { }], ...(input.shadows || {}) } - console.log('benis') return { rules: { -- cgit v1.2.3-70-g09d2 From 92afd6af12abc0a11f721a8f4c181c55522743ac Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 22:01:34 +0300 Subject: layout fixes --- src/components/contrast_ratio/contrast_ratio.vue | 3 +++ src/components/style_switcher/style_switcher.scss | 17 +++++++++++++---- src/components/style_switcher/style_switcher.vue | 10 ++++------ src/i18n/en.json | 6 +++--- 4 files changed, 23 insertions(+), 13 deletions(-) (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index f4f9ea86..bd971d00 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -54,6 +54,9 @@ export default { display: flex; justify-content: flex-end; + margin-top: -4px; + margin-bottom: 5px; + .label { margin-right: 1em; } diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 6c6e913a..f8529b4f 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -59,6 +59,10 @@ color: var(--cRed, $fallback--cRed); } + .tab-switcher { + margin: 0 -1em; + } + .apply-container, .radius-container, .color-container, @@ -75,10 +79,19 @@ } .color-container{ + > h4 { + width: 99%; + } flex-wrap: wrap; justify-content: space-between; } + .color-container, + .shadow-container, + .radius-container { + margin: 1em 1em 0; + } + .presets-container, .shadow-selector { display: flex; @@ -139,10 +152,6 @@ display:flex; align-items: baseline; } - - h4 { - margin-top: 1em; - } } .radius-item { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fbf9a20a..4ed62242 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -48,9 +48,9 @@

{{$t('settings.theme_help')}}

-
+
+

{{ $t('settings.style.common_colors.main') }}

-

{{ $t('settings.style.basic_colors.main') }}

@@ -59,21 +59,19 @@
-

{{ $t('settings.style.basic_colors.foreground') }}

-

{{ $t('settings.style.basic_colors.foreground_hint') }}

+

{{ $t('settings.style.common_colors.foreground_hint') }}

+

{{ $t('settings.style.common_colors.rgbo') }}

-

{{ $t('settings.style.basic_colors.rgbo') }}

-

.

diff --git a/src/i18n/en.json b/src/i18n/en.json index 3fcc6da2..b039757e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -179,9 +179,9 @@ } } }, - "basic_colors": { - "_tab_label": "Basic", - "main": "Basic colors", + "common_colors": { + "_tab_label": "Common", + "main": "Common colors", "foreground": "Panel header, top bar, buttons, text fields", "foreground_hint": "See \"Advanced\" tab for more detailed control", "rgbo": "Icons, accents, badges" -- cgit v1.2.3-70-g09d2 From 754d71ec1933d897f9206ddca080bb258256edbb Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 23 Nov 2018 08:24:55 +0300 Subject: added checkboxes to keep current roundness and shadows, also cleaned up how shadows/roundness are reset when switching themes --- src/components/style_switcher/style_switcher.js | 52 +++++++++++++++++---- src/components/style_switcher/style_switcher.scss | 18 +++++-- src/components/style_switcher/style_switcher.vue | 57 +++++++++++++++-------- src/i18n/en.json | 5 ++ 4 files changed, 99 insertions(+), 33 deletions(-) (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index edc614c3..0c302e93 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -27,6 +27,9 @@ export default { selected: this.$store.state.config.theme, invalidThemeImported: false, + keepShadows: false, + keepRoundness: false, + textColorLocal: '', linkColorLocal: '', @@ -375,6 +378,19 @@ export default { }) }, + clearRoundness () { + Object.keys(this.$data) + .filter(_ => _.endsWith('RadiusLocal')) + .forEach(key => { + set(this.$data, key, undefined) + }) + }, + + clearShadows () { + this.shadowsLocal = {} + console.log(this.shadowsLocal) + }, + /** * This applies stored theme data onto form. * @param {Object} input - input data @@ -420,17 +436,24 @@ export default { this[key + 'ColorLocal'] = rgb2hex(colors[key]) }) - // TODO optimize this - this.btnRadiusLocal = radii.btn - this.inputRadiusLocal = radii.input - this.checkboxRadiusLocal = radii.checkbox - this.panelRadiusLocal = radii.panel - this.avatarRadiusLocal = radii.avatar - this.avatarAltRadiusLocal = radii.avatarAlt - this.tooltipRadiusLocal = radii.tooltip - this.attachmentRadiusLocal = radii.attachment + if (!this.keepRoundness) { + this.clearRoundness() + // TODO optimize this + this.btnRadiusLocal = radii.btn + this.inputRadiusLocal = radii.input + this.checkboxRadiusLocal = radii.checkbox + this.panelRadiusLocal = radii.panel + this.avatarRadiusLocal = radii.avatar + this.avatarAltRadiusLocal = radii.avatarAlt + this.tooltipRadiusLocal = radii.tooltip + this.attachmentRadiusLocal = radii.attachment + } - this.shadowsLocal = shadows + if (!this.keepShadows) { + this.clearShadows() + this.shadowsLocal = shadows + this.shadowSelected = this.shadowsAvailable[0] + } Object.entries(opacity).forEach(([k, v]) => { if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return @@ -441,7 +464,16 @@ export default { watch: { selected () { if (this.selectedVersion === 1) { + if (!this.keepRoundness) { + this.clearRoundness() + } + + if (!this.keepShadows) { + this.clearShadows() + } + this.clearV1() + this.bgColorLocal = this.selected[1] this.fgColorLocal = this.selected[2] this.textColorLocal = this.selected[3] diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index f8529b4f..9cdc9f33 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -66,7 +66,7 @@ .apply-container, .radius-container, .color-container, - .presets-container { + { display: flex; p { @@ -88,12 +88,14 @@ .color-container, .shadow-container, - .radius-container { + .radius-container, + .presets-container { margin: 1em 1em 0; } - .presets-container, - .shadow-selector { + .shadow-selector, + .save-load, + .save-load-options { display: flex; justify-content: center; align-items: baseline; @@ -110,6 +112,14 @@ } } + .save-load-options { + flex-wrap: wrap; + margin-top: .5em; + span { + margin: 0 .5em; + } + } + .preview-container { border-top: 1px dashed; border-bottom: 1px dashed; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6463a4ca..0c6b811d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,26 +1,45 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 98a91013..15d57765 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -168,7 +168,10 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", - "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme." + "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", + "reset": "Reset", + "clear_all": "Clear all", + "clear_opacity": "Clear opacity" }, "common": { "color": "Color", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 60531f28..680aadb4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -249,6 +249,7 @@ const generateRadii = (input) => { }, { btn: 4, input: 4, + checkbox: 2, panel: 10, avatar: 5, avatarAlt: 50, -- cgit v1.2.3-70-g09d2 From 1a65895bfd441ea57163ee3e185785c82a81b736 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Nov 2018 21:48:16 +0300 Subject: initial font support --- src/App.scss | 3 + src/components/font_control/font_control.vue | 93 +++++++++++++++++++++++ src/components/shadow_control/shadow_control.vue | 5 +- src/components/style_switcher/style_switcher.js | 63 ++++++++++++--- src/components/style_switcher/style_switcher.scss | 3 + src/components/style_switcher/style_switcher.vue | 55 ++++++++++---- src/i18n/en.json | 13 ++++ src/services/style_setter/style_setter.js | 48 +++++++++++- 8 files changed, 251 insertions(+), 32 deletions(-) create mode 100644 src/components/font_control/font_control.vue (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/App.scss b/src/App.scss index ceb0bb87..45491fd2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -34,6 +34,7 @@ h4 { body { font-family: sans-serif; + font-family: var(--interfaceFont, sans-serif); font-size: 14px; margin: 0; color: $fallback--text; @@ -62,6 +63,7 @@ button { box-shadow: var(--buttonShadow); font-size: 14px; font-family: sans-serif; + font-family: var(--interfaceFont, sans-serif); i[class*=icon-] { color: $fallback--text; @@ -111,6 +113,7 @@ input, textarea, .select { color: $fallback--lightText; color: var(--inputText, $fallback--lightText); font-family: sans-serif; + font-family: var(--inputFont, sans-serif); font-size: 14px; padding: 8px 7px; box-sizing: border-box; diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue new file mode 100644 index 00000000..424f6259 --- /dev/null +++ b/src/components/font_control/font_control.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 85346e17..744925d4 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -124,9 +124,9 @@ -
+

{{$t('settings.style.shadows.hint')}} -

+

@@ -139,6 +139,7 @@ display: flex; flex-wrap: wrap; justify-content: center; + margin-bottom: 1em; .shadow-preview-container, .shadow-tweak { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 57faa61b..bbd28bdc 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,10 +1,11 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js' import { set, delete as del } from 'vue' -import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js' +import { generateColors, generateShadows, generateRadii, generateFonts, composePreset } from '../../services/style_setter/style_setter.js' import ColorInput from '../color_input/color_input.vue' import RangeInput from '../range_input/range_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' import ShadowControl from '../shadow_control/shadow_control.vue' +import FontControl from '../font_control/font_control.vue' import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' import TabSwitcher from '../tab_switcher/tab_switcher.jsx' @@ -30,6 +31,7 @@ export default { previewShadows: {}, previewColors: {}, previewRadii: {}, + previewFonts: {}, shadowsInvalid: true, colorsInvalid: true, @@ -38,6 +40,7 @@ export default { keepShadows: false, keepOpacity: false, keepRoundness: false, + keepFonts: false, textColorLocal: '', linkColorLocal: '', @@ -85,6 +88,7 @@ export default { shadowSelected: undefined, shadowsLocal: {}, + fontsLocal: {}, btnRadiusLocal: '', inputRadiusLocal: '', @@ -176,10 +180,11 @@ export default { } }, preview () { - return composePreset(this.previewColors, this.previewRadii, this.previewShadows) + return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts) }, previewTheme () { - if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } + if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} } + console.log(this.preview.theme) return this.preview.theme }, // This needs optimization maybe @@ -253,7 +258,11 @@ export default { }, previewRules () { if (!this.preview.rules) return '' - return [...Object.values(this.preview.rules), 'color: var(--text)'].join(';') + return [ + ...Object.values(this.preview.rules), + 'color: var(--text)', + 'font-family: var(--interfaceFont, sans-serif)' + ].join(';') }, shadowsAvailable () { return Object.keys(this.previewTheme.shadows).sort() @@ -291,6 +300,7 @@ export default { RangeInput, ContrastRatio, ShadowControl, + FontControl, TabSwitcher }, methods: { @@ -300,6 +310,7 @@ export default { _pleroma_theme_version: 2, theme: { shadows: this.shadowsLocal, + fonts: this.fontsLocal, opacity: this.currentOpacity, colors: this.currentColors, radii: this.currentRadii @@ -357,6 +368,7 @@ export default { name: 'customTheme', value: { shadows: this.shadowsLocal, + fonts: this.fontsLocal, opacity: this.currentOpacity, colors: this.currentColors, radii: this.currentRadii @@ -398,6 +410,10 @@ export default { this.shadowsLocal = {} }, + clearFonts () { + this.fontsLocal = {} + }, + /** * This applies stored theme data onto form. * @param {Object} input - input data @@ -408,6 +424,7 @@ export default { const radii = input.radii || input const opacity = input.opacity const shadows = input.shadows || {} + const fonts = input.fonts || {} if (version === 0) { if (input.version) version = input.version @@ -458,6 +475,11 @@ export default { this.shadowSelected = this.shadowsAvailable[0] } + if (!this.keepFonts) { + this.clearFonts() + this.fontsLocal = fonts + } + if (opacity && !this.keepOpacity) { this.clearOpacity() Object.entries(opacity).forEach(([k, v]) => { @@ -477,14 +499,31 @@ export default { console.warn(e) } }, - shadowsLocal () { - try { - this.previewShadows = generateShadows({ shadows: this.shadowsLocal }) - this.shadowsInvalid = false - } catch (e) { - this.shadowsInvalid = true - console.warn(e) - } + shadowsLocal: { + handler () { + try { + this.previewShadows = generateShadows({ shadows: this.shadowsLocal }) + this.shadowsInvalid = false + } catch (e) { + this.shadowsInvalid = true + console.warn(e) + } + }, + deep: true + }, + fontsLocal: { + handler () { + try { + this.previewFonts = generateFonts({ fonts: this.fontsLocal }) + console.log('BENIS') + console.log(this.previewFonts) + this.fontsInvalid = false + } catch (e) { + this.fontsInvalid = true + console.warn(e) + } + }, + deep: true }, currentColors () { try { diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index ad203856..9c4f4ecd 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -67,6 +67,7 @@ flex-wrap: wrap; } + .fonts-container, .reset-container, .apply-container, .radius-container, @@ -75,6 +76,7 @@ display: flex; } + .fonts-container, .radius-container { flex-direction: column; } @@ -87,6 +89,7 @@ justify-content: space-between; } + .fonts-container, .color-container, .shadow-container, .radius-container, diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 5e9af19e..f64bda3f 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -75,7 +75,7 @@
-

{{$t('settings.theme_help')}}

+

{{$t('settings.theme_help')}}

@@ -169,20 +169,18 @@
-
-
-

{{$t('settings.radii_help')}}

- -
- - - - - - - - +
+

{{$t('settings.radii_help')}}

+
+ + + + + + + +
@@ -214,6 +212,35 @@
+
+
+

{{$t('settings.style.fonts.help')}}

+
+ + + + +
diff --git a/src/i18n/en.json b/src/i18n/en.json index 5bd1ddbb..6f439f65 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -236,6 +236,19 @@ "buttonPressedHover": "Button (pressed+hover)", "input": "Input field" } + }, + "fonts": { + "_tab_label": "Fonts", + "help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.", + "components": { + "interface": "Interface", + "input": "Input fields", + "post": "Post text", + "postCode": "Monospaced text in a post (rich text)" + }, + "family": "Font name", + "size": "Size (in px)", + "weight": "Weight (boldness)" } } }, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index e11ee90c..f2c9c13e 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -85,6 +85,7 @@ const setColors = (input, commit) => { styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max') styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max') + styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max') body.style.display = 'initial' // commit('setOption', { name: 'colors', value: htmlColors }) @@ -267,6 +268,41 @@ const generateRadii = (input) => { } } +const generateFonts = (input) => { + const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => { + acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => { + acc[k] = v + return acc + }, acc[k]) + return acc + }, { + interface: { + family: 'sans-serif' + }, + input: { + family: 'inherit' + }, + post: { + family: 'inherit' + }, + postCode: { + family: 'monospace' + } + }) + + return { + rules: { + fonts: Object + .entries(fonts) + .filter(([k, v]) => v) + .map(([k, v]) => `--${k}Font: ${v.family}`).join(';') + }, + theme: { + fonts + } + } +} + const generateShadows = (input) => { const border = (top, shadow) => ({ x: 0, @@ -355,17 +391,19 @@ const generateShadows = (input) => { } } -const composePreset = (colors, radii, shadows) => { +const composePreset = (colors, radii, shadows, fonts) => { return { rules: { ...shadows.rules, ...colors.rules, - ...radii.rules + ...radii.rules, + ...fonts.rules }, theme: { ...shadows.theme, ...colors.theme, - ...radii.theme + ...radii.theme, + ...fonts.theme } } } @@ -374,8 +412,9 @@ const generatePreset = (input) => { const shadows = generateShadows(input) const colors = generateColors(input) const radii = generateRadii(input) + const fonts = generateFonts(input) - return composePreset(colors, radii, shadows) + return composePreset(colors, radii, shadows, fonts) } const setPreset = (val, commit) => { @@ -424,6 +463,7 @@ export { generateColors, generateRadii, generateShadows, + generateFonts, generatePreset, composePreset, getCssShadow -- cgit v1.2.3-70-g09d2 From 9a9dc47fc573af28429a641bf5408ead1c0d33ec Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 03:19:04 +0300 Subject: better preview, collateral fixes --- src/App.scss | 27 ++++++++++ src/components/notifications/notifications.scss | 17 ------- src/components/notifications/notifications.vue | 2 +- src/components/status/status.vue | 1 + src/components/style_switcher/style_switcher.scss | 25 +++++++++- src/components/style_switcher/style_switcher.vue | 61 +++++++++++++++++++++-- src/components/timeline/timeline.vue | 5 +- src/i18n/en.json | 13 +++++ 8 files changed, 123 insertions(+), 28 deletions(-) (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/App.scss b/src/App.scss index 50645ec8..8c9df0ba 100644 --- a/src/App.scss +++ b/src/App.scss @@ -381,6 +381,12 @@ main-router { font-size: 1.3em; } + .faint { + background-color: transparent; + color: $fallback--faint; + color: var(--panelFaint, $fallback--faint); + } + .alert { white-space: nowrap; text-overflow: ellipsis; @@ -509,6 +515,27 @@ nav { flex-grow: 0; } } +.badge { + display: inline-block; + border-radius: 99px; + min-width: 22px; + max-width: 22px; + min-height: 22px; + max-height: 22px; + font-size: 15px; + line-height: 22px; + text-align: center; + vertical-align: middle; + white-space: nowrap; + padding: 0; + + &.badge-notification { + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); + color: white; + color: var(--badgeNotificationText, white); + } +} .alert { margin: 0.35em; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3f22b690..87c89f6a 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,23 +4,6 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .unseen-count { - display: inline-block; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); - border-radius: 99px; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - color: white; - color: var(--badgeNotificationText, white); - font-size: 15px; - line-height: 22px; - text-align: center; - vertical-align: middle - } - .loadmore-error { color: $fallback--text; color: var(--text, $fallback--text); diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index eb6c4dd0..64f18720 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -4,7 +4,7 @@
{{$t('notifications.notifications')}} - {{unseenCount}} + {{unseenCount}}
{{$t('timeline.error_fetching')}} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8682d996..0edc7b71 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -471,6 +471,7 @@ .avatar { width: 48px; height: 48px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); overflow: hidden; diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 9c4f4ecd..2c33224b 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -163,11 +163,32 @@ background-size: cover; background-position: 50% 50%; + .separator { + margin: 1em; + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + } + + .panel-heading { + .badge, .alert, .btn, .faint { + margin-left: 1em; + } + .flex-spacer { + flex: 1; + } + } + .checkbox { + display: inline-flex; + align-items: baseline; + margin-right: 1em; + } + .btn { margin-left: 0; - margin-top: 1em; + padding: 0 1em; + min-width: 3em; min-height: 30px; - width: 10em; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index a444c6a7..2a7756ed 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -46,27 +46,80 @@ v-model="keepRoundness"> + + + +

{{$t('settings.style.switcher.save_load_hint')}}

-
Preview
+
+ {{$t('settings.style.preview.header')}} + + 99 + + + {{$t('settings.style.preview.error')}} + + + + + {{$t('settings.style.preview.header_faint')}} + +
( ͡° ͜ʖ ͡°)

Content

+
- A bunch of more content and - a nice lil' link + + + + {{$t('settings.style.preview.link')}} + + + +
- +
+ + + + {{$t('settings.style.preview.error')}} + + +
+
+ + + + + + + +
+ + + + {{$t('settings.style.preview.faint_link')}} + +
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 39f1b5bc..b69a09fd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -58,10 +58,7 @@ .timeline { .loadmore-text { - opacity: 0.8; - background-color: transparent; - color: $fallback--faint; - color: var(--panelFaint, $fallback--faint); + opacity: 1; } } diff --git a/src/i18n/en.json b/src/i18n/en.json index c70c488c..0530b66d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -170,6 +170,7 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", + "keep_fonts": "Keep fonts", "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", "reset": "Reset", "clear_all": "Clear all", @@ -250,6 +251,18 @@ "size": "Size (in px)", "weight": "Weight (boldness)", "custom": "Custom" + }, + "preview": { + "header": "Preview of header", + "error": "Example error", + "button": "Button", + "text": "A bunch of more content and {0}", + "input": "Just landed in L.A.", + "faint_link": "helpful manual", + "fine_print": "Read our {0} to learn nothing useful!", + "header_faint": "This is fine", + "checkbox": "I have skimmed over terms and conditions", + "link": "a nice lil' link" } } }, -- cgit v1.2.3-70-g09d2 From b45fc6c6523b1332c6422a5dc6eff95c11a32690 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 27 Nov 2018 04:54:59 +0300 Subject: updated preview window --- src/components/style_switcher/style_switcher.scss | 120 +++++++++++++++------- src/components/style_switcher/style_switcher.vue | 98 ++++++++++-------- src/components/timeline/timeline.vue | 2 +- src/i18n/en.json | 3 +- 4 files changed, 143 insertions(+), 80 deletions(-) (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 2c33224b..baf2b73a 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -163,32 +163,95 @@ background-size: cover; background-position: 50% 50%; - .separator { - margin: 1em; - border-bottom: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - } + .dummy { + .post { + font-family: var(--postFont); + display: flex; + + .content { + flex: 1; + + h4 { + margin-bottom: .25em; + } + + .icons { + margin-top: .5em; + display: flex; + + i { + margin-right: 1em; + } + } + } + } - .panel-heading { - .badge, .alert, .btn, .faint { - margin-left: 1em; + .after-post { + margin-top: 1em; + display: flex; + align-items: center; } - .flex-spacer { - flex: 1; + + .avatar, .avatar-alt{ + background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); + color: black; + font-family: sans-serif; + text-align: center; + margin-right: 1em; } - } - .checkbox { - display: inline-flex; - align-items: baseline; - margin-right: 1em; - } - .btn { - margin-left: 0; - padding: 0 1em; - min-width: 3em; - min-height: 30px; + .avatar-alt { + flex: 0 auto; + margin-left: 28px; + font-size: 12px; + width: 20px; + height: 20px; + line-height: 20px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + } + + .avatar { + flex: 0 auto; + width: 48px; + height: 48px; + font-size: 14px; + line-height: 48px; + } + + .actions { + display: flex; + align-items: baseline; + + .checkbox { + display: inline-flex; + align-items: baseline; + margin-right: 1em; + flex: 1; + } + } + + .separator { + margin: 1em; + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + } + + .panel-heading { + .badge, .alert, .btn, .faint { + margin-left: 1em; + } + .flex-spacer { + flex: 1; + } + } + .btn { + margin-left: 0; + padding: 0 1em; + min-width: 3em; + min-height: 30px; + } } } @@ -259,17 +322,4 @@ margin-left: .25em; margin-right: .25em; } - - .dummy { - .avatar { - background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); - color: black; - text-align: center; - height: 48px; - line-height: 48px; - width: 48px; - float: left; - margin-right: 1em; - } - } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 655e0589..fa173b98 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -60,9 +60,14 @@
- {{$t('settings.style.preview.header')}} - - 99 +
+ {{$t('settings.style.preview.header')}} + + 99 + +
+ + {{$t('settings.style.preview.header_faint')}} {{$t('settings.style.preview.error')}} @@ -70,56 +75,63 @@ - - - {{$t('settings.style.preview.header_faint')}} -
-
- ( ͡° ͜ʖ ͡°) -
-

Content

- -
+
+
+ ( ͡° ͜ʖ ͡°) +
+
+

+ Content +

- - - {{$t('settings.style.preview.link')}} - - + + + {{$t('settings.style.preview.mono')}} + + + {{$t('settings.style.preview.link')}} + + - - - - +
+ + + + +
+
+
-
-
+
+
+ :^) +
+
+ + + {{$t('settings.style.preview.faint_link')}} + + +
+
+
- {{$t('settings.style.preview.error')}} + -
-
- - - - - - - -
- - - - {{$t('settings.style.preview.faint_link')}} - - +
+ + + + + +
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index b69a09fd..bc7f74c2 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -10,7 +10,7 @@ -
+
{{$t('timeline.up_to_date')}}
diff --git a/src/i18n/en.json b/src/i18n/en.json index 74e7a556..8847b11e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -268,7 +268,8 @@ "header": "Preview of header", "error": "Example error", "button": "Button", - "text": "A bunch of more content and {0}", + "text": "A bunch of more {0} and {1}", + "mono": "content", "input": "Just landed in L.A.", "faint_link": "helpful manual", "fine_print": "Read our {0} to learn nothing useful!", -- cgit v1.2.3-70-g09d2 From 67ca21b2e6c5f76d1db3e7cfdd1c0ef019156172 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 2 Dec 2018 09:38:40 +0300 Subject: localization strings, fixes --- src/components/style_switcher/style_switcher.scss | 9 +- src/components/style_switcher/style_switcher.vue | 4 +- src/i18n/en.json | 2 +- src/i18n/ru.json | 112 +++++++++++++++++++++- 4 files changed, 119 insertions(+), 8 deletions(-) (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index baf2b73a..4db1a295 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -49,7 +49,7 @@ } &:not([type=number]):not([type=text]) { - align-self: center; + align-self: flex-start; } } } @@ -113,6 +113,7 @@ p { flex: 1; margin: 0; + margin-right: .5em; } margin-bottom: 1em; @@ -148,7 +149,7 @@ flex-wrap: wrap; margin-top: .5em; span { - margin: 0 .5em; + margin: 0 .5em .5em; } } @@ -204,8 +205,8 @@ flex: 0 auto; margin-left: 28px; font-size: 12px; - width: 20px; - height: 20px; + min-width: 20px; + min-height: 20px; line-height: 20px; border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index c0a7da69..814a6f17 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -83,7 +83,7 @@

- Content + {{$t('settings.style.preview.content')}}

@@ -224,7 +224,7 @@

{{ $t('settings.style.advanced_colors.borders') }}

- +
diff --git a/src/i18n/en.json b/src/i18n/en.json index 39da04d8..56179868 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -207,7 +207,6 @@ "common_colors": { "_tab_label": "Common", "main": "Common colors", - "foreground": "Panel header, top bar, buttons, text fields", "foreground_hint": "See \"Advanced\" tab for more detailed control", "rgbo": "Icons, accents, badges" }, @@ -273,6 +272,7 @@ }, "preview": { "header": "Preview of header", + "content": "Content", "error": "Example error", "button": "Button", "text": "A bunch of more {0} and {1}", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 921bf67e..63c0bd2a 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -138,8 +138,118 @@ "text": "Текст", "theme": "Тема", "theme_help": "Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.", + "theme_help_v2_1": "Вы так же можете перепоределить цвета определенных компонентов нажав соотв. галочку. Используйте кнопку \"Очистить всё\" чтобы снять все переопределения", + "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.", "tooltipRadius": "Всплывающие подсказки/уведомления", - "user_settings": "Настройки пользователя" + "user_settings": "Настройки пользователя", + "style": { + "switcher": { + "keep_shadows": "Оставить тени", + "keep_opacity": "Оставить прозрачность", + "keep_roundness": "Оставить скругление", + "keep_fonts": "Оставить шрифты", + "save_load_hint": "Опции \"оставить...\" позволяют сохранить текущие настройки при выборе другой темы или импорта её из файла. Так же они влияют на то какие компоненты будут сохранены при экспорте темы. Когда все галочки сняты все компоненты будут экспортированы.", + "reset": "Сбросить", + "clear_all": "Очистить всё", + "clear_opacity": "Очистить прозрачность" + }, + "common": { + "color": "Цвет", + "opacity": "Прозрачность", + "contrast": { + "hint": "Уровень контраста: {ratio}, что {level} {context}", + "level": { + "aa": "соответствует гайдлайну Level AA (минимальный)", + "aaa": "соответствует гайдлайну Level AAA (рекомендуемый)", + "bad": "не соответствует каким либо гайдлайнам" + }, + "context": { + "18pt": "для крупного (18pt+) текста", + "text": "для текста" + } + } + }, + "common_colors": { + "_tab_label": "Общие", + "main": "Общие цвета", + "foreground_hint": "См. вкладку \"Дополнительно\" для более детального контроля", + "rgbo": "Иконки, акценты, ярылки" + }, + "advanced_colors": { + "_tab_label": "Дополнительно", + "alert": "Фон уведомлений", + "alert_error": "Ошибки", + "badge": "Фон значков", + "badge_notification": "Уведомления", + "panel_header": "Заголовок панели", + "top_bar": "Верняя полоска", + "borders": "Границы", + "buttons": "Кнопки", + "inputs": "Поля ввода", + "faint_text": "Маловажный текст" + }, + "radii": { + "_tab_label": "Скругление" + }, + "shadows": { + "_tab_label": "Светотень", + "component": "Компонент", + "override": "Переопределить", + "shadow_id": "Тень №{value}", + "blur": "Размытие", + "spread": "Разброс", + "inset": "Внутренняя", + "hint": "Для теней вы так же можете использовать --variable в качестве цвета чтобы использовать CSS3-переменные. В таком случае прозрачность работать не будет.", + "filter_hint": { + "always_drop_shadow": "Внимание, эта тень всегда использует {0} когда браузер поддерживает это", + "drop_shadow_syntax": "{0} не поддерживает параметр {1} и ключевое слово {2}", + "avatar_inset": "Одновременное использование внутренних и внешних теней на (прозрачных) аватарках может дать не те результаты что вы ожидаете", + "spread_zero": "Тени с разбросом > 0 будут выглядеть как если бы разброс установлен в 0", + "inset_classic": "Внутренние тени будут использовать {0}" + }, + "components": { + "panel": "Панель", + "panelHeader": "Заголовок панели", + "topBar": "Верхняя полоска", + "avatar": "Аватарка (профиль)", + "avatarStatus": "Аватарка (в ленте)", + "popup": "Всплывающие подсказки", + "button": "Кнопки", + "buttonHover": "Кнопки (наведен курсор)", + "buttonPressed": "Кнопки (нажата)", + "buttonPressedHover": "Кнопки (нажата+наведен курсор)", + "input": "Поля ввода" + } + }, + "fonts": { + "_tab_label": "Шрифты", + "help": "Выберите тип шрифта для использования в интерфейсе. При выборе варианта \"другой\" надо ввести название шрифта в точности как он называется в системе.", + "components": { + "interface": "Интерфейс", + "input": "Поля ввода", + "post": "Текст постов", + "postCode": "Моноширинный текст в посте (форматирование)" + }, + "family": "Шрифт", + "size": "Размер (в пикселях)", + "weight": "Ширина", + "custom": "Другой" + }, + "preview": { + "header": "Пример", + "content": "Контент", + "error": "Ошибка стоп 000", + "button": "Кнопка", + "text": "Еще немного {0} и масенькая {1}", + "mono": "контента", + "input": "Что нового?", + "faint_link": "Его придется убрать", + "fine_print": "Если проблемы остались — ваш гуртовщик мыши плохо стоит. {0}.", + "header_faint": "Все идет по плану", + "checkbox": "Я подтверждаю что не было ни единого разрыва", + "link": "ссылка" + } + } }, "timeline": { "collapse": "Свернуть", -- cgit v1.2.3-70-g09d2 From 80c0745558cd5dc69364bc19ee5dc1b8b3ddc3e2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 2 Dec 2018 10:22:25 +0300 Subject: some more themes, fixes --- src/components/style_switcher/style_switcher.js | 3 +- src/components/style_switcher/style_switcher.scss | 6 + src/components/style_switcher/style_switcher.vue | 2 +- static/styles.json | 4 +- static/themes/breezy-dark.json | 139 ++++++++++++++++++++++ static/themes/breezy-light.json | 139 ++++++++++++++++++++++ 6 files changed, 289 insertions(+), 4 deletions(-) create mode 100644 static/themes/breezy-dark.json create mode 100644 static/themes/breezy-light.json (limited to 'src/components/style_switcher/style_switcher.scss') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index ccdb4c4f..d09185fa 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -497,10 +497,9 @@ export default { this.textColorLocal = rgb2hex(colors.fg) } + this.clearV1() const keys = new Set(version !== 1 ? Object.keys(colors) : []) if (version === 1 || version === 'l1') { - // V1 ignores the rest - this.clearV1() keys .add('bg') .add('link') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 4db1a295..c8c5d9dd 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -135,6 +135,12 @@ display: flex; justify-content: center; align-items: baseline; + flex-wrap: wrap; + + .presets, + .import-export { + margin-bottom: .5em; + } .import-export { display: flex; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 814a6f17..9de60f7b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -2,7 +2,7 @@
-
+
{{$t('settings.presets')}}