pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-18 05:25:40 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): drop the compact attachments media size preference (#1872)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:35:28 +02:00
1 parent eda29c0e34
commit 844952db51
18 files changed
+62 -383
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/user/components/modals/tabs/ChatSettingsTab.tsx
-5
View File
@@ -2,9 +2,7 @@
import {SettingsSection} from '@app/features/app/components/dialogs/shared/SettingsSection';
import {SettingsTabContainer, SettingsTabContent} from '@app/features/app/components/dialogs/shared/SettingsTabLayout';
import {MEDIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import {InputTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInputTab';
import {MediaTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab';
import {DisplayTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/DisplayTab';
import {msg} from '@lingui/core/macro';
import {useLingui} from '@lingui/react/macro';
@@ -30,9 +28,6 @@ const ChatSettingsTab: React.FC = observer(() => {
<SettingsSection id="input" title={i18n._(INPUT_DESCRIPTOR)} data-flx="user.chat-settings-tab.input">
<InputTabContent data-flx="user.chat-settings-tab.input-tab-content" />
</SettingsSection>
<SettingsSection id="media" title={i18n._(MEDIA_DESCRIPTOR)} data-flx="user.chat-settings-tab.media">
<MediaTabContent data-flx="user.chat-settings-tab.media-tab-content" />
</SettingsSection>
</SettingsTabContent>
</SettingsTabContainer>
);
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInline.tsx
-9
View File
@@ -1,10 +1,8 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {SettingsSection} from '@app/features/app/components/dialogs/shared/SettingsSection';
import {MEDIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import styles from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInline.module.css';
import {InputTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabInputTab';
import {MediaTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab';
import {DisplayTabContent} from '@app/features/user/components/modals/tabs/chat_settings_tab/DisplayTab';
import {msg} from '@lingui/core/macro';
import {useLingui} from '@lingui/react/macro';
@@ -37,13 +35,6 @@ export const ChatSettingsInlineContent: React.FC = observer(() => {
>
<InputTabContent data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.input-tab-content" />
</SettingsSection>
<SettingsSection
id="media"
title={i18n._(MEDIA_DESCRIPTOR)}
data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.media"
>
<MediaTabContent data-flx="user.chat-settings-tab.inline.chat-settings-inline-content.media-tab-content" />
</SettingsSection>
</div>
);
});
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.module.css
-137
View File
@@ -1,137 +0,0 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.sectionContent {
margin-top: 0.5rem;
}
.radioSections {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.radioSection {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.radioLabelContainer {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.radioLabel {
display: block;
font-weight: 500;
font-size: 0.875rem;
color: var(--text-primary);
}
.previewContainer {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.previewWrapper {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
max-width: 28rem;
width: 20rem;
}
.previewBox {
position: relative;
display: flex;
aspect-ratio: 16 / 9;
width: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--background-tertiary);
}
.previewIcon {
height: 4rem;
width: 4rem;
color: var(--text-tertiary);
}
.gifIndicator {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 10;
border-radius: 0.25rem;
background-color: rgba(0, 0, 0, 0.6);
padding: 0.125rem 0.375rem;
font-weight: 600;
font-size: 0.8125rem;
line-height: 1.1;
color: white;
}
.actionButtons {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
display: flex;
gap: 0.25rem;
}
.actionButton {
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border: 0.0625rem solid var(--background-modifier-accent);
background-color: var(--background-primary);
box-shadow:
0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
cursor: pointer;
}
.actionButtonIcon {
color: var(--text-primary);
}
.suppressButton {
position: absolute;
top: 0.25rem;
right: -2rem;
display: flex;
height: 1.5rem;
width: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
background: transparent;
border: none;
color: var(--text-tertiary);
transition:
background-color 0.15s,
color 0.15s;
cursor: pointer;
padding: 0;
}
.suppressButton:hover {
color: var(--status-danger);
}
.expiryFootnotePreview {
width: 100%;
}
fluxer_app/src/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.tsx
-101
View File
@@ -1,101 +0,0 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import * as AccessibilityCommands from '@app/features/accessibility/commands/AccessibilityCommands';
import Accessibility, {MediaDimensionSize} from '@app/features/accessibility/state/Accessibility';
import type {RadioOption} from '@app/features/ui/radio_group/RadioGroup';
import {RadioGroup} from '@app/features/ui/radio_group/RadioGroup';
import styles from '@app/features/user/components/modals/tabs/chat_settings_tab/ChatSettingsTabMediaTab.module.css';
import {msg} from '@lingui/core/macro';
import {Trans, useLingui} from '@lingui/react/macro';
import {observer} from 'mobx-react-lite';
import type React from 'react';
import {useMemo} from 'react';
const COMPACT_400X300_DESCRIPTOR = msg({
message: 'Compact (400x300)',
comment: 'Short label in the media tab. Keep it concise.',
});
const SMALLER_MEDIA_SIZE_DESCRIPTOR = msg({
message: 'Smaller media size',
comment: 'Short label in the media tab. Keep it concise.',
});
const COMFORTABLE_550X400_DESCRIPTOR = msg({
message: 'Comfortable (550x400)',
comment: 'Short label in the media tab. Keep it concise.',
});
const LARGER_MEDIA_SIZE_WITH_MORE_DETAIL_DESCRIPTOR = msg({
message: 'Larger media size with more detail',
comment: 'Description text in the media tab.',
});
const SELECT_MEDIA_SIZE_FOR_EMBEDDED_CONTENT_FROM_LINKS_DESCRIPTOR = msg({
message: 'Select media size for embedded content from links',
comment: 'Button or menu action label in the media tab. Keep it concise.',
});
const SELECT_MEDIA_SIZE_FOR_UPLOADED_ATTACHMENTS_DESCRIPTOR = msg({
message: 'Select media size for uploaded attachments',
comment: 'Button or menu action label in the media tab. Keep it concise.',
});
export const MediaTabContent: React.FC = observer(() => {
const {i18n} = useLingui();
const {embedMediaDimensionSize, attachmentMediaDimensionSize} = Accessibility;
const mediaSizeOptions = useMemo(
(): ReadonlyArray<RadioOption<MediaDimensionSize>> => [
{
value: MediaDimensionSize.SMALL,
name: i18n._(COMPACT_400X300_DESCRIPTOR),
desc: i18n._(SMALLER_MEDIA_SIZE_DESCRIPTOR),
},
{
value: MediaDimensionSize.LARGE,
name: i18n._(COMFORTABLE_550X400_DESCRIPTOR),
desc: i18n._(LARGER_MEDIA_SIZE_WITH_MORE_DETAIL_DESCRIPTOR),
},
],
[i18n.locale],
);
return (
<div className={styles.radioSections} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-sections">
<div className={styles.radioSection} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-section">
<div
className={styles.radioLabelContainer}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label-container"
>
<div className={styles.radioLabel} data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label">
<Trans>Media from links (embeds)</Trans>
</div>
</div>
<RadioGroup
options={mediaSizeOptions}
value={embedMediaDimensionSize}
onChange={(value) => AccessibilityCommands.update({embedMediaDimensionSize: value})}
aria-label={i18n._(SELECT_MEDIA_SIZE_FOR_EMBEDDED_CONTENT_FROM_LINKS_DESCRIPTOR)}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-group.update"
/>
</div>
<div
className={styles.radioSection}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-section--2"
>
<div
className={styles.radioLabelContainer}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label-container--2"
>
<div
className={styles.radioLabel}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-label--2"
>
<Trans>Uploaded attachments</Trans>
</div>
</div>
<RadioGroup
options={mediaSizeOptions}
value={attachmentMediaDimensionSize}
onChange={(value) => AccessibilityCommands.update({attachmentMediaDimensionSize: value})}
aria-label={i18n._(SELECT_MEDIA_SIZE_FOR_UPLOADED_ATTACHMENTS_DESCRIPTOR)}
data-flx="user.chat-settings-tab.media-tab.media-tab-content.radio-group.update--2"
/>
</div>
</div>
);
});