From e078ede0972c32f9e61fcbbb1c01dc6bcddde157 Mon Sep 17 00:00:00 2001 From: Danko Aleksejevs Date: Sun, 18 Feb 2024 20:10:58 +0200 Subject: [PATCH 1/4] Remove status content from mobile actions modal (#2615) --- .../features/ui/components/actions_modal.jsx | 31 +------------------ 1 file changed, 1 insertion(+), 30 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx index 7f2027eb01..82ccc88475 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx @@ -5,11 +5,6 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Avatar } from 'flavours/glitch/components/avatar'; -import { DisplayName } from 'flavours/glitch/components/display_name'; -import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import StatusContent from 'flavours/glitch/components/status_content'; - import { IconButton } from '../../../components/icon_button'; export default class ActionsModal extends ImmutablePureComponent { @@ -58,33 +53,9 @@ export default class ActionsModal extends ImmutablePureComponent { }; render () { - const status = this.props.status && ( -
-
-
- - - -
- - -
- -
- - - -
- - -
- ); - return (
- {status} - -
From 9a11b077f78e2228b9316571d37158816ff5028a Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 18 Feb 2024 19:12:23 +0100 Subject: [PATCH 2/4] Reduce CSS and markup differences with upstream (#2629) --- .../compose/components/dropdown_menu.jsx | 6 ++- .../features/compose/components/options.jsx | 4 +- .../flavours/glitch/styles/components.scss | 45 +++++++++++-------- 3 files changed, 34 insertions(+), 21 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx index 33f28e46f4..e5f24b51f9 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx @@ -156,7 +156,11 @@ export default class ComposerOptionsDropdownContent extends PureComponent { if (!contents) { contents = ( <> - {icon && } + {icon && ( +
+ +
+ )}
{text} diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx index 314b6e638f..5460960364 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx @@ -110,7 +110,9 @@ class ToggleOptionImpl extends ImmutablePureComponent { return ( <> - +
+ +
{text} diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 029c87c814..b425fea1de 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -698,6 +698,22 @@ body > [data-popper-placement] { .icon-button { height: 100%; } + + .compose-form__upload-button-icon { + line-height: 27px; + } + + .compose-form__sensitive-button { + display: none; + + &.compose-form__sensitive-button--visible { + display: block; + } + + .compose-form__sensitive-button__icon { + line-height: 27px; + } + } } .icon-button, @@ -1057,8 +1073,9 @@ body > [data-popper-placement] { } &.light { - .status__relative-time { - color: $lighter-text-color; + .status__relative-time, + .status__visibility-icon { + color: $light-text-color; } .status__display-name { @@ -4142,19 +4159,18 @@ a.status-card.compact:hover { background: $base-overlay-background; color: $darker-text-color; border: 0; + padding: 0; width: 100%; height: 100%; + border-radius: 4px; + appearance: none; &:hover, &:active, &:focus { + padding: 0; color: lighten($darker-text-color, 8%); } - - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player - } - @include fullwidth-gallery; } .media-spoiler__warning { @@ -4165,7 +4181,7 @@ a.status-card.compact:hover { .media-spoiler__trigger { display: block; font-size: 11px; - font-weight: 500; + font-weight: 700; } .spoiler-button { @@ -4829,10 +4845,6 @@ a.status-card.compact:hover { flex: 1 1 auto; color: $lighter-text-color; - &:not(:first-child) { - margin-inline-start: 10px; - } - strong { font-weight: 500; display: block; @@ -4864,11 +4876,6 @@ a.status-card.compact:hover { min-width: 75%; } -.account__header__wrapper { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); -} - .account__disclaimer { display: flex; padding: 10px; @@ -5729,9 +5736,9 @@ a.status-card.compact:hover { display: flex; } -.video-modal__container { +.video-modal .video-player { + max-height: 80vh; max-width: 100vw; - max-height: 100vh; } .audio-modal__container { From 034be5ad507dc3e08515b18fcc53ade646e026c7 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 18 Feb 2024 20:45:36 +0100 Subject: [PATCH 3/4] Further reduce CSS differences with upstream (#2630) --- .../flavours/glitch/styles/components.scss | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index b425fea1de..fcac924c09 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1272,8 +1272,6 @@ body > [data-popper-placement] { .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); - color: inherit; - text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -1347,10 +1345,6 @@ body > [data-popper-placement] { align-items: center; } -.account__avatar-wrapper { - float: left; -} - .account__avatar { @include avatar-radius; @@ -1484,10 +1478,13 @@ a.status__display-name, } .detailed-status__display-name { - color: $secondary-text-color; - display: block; - line-height: 24px; - margin-bottom: 15px; + color: $darker-text-color; + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + line-height: 22px; + margin-bottom: 16px; overflow: hidden; strong, @@ -1498,16 +1495,10 @@ a.status__display-name, } strong { - font-size: 16px; color: $primary-text-color; } } -.detailed-status__display-avatar { - float: left; - margin-inline-end: 10px; -} - .status__relative-time, .detailed-status__datetime { &:hover { @@ -6134,8 +6125,7 @@ a.status-card.compact:hover { justify-content: space-between; align-items: center; background: $ui-secondary-color; - padding: 10px; - line-height: 36px; + padding: 10px; // purposefully reduce padding in glitch-soc & > div { flex: 1 1 auto; @@ -8403,7 +8393,6 @@ noscript { &--compact &__item { padding: 10px; - padding-inline-end: 28px; } } From bbecf1c56b12fc2fa3c980d30a66e46903d12b7a Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 18 Feb 2024 22:30:20 +0100 Subject: [PATCH 4/4] Further reduce differences with upstream (#2631) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Further reduce CSS diffs with upstream * Remove superfluous “Sensitive content” label in media galleries and clean up dead code --- .../glitch/components/media_gallery.jsx | 30 ++----------- .../flavours/glitch/locales/en.json | 2 - .../flavours/glitch/styles/components.scss | 44 +++---------------- 3 files changed, 10 insertions(+), 66 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx index 9db2a43009..ec18f882b6 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.jsx +++ b/app/javascript/flavours/glitch/components/media_gallery.jsx @@ -18,26 +18,7 @@ import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state'; import { IconButton } from './icon_button'; const messages = defineMessages({ - hidden: { - defaultMessage: 'Media hidden', - id: 'status.media_hidden', - }, - sensitive: { - defaultMessage: 'Sensitive', - id: 'media_gallery.sensitive', - }, - toggle: { - defaultMessage: 'Click to view', - id: 'status.sensitive_toggle', - }, - toggle_visible: { - defaultMessage: '{number, plural, one {Hide image} other {Hide images}}', - id: 'media_gallery.toggle_visible', - }, - warning: { - defaultMessage: 'Sensitive content', - id: 'status.sensitive_warning', - }, + toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' }, }); class Item extends PureComponent { @@ -299,8 +280,8 @@ class MediaGallery extends PureComponent { this.props.onOpenMedia(this.props.media, index, this.props.lang); }; - handleRef = (node) => { - this.node = node; + handleRef = c => { + this.node = c; if (this.node) { this._setDimensions(); @@ -379,11 +360,6 @@ class MediaGallery extends PureComponent {
{spoilerButton} - {visible && sensitive && ( - - - - )}
{children} diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 829492c13c..94e7415b03 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -52,7 +52,6 @@ "keyboard_shortcuts.bookmark": "to bookmark", "keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting", "keyboard_shortcuts.toggle_collapse": "to collapse/uncollapse toots", - "media_gallery.sensitive": "Sensitive", "moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.", "navigation_bar.app_settings": "App settings", "navigation_bar.featured_users": "Featured users", @@ -153,7 +152,6 @@ "status.in_reply_to": "This toot is a reply", "status.is_poll": "This toot is a poll", "status.local_only": "Only visible from your instance", - "status.sensitive_toggle": "Click to view", "status.uncollapse": "Uncollapse", "suggestions.dismiss": "Dismiss suggestion" } diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index fcac924c09..a74d862c28 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -602,7 +602,7 @@ body > [data-popper-placement] { height: 16px; } - .autosuggest-account .display-name > span { + .autosuggest-account .display-name__account { color: $lighter-text-color; } @@ -837,11 +837,6 @@ body > [data-popper-placement] { line-height: 24px; overflow: hidden; text-decoration: none; - - & > .display-name { - line-height: unset; - height: unset; - } } .reply-indicator__display-avatar { @@ -1043,12 +1038,6 @@ body > [data-popper-placement] { border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: auto; - @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { - // Add margin to avoid Edge auto-hiding scrollbar appearing over content. - // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-inline-end: 28px; // 12px + 16px - } - @keyframes fade { 0% { opacity: 0; @@ -2178,6 +2167,7 @@ $ui-header-height: 55px; .columns-area--mobile { flex-direction: column; width: 100%; + height: 100%; margin: 0 auto; .column, @@ -7444,8 +7434,11 @@ img.modal-warning { .notification__filter-bar, .account__section-headline { - // deliberate glitch-soc choice for now - background: darken($ui-base-color, 4%); + background: darken( + $ui-base-color, + 4% + ); // deliberate glitch-soc choice for now + border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; display: flex; @@ -7584,24 +7577,6 @@ noscript { } } -// glitch-specific “sensitive” label on displayed images; TODO: remove it? -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 18px; - text-transform: uppercase; - opacity: 0.9; - transition: opacity 0.1s ease; - - .media-gallery:hover & { - opacity: 1; - } -} - .embed-modal { width: auto; max-width: 80vw; @@ -8457,11 +8432,6 @@ noscript { color: $primary-text-color; text-decoration: none; - .icon { - width: 15px; - height: 15px; - } - &:hover, &:focus, &:active {