From 29f69de240530048a31319f8a78274ca7d607853 Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Thu, 28 Jun 2018 01:08:06 +0200 Subject: [PATCH 01/12] Add theme export feature --- src/components/style_switcher/style_switcher.js | 17 +++++++++++++++++ .../style_switcher/style_switcher.vue | 3 +++ src/i18n/messages.js | 1 + 3 files changed, 21 insertions(+) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 6f4845c44..041d4b174 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -51,6 +51,23 @@ export default { this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5 }, methods: { + exportCurrentTheme () { + const stringified = JSON.stringify({ + colors: this.$store.state.config.colors, + radii: this.$store.state.config.radii + }, null, 2) // Pretty-print and indent with 2 spaces + + // Create an invisible link with a data url and simulate a click + const e = document.createElement('a') + e.setAttribute('download', 'pleroma_theme.json') + e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified)) + e.style.display = 'none' + + document.body.appendChild(e) + e.click() + document.body.removeChild(e) + }, + setCustomTheme () { if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) { // reset to picked themes diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 7acba1dc4..c8d955e15 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -8,6 +8,9 @@ +
+ +

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

diff --git a/src/i18n/messages.js b/src/i18n/messages.js index e9d6e1768..ee0fcd2a2 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -288,6 +288,7 @@ const en = { settings: 'Settings', theme: 'Theme', presets: 'Presets', + export_theme: 'Export current theme', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', radii_help: 'Set up interface edge rounding (in pixels)', background: 'Background', From f36984c4a4d1411d4ec4c6aad7f2740fe676a4fa Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Thu, 28 Jun 2018 02:07:50 +0200 Subject: [PATCH 02/12] Refactor theme settings state initialization --- .../style_switcher/style_switcher.js | 38 ++++++++++--------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 041d4b174..d5881a31d 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -32,23 +32,7 @@ export default { }) }, mounted () { - this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg) - this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.btn) - this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) - this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) - - this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed) - this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue) - this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen) - this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange) - - this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4 - this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4 - this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10 - this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5 - this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50 - this.tooltipRadiusLocal = this.$store.state.config.radii.tooltipRadius || 2 - this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5 + this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii) }, methods: { exportCurrentTheme () { @@ -112,6 +96,26 @@ export default { attachmentRadius: this.attachmentRadiusLocal }}) } + }, + + normalizeLocalState (colors, radii) { + this.bgColorLocal = rgbstr2hex(colors.bg) + this.btnColorLocal = rgbstr2hex(colors.btn) + this.textColorLocal = rgbstr2hex(colors.fg) + this.linkColorLocal = rgbstr2hex(colors.link) + + this.redColorLocal = rgbstr2hex(colors.cRed) + this.blueColorLocal = rgbstr2hex(colors.cBlue) + this.greenColorLocal = rgbstr2hex(colors.cGreen) + this.orangeColorLocal = rgbstr2hex(colors.cOrange) + + 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 } }, watch: { From d2b79856c61391e56009cdf313e332ee950b9081 Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Thu, 28 Jun 2018 02:59:57 +0200 Subject: [PATCH 03/12] Add theme import feature --- .../style_switcher/style_switcher.js | 22 +++++++++++++++++++ .../style_switcher/style_switcher.vue | 1 + src/i18n/messages.js | 1 + 3 files changed, 24 insertions(+) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d5881a31d..7ab56ea2d 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -52,6 +52,28 @@ export default { document.body.removeChild(e) }, + importTheme () { + const filePicker = document.createElement('input') + filePicker.setAttribute('type', 'file') + filePicker.setAttribute('accept', '.json') + + filePicker.addEventListener('change', event => { + if (event.target.files[0]) { + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const parsed = JSON.parse(target.result) + this.normalizeLocalState(parsed.colors, parsed.radii) + } + reader.readAsText(event.target.files[0]) + } + }) + + document.body.appendChild(filePicker) + filePicker.click() + document.body.removeChild(filePicker) + }, + setCustomTheme () { if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) { // reset to picked themes diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index c8d955e15..0bc08bd7c 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -10,6 +10,7 @@
+

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

diff --git a/src/i18n/messages.js b/src/i18n/messages.js index ee0fcd2a2..cc9090c77 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -289,6 +289,7 @@ const en = { theme: 'Theme', presets: 'Presets', export_theme: 'Export current theme', + import_theme: 'Load saved theme', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', radii_help: 'Set up interface edge rounding (in pixels)', background: 'Background', From fdc64cfa8aa9f85e4508a27429f339a946613420 Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Thu, 28 Jun 2018 03:10:37 +0200 Subject: [PATCH 04/12] Add German localization for theme import/export --- src/i18n/messages.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/i18n/messages.js b/src/i18n/messages.js index cc9090c77..c44c08ac3 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -48,6 +48,8 @@ const de = { settings: 'Einstellungen', theme: 'Farbschema', presets: 'Voreinstellungen', + export_theme: 'Aktuelles Theme exportieren', + import_theme: 'Gespeichertes Theme laden', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen', radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen', background: 'Hintergrund', From 8f7919388391742671ef0398e017383d7f0b2bc5 Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Wed, 4 Jul 2018 13:49:20 +0200 Subject: [PATCH 05/12] Unify button styles and use min-width This seemed to be the same across multiple components anyway. Switched to min-width to allow for buttons with longer text, e.g. from other languages. --- src/App.scss | 2 ++ src/components/login_form/login_form.vue | 5 ----- src/components/post_status_form/post_status_form.vue | 4 ---- src/components/settings/settings.vue | 2 -- 4 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/App.scss b/src/App.scss index f830a33bc..402e7432b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,6 +63,8 @@ button{ box-shadow: 0px 0px 2px black; font-size: 14px; font-family: sans-serif; + min-width: 10em; + min-height: 2em; &:hover { box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index b7fed48af..d2bdffcb4 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -34,11 +34,6 @@ @import '../../_variables.scss'; .login-form { - .btn { - min-height: 28px; - width: 10em; - } - .error { text-align: center; } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 7aa0e7c44..2dda6a6eb 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -124,10 +124,6 @@ padding: 0.5em; height: 32px; - button { - width: 10em; - } - p { margin: 0.35em; padding: 0.35em; diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6245e7584..4786b9300 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -83,8 +83,6 @@ .btn { margin-top: 1em; - min-height: 28px; - width: 10em; } } .setting-list { From 2a87e29180641621301a9e04bc2f493e01f4ca33 Mon Sep 17 00:00:00 2001 From: Ole Bertram Date: Wed, 4 Jul 2018 14:25:40 +0200 Subject: [PATCH 06/12] Add validation of the imported theme and the corresponding warning message --- .../style_switcher/style_switcher.js | 18 ++++++++++++++++-- .../style_switcher/style_switcher.vue | 6 ++++++ src/i18n/messages.js | 2 ++ 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 7ab56ea2d..95c15b496 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -5,6 +5,7 @@ export default { return { availableStyles: [], selected: this.$store.state.config.theme, + invalidThemeImported: false, bgColorLocal: '', btnColorLocal: '', textColorLocal: '', @@ -37,6 +38,8 @@ export default { methods: { exportCurrentTheme () { const stringified = JSON.stringify({ + // To separate from other random JSON files and possible future theme formats + _pleroma_theme_version: 1, colors: this.$store.state.config.colors, radii: this.$store.state.config.radii }, null, 2) // Pretty-print and indent with 2 spaces @@ -53,6 +56,7 @@ export default { }, importTheme () { + this.invalidThemeImported = false const filePicker = document.createElement('input') filePicker.setAttribute('type', 'file') filePicker.setAttribute('accept', '.json') @@ -62,8 +66,18 @@ export default { // eslint-disable-next-line no-undef const reader = new FileReader() reader.onload = ({target}) => { - const parsed = JSON.parse(target.result) - this.normalizeLocalState(parsed.colors, parsed.radii) + try { + const parsed = JSON.parse(target.result) + if (parsed._pleroma_theme_version === 1) { + this.normalizeLocalState(parsed.colors, parsed.radii) + } else { + // A theme from the future, spooky + this.invalidThemeImported = true + } + } catch (e) { + // This will happen both if there is a JSON syntax error or the theme is missing components + this.invalidThemeImported = true + } } reader.readAsText(event.target.files[0]) } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 0bc08bd7c..1439763d7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -11,6 +11,7 @@
+

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

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

@@ -135,6 +136,11 @@ margin-right: 1em; } +.import-warning { + color: $fallback--cRed; + color: var(--cRed, $fallback--cRed); +} + .radius-container, .color-container { display: flex; diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c44c08ac3..3951651d5 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -50,6 +50,7 @@ const de = { presets: 'Voreinstellungen', export_theme: 'Aktuelles Theme exportieren', import_theme: 'Gespeichertes Theme laden', + invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen', radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen', background: 'Hintergrund', @@ -293,6 +294,7 @@ const en = { export_theme: 'Export current theme', import_theme: 'Load saved theme', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', + invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.', radii_help: 'Set up interface edge rounding (in pixels)', background: 'Background', foreground: 'Foreground', From 61d40f40aee8b596f0b068091c43033ecf3aa25b Mon Sep 17 00:00:00 2001 From: William Pitcock Date: Sat, 23 Jun 2018 07:53:15 +0000 Subject: [PATCH 07/12] allow default visibility scope to be configured --- src/App.scss | 20 +++++++++++++++++++ .../post_status_form/post_status_form.js | 2 +- .../post_status_form/post_status_form.vue | 19 ------------------ src/components/user_settings/user_settings.js | 20 +++++++++++++++++-- .../user_settings/user_settings.vue | 11 +++++++++- src/i18n/messages.js | 3 ++- 6 files changed, 51 insertions(+), 24 deletions(-) diff --git a/src/App.scss b/src/App.scss index 2426b9982..43786e9de 100644 --- a/src/App.scss +++ b/src/App.scss @@ -433,3 +433,23 @@ nav { text-align: right; padding-right: 20px; } + +.visibility-tray { + font-size: 1.2em; + padding: 3px; + cursor: pointer; + + .selected { + color: $fallback--lightFg; + color: var(--lightFg, $fallback--lightFg); + } +} + +.visibility-notice { + padding: .5em; + border: 1px solid $fallback--faint; + border: 1px solid var(--faint, $fallback--faint); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); +} + diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 61f2ac0a0..ff3bb9062 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -54,7 +54,7 @@ const PostStatusForm = { newStatus: { status: statusText, files: [], - visibility: this.messageScope || 'public' + visibility: this.messageScope || this.$store.state.users.currentUser.default_scope }, caret: 0 } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 7aa0e7c44..3749271d7 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -99,25 +99,6 @@ } } -.post-status-form .visibility-tray { - font-size: 1.2em; - padding: 3px; - cursor: pointer; - - .selected { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); - } -} - -.visibility-notice { - padding: .5em; - border: 1px solid $fallback--faint; - border: 1px solid var(--faint, $fallback--faint); - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); -} - .post-status-form, .login { .form-bottom { display: flex; diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 443e63dd2..b5b9dda6f 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -6,6 +6,7 @@ const UserSettings = { newname: this.$store.state.users.currentUser.name, newbio: this.$store.state.users.currentUser.description, newlocked: this.$store.state.users.currentUser.locked, + newdefaultScope: this.$store.state.users.currentUser.default_scope, followList: null, followImportError: false, followsImported: false, @@ -29,20 +30,35 @@ const UserSettings = { }, pleromaBackend () { return this.$store.state.config.pleromaBackend - } + }, + scopeOptionsEnabled () { + return this.$store.state.config.scopeOptionsEnabled + }, + vis () { + return { + public: { selected: this.newdefaultScope === 'public' }, + unlisted: { selected: this.newdefaultScope === 'unlisted' }, + private: { selected: this.newdefaultScope === 'private' }, + direct: { selected: this.newdefaultScope === 'direct' } + } + }, }, methods: { updateProfile () { const name = this.newname const description = this.newbio const locked = this.newlocked - this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked}}).then((user) => { + const default_scope = this.newdefaultScope + this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope}}).then((user) => { if (!user.error) { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) } }) }, + changeVis (visibility) { + this.newdefaultScope = visibility + }, uploadFile (slot, e) { const file = e.target.files[0] if (!file) { return } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 881b0fa18..1a52da0f9 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -10,9 +10,18 @@

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

-
+

+

+
+ +
+ + + + +
diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 003df68cd..185db5d90 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -332,7 +332,8 @@ const en = { confirm_new_password: 'Confirm new password', changed_password: 'Password changed successfully!', change_password_error: 'There was an issue changing your password.', - lock_account_description: 'Restrict your account to approved followers only' + lock_account_description: 'Restrict your account to approved followers only', + default_vis: 'Default visibility scope' }, notifications: { notifications: 'Notifications', From fe06beae18418c015537f187af9fff5e735f0f35 Mon Sep 17 00:00:00 2001 From: William Pitcock Date: Wed, 27 Jun 2018 13:28:07 +0000 Subject: [PATCH 08/12] fix lint issues --- src/components/user_settings/user_settings.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index b5b9dda6f..2b2de9135 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -41,13 +41,14 @@ const UserSettings = { private: { selected: this.newdefaultScope === 'private' }, direct: { selected: this.newdefaultScope === 'direct' } } - }, + } }, methods: { updateProfile () { const name = this.newname const description = this.newbio const locked = this.newlocked + /* eslint-disable camelcase */ const default_scope = this.newdefaultScope this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope}}).then((user) => { if (!user.error) { @@ -55,6 +56,7 @@ const UserSettings = { this.$store.commit('setCurrentUser', user) } }) + /* eslint-enable camelcase */ }, changeVis (visibility) { this.newdefaultScope = visibility From 56ddeec8f3452a5b75af713a40d0b5e8fa75b3cd Mon Sep 17 00:00:00 2001 From: Foxhkron Date: Sun, 19 Aug 2018 01:23:03 +0200 Subject: [PATCH 09/12] Merge upstream --- src/components/user_settings/user_settings.js | 6 +++- .../user_settings/user_settings.vue | 32 +++++++++++++------ src/i18n/messages.js | 5 ++- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 2b2de9135..f046885ed 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -18,7 +18,8 @@ const UserSettings = { deleteAccountError: false, changePasswordInputs: [ '', '', '' ], changedPassword: false, - changePasswordError: false + changePasswordError: false, + activeTab: 'profile' } }, components: { @@ -235,6 +236,9 @@ const UserSettings = { this.changePasswordError = res.error } }) + }, + activateTab (tabName) { + this.activeTab = tabName } } } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 1a52da0f9..c3ca1dbd3 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -4,7 +4,12 @@ {{$t('settings.user_settings')}}
-
+
+ + + +
+

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

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

@@ -25,7 +30,7 @@
-
+

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

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

@@ -38,7 +43,7 @@
-
+

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

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

@@ -51,7 +56,7 @@
-
+

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

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

@@ -62,7 +67,7 @@
-
+

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

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

@@ -81,7 +86,7 @@

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

{{changePasswordError}}

-
+

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

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

@@ -98,15 +103,15 @@

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

-
+

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

-
+

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

-
+

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

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

@@ -146,4 +151,13 @@ margin: 0.25em; } } + +.tab-switcher { + margin: 7px 7px; + display: inline-block; + + button { + height: 30px; + } +} diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 185db5d90..38e58c4c5 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -333,7 +333,10 @@ const en = { changed_password: 'Password changed successfully!', change_password_error: 'There was an issue changing your password.', lock_account_description: 'Restrict your account to approved followers only', - default_vis: 'Default visibility scope' + default_vis: 'Default visibility scope', + profile_tab: 'Profile', + security_tab: 'Security', + data_import_export_tab: 'Data Import / Export' }, notifications: { notifications: 'Notifications', From 1121f32c48d06105c976f91545ededca05b283e8 Mon Sep 17 00:00:00 2001 From: ensra Date: Mon, 20 Aug 2018 02:59:06 +0100 Subject: [PATCH 10/12] Add support for configurable CW clickthrough. --- src/components/settings/settings.js | 4 +++ src/components/settings/settings.vue | 4 +++ src/components/status/status.js | 52 +++++++++++++++++++++------- src/components/status/status.vue | 10 +++--- src/i18n/messages.js | 1 + src/modules/config.js | 1 + 6 files changed, 55 insertions(+), 17 deletions(-) diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 169b90804..89be1624a 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -15,6 +15,7 @@ const settings = { streamingLocal: this.$store.state.config.streaming, pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, hoverPreviewLocal: this.$store.state.config.hoverPreview, + expandCWLocal: this.$store.state.config.expandCW, stopGifs: this.$store.state.config.stopGifs, loopSilentAvailable: // Firefox @@ -65,6 +66,9 @@ const settings = { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) }, + expandCWLocal (value) { + this.$store.dispatch('setOption', { name: 'expandCW', value }) + }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) } diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6b65b14b7..389b2be98 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -34,6 +34,10 @@ +
  • + + +
    • diff --git a/src/components/status/status.js b/src/components/status/status.js index a2d6f41f9..4321803eb 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -22,15 +22,18 @@ const Status = { 'noHeading', 'inlineExpanded' ], - data: () => ({ - replying: false, - expanded: false, - unmuted: false, - userExpanded: false, - preview: null, - showPreview: false, - showingTall: false - }), + data () { + return { + replying: false, + expanded: false, + unmuted: false, + userExpanded: false, + preview: null, + showPreview: false, + showingTall: false, + expandingCW: this.$store.state.config.expandCW + } + }, computed: { muteWords () { return this.$store.state.config.muteWords @@ -98,12 +101,27 @@ const Status = { // // Using max-height + overflow: auto for status components resulted in false positives // very often with japanese characters, and it was very annoying. + tallStatus () { + const lengthScore = this.status.statusnet_html.split(/ 20 + }, + hideCWStatus () { + if (this.tallStatus && this.$store.state.config.expandCW) { + return false + } + return !this.expandingCW && this.status.summary + }, hideTallStatus () { + if (this.status.summary && !this.$store.state.config.expandCW) { + return false + } if (this.showingTall) { return false } - const lengthScore = this.status.statusnet_html.split(/ 20 + return this.tallStatus + }, + showingMore () { + return this.showingTall || (this.status.summary && this.expandingCW) }, attachmentSize () { if ((this.$store.state.config.hideAttachments && !this.inConversation) || @@ -163,8 +181,16 @@ const Status = { toggleUserExpanded () { this.userExpanded = !this.userExpanded }, - toggleShowTall () { - this.showingTall = !this.showingTall + toggleShowMore () { + if (this.showingTall) { + this.showingTall = false + } else if (this.expandingCW) { + this.expandingCW = false + } else if (this.hideTallStatus) { + this.showingTall = true + } else if (this.hideCWStatus) { + this.expandingCW = true + } }, replyEnter (id, event) { this.showPreview = true diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b8993b0d4..ee0816714 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -76,9 +76,11 @@
    - Show more -
    - Show less + Show more +
    +
    + Show more + Show less
    @@ -310,7 +312,7 @@ } } - .tall-status-unhider { + .status-unhider, .cw-status-hider { width: 100%; text-align: center; } diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 32d886faa..67ed973d7 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -317,6 +317,7 @@ const en = { hide_attachments_in_tl: 'Hide attachments in timeline', hide_attachments_in_convo: 'Hide attachments in conversations', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', + expand_cw: 'Expand posts with subjects by default', stop_gifs: 'Play-on-hover GIFs', autoload: 'Enable automatic loading when scrolled to the bottom', streaming: 'Enable automatic streaming of new posts when scrolled to the top', diff --git a/src/modules/config.js b/src/modules/config.js index fe31ab011..eafe90cee 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -7,6 +7,7 @@ const defaultState = { hideAttachments: false, hideAttachmentsInConv: false, hideNsfw: true, + expandCW: false, loopVideo: true, loopVideoSilentOnly: true, autoLoad: true, From 671db023da097c90e7a2cf67b7218bd13be51bb0 Mon Sep 17 00:00:00 2001 From: ensra Date: Mon, 20 Aug 2018 03:08:39 +0100 Subject: [PATCH 11/12] fix indent --- src/components/status/status.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/status/status.js b/src/components/status/status.js index 4321803eb..07aae7e88 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -106,10 +106,10 @@ const Status = { return lengthScore > 20 }, hideCWStatus () { - if (this.tallStatus && this.$store.state.config.expandCW) { - return false - } - return !this.expandingCW && this.status.summary + if (this.tallStatus && this.$store.state.config.expandCW) { + return false + } + return !this.expandingCW && this.status.summary }, hideTallStatus () { if (this.status.summary && !this.$store.state.config.expandCW) { From 3ec8e43a9704b2945d58395dba997adfa2106df5 Mon Sep 17 00:00:00 2001 From: ensra Date: Mon, 20 Aug 2018 03:41:40 +0100 Subject: [PATCH 12/12] Rename expandCW to collapseMessageWithSubject. Add option to config.json, disabled by default. --- src/components/settings/settings.js | 6 +++--- src/components/settings/settings.vue | 8 ++++---- src/components/status/status.js | 20 ++++++++++---------- src/components/status/status.vue | 4 ++-- src/i18n/messages.js | 2 +- src/main.js | 4 +++- src/modules/config.js | 2 +- static/config.json | 3 ++- 8 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 89be1624a..c85ef59f6 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -15,7 +15,7 @@ const settings = { streamingLocal: this.$store.state.config.streaming, pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, hoverPreviewLocal: this.$store.state.config.hoverPreview, - expandCWLocal: this.$store.state.config.expandCW, + collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject, stopGifs: this.$store.state.config.stopGifs, loopSilentAvailable: // Firefox @@ -66,8 +66,8 @@ const settings = { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) }, - expandCWLocal (value) { - this.$store.dispatch('setOption', { name: 'expandCW', value }) + collapseMessageWithSubjectLocal (value) { + this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value }) }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 389b2be98..170f57738 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -16,6 +16,10 @@

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

      +
    • + + +
    • @@ -34,10 +38,6 @@
      • -
    • - - -
    diff --git a/src/components/status/status.js b/src/components/status/status.js index 07aae7e88..9670f69d2 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -31,7 +31,7 @@ const Status = { preview: null, showPreview: false, showingTall: false, - expandingCW: this.$store.state.config.expandCW + expandingSubject: !this.$store.state.config.collapseMessageWithSubject } }, computed: { @@ -105,14 +105,14 @@ const Status = { const lengthScore = this.status.statusnet_html.split(/ 20 }, - hideCWStatus () { - if (this.tallStatus && this.$store.state.config.expandCW) { + hideSubjectStatus () { + if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) { return false } - return !this.expandingCW && this.status.summary + return !this.expandingSubject && this.status.summary }, hideTallStatus () { - if (this.status.summary && !this.$store.state.config.expandCW) { + if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) { return false } if (this.showingTall) { @@ -121,7 +121,7 @@ const Status = { return this.tallStatus }, showingMore () { - return this.showingTall || (this.status.summary && this.expandingCW) + return this.showingTall || (this.status.summary && this.expandingSubject) }, attachmentSize () { if ((this.$store.state.config.hideAttachments && !this.inConversation) || @@ -184,12 +184,12 @@ const Status = { toggleShowMore () { if (this.showingTall) { this.showingTall = false - } else if (this.expandingCW) { - this.expandingCW = false + } else if (this.expandingSubject) { + this.expandingSubject = false } else if (this.hideTallStatus) { this.showingTall = true - } else if (this.hideCWStatus) { - this.expandingCW = true + } else if (this.hideSubjectStatus) { + this.expandingSubject = true } }, replyEnter (id, event) { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ee0816714..e7d5ed7ad 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -77,9 +77,9 @@
    Show more -
    +
    - Show more + Show more Show less
    diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 67ed973d7..2fa0f9100 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -317,7 +317,7 @@ const en = { hide_attachments_in_tl: 'Hide attachments in timeline', hide_attachments_in_convo: 'Hide attachments in conversations', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', - expand_cw: 'Expand posts with subjects by default', + collapse_subject: 'Collapse posts with subjects', stop_gifs: 'Play-on-hover GIFs', autoload: 'Enable automatic loading when scrolled to the bottom', streaming: 'Enable automatic streaming of new posts when scrolled to the top', diff --git a/src/main.js b/src/main.js index df271ce31..06f8a6ec5 100644 --- a/src/main.js +++ b/src/main.js @@ -45,6 +45,7 @@ Vue.use(VueChatScroll) const persistedStateOptions = { paths: [ + 'config.collapseMessageWithSubject', 'config.hideAttachments', 'config.hideAttachmentsInConv', 'config.hideNsfw', @@ -95,7 +96,7 @@ window.fetch('/api/statusnet/config.json') window.fetch('/static/config.json') .then((res) => res.json()) .then((data) => { - const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data + const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled, collapseMessageWithSubject} = data store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) @@ -104,6 +105,7 @@ window.fetch('/static/config.json') store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled }) + store.dispatch('setOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject }) if (data['chatDisabled']) { store.dispatch('disableChat') } diff --git a/src/modules/config.js b/src/modules/config.js index eafe90cee..60210a950 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -4,10 +4,10 @@ import StyleSetter from '../services/style_setter/style_setter.js' const defaultState = { name: 'Pleroma FE', colors: {}, + collapseMessageWithSubject: false, hideAttachments: false, hideAttachmentsInConv: false, hideNsfw: true, - expandCW: false, loopVideo: true, loopVideoSilentOnly: true, autoLoad: true, diff --git a/static/config.json b/static/config.json index 4dacfebed..62b85aae5 100644 --- a/static/config.json +++ b/static/config.json @@ -11,5 +11,6 @@ "whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}", "whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html", "showInstanceSpecificPanel": false, - "scopeOptionsEnabled": false + "scopeOptionsEnabled": false, + "collapseMessageWithSubject": false }