From fb29e7c73da9520d2d08bae0757bb4ff7803ca11 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 3 Oct 2018 21:21:48 +0300 Subject: more workings and even less explosions. --- src/i18n/en.json | 1 + 1 file changed, 1 insertion(+) (limited to 'src/i18n') diff --git a/src/i18n/en.json b/src/i18n/en.json index 8c7360e9..d825dcc1 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -108,6 +108,7 @@ "follow_import_error": "Error importing followers", "follows_imported": "Follows imported! Processing them will take a while.", "foreground": "Foreground", + "opacity": "Opacity", "general": "General", "hide_attachments_in_convo": "Hide attachments in conversations", "hide_attachments_in_tl": "Hide attachments in timeline", -- cgit v1.2.3-70-g09d2 From 32132e225c749e506285370a2a065bb71920ce59 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Nov 2018 20:58:20 +0300 Subject: localization and small fixes --- src/components/color_input/color_input.vue | 17 ++++----- src/components/opacity_input/opacity_input.vue | 17 ++++----- src/components/shadow_control/shadow_control.vue | 27 +++++++------- src/components/style_switcher/style_switcher.js | 1 + src/components/style_switcher/style_switcher.vue | 44 +++++++++++----------- src/i18n/en.json | 47 +++++++++++++++++++++++- 6 files changed, 99 insertions(+), 54 deletions(-) (limited to 'src/i18n') diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index ea9fb3c4..b756d265 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -1,17 +1,16 @@ @@ -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 94b481fa9c2bd5a9e135b589dcb78aa5fe802c87 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 00:19:28 +0300 Subject: cosmetic fixes --- src/App.scss | 9 ++++++--- src/components/font_control/font_control.vue | 23 ++++++++++++++++++----- src/i18n/en.json | 3 ++- 3 files changed, 26 insertions(+), 9 deletions(-) (limited to 'src/i18n') diff --git a/src/App.scss b/src/App.scss index 45491fd2..50645ec8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -115,7 +115,7 @@ input, textarea, .select { font-family: sans-serif; font-family: var(--inputFont, sans-serif); font-size: 14px; - padding: 8px 7px; + padding: 8px .5em; box-sizing: border-box; display: inline-block; position: relative; @@ -147,10 +147,13 @@ input, textarea, .select { appearance: none; background: transparent; border: none; - margin: 0; color: $fallback--text; color: var(--text, $fallback--text); - padding: 4px 2em 3px 3px; + margin: 0; + padding: 0 2em 0 .2em; + font-family: sans-serif; + font-family: var(--inputFont, sans-serif); + font-size: 14px; width: 100%; z-index: 1; height: 29px; diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index 004b5546..e97a2640 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -1,5 +1,5 @@ @@ -71,6 +71,9 @@ export default { this.$emit('input', this.lValue) } }, + isCustom () { + return this.preset === 'custom' + }, preset: { get () { console.log(this.family) @@ -97,5 +100,15 @@ export default { input.custom-font { min-width: 10em; } + &.custom { + .select { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .custom-font { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } } diff --git a/src/i18n/en.json b/src/i18n/en.json index 6f439f65..c70c488c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -248,7 +248,8 @@ }, "family": "Font name", "size": "Size (in px)", - "weight": "Weight (boldness)" + "weight": "Weight (boldness)", + "custom": "Custom" } } }, -- 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/i18n') 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 2ebc06e30f009204eb289057730f9fa4a148d499 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 21:07:22 +0300 Subject: fixed keep checkboxes working when exporting --- src/components/style_switcher/style_switcher.js | 51 +++++++++++++++++++------ src/i18n/en.json | 2 +- 2 files changed, 40 insertions(+), 13 deletions(-) (limited to 'src/i18n') diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 0cceee4c..ccdb4c4f 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -332,16 +332,34 @@ export default { }, methods: { exportCurrentTheme () { + const saveEverything = !this.keepFonts && !this.keepShadows && !this.keepColors && !this.keepOpacity && !this.keepRoundness + const theme = { + shadows: this.shadowsLocal, + fonts: this.fontsLocal, + opacity: this.currentOpacity, + colors: this.currentColors, + radii: this.currentRadii + } + + if (!this.keepFonts && !saveEverything) { + delete theme.fonts + } + if (!this.keepShadows && !saveEverything) { + delete theme.shadows + } + if (!this.keepOpacity && !saveEverything) { + delete theme.opacity + } + if (!this.keepColors && !saveEverything) { + delete theme.colors + } + if (!this.keepRoundness && !saveEverything) { + delete theme.radii + } + const stringified = JSON.stringify({ // To separate from other random JSON files and possible future theme formats - _pleroma_theme_version: 2, - theme: { - shadows: this.shadowsLocal, - fonts: this.fontsLocal, - opacity: this.currentOpacity, - colors: this.currentColors, - radii: this.currentRadii - } + _pleroma_theme_version: 2, theme }, null, 2) // Pretty-print and indent with 2 spaces // Create an invisible link with a data url and simulate a click @@ -404,7 +422,9 @@ export default { }, clearAll () { - this.normalizeLocalState(this.$store.state.config.customTheme) + const state = this.$store.state.config.customTheme + const version = state.colors ? 2 : 'l1' + this.normalizeLocalState(this.$store.state.config.customTheme, version) }, // Clears all the extra stuff when loading V1 theme @@ -442,9 +462,13 @@ export default { }, /** - * This applies stored theme data onto form. + * This applies stored theme data onto form. Supports three versions of data: + * v2 (version = 2) - newer version of themes. + * v1 (version = 1) - older version of themes (import from file) + * v1l (version = l1) - older version of theme (load from local storage) + * v1 and v1l differ because of way themes were stored/exported. * @param {Object} input - input data - * @param {Number} version - version of data. 0 means try to guess based on data. + * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type */ normalizeLocalState (input, version = 0) { const colors = input.colors || input @@ -465,6 +489,8 @@ export default { } } + console.log(version) + // Stuff that differs between V1 and V2 if (version === 1) { this.fgColorLocal = rgb2hex(colors.btn) @@ -472,7 +498,7 @@ export default { } const keys = new Set(version !== 1 ? Object.keys(colors) : []) - if (version === 1) { + if (version === 1 || version === 'l1') { // V1 ignores the rest this.clearV1() keys @@ -483,6 +509,7 @@ export default { .add('cGreen') .add('cOrange') } + keys.forEach(key => { this[key + 'ColorLocal'] = rgb2hex(colors[key]) }) diff --git a/src/i18n/en.json b/src/i18n/en.json index ab7b954a..74e7a556 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -183,7 +183,7 @@ "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.", + "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.", "reset": "Reset", "clear_all": "Clear all", "clear_opacity": "Clear opacity" -- 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/i18n') 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 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 30 Nov 2018 16:39:07 +0300 Subject: avatars shadows, also allows drop-shadow use --- src/components/notification/notification.js | 3 ++- src/components/notification/notification.vue | 2 +- src/components/notifications/notifications.scss | 6 +++++ src/components/status/status.js | 3 ++- src/components/status/status.vue | 13 +++++++++- src/components/style_switcher/style_switcher.vue | 12 ++++++++++ .../user_card_content/user_card_content.js | 3 ++- .../user_card_content/user_card_content.vue | 7 +++++- src/i18n/en.json | 7 ++++++ src/modules/interface.js | 6 +++++ src/services/style_setter/style_setter.js | 28 ++++++++++++++++++++-- 11 files changed, 82 insertions(+), 8 deletions(-) (limited to 'src/i18n') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index c786f2cc..4dea63bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/ const Notification = { data () { return { - userExpanded: false + userExpanded: false, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, props: [ diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 72c1ca69..f98afbe0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 87c89f6a..d17ae25d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -49,11 +49,17 @@ .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); overflow: hidden; line-height: 0; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/components/status/status.js b/src/components/status/status.js index 10716583..725bc3f8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -33,7 +33,8 @@ const Status = { showingTall: false, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject - : !this.$store.state.config.collapseMessageWithSubject + : !this.$store.state.config.collapseMessageWithSubject, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4541c560..26be335c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -21,7 +21,7 @@
- +
@@ -464,8 +464,14 @@ .status .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } } .avatar { @@ -477,6 +483,11 @@ overflow: hidden; position: relative; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + img { width: 100%; height: 100%; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fa173b98..66fe0f6b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -278,6 +278,18 @@
+
+ + filter: drop-shadow() + + + drop-shadow + spread-radius + inset + +

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

+
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 254d1666..97cd4983 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -7,7 +7,8 @@ export default { return { hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats - : this.$store.state.config.hideUserStats + : this.$store.state.config.hideUserStats, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5529948e..cca418ff 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -10,7 +10,7 @@
- +
@@ -159,6 +159,11 @@ box-shadow: var(--avatarShadow); object-fit: cover; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 8847b11e..7f5a2a4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -236,6 +236,13 @@ "spread": "Spread", "inset": "Inset", "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "filter_hint": { + "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", + "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", + "inset_ignored": "Inset shadows using will be ignored", + "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + }, "components": { "panel": "Panel", "panelHeader": "Panel header", diff --git a/src/modules/interface.js b/src/modules/interface.js index 07489685..132fb08d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -4,6 +4,12 @@ const defaultState = { settings: { currentSaveStateNotice: null, noticeClearTimeout: null + }, + browserSupport: { + cssFilter: window.CSS && window.CSS.supports && ( + window.CSS.supports('filter', 'drop-shadow(0 0)') || + window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') + ) } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 7c375206..cff81c40 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -110,6 +110,24 @@ const getCssShadow = (input) => { ]).join(' ')).join(', ') } +const getCssShadowFilter = (input) => { + if (input.length === 0) { + return 'none' + } + + return input + // drop-shadow doesn't support inset or spread + .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0) + .map((shad) => [ + shad.x, + shad.y, + // drop-shadow's blur is twice as strong compared to box-shadow + shad.blur / 2 + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha) + ]).join(' ')).join(', ') +} + const getCssColor = (input, a) => { let rgb = {} if (typeof input === 'object') { @@ -384,7 +402,12 @@ const generateShadows = (input) => { return { rules: { - shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + shadows: Object + .entries(shadows) + // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally + // convert all non-inset shadows into filter: drop-shadow() to boost performance + .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .join(';') }, theme: { shadows @@ -467,5 +490,6 @@ export { generateFonts, generatePreset, composePreset, - getCssShadow + getCssShadow, + getCssShadowFilter } -- cgit v1.2.3-70-g09d2 From bee738c815f287c4605eafd52c5565cdb07d5721 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 2 Dec 2018 08:47:55 +0300 Subject: making inset shadows work on avatars again --- src/components/notifications/notifications.scss | 4 +-- src/components/status/status.vue | 8 +++--- src/components/style_switcher/style_switcher.vue | 7 +++-- .../user_card_content/user_card_content.vue | 4 +-- src/i18n/en.json | 6 ++-- src/services/style_setter/style_setter.js | 32 ++++++++++++++-------- 6 files changed, 36 insertions(+), 25 deletions(-) (limited to 'src/i18n') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index d17ae25d..a6468e01 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -56,8 +56,8 @@ line-height: 0; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } &.animated::before { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6597d56b..428383e3 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -469,8 +469,8 @@ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } } @@ -484,8 +484,8 @@ position: relative; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } img { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 66fe0f6b..c0a7da69 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -282,12 +282,15 @@ filter: drop-shadow() - +

{{$t('settings.style.shadows.filter_hint.avatar_inset')}}

+ drop-shadow spread-radius inset -

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+ + box-shadow +

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index cca418ff..e8b0ebf9 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -160,8 +160,8 @@ object-fit: cover; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarShadowInset); + filter: var(--avatarShadowFilter) } &.animated::before { diff --git a/src/i18n/en.json b/src/i18n/en.json index 7f5a2a4f..39da04d8 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -238,10 +238,10 @@ "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", "filter_hint": { "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", - "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.", + "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.", "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", - "inset_ignored": "Inset shadows using will be ignored", - "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + "inset_classic": "Inset shadows will be using {0}" }, "components": { "panel": "Panel", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index cff81c40..44a36c88 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -94,20 +94,22 @@ const setColors = (input, commit) => { commit('setOption', { name: 'colors', value: theme.colors }) } -const getCssShadow = (input) => { +const getCssShadow = (input, usesDropShadow) => { if (input.length === 0) { return 'none' } - return input.map((shad) => [ - shad.x, - shad.y, - shad.blur, - shad.spread - ].map(_ => _ + 'px').concat([ - getCssColor(shad.color, shad.alpha), - shad.inset ? 'inset' : '' - ]).join(' ')).join(', ') + return input + .filter(_ => usesDropShadow ? _.inset : _) + .map((shad) => [ + shad.x, + shad.y, + shad.blur, + shad.spread + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha), + shad.inset ? 'inset' : '' + ]).join(' ')).join(', ') } const getCssShadowFilter = (input) => { @@ -125,7 +127,9 @@ const getCssShadowFilter = (input) => { shad.blur / 2 ].map(_ => _ + 'px').concat([ getCssColor(shad.color, shad.alpha) - ]).join(' ')).join(', ') + ]).join(' ')) + .map(_ => `drop-shadow(${_})`) + .join(' ') } const getCssColor = (input, a) => { @@ -406,7 +410,11 @@ const generateShadows = (input) => { .entries(shadows) // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally // convert all non-inset shadows into filter: drop-shadow() to boost performance - .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .map(([k, v]) => [ + `--${k}Shadow: ${getCssShadow(v)}`, + `--${k}ShadowFilter: ${getCssShadowFilter(v)}`, + `--${k}ShadowInset: ${getCssShadow(v, true)}` + ].join(';')) .join(';') }, theme: { -- 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/i18n') 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 1e56cec2aaf8683a47d67ee657659b95c7a4d3b6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 2 Dec 2018 10:23:41 +0300 Subject: missing string --- src/i18n/ru.json | 1 + 1 file changed, 1 insertion(+) (limited to 'src/i18n') diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 63c0bd2a..58a6eae5 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -100,6 +100,7 @@ "import_followers_from_a_csv_file": "Импортировать читаемых из файла .csv", "import_theme": "Загрузить Тему", "inputRadius": "Поля ввода", + "checkboxRadius": "Чекбоксы", "interfaceLanguage": "Язык интерфейса", "limited_availability": "Не доступно в вашем браузере", "links": "Ссылки", -- cgit v1.2.3-70-g09d2 From 47b0b385f41d925d38642329937423cf0022865d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 5 Dec 2018 11:37:01 +0300 Subject: Added user option to hide instance-specific panel, rearranged config screen to better categorize it / adjustments to language selector --- .../instance_specific_panel/instance_specific_panel.js | 3 +++ .../instance_specific_panel/instance_specific_panel.vue | 2 +- .../interface_language_switcher.vue | 3 +++ src/components/settings/settings.js | 4 ++++ src/components/settings/settings.vue | 14 +++++++++++--- src/i18n/en.json | 2 ++ src/i18n/ru.json | 2 ++ 7 files changed, 26 insertions(+), 4 deletions(-) (limited to 'src/i18n') diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js index 09e3d055..9bb5e945 100644 --- a/src/components/instance_specific_panel/instance_specific_panel.js +++ b/src/components/instance_specific_panel/instance_specific_panel.js @@ -2,6 +2,9 @@ const InstanceSpecificPanel = { computed: { instanceSpecificPanelContent () { return this.$store.state.instance.instanceSpecificPanelContent + }, + show () { + return !this.$store.state.config.hideISP } } } diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue index ca8e00c0..a7b74667 100644 --- a/src/components/instance_specific_panel/instance_specific_panel.vue +++ b/src/components/instance_specific_panel/instance_specific_panel.vue @@ -1,5 +1,5 @@
-

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

- +

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

+
    +
  • + +
    • +
  • + + +
    • +

{{$t('nav.timeline')}}

diff --git a/src/i18n/en.json b/src/i18n/en.json index 8fd546ef..24282cf5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -116,6 +116,7 @@ "general": "General", "hide_attachments_in_convo": "Hide attachments in conversations", "hide_attachments_in_tl": "Hide attachments in timeline", + "hide_isp": "Hide instance-specific panel", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "hide_user_stats": "Hide user statistics (e.g. the number of followers)", "import_followers_from_a_csv_file": "Import follows from a csv file", @@ -123,6 +124,7 @@ "inputRadius": "Input fields", "instance_default": "(default: {value})", "instance_default_simple" : "(default)", + "interface": "Interface", "interfaceLanguage": "Interface language", "invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.", "limited_availability": "Unavailable in your browser", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 9c28ccf4..ceec9f7b 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -97,9 +97,11 @@ "general": "Общие", "hide_attachments_in_convo": "Прятать вложения в разговорах", "hide_attachments_in_tl": "Прятать вложения в ленте", + "hide_isp": "Скрыть серверную панель", "import_followers_from_a_csv_file": "Импортировать читаемых из файла .csv", "import_theme": "Загрузить Тему", "inputRadius": "Поля ввода", + "interface": "Интерфейс", "interfaceLanguage": "Язык интерфейса", "limited_availability": "Не доступно в вашем браузере", "links": "Ссылки", -- cgit v1.2.3-70-g09d2 From 6636c0f551a146622a1db40582140c59d3eb650d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 5 Dec 2018 12:01:24 +0300 Subject: mobile fixes --- src/components/style_switcher/style_switcher.scss | 6 ++++++ src/components/tab_switcher/tab_switcher.scss | 4 +++- src/i18n/en.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) (limited to 'src/i18n') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index c8c5d9dd..f53f00a0 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -248,6 +248,12 @@ .panel-heading { .badge, .alert, .btn, .faint { margin-left: 1em; + white-space: nowrap; + } + .faint { + text-overflow: ellipsis; + min-width: 2em; + overflow-x: hidden; } .flex-spacer { flex: 1; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index d0e5ea87..fbd3321b 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -11,7 +11,8 @@ position: relative; justify-content: center; width: 100%; - overflow: hidden; + overflow-y: hidden; + overflow-x: auto; padding-top: 5px; height: 32px; box-sizing: border-box; @@ -33,6 +34,7 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 5px 1em 99px; + white-space: nowrap; &:not(.active) { z-index: 4; diff --git a/src/i18n/en.json b/src/i18n/en.json index 890ed6c4..c0d30b59 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -273,7 +273,7 @@ "custom": "Custom" }, "preview": { - "header": "Preview of header", + "header": "Preview", "content": "Content", "error": "Example error", "button": "Button", -- cgit v1.2.3-70-g09d2 From f9ff839b1af7cdae2bc9ff5090844ea6b1fac6ac Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 19:17:29 +0400 Subject: Better styling for client-side validation. Add I18n for validation errors. --- src/components/registration/registration.js | 30 +++++++++++++------- src/components/registration/registration.vue | 41 +++++++++++++++++++++++++--- src/i18n/en.json | 10 ++++++- src/i18n/ru.json | 10 ++++++- src/modules/users.js | 17 +++++++----- 5 files changed, 85 insertions(+), 23 deletions(-) (limited to 'src/i18n') diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 69474585..67c052f1 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,5 +1,5 @@ import { validationMixin } from 'vuelidate' -import { required } from 'vuelidate/lib/validators' +import { required, sameAs, email } from 'vuelidate/lib/validators' import { mapActions, mapState } from 'vuex' import { SIGN_UP } from '../../mutation_types' @@ -16,24 +16,29 @@ const registration = { }), validations: { user: { - email: { required }, + email: { required, email }, username: { required }, password: { required }, - confirm: { required } + confirm: { + required, + sameAsPassword: sameAs('password') + } } }, created () { - if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) { + if ((!this.registrationOpen && !this.token) || this.signedIn) { this.$router.push('/main/all') } - // Seems like this doesn't work at first page open for some reason - if (this.$store.state.instance.registrationOpen && this.token) { - this.$router.push('/registration') - } + // // Seems like this doesn't work at first page open for some reason + // if (this.$store.state.instance.registrationOpen && this.token) { + // this.$router.push('/registration') + // } }, computed: { token () { return this.$route.params.token }, ...mapState({ + registrationOpen: (state) => state.instance.registrationOpen, + signedIn: (state) => !!state.users.currentUser, isPending: (state) => state.users[SIGN_UP.isPending], serverValidationErrors: (state) => state.users[SIGN_UP.errors], termsofservice: (state) => state.instance.tos @@ -41,14 +46,19 @@ const registration = { }, methods: { ...mapActions(['signUp']), - submit () { + async submit () { this.user.nickname = this.user.username this.user.token = this.token this.$v.$touch() if (!this.$v.$invalid) { - this.signUp(this.user) + try { + await this.signUp(this.user) + this.$router.push('/main/friends') + } catch (error) { + console.log("Registration failed: " + error) + } } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 73200990..5f6357a2 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -12,7 +12,11 @@
- Username is required. +
    +
  • + {{$t('registration.validations.username_required')}} +
    • +
@@ -25,7 +29,14 @@
- Email is required. +
    +
  • + {{$t('registration.validations.email_required')}} +
    • +
  • + {{$t('registration.validations.email_valid')}} +
    • +
@@ -38,7 +49,11 @@
- Password is required. +
    +
  • + {{$t('registration.validations.password_required')}} +
    • +
@@ -46,7 +61,14 @@
- Password confirmation is required. +
    +
  • + {{$t('registration.validations.password_confirmation_required')}} +
    • +
  • + {{$t('registration.validations.password_confirmation_match')}} +
    • +