From 5b0382abc5d8eba5e3675c5c21563e62e98bb06f Mon Sep 17 00:00:00 2001 From: Plastikmensch Date: Sat, 2 Dec 2023 14:54:26 +0100 Subject: [PATCH 01/48] Remove redundant asset preload (#2488) * Remove redundant asset preload preloading these is already handled by glitch-soc theming system, meaning glitch packs get preloaded and if the user is signed in, vanilla packs. The theming system preloads these unconditionally though. Signed-off-by: Plastikmensch * Remove preload of getting started This matches upstreams preloads Signed-off-by: Plastikmensch --------- Signed-off-by: Plastikmensch --- app/javascript/flavours/glitch/theme.yml | 1 - app/javascript/flavours/vanilla/theme.yml | 1 - app/views/shared/_web_app.html.haml | 3 --- 3 files changed, 5 deletions(-) diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index 0877e4d400..05497f9c2a 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -13,7 +13,6 @@ pack: filename: packs/home.js preload: - flavours/glitch/async/compose - - flavours/glitch/async/getting_started - flavours/glitch/async/home_timeline - flavours/glitch/async/notifications mailer: diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml index 470ded5302..fa3b3a758a 100644 --- a/app/javascript/flavours/vanilla/theme.yml +++ b/app/javascript/flavours/vanilla/theme.yml @@ -12,7 +12,6 @@ pack: home: filename: application.js preload: - - features/getting_started - features/compose - features/home_timeline - features/notifications diff --git a/app/views/shared/_web_app.html.haml b/app/views/shared/_web_app.html.haml index 598079fe31..b53c25e77c 100644 --- a/app/views/shared/_web_app.html.haml +++ b/app/views/shared/_web_app.html.haml @@ -1,8 +1,5 @@ - content_for :header_tags do - if user_signed_in? - = preload_pack_asset 'features/compose.js' - = preload_pack_asset 'features/home_timeline.js' - = preload_pack_asset 'features/notifications.js' %meta{ name: 'initialPath', content: request.path } %meta{ name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key } From 73a94c3b3f65f39ae4652bf218ef094c2f3a5f26 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 2 Dec 2023 14:54:35 +0100 Subject: [PATCH 02/48] Fix self-destruct page not using theme styles (#2490) --- app/controllers/application_controller.rb | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index bc876d1504..00f5c7c11e 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -176,7 +176,10 @@ class ApplicationController < ActionController::Base return unless self_destruct? respond_to do |format| - format.any { render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html] } + format.any do + use_pack 'error' + render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html] + end format.json { render json: { error: Rack::Utils::HTTP_STATUS_CODES[410] }, status: code } end end From a262f990f8a7b81d82725f1295c698f4ec68b4ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 Mar 2023 08:46:32 +0100 Subject: [PATCH 03/48] Change design of account rows in web UI (#24247) Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 62 +++++++++++++++---- .../glitch/styles/components/accounts.scss | 23 +++++-- .../glitch/styles/components/status.scss | 6 +- 3 files changed, 73 insertions(+), 18 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 78cf59e345..77c7a71945 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -6,6 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { Skeleton } from 'flavours/glitch/components/skeleton'; +import { counterRenderer } from 'flavours/glitch/components/common_counter'; +import ShortNumber from 'flavours/glitch/components/short_number'; +import Icon from 'flavours/glitch/components/icon'; import { me } from '../initial_state'; @@ -27,6 +30,26 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, }); +class VerifiedBadge extends React.PureComponent { + + static propTypes = { + link: PropTypes.string.isRequired, + verifiedAt: PropTypes.string.isRequired, + }; + + render () { + const { link } = this.props; + + return ( + + + + + ); + } + +} + class Account extends ImmutablePureComponent { static propTypes = { @@ -81,7 +104,11 @@ class Account extends ImmutablePureComponent {
- + +
+ + +
@@ -135,24 +162,37 @@ class Account extends ImmutablePureComponent { } } - let mute_expires_at; + let muteTimeRemaining; + if (account.get('mute_expires_at')) { - mute_expires_at =
; + muteTimeRemaining = <>· ; + } + + let verification; + + const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); + + if (firstVerifiedField) { + verification = <>· ; } return (
-
- {mute_expires_at} - - - {buttons ? -
- {buttons} +
+
- : null} + +
+ + {verification} {muteTimeRemaining} +
+ + +
+ {buttons} +
); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 5d4426fbc6..f84158b384 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -12,10 +12,12 @@ text-decoration: none; font-size: 14px; - &--with-note { - strong { - display: inline; - } + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; } } @@ -749,6 +751,19 @@ } } +.verified-badge { + display: inline-flex; + align-items: center; + color: $valid-value-color; + gap: 4px; + + a { + color: inherit; + font-weight: 500; + text-decoration: none; + } +} + .moved-account-banner, .follow-request-banner, .account-memorial-banner { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 0b720637de..85e3165a88 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -626,7 +626,7 @@ .status__display-name, .account__display-name { - strong { + .display-name strong { color: $primary-text-color; } } @@ -641,12 +641,12 @@ a.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name { - &:hover strong { + &:hover .display-name strong { text-decoration: underline; } } -.account__display-name strong { +.account__display-name .display-name strong { display: block; overflow: hidden; text-overflow: ellipsis; From e0aba64a64257e00b3afdecfa76e6a42246e78a4 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 1 Apr 2023 09:27:23 +0200 Subject: [PATCH 04/48] [Glitch] Fix regressions from change in account row design in web UI Port 46483ae849bc06ee74f4745f4564b213e742c51c Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 20 +++++++++++-------- .../glitch/components/server_banner.jsx | 2 +- .../flavours/glitch/features/about/index.jsx | 2 +- .../glitch/styles/components/accounts.scss | 12 +++++++++++ 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 77c7a71945..d94d51067d 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -9,6 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; import ShortNumber from 'flavours/glitch/components/short_number'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; import { me } from '../initial_state'; @@ -61,6 +62,7 @@ class Account extends ImmutablePureComponent { onMuteNotifications: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, + minimal: PropTypes.bool, actionIcon: PropTypes.string, actionTitle: PropTypes.string, defaultAction: PropTypes.string, @@ -96,14 +98,14 @@ class Account extends ImmutablePureComponent { }; render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { return ( -
+
-
+
@@ -177,7 +179,7 @@ class Account extends ImmutablePureComponent { } return ( -
+
@@ -186,13 +188,15 @@ class Account extends ImmutablePureComponent {
- {verification} {muteTimeRemaining} + {!minimal && <> {verification} {muteTimeRemaining}}
-
- {buttons} -
+ {!minimal && ( +
+ {buttons} +
+ )}
); diff --git a/app/javascript/flavours/glitch/components/server_banner.jsx b/app/javascript/flavours/glitch/components/server_banner.jsx index 677e13706b..1b449ff1a8 100644 --- a/app/javascript/flavours/glitch/components/server_banner.jsx +++ b/app/javascript/flavours/glitch/components/server_banner.jsx @@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {

- +
diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx index 79b5f8114e..0b78385562 100644 --- a/app/javascript/flavours/glitch/features/about/index.jsx +++ b/app/javascript/flavours/glitch/features/about/index.jsx @@ -128,7 +128,7 @@ class About extends PureComponent {

- +
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index f84158b384..1330b412e7 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -21,6 +21,18 @@ } } + &--minimal { + .account__display-name { + .display-name { + margin-bottom: 0; + } + + .display-name strong { + display: block; + } + } + } + &__note { overflow: hidden; text-overflow: ellipsis; From 00db5c8ade430d7d51661323d79f0c955faa5821 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Apr 2023 22:24:53 +0200 Subject: [PATCH 05/48] [Glitch] Split VerifiedBadge from Account component Partial port of 0461f83320378fb8cee679da896ce35cec5bcbf3 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 22 +--------------- .../glitch/components/verified_badge.jsx | 25 +++++++++++++++++++ 2 files changed, 26 insertions(+), 21 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/verified_badge.jsx diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index d94d51067d..4eda14daf4 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -8,8 +8,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { Skeleton } from 'flavours/glitch/components/skeleton'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; import ShortNumber from 'flavours/glitch/components/short_number'; -import Icon from 'flavours/glitch/components/icon'; import classNames from 'classnames'; +import VerifiedBadge from 'flavours/glitch/components/verified_badge'; import { me } from '../initial_state'; @@ -31,26 +31,6 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, }); -class VerifiedBadge extends React.PureComponent { - - static propTypes = { - link: PropTypes.string.isRequired, - verifiedAt: PropTypes.string.isRequired, - }; - - render () { - const { link } = this.props; - - return ( - - - - - ); - } - -} - class Account extends ImmutablePureComponent { static propTypes = { diff --git a/app/javascript/flavours/glitch/components/verified_badge.jsx b/app/javascript/flavours/glitch/components/verified_badge.jsx new file mode 100644 index 0000000000..575cbcde1a --- /dev/null +++ b/app/javascript/flavours/glitch/components/verified_badge.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'flavours/glitch/components/icon'; + +class VerifiedBadge extends React.PureComponent { + + static propTypes = { + link: PropTypes.string.isRequired, + verifiedAt: PropTypes.string.isRequired, + }; + + render () { + const { link } = this.props; + + return ( + + + + + ); + } + +} + +export default VerifiedBadge; \ No newline at end of file From 2efb22f455fafccdd89c0902bd670ede0b055822 Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Sun, 7 May 2023 16:10:58 +0900 Subject: [PATCH 06/48] [Glitch] Rewrite VerifiedBadge component as function component Port 140aa6b054bb73b10a33bda17090453dd550267a to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 2 +- .../glitch/components/verified_badge.jsx | 25 ------------------- .../glitch/components/verified_badge.tsx | 14 +++++++++++ 3 files changed, 15 insertions(+), 26 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/verified_badge.jsx create mode 100644 app/javascript/flavours/glitch/components/verified_badge.tsx diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 4eda14daf4..834d945d86 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -155,7 +155,7 @@ class Account extends ImmutablePureComponent { const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); if (firstVerifiedField) { - verification = <>· ; + verification = <>· ; } return ( diff --git a/app/javascript/flavours/glitch/components/verified_badge.jsx b/app/javascript/flavours/glitch/components/verified_badge.jsx deleted file mode 100644 index 575cbcde1a..0000000000 --- a/app/javascript/flavours/glitch/components/verified_badge.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Icon from 'flavours/glitch/components/icon'; - -class VerifiedBadge extends React.PureComponent { - - static propTypes = { - link: PropTypes.string.isRequired, - verifiedAt: PropTypes.string.isRequired, - }; - - render () { - const { link } = this.props; - - return ( - - - - - ); - } - -} - -export default VerifiedBadge; \ No newline at end of file diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx new file mode 100644 index 0000000000..78686b521b --- /dev/null +++ b/app/javascript/flavours/glitch/components/verified_badge.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Icon } from './icon'; + +type Props = { + link: string; +}; +export const VerifiedBadge: React.FC = ({ link }) => ( + + + + +); + +export default VerifiedBadge; From e7ec2641a0270c24057d2cb679115084fdd76d85 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 9 May 2023 03:11:56 +0200 Subject: [PATCH 07/48] [Glitch] Fix linting issues with VerifiedBadge component Signed-off-by: Claire --- app/javascript/flavours/glitch/components/account.jsx | 2 +- .../flavours/glitch/components/verified_badge.tsx | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 834d945d86..65c39ab48c 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -9,7 +9,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; import ShortNumber from 'flavours/glitch/components/short_number'; import classNames from 'classnames'; -import VerifiedBadge from 'flavours/glitch/components/verified_badge'; +import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { me } from '../initial_state'; diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx index 78686b521b..6b421ba42c 100644 --- a/app/javascript/flavours/glitch/components/verified_badge.tsx +++ b/app/javascript/flavours/glitch/components/verified_badge.tsx @@ -1,14 +1,11 @@ -import React from 'react'; import { Icon } from './icon'; -type Props = { +interface Props { link: string; -}; +} export const VerifiedBadge: React.FC = ({ link }) => ( ); - -export default VerifiedBadge; From 32ec0d2472d89d6b5c5920df364b0ace547c13a0 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 24 Jun 2023 17:24:31 +0200 Subject: [PATCH 08/48] [Glitch] Fix verified badge in account lists potentially including rel="me" links Port 55e7c08a83547424024bac311d5459cb82cf6dae to glitch-soc Signed-off-by: Claire --- .../glitch/components/verified_badge.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx index 6b421ba42c..9a6adcfa86 100644 --- a/app/javascript/flavours/glitch/components/verified_badge.tsx +++ b/app/javascript/flavours/glitch/components/verified_badge.tsx @@ -1,11 +1,27 @@ import { Icon } from './icon'; +const domParser = new DOMParser(); + +const stripRelMe = (html: string) => { + const document = domParser.parseFromString(html, 'text/html').documentElement; + + document.querySelectorAll('a[rel]').forEach((link) => { + link.rel = link.rel + .split(' ') + .filter((x: string) => x !== 'me') + .join(' '); + }); + + const body = document.querySelector('body'); + return body ? { __html: body.innerHTML } : undefined; +}; + interface Props { link: string; } export const VerifiedBadge: React.FC = ({ link }) => ( - + ); From b8cbaba283e84c4811729d456cbf835fd60e8266 Mon Sep 17 00:00:00 2001 From: Emelia Smith Date: Thu, 11 May 2023 07:55:10 +0200 Subject: [PATCH 09/48] [Glitch] Split `EmptyAccount` out of `Account` component Partial port of b8a2430642ac3a7d181ea078fb04654e2a200934 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 17 ++-------- .../glitch/components/empty_account.tsx | 33 +++++++++++++++++++ 2 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/empty_account.tsx diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 65c39ab48c..6a0c2ae917 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Skeleton } from 'flavours/glitch/components/skeleton'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; import ShortNumber from 'flavours/glitch/components/short_number'; import classNames from 'classnames'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; +import { EmptyAccount } from 'flavours/glitch/components/empty_account'; import { me } from '../initial_state'; @@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent { const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { - return ( -
-
-
-
- -
- - -
-
-
-
- ); + return ; } if (hidden) { diff --git a/app/javascript/flavours/glitch/components/empty_account.tsx b/app/javascript/flavours/glitch/components/empty_account.tsx new file mode 100644 index 0000000000..55322fb575 --- /dev/null +++ b/app/javascript/flavours/glitch/components/empty_account.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import classNames from 'classnames'; + +import { DisplayName } from 'flavours/glitch/components/display_name'; +import { Skeleton } from 'flavours/glitch/components/skeleton'; + +interface Props { + size?: number; + minimal?: boolean; +} + +export const EmptyAccount: React.FC = ({ + size = 46, + minimal = false, +}) => { + return ( +
+
+
+
+ +
+ +
+ + +
+
+
+
+ ); +}; From b047b981cd8367308e744fed0fe70137152cecc7 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 2 Dec 2023 16:27:12 +0100 Subject: [PATCH 10/48] [Glitch] Enforce import order with ESLint Port d27216dc4616d80659c0cc5d2a55394e0e1ae874 to glitch-soc --- app/javascript/flavours/glitch/components/account.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 6a0c2ae917..78b39dfb63 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -2,14 +2,16 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; +import classNames from 'classnames'; + import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; -import ShortNumber from 'flavours/glitch/components/short_number'; -import classNames from 'classnames'; -import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; + import { EmptyAccount } from 'flavours/glitch/components/empty_account'; +import ShortNumber from 'flavours/glitch/components/short_number'; +import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { me } from '../initial_state'; From 98a7b95058e8851d774bbe9878eb2aa1179713a9 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Wed, 24 May 2023 12:38:50 +0200 Subject: [PATCH 11/48] [Glitch] Update inconsistent `defaultMessage` in `Account` component Partial port of e58c36d308f7e7e26154837d53da0185a0db7f16 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/account.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 78b39dfb63..249b0d5c77 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -24,7 +24,7 @@ import { RelativeTimestamp } from './relative_timestamp'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, - requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, + requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' }, From f1691eca556b95b89704ba6dc4880eef9b4e5b14 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 1 Jun 2023 14:47:55 +0200 Subject: [PATCH 12/48] [Glitch] Fix overflow behavior of account rows Port 5fae2de454806730742b7be7435ae1c4fb97cf3c to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 10 +++++++--- .../glitch/styles/components/accounts.scss | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 249b0d5c77..d4ebd2801a 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -144,7 +144,7 @@ class Account extends ImmutablePureComponent { const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); if (firstVerifiedField) { - verification = <>· ; + verification = ; } return ( @@ -155,9 +155,13 @@ class Account extends ImmutablePureComponent {
-
+
- {!minimal && <> {verification} {muteTimeRemaining}} + {!minimal && ( +
+ {verification} {muteTimeRemaining} +
+ )}
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 1330b412e7..7b265c9c35 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -763,11 +763,28 @@ } } +.account__contents { + overflow: hidden; +} + +.account__details { + display: flex; + flex-wrap: wrap; + column-gap: 1em; +} + .verified-badge { display: inline-flex; align-items: center; color: $valid-value-color; gap: 4px; + overflow: hidden; + white-space: nowrap; + + > span { + overflow: hidden; + text-overflow: ellipsis; + } a { color: inherit; From 0421b44f222e102d7f9e9082bb4dfe7085df5593 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 6 Jun 2023 04:14:28 +0200 Subject: [PATCH 13/48] [Glitch] Change follow button in account row to be more obvious in web UI (#24956) Port 0ddc89528213859bf4caeefd475a93ed973ab0e0 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 41 ++++++++++--------- .../glitch/styles/components/accounts.scss | 6 ++- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index d4ebd2801a..663c614cd1 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -16,6 +16,7 @@ import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { me } from '../initial_state'; import { Avatar } from './avatar'; +import Button from './button'; import { DisplayName } from './display_name'; import { IconButton } from './icon_button'; import Permalink from './permalink'; @@ -24,13 +25,13 @@ import { RelativeTimestamp } from './relative_timestamp'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, - requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, - unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, - unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, - mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' }, - unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' }, - mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, - block: { id: 'account.block', defaultMessage: 'Block @{name}' }, + cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' }, + unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, + unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, + mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' }, + unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' }, + mute: { id: 'account.mute_short', defaultMessage: 'Mute' }, + block: { id: 'account.block_short', defaultMessage: 'Block' }, }); class Account extends ImmutablePureComponent { @@ -97,39 +98,39 @@ class Account extends ImmutablePureComponent { let buttons; - if (onActionClick) { - if (actionIcon) { - buttons = ; - } - } else if (account.get('id') !== me && account.get('relationship', null) !== null) { + if (actionIcon && onActionClick) { + buttons = ; + } else if (!actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) { const following = account.getIn(['relationship', 'following']); const requested = account.getIn(['relationship', 'requested']); const blocking = account.getIn(['relationship', 'blocking']); const muting = account.getIn(['relationship', 'muting']); if (requested) { - buttons = ; + buttons =
)}
+ + {withBio && (account.get('note').length > 0 ? ( +
+ ) : ( +
+ ))}
); } From dc917cfcdffd34d151bd8fde12ed91166875765d Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Sat, 8 Jul 2023 18:11:22 +0900 Subject: [PATCH 15/48] [Glitch] Fix account.jsx imports (#25541) Port remaining part of e0d230fb37848efd788eea54a83869a63ff0fb39, 20e85c0e837ef17219a1c317d7962286c9b4237d and 9d45a444f90ca6b939eecb52167fc7f39765c438 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/account.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 86395407c4..911bf46e89 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -7,16 +7,15 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { counterRenderer } from 'flavours/glitch/components/common_counter'; - import { EmptyAccount } from 'flavours/glitch/components/empty_account'; -import ShortNumber from 'flavours/glitch/components/short_number'; +import { ShortNumber } from 'flavours/glitch/components/short_number'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { me } from '../initial_state'; import { Avatar } from './avatar'; -import Button from './button'; +import { Button } from './button'; +import { FollowersCounter } from './counters'; import { DisplayName } from './display_name'; import { IconButton } from './icon_button'; import Permalink from './permalink'; @@ -161,7 +160,7 @@ class Account extends ImmutablePureComponent { {!minimal && (
- {verification} {muteTimeRemaining} + {verification} {muteTimeRemaining}
)}
From 28d4f3ab70b67b5e842bac3890f3ba3808c0c2e3 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 2 Dec 2023 17:05:54 +0100 Subject: [PATCH 16/48] Fix account component styling wrt. upstream --- app/javascript/flavours/glitch/components/account.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 911bf46e89..61c0d45cef 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -53,7 +53,7 @@ class Account extends ImmutablePureComponent { }; static defaultProps = { - size: 36, + size: 46, }; handleFollow = () => { @@ -157,7 +157,7 @@ class Account extends ImmutablePureComponent {
- + {!minimal && (
{verification} {muteTimeRemaining} From 09062d393fbbe333337d1e0421e6afc8dd4dd1fa Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 2 Dec 2023 17:12:38 +0100 Subject: [PATCH 17/48] Fix more styling issues --- .../flavours/glitch/styles/components/accounts.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 842d550fbf..e5ac494425 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -6,7 +6,9 @@ .account__display-name { flex: 1 1 auto; - display: block; + display: flex; + align-items: center; + gap: 10px; color: $darker-text-color; overflow: hidden; text-decoration: none; @@ -55,13 +57,12 @@ .account__wrapper { display: flex; + gap: 10px; align-items: center; } .account__avatar-wrapper { float: left; - margin-inline-start: 12px; - margin-inline-end: 12px; } .account__avatar { From 21df2a68ac7827b63f012fd8c28e7888f6830c39 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 2 Dec 2023 17:16:21 +0100 Subject: [PATCH 18/48] Hide followers count when hidden by instance or user --- app/javascript/flavours/glitch/components/account.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 61c0d45cef..6342ef6f48 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -160,7 +160,9 @@ class Account extends ImmutablePureComponent { {!minimal && (
- {verification} {muteTimeRemaining} + {account.get('followers_count') !== -1 && ( + + )} {verification} {muteTimeRemaining}
)}
From f1241b4a3a6213060f4f22ea807ec3260e6a0a2c Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 3 Dec 2023 09:51:29 +0100 Subject: [PATCH 19/48] Fix translation string for `status.favourite` not having been changed everywhere (#2494) --- .../flavours/glitch/features/ui/components/favourite_modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx index d81dee22d1..6859a2b3ef 100644 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx @@ -19,7 +19,7 @@ import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; const messages = defineMessages({ - favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, + favourite: { id: 'status.favourite', defaultMessage: 'Favorite' }, }); class FavouriteModal extends ImmutablePureComponent { From 046141d2a4dcca459faa8444d5016407505ea64c Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 3 Dec 2023 11:21:34 +0100 Subject: [PATCH 20/48] Fix i18n unused check being tripped by `no` in YAML files (#2496) --- config/locales-glitch/no.yml | 2 +- config/locales-glitch/simple_form.no.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/locales-glitch/no.yml b/config/locales-glitch/no.yml index d2a4697e5d..d36c60a4ac 100644 --- a/config/locales-glitch/no.yml +++ b/config/locales-glitch/no.yml @@ -1 +1 @@ -no: +'no': diff --git a/config/locales-glitch/simple_form.no.yml b/config/locales-glitch/simple_form.no.yml index d2a4697e5d..d36c60a4ac 100644 --- a/config/locales-glitch/simple_form.no.yml +++ b/config/locales-glitch/simple_form.no.yml @@ -1 +1 @@ -no: +'no': From 335cfab32f2b61e69563b1318d781b51c6b4632f Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 3 Dec 2023 11:22:38 +0100 Subject: [PATCH 21/48] Change account note design to match upstream's (#2495) --- .../flavours/glitch/actions/account_notes.js | 36 +--- .../account/components/account_note.jsx | 202 ++++++++++++------ .../features/account/components/header.jsx | 8 - .../containers/account_note_container.js | 29 +-- .../containers/header_container.jsx | 5 - .../flavours/glitch/locales/en.json | 16 +- .../flavours/glitch/reducers/account_notes.js | 44 ---- .../flavours/glitch/reducers/index.ts | 2 - .../glitch/styles/components/accounts.scss | 46 +--- .../glitch/styles/components/misc.scss | 9 + 10 files changed, 158 insertions(+), 239 deletions(-) delete mode 100644 app/javascript/flavours/glitch/reducers/account_notes.js diff --git a/app/javascript/flavours/glitch/actions/account_notes.js b/app/javascript/flavours/glitch/actions/account_notes.js index 62a6b4cbb8..72b943300d 100644 --- a/app/javascript/flavours/glitch/actions/account_notes.js +++ b/app/javascript/flavours/glitch/actions/account_notes.js @@ -4,19 +4,12 @@ export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST'; export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS'; export const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL'; -export const ACCOUNT_NOTE_INIT_EDIT = 'ACCOUNT_NOTE_INIT_EDIT'; -export const ACCOUNT_NOTE_CANCEL = 'ACCOUNT_NOTE_CANCEL'; - -export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT'; - -export function submitAccountNote() { +export function submitAccountNote(id, value) { return (dispatch, getState) => { dispatch(submitAccountNoteRequest()); - const id = getState().getIn(['account_notes', 'edit', 'account_id']); - api(getState).post(`/api/v1/accounts/${id}/note`, { - comment: getState().getIn(['account_notes', 'edit', 'comment']), + comment: value, }).then(response => { dispatch(submitAccountNoteSuccess(response.data)); }).catch(error => dispatch(submitAccountNoteFail(error))); @@ -42,28 +35,3 @@ export function submitAccountNoteFail(error) { error, }; } - -export function initEditAccountNote(account) { - return (dispatch, getState) => { - const comment = getState().getIn(['relationships', account.get('id'), 'note']); - - dispatch({ - type: ACCOUNT_NOTE_INIT_EDIT, - account, - comment, - }); - }; -} - -export function cancelAccountNote() { - return { - type: ACCOUNT_NOTE_CANCEL, - }; -} - -export function changeAccountNoteComment(comment) { - return { - type: ACCOUNT_NOTE_CHANGE_COMMENT, - comment, - }; -} diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx index 041f8de983..bab523acf6 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx +++ b/app/javascript/flavours/glitch/features/account/components/account_note.jsx @@ -1,108 +1,174 @@ import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { is } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Textarea from 'react-textarea-autosize'; -import { Icon } from 'flavours/glitch/components/icon'; - const messages = defineMessages({ - placeholder: { id: 'account_note.glitch_placeholder', defaultMessage: 'No comment provided' }, + placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' }, }); -class Header extends ImmutablePureComponent { +class InlineAlert extends PureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, - isEditing: PropTypes.bool, - isSubmitting: PropTypes.bool, - accountNote: PropTypes.string, - onEditAccountNote: PropTypes.func.isRequired, - onCancelAccountNote: PropTypes.func.isRequired, - onSaveAccountNote: PropTypes.func.isRequired, - onChangeAccountNote: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + show: PropTypes.bool, }; - handleChangeAccountNote = (e) => { - this.props.onChangeAccountNote(e.target.value); + state = { + mountMessage: false, }; - componentWillUnmount () { - if (this.props.isEditing) { - this.props.onCancelAccountNote(); + static TRANSITION_DELAY = 200; + + UNSAFE_componentWillReceiveProps (nextProps) { + if (!this.props.show && nextProps.show) { + this.setState({ mountMessage: true }); + } else if (this.props.show && !nextProps.show) { + setTimeout(() => this.setState({ mountMessage: false }), InlineAlert.TRANSITION_DELAY); } } + render () { + const { show } = this.props; + const { mountMessage } = this.state; + + return ( + + {mountMessage && } + + ); + } + +} + +class AccountNote extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + value: PropTypes.string, + onSave: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + value: null, + saving: false, + saved: false, + }; + + UNSAFE_componentWillMount () { + this._reset(); + } + + UNSAFE_componentWillReceiveProps (nextProps) { + const accountWillChange = !is(this.props.account, nextProps.account); + const newState = {}; + + if (accountWillChange && this._isDirty()) { + this._save(false); + } + + if (accountWillChange || nextProps.value === this.state.value) { + newState.saving = false; + } + + if (this.props.value !== nextProps.value) { + newState.value = nextProps.value; + } + + this.setState(newState); + } + + componentWillUnmount () { + if (this._isDirty()) { + this._save(false); + } + } + + setTextareaRef = c => { + this.textarea = c; + }; + + handleChange = e => { + this.setState({ value: e.target.value, saving: false }); + }; + handleKeyDown = e => { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { - this.props.onSaveAccountNote(); + e.preventDefault(); + + this._save(); + + if (this.textarea) { + this.textarea.blur(); + } } else if (e.keyCode === 27) { - this.props.onCancelAccountNote(); + e.preventDefault(); + + this._reset(() => { + if (this.textarea) { + this.textarea.blur(); + } + }); } }; + handleBlur = () => { + if (this._isDirty()) { + this._save(); + } + }; + + _save (showMessage = true) { + this.setState({ saving: true }, () => this.props.onSave(this.state.value)); + + if (showMessage) { + this.setState({ saved: true }, () => setTimeout(() => this.setState({ saved: false }), 2000)); + } + } + + _reset (callback) { + this.setState({ value: this.props.value }, callback); + } + + _isDirty () { + return !this.state.saving && this.props.value !== null && this.state.value !== null && this.state.value !== this.props.value; + } + render () { - const { account, accountNote, isEditing, isSubmitting, intl } = this.props; + const { account, intl } = this.props; + const { value, saved } = this.state; - if (!account || (!accountNote && !isEditing)) { + if (!account) { return null; } - let action_buttons = null; - if (isEditing) { - action_buttons = ( -
- -
- -
- ); - } else { - action_buttons = ( -
- -
- ); - } - - let note_container = null; - if (isEditing) { - note_container = ( -