From d9e1bc4d9993441ee76620008eb97d3d0aeb1bc0 Mon Sep 17 00:00:00 2001 From: Mergan Date: Mon, 2 Oct 2023 15:29:54 -0700 Subject: [PATCH 01/14] Re-added extension checking for still-image - Bonus refactoring --- src/components/still-image/still-image.js | 40 ++++++++++++++++++++--- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 43ecad54..a4c24df7 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -42,20 +42,22 @@ const StillImage = { detectAnimation (image) { const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable - // harmless CORS errors without-- clean console with if (!mediaProxyAvailable) { // It's a bit aggressive to assume all images we can't find the mimetype of is animated, but necessary for // people in need of reduced motion accessibility. As such, we'll consider those images animated if the user // agent is set to prefer reduced motion. Otherwise, it'll just be used as an early exit. if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - // Only for no media-proxy for now, since we're capturing gif, webp, and apng (are there others?) // Since the canvas and images are not pixel-perfect matching (due to scaling), // It makes the images jiggle on hover, which is not ideal for accessibility, methinks this.isAnimated = true + return } - return + this.detectWithoutMediaProxy(image) + } else { + this.detectWithMediaProxy(image) } - + }, + detectAnimationWithFetch (image) { // Browser Cache should ensure image doesn't get loaded twice if cache exists fetch(image.src, { referrerPolicy: 'same-origin' @@ -85,6 +87,36 @@ const StillImage = { // this.imageLoadError && this.imageLoadError() }) }, + detectWithMediaProxy (image) { + this.detectAnimationWithFetch(image) + }, + detectWithoutMediaProxy (image) { + // We'll just assume that gifs and webp are animated + const extension = image.src.split('.').pop().toLowerCase() + + if (extension === 'gif') { + this.isAnimated = true + this.setLabel('GIF') + return + } + if (extension === 'webp') { + this.isAnimated = true + this.setLabel('WEBP') + return + } + // Beware the apng! use this if ye dare + // if (extension === 'png') { + // this.isAnimated = true + // this.setLabel('PNG') + // return + // } + + // Hail mary for extensionless + if (extension.includes('/')) { + // Don't mind the CORS error barrage + this.detectAnimationWithFetch(image) + } + }, setLabel (name) { this.imageTypeLabel = name; }, From 306cea04a12743481b95fe39d529bf2f2b1a9f56 Mon Sep 17 00:00:00 2001 From: Norm Date: Sat, 23 Sep 2023 20:33:46 -0400 Subject: [PATCH 02/14] Use corepack in build instructions --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 43e177b4..3b5bf271 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/ad ``` bash # install dependencies -npm install -g yarn +corepack enable yarn # serve with hot reload at localhost:8080 From 1de62fffcd6b752dbdf32792e99ef127cccd75b0 Mon Sep 17 00:00:00 2001 From: Norm Date: Sat, 23 Sep 2023 20:34:30 -0400 Subject: [PATCH 03/14] Update config.example.json link and example domain --- README.md | 8 ++++---- config/local.example.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3b5bf271..fc8db83c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Akkoma-FE +# Akkoma-FE ![English OK](https://img.shields.io/badge/English-OK-blueviolet) ![日本語OK](https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-OK-blueviolet) @@ -8,7 +8,7 @@ This is a fork of Akkoma-FE from the Pleroma project, with support for new Akkom # For Translators -The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE. +The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE. Alternatively, edit/create `src/i18n/$LANGUAGE_CODE.json` (where `$LANGUAGE_CODE` is the [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language), then add your language to [src/i18n/messages.js](https://akkoma.dev/AkkomaGang/pleroma-fe/src/branch/develop/src/i18n/messages.js) if it doesn't already exist there. @@ -37,7 +37,7 @@ npm run unit # For Contributors: -You can create file `/config/local.json` (see [example](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/config/local.example.json)) to enable some convenience dev options: +You can create file `/config/local.json` (see [example](https://akkoma.dev/AkkomaGang/akkoma-fe/src/branch/develop/config/local.example.json)) to enable some convenience dev options: * `target`: makes local dev server redirect to some existing instance's BE instead of local BE, useful for testing things in near-production environment and searching for real-life use-cases. * `staticConfigPreference`: makes FE's `/static/config.json` take preference of BE-served `/api/statusnet/config.json`. Only works in dev mode. @@ -52,4 +52,4 @@ Edit config.json for configuration. ### Login methods -```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations. +```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations. diff --git a/config/local.example.json b/config/local.example.json index 2a3bd00d..43ebd649 100644 --- a/config/local.example.json +++ b/config/local.example.json @@ -1,4 +1,4 @@ { - "target": "https://pleroma.soykaf.com/", + "target": "https://otp.akkoma.dev/", "staticConfigPreference": false } From ab250c2f3a1ac1fa0d7d525fbd903d11c4806f6f Mon Sep 17 00:00:00 2001 From: Oneric Date: Thu, 19 Oct 2023 00:45:11 +0200 Subject: [PATCH 04/14] Explicitly set SameSite attribute for cookies Modern browsers start to tighten down on third-party access to cookies. E.g. in current Firefox, a warning about the userLanguage cookie was shown since it did not yet explicitly set the SameSite attribute and the default is about to change. The cookie name being referred to as BACKEND_LANGUAGE_COOKIE_NAME suggests it should be readable by the actual Akkoma backend, which can live at a different domain than akkoma-fe. Thus explicitly enable sharing with third-party sites. No warnings were shown for other cookies, so I assume this was the only one not yet setting SameSite. --- src/modules/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/config.js b/src/modules/config.js index ebb27929..2c4e461d 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -229,7 +229,7 @@ const config = { break case 'interfaceLanguage': messages.setLanguage(this.getters.i18n, value) - Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value)) + Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value), {sameSite: 'Lax'}) dispatch('setInstanceOption', { name: 'interfaceLanguage', value }) break case 'thirdColumnMode': From ccb0ffdc8ad72bef462ba21bb4aae8a09f83012a Mon Sep 17 00:00:00 2001 From: Oneric Date: Tue, 24 Oct 2023 18:23:47 +0200 Subject: [PATCH 05/14] Don't show direction in notification timestamps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently all notifications except follow-related once include and explicit direction text. (It missing in follow notifs is due to an omission in 804ba0cdb6b353e0c959c68f44c6a1316c0d6b10 which only added the newly introduced with-direction to status-related notifs. Before, presumably all notifs included direction text.) But in the notification tray horizontal space is scarce and notifs can already be assumed to only come from the past. While it might not be too bad for the English localisation’s 4-letter ' ago' suffix, e.g. the Indonesian localisation’s ' yang lalu' needs 10 letters. Thus instead of fixing the omission for follow-related notifs, drop direction text from all notification timestamps. --- src/components/notification/notification.vue | 1 - src/components/status/status.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 76101865..5ea6ab04 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -151,7 +151,6 @@ > diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a54782e3..c34d38f0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -190,7 +190,7 @@ > From beee99e733a6508e3744140ee73e8b7be8194d85 Mon Sep 17 00:00:00 2001 From: Oneric Date: Wed, 18 Oct 2023 22:51:24 +0200 Subject: [PATCH 06/14] Stop notifications boxes from change size over time MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Notifications about favourites and follows use .notification-right, notifications about replies instead use .heading-right. Previously only the former set a min-width, however the chosen value of 3em was too small to fit the worst case. As a consequence, when the timestamp text changes over time, its element width changes, which may result in neighbouring text (no longer) needing to wrap to a new line in turn changing the size of the whole notification box pushing older notification boxes down/up. These constant movements at the side of the screen can be quite annoying and confusing when the cause cannot be immediately discerned. Avoid this, by reserving enough space for any timestamp. For English, the worst case is the five-character 'XXmin', since the short identifier for minutes is the longest with three letters. With two exceptions, all other current localisation also do not exceed three letters in any short unit identifier up to days. However, some localisations (e.g. Polish) additionally insert a space between numerical value and unit. This matches SI recommendations pushing the worst case to 6 characters. 6 characters will be sufficient for timestamps up to 3 weeks in all languages (minus prev exceptions), which seems reasonable enough as beyond this timestamps rarely change anyway. The aforementioned exceptions being Vietnamese and Occitan, but in the current localisation all or the relevant short unit identifiers are identical to the long forms indicating this is just due to incomplete translation. Indeed, Vietnamese Wikipedia (read through machine translation) suggests “ph” is commonly used as unit identifiers for minutes, but the current localisation fully spells it out as “phút”. --- src/components/notifications/notifications.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3d3408f7..635a0a9b 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -105,9 +105,12 @@ flex: 1; padding-left: 0.8em; min-width: 0; + } + .heading-right, .notification-right { .timeago { - min-width: 3em; + display: inline-block; + min-width: 6em; text-align: right; } } From c9dc8f00f9c574b082c6ae63c3f59777764837da Mon Sep 17 00:00:00 2001 From: smitten Date: Mon, 30 Oct 2023 18:54:07 -0400 Subject: [PATCH 07/14] Use window.navigator.language before interface i18n language --- src/services/locale/locale.service.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js index 8cef2522..c4f8ce21 100644 --- a/src/services/locale/locale.service.js +++ b/src/services/locale/locale.service.js @@ -8,7 +8,7 @@ const specialLanguageCodes = { 'zh': 'zh-Hans' } -const internalToBrowserLocale = code => specialLanguageCodes[code] || code +const internalToBrowserLocale = fallbackCode => specialLanguageCodes[fallbackCode] || window.navigator.language || fallbackCode const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-') From 1b28ec3b72fde74265df4150be39295b0ae1a345 Mon Sep 17 00:00:00 2001 From: smitten Date: Wed, 1 Nov 2023 23:10:57 -0400 Subject: [PATCH 08/14] Match UI i18n configuration to browser locales --- src/services/locale/locale.service.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js index c4f8ce21..607cd447 100644 --- a/src/services/locale/locale.service.js +++ b/src/services/locale/locale.service.js @@ -8,7 +8,30 @@ const specialLanguageCodes = { 'zh': 'zh-Hans' } -const internalToBrowserLocale = fallbackCode => specialLanguageCodes[fallbackCode] || window.navigator.language || fallbackCode +// Find a browser language that matches the configured UI language. +// Browser language should match the configured generic short code prefix: +// eg 'en-GB' browser language matches 'en' UI language. +const findBrowserRegionMatch = genericLang => { + for (const blang of window.navigator.languages) { + if (genericLang === blang.split('-')[0]) + return blang; + } + return null; +} + +const internalToBrowserLocale = (() => { + const resolvedBrowserLocales = {} + + return i18nLocale => { + if (resolvedBrowserLocales[i18nLocale]) { + return resolvedBrowserLocales[i18nLocale] + } + const lang = specialLanguageCodes[i18nLocale] || i18nLocale; + const resolved = findBrowserRegionMatch(lang) || lang; + resolvedBrowserLocales[i18nLocale] = resolved + return resolved + } +})() const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-') From deaef1d0b9c32a0f6101a3447fb19aa6684b8c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ng=C3=B4=20Ng=E1=BB=8Dc=20=C4=90=E1=BB=A9c=20Huy?= Date: Sun, 5 Nov 2023 09:21:01 +0700 Subject: [PATCH 09/14] Use relative unit for font size --- src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index 36176b35..1d338d15 100644 --- a/src/App.scss +++ b/src/App.scss @@ -8,7 +8,7 @@ } html { - font-size: 14px; + font-size: 0.875rem; // overflow-x: clip causes my browser's tab to crash with SIGILL lul } From 235c734d3700342fc98366160f84b9b42785ad7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ng=C3=B4=20Ng=E1=BB=8Dc=20=C4=90=E1=BB=A9c=20Huy?= Date: Sun, 5 Nov 2023 09:21:49 +0700 Subject: [PATCH 10/14] Use overflow: auto for description Previously it sets overflow: scroll, so there's an unnecessary horizontal scroll. overflow: auto only shows scrollbar when it overflows --- src/components/attachment/attachment.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 484ca0c4..d65f39fb 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -37,7 +37,7 @@ white-space: pre-line; word-break: break-word; text-overflow: ellipsis; - overflow: scroll; + overflow: auto; } &.-static { From c524a47e6f3ce341861f0a4c03aac45c4c1e6461 Mon Sep 17 00:00:00 2001 From: Oneric Date: Wed, 15 Nov 2023 23:36:19 +0100 Subject: [PATCH 11/14] Drop broken "@ symbol as icon" setting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It was merged into pleroma-fe on 2022-02-03 in 76547fe66d1771f5bff732a34b0547f890f4621a and imported into akkoma-fe on 2022-06-08 with the merge commit f6cf509a046507eeb9e52e2a279e82dd7a0f6bf8. However, something went wrong in the merge and while the setting and its infrastructure exist, it is never used anywhere and @ is always displayed as text. Given it existed in this broken state for nearly one and a half years, never worked on akkoma-fe and no bugs were filed about this, it appears nobody cares, so let’s just remove it. --- src/components/mention_link/mention_link.js | 3 --- src/components/settings_modal/tabs/general_tab.vue | 8 -------- src/i18n/ca.json | 1 - src/i18n/de.json | 1 - src/i18n/en.json | 1 - src/i18n/fr.json | 1 - src/i18n/ja_pedantic.json | 1 - src/i18n/nl.json | 1 - src/i18n/uk.json | 1 - src/i18n/zh.json | 1 - src/modules/config.js | 1 - src/modules/instance.js | 1 - 12 files changed, 21 deletions(-) diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 55eea195..377f8ea5 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -93,9 +93,6 @@ const MentionLink = { this.highlightType ] }, - useAtIcon () { - return this.mergedConfig.useAtIcon - }, isRemote () { return this.userName !== this.userNameFull }, diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 7dc1c3f1..2754cde0 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -483,14 +483,6 @@ -
  • - - {{ $t('settings.use_at_icon') }} - -
  • {{ $t('settings.mention_link_show_avatar') }} diff --git a/src/i18n/ca.json b/src/i18n/ca.json index e2cd094a..47f1eaf0 100644 --- a/src/i18n/ca.json +++ b/src/i18n/ca.json @@ -884,7 +884,6 @@ "upload_a_photo": "Pujar una foto", "useStreamingApi": "Rebre apunts i notificacions en temps real", "useStreamingApiWarning": "És genial emprar-lo. Si es trenca, refresca, suposo?", - "use_at_icon": "Mostra el símbol {'@'} com a icona enlloc de text", "use_contain_fit": "No retallar els adjunts en miniatures", "use_one_click_nsfw": "Obre els adjunts NSFW amb només un clic", "user_mutes": "Usuaris", diff --git a/src/i18n/de.json b/src/i18n/de.json index a4ec886c..d5a7b1c0 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -916,7 +916,6 @@ "upload_a_photo": "Lade ein Foto hoch", "useStreamingApi": "Empfange Posts und Benachrichtigungen in Echtzeit", "useStreamingApiWarning": "(Nicht empfohlen, experimentell, bekannt dafür, Posts zu überspringen)", - "use_at_icon": "{'@'}-Symbol als Icon und nicht als Text anzeigen", "use_blurhash": "Blurhash für NSFW-Vorschauen verwenden", "use_contain_fit": "Vorschaubilder nicht zuschneiden", "use_one_click_nsfw": "Heikle Anhänge mit nur einem Klick öffnen", diff --git a/src/i18n/en.json b/src/i18n/en.json index a5e9d9c1..0160b187 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -922,7 +922,6 @@ "upload_a_photo": "Upload a photo", "useStreamingApi": "Receive posts and notifications real-time", "useStreamingApiWarning": "It's cool use it. If it breaks refresh I guess?", - "use_at_icon": "Display {'@'} symbol as an icon instead of text", "use_contain_fit": "Don't crop the attachment in thumbnails", "use_one_click_nsfw": "Open NSFW attachments with just one click", "user_mutes": "Users", diff --git a/src/i18n/fr.json b/src/i18n/fr.json index 252291ea..0344d9ec 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -920,7 +920,6 @@ "upload_a_photo": "Envoyer une photo", "useStreamingApi": "Recevoir les messages et notifications en temps réel", "useStreamingApiWarning": "(Non recommandé, expérimental, connu pour rater des messages)", - "use_at_icon": "Afficher le symbol {'@'} comme une image", "use_contain_fit": "Ne pas rogner les miniatures des pièces-jointes", "use_one_click_nsfw": "Ouvrir les pièces-jointes sensibles avec un seul clic", "user_mutes": "Comptes", diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json index 5f315172..c685ea1d 100644 --- a/src/i18n/ja_pedantic.json +++ b/src/i18n/ja_pedantic.json @@ -921,7 +921,6 @@ "upload_a_photo": "画像をアップロード", "useStreamingApi": "投稿と通知を、すぐに受け取る", "useStreamingApiWarning": "（実験中で、投稿を取りこぼすかもしれないので、おすすめしません）", - "use_at_icon": "{'@'}マークをアイコンにする", "use_contain_fit": "画像のサムネイルを、切り抜かない", "use_one_click_nsfw": "NSFWなファイルを1クリックで開く", "user_mutes": "ユーザー", diff --git a/src/i18n/nl.json b/src/i18n/nl.json index 15d639c4..75e10500 100644 --- a/src/i18n/nl.json +++ b/src/i18n/nl.json @@ -918,7 +918,6 @@ "upload_a_photo": "Foto uploaden", "useStreamingApi": "Berichten en meldingen in real-time ontvangen", "useStreamingApiWarning": "Iets experimenteels met berichten streamen uwu miss kun je beter uit laten ofzo?", - "use_at_icon": "{'@'} symbool als icoon tonen in plaats van tekst", "use_blurhash": "Waas tonen over NSFW-miniaturen", "use_contain_fit": "Bijlage in miniaturen niet bijsnijden", "use_one_click_nsfw": "Gevoelige bijlagen met slechts één klik openen", diff --git a/src/i18n/uk.json b/src/i18n/uk.json index 08570f9b..13b92e03 100644 --- a/src/i18n/uk.json +++ b/src/i18n/uk.json @@ -922,7 +922,6 @@ "upload_a_photo": "Вивантажити фото", "useStreamingApi": "Отримувати дописи та сповіщення наживо", "useStreamingApiWarning": "Загалом працює. Якщо не зовсім, спробуєте оновити сторінку?", - "use_at_icon": "Значок {'@'} замість символу", "use_blurhash": "Показувати дражливі мініатюри (як розмиті кольори)", "use_contain_fit": "Не обрізати краї мініатюр", "use_one_click_nsfw": "Відкривати NSFW вкладення одним кліком миші", diff --git a/src/i18n/zh.json b/src/i18n/zh.json index 7fec7226..c342bc5b 100644 --- a/src/i18n/zh.json +++ b/src/i18n/zh.json @@ -922,7 +922,6 @@ "upload_a_photo": "上传照片", "useStreamingApi": "实时接收帖文和通知", "useStreamingApiWarning": "十分炫酷推荐使用。要是崩了试试刷新？", - "use_at_icon": "将 {'@'} 符号显示为图标而不是文本", "use_blurhash": "对NSFW的缩略图使用模糊处理", "use_contain_fit": "生成缩略图时不要裁剪附件", "use_one_click_nsfw": "点击一次以打开工作场所不适宜（NSFW）的附件", diff --git a/src/modules/config.js b/src/modules/config.js index ebb27929..39ac1076 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -95,7 +95,6 @@ export const defaultState = { disableStickyHeaders: false, showScrollbars: false, greentext: undefined, // instance default - useAtIcon: undefined, // instance default mentionLinkDisplay: undefined, // instance default mentionLinkShowTooltip: undefined, // instance default mentionLinkShowAvatar: undefined, // instance default diff --git a/src/modules/instance.js b/src/modules/instance.js index 02cbe1f8..0c856352 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -21,7 +21,6 @@ const defaultState = { background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: true, greentext: false, - useAtIcon: false, mentionLinkDisplay: 'short', mentionLinkShowTooltip: true, mentionLinkShowAvatar: false, From 3d65eccf047f1fbe4479559aa4a04902fd3a143c Mon Sep 17 00:00:00 2001 From: Hazel Koehler Date: Sat, 16 Dec 2023 13:37:59 -0500 Subject: [PATCH 12/14] use main emoji button for spoiler / CW field --- .../post_status_form/post_status_form.js | 19 ++++++++++++++++--- .../post_status_form/post_status_form.vue | 5 +++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 5647a9eb..b648b50c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -213,7 +213,9 @@ const PostStatusForm = { preview: null, previewLoading: false, emojiInputShown: false, - idempotencyKey: '' + idempotencyKey: '', + activeEmojiInput: undefined, + activeTextInput: undefined } }, computed: { @@ -674,8 +676,19 @@ const PostStatusForm = { this.$refs['emoji-input'].resize() }, showEmojiPicker () { - this.$refs['textarea'].focus() - this.$refs['emoji-input'].triggerShowPicker() + if (!this.activeEmojiInput || !this.activeTextInput) + this.focusStatusInput() + + this.$refs[this.activeTextInput].focus() + this.$refs[this.activeEmojiInput].triggerShowPicker() + }, + focusStatusInput() { + this.activeEmojiInput = 'emoji-input' + this.activeTextInput = 'textarea' + }, + focusSubjectInput() { + this.activeEmojiInput = 'subject-emoji-input' + this.activeTextInput = 'subject-input' }, clearError () { this.error = null diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index f4680336..601b7d0c 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -118,13 +118,16 @@ />

    Date: Sat, 16 Dec 2023 14:44:26 -0500 Subject: [PATCH 13/14] add button to toggle the spoiler / CW field --- .../post_status_form/post_status_form.js | 21 ++++++++++++++++++- .../post_status_form/post_status_form.vue | 18 ++++++++++++++-- src/i18n/en.json | 1 + 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index b648b50c..3bc6dc99 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -199,6 +199,10 @@ const PostStatusForm = { } } + // When first loading the form, hide the subject (CW) field if it's disabled or doesn't have a starting value. + // "disableSubject" seems to take priority over "alwaysShowSubject" + const showSubject = !this.disableSubject && (statusParams.spoilerText || this.alwaysShowSubject) + return { dropFiles: [], uploadingFiles: false, @@ -215,7 +219,8 @@ const PostStatusForm = { emojiInputShown: false, idempotencyKey: '', activeEmojiInput: undefined, - activeTextInput: undefined + activeTextInput: undefined, + subjectVisible: showSubject } }, computed: { @@ -690,6 +695,20 @@ const PostStatusForm = { this.activeEmojiInput = 'subject-emoji-input' this.activeTextInput = 'subject-input' }, + toggleSubjectVisible() { + // If hiding CW, then we need to clear the subject and reset focus + if (this.subjectVisible) + { + this.focusStatusInput() + + // "nsfw" property is normally set by the @change listener, but this bypasses it. + // We need to clear it manually instead. + this.newStatus.spoilerText = '' + this.newStatus.nsfw = false + } + + this.subjectVisible = !this.subjectVisible + }, clearError () { this.error = null }, diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 601b7d0c..74663fd7 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -119,7 +119,7 @@ +