diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/components/MkMediaList.vue | 21 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 19 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/preferences.vue | 9 | ||||
| -rw-r--r-- | packages/frontend/src/preferences/def.ts | 3 | ||||
| -rw-r--r-- | packages/i18n/src/autogen/locale.ts | 4 |
5 files changed, 54 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index b070bfd892..9090e74bb6 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -4,13 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div> +<div :class="$style.root"> <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/> <div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container"> <div ref="gallery" :class="[ $style.medias, + ...(prefer.s.showMediaListByGridInWideArea ? [$style.gridInWideArea] : []), count === 1 ? [$style.n1, { [$style.n116_9]: prefer.s.mediaListWithOneImageAppearance === '16_9', [$style.n11_1]: prefer.s.mediaListWithOneImageAppearance === '1_1', @@ -230,6 +231,10 @@ defineExpose({ </script> <style lang="scss" module> +.root { + container-type: inline-size; +} + .container { position: relative; width: 100%; @@ -313,6 +318,20 @@ defineExpose({ border-radius: 8px; } +@container (min-width: 500px) { + .medias.gridInWideArea { + display: grid; + aspect-ratio: auto; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto; + grid-gap: 8px; + + > .media { + aspect-ratio: 1 / 1; + } + } +} + :global(.pswp) { --pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important; --pswp-bg: var(--MI_THEME-modalBg) !important; diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index aac52bfa26..4d06e42c05 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -705,7 +705,7 @@ onDeactivated(() => { .controlButton { padding: 6px; border-radius: calc(var(--MI-radius) / 2); - transition: background-color .2s ease-in-out; + transition: background-color .15s ease; font-size: 1.05rem; &:hover { @@ -760,4 +760,21 @@ onDeactivated(() => { } } } + +@container (max-width: 300px) { + .videoControls { + grid-template-areas: + "left . right" + "seekbar seekbar seekbar"; + grid-template-columns: auto 1fr auto; + } + + .controlsTime { + display: none; + } + + .controlsVolume { + display: none; + } +} </style> diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index 76b84795f6..13f76fac98 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -269,6 +269,14 @@ SPDX-License-Identifier: AGPL-3.0-only </MkPreferenceContainer> </SearchMarker> + <SearchMarker :keywords="['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'grid', 'wide', 'area']"> + <MkPreferenceContainer k="showMediaListByGridInWideArea"> + <MkSwitch v-model="showMediaListByGridInWideArea"> + <template #label><SearchLabel>{{ i18n.ts.showMediaListByGridInWideArea }}</SearchLabel></template> + </MkSwitch> + </MkPreferenceContainer> + </SearchMarker> + <SearchMarker :keywords="['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation']"> <MkPreferenceContainer k="instanceTicker"> <MkSelect @@ -890,6 +898,7 @@ const notificationStackAxis = prefer.model('notificationStackAxis'); const instanceTicker = prefer.model('instanceTicker'); const highlightSensitiveMedia = prefer.model('highlightSensitiveMedia'); const mediaListWithOneImageAppearance = prefer.model('mediaListWithOneImageAppearance'); +const showMediaListByGridInWideArea = prefer.model('showMediaListByGridInWideArea'); const reactionsDisplaySize = prefer.model('reactionsDisplaySize'); const limitWidthOfReaction = prefer.model('limitWidthOfReaction'); const squareAvatars = prefer.model('squareAvatars'); diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 8d1d33977d..62e888e023 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -320,6 +320,9 @@ export const PREF_DEF = definePreferences({ mediaListWithOneImageAppearance: { default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3', }, + showMediaListByGridInWideArea: { + default: false, + }, notificationPosition: { default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom', }, diff --git a/packages/i18n/src/autogen/locale.ts b/packages/i18n/src/autogen/locale.ts index ca253a5c97..f814f3ecc2 100644 --- a/packages/i18n/src/autogen/locale.ts +++ b/packages/i18n/src/autogen/locale.ts @@ -2185,6 +2185,10 @@ export interface Locale extends ILocale { */ "limitTo": ParameterizedString<"x">; /** + * 画面幅が広いときはメディアリストを横並びで表示する + */ + "showMediaListByGridInWideArea": string; + /** * フォロー申請はありません */ "noFollowRequests": string; |