Merge 0d00c6a2ec
into a7eaec3391
This commit is contained in:
commit
4a28ba4370
|
@ -2,6 +2,7 @@
|
|||
/node_modules
|
||||
/__sapper__
|
||||
/mastodon
|
||||
/mastodon/*
|
||||
/mastodon.log
|
||||
/src/template.html
|
||||
/static/*.css
|
||||
|
|
|
@ -262,6 +262,8 @@ export default {
|
|||
unmute: 'Stummschaltung aufheben',
|
||||
zoomOut: 'Herauszoomen',
|
||||
zoomIn: 'Hineinzoomen',
|
||||
imageDescription: 'Image description',
|
||||
altMediaAriaLabel: 'alternative description (ALT) for media {number}',
|
||||
// Reporting
|
||||
reportingLabel: 'Du machst eine Meldung von {account} an die Moderatoren von {instance}.',
|
||||
additionalComments: 'Zusätzliche Kommentare',
|
||||
|
|
|
@ -270,6 +270,8 @@ export default {
|
|||
unmute: 'Unmute',
|
||||
zoomOut: 'Zoom out',
|
||||
zoomIn: 'Zoom in',
|
||||
imageDescription: 'Image description',
|
||||
altMediaAriaLabel: 'alternative description (ALT) for media {number}',
|
||||
// Reporting
|
||||
reportingLabel: 'You are reporting {account} to the moderators of {instance}.',
|
||||
additionalComments: 'Additional comments',
|
||||
|
|
|
@ -271,6 +271,8 @@ export default {
|
|||
unmute: 'Dejar de silenciar',
|
||||
zoomOut: 'Alejar',
|
||||
zoomIn: 'Acercar',
|
||||
imageDescription: 'Image description',
|
||||
altMediaAriaLabel: 'alternative description (ALT) for media {number}',
|
||||
// Reporting
|
||||
reportingLabel: 'Estás denunciando a {account} a los moderadores de {instance}.',
|
||||
additionalComments: 'Comentarios adicionales',
|
||||
|
|
|
@ -264,6 +264,8 @@ export default {
|
|||
unmute: 'Ne plus mettre en sourdine',
|
||||
zoomOut: 'Dé-zoomer',
|
||||
zoomIn: 'Zoomer',
|
||||
imageDescription: 'Image description',
|
||||
altMediaAriaLabel: 'alternative description (ALT) for media {number}',
|
||||
// Reporting
|
||||
reportingLabel: 'Vous signalez {account} aux modérateurs/modératrices de {instance}.',
|
||||
additionalComments: 'Commentaires additionels',
|
||||
|
|
|
@ -270,6 +270,8 @@ export default {
|
|||
unmute: 'Не игнорировать',
|
||||
zoomOut: 'Уменьшить',
|
||||
zoomIn: 'Увеличить',
|
||||
imageDescription: 'Image description',
|
||||
altMediaAriaLabel: 'alternative description (ALT) for media {number}',
|
||||
// Reporting
|
||||
reportingLabel: 'Вы отправляете жалобу на {account} модератору {instance}.',
|
||||
additionalComments: 'Дополнительные комментарии',
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
export const importShowMediaAltDialog = () => import(
|
||||
'../creators/showMediaAltDialog.js'
|
||||
).then(mod => mod.default)
|
|
@ -5,7 +5,12 @@
|
|||
background="var(--main-bg)"
|
||||
on:show="onShow()"
|
||||
>
|
||||
<ComposeBox {realm} autoFocus={true} dialogId={id} />
|
||||
<ComposeBox
|
||||
{realm}
|
||||
autoFocus={true}
|
||||
dialogId={id}
|
||||
hideBottomBorder={true}
|
||||
/>
|
||||
</ModalDialog>
|
||||
<script>
|
||||
import ModalDialog from './ModalDialog.html'
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
<ModalDialog
|
||||
{id}
|
||||
{label}
|
||||
title="{intl.imageDescription}"
|
||||
background="var(--main-bg)">
|
||||
<div class="content">
|
||||
{#if description}{description}{/if}
|
||||
</div>
|
||||
</ModalDialog>
|
||||
<style>
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 13px 11px 15px;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import ModalDialog from './ModalDialog.html'
|
||||
import { show } from '../helpers/showDialog.js'
|
||||
import { close } from '../helpers/closeDialog.js'
|
||||
import { oncreate } from '../helpers/onCreateDialog.js'
|
||||
|
||||
export default {
|
||||
oncreate,
|
||||
components: {
|
||||
ModalDialog
|
||||
},
|
||||
methods: {
|
||||
show,
|
||||
close
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -5,9 +5,10 @@
|
|||
<div class={contentsClass}
|
||||
role="dialog"
|
||||
aria-label={label || ''}
|
||||
style="background: {background || '#000'};"
|
||||
ref:node
|
||||
>
|
||||
<div class="modal-dialog-document" role="document" style="background: {background || '#000'};">
|
||||
<div class="modal-dialog-document" role="document">
|
||||
<div class="modal-dialog-header" on:click="onClickHeader(event)">
|
||||
{#if title}
|
||||
<h1 class="modal-dialog-title">{title}</h1>
|
||||
|
@ -28,6 +29,7 @@
|
|||
display: none;
|
||||
}
|
||||
:global(.modal-dialog) {
|
||||
--model-dialog-border-radius: 4px;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
|
@ -54,13 +56,13 @@
|
|||
.modal-dialog-contents {
|
||||
z-index: 10020;
|
||||
padding: 0;
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: calc(100% - 20px);
|
||||
max-width: calc(100% - 20px);
|
||||
flex: 0 1 580px;
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: var(--model-dialog-border-radius);
|
||||
}
|
||||
.modal-dialog-contents.should-animate {
|
||||
transition: opacity 0.2s linear;
|
||||
|
@ -80,12 +82,14 @@
|
|||
background: var(--nav-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: calc(var(--model-dialog-border-radius) - 1px);
|
||||
border-top-right-radius: calc(var(--model-dialog-border-radius) - 1px);
|
||||
}
|
||||
.modal-dialog-title {
|
||||
color: var(--nav-text-color);
|
||||
padding: 2px 0 2px 10px;
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.3em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import MediaAltDialog from '../components/MediaAltDialog.html'
|
||||
import { showDialog } from './showDialog.js'
|
||||
|
||||
export default function showMediaAltDialog (description) {
|
||||
return showDialog(MediaAltDialog, {
|
||||
label: 'ASKASKLAALAAABEL',
|
||||
description
|
||||
})
|
||||
}
|
|
@ -1,3 +1,4 @@
|
|||
<div class="media">
|
||||
{#if !blurhash && (type === 'video' || type === 'audio')}
|
||||
<button id={elementId}
|
||||
type="button"
|
||||
|
@ -70,8 +71,19 @@
|
|||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if !blurhash && type === 'image' && description}
|
||||
<button
|
||||
on:click='handleAltClick(event)'
|
||||
class="alt-button"
|
||||
aria-label={altLabel}
|
||||
>ALT</button>
|
||||
{/if}
|
||||
</div>
|
||||
<style>
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
:global(.status-media video, .status-media img) {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
@ -92,6 +104,32 @@
|
|||
|
||||
.inline-media {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alt-button {
|
||||
--alt-button-margin: 10px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: var(--alt-button-margin);
|
||||
left: var(--alt-button-margin);
|
||||
padding: 6px 8px;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: var(--alt-button-bg);
|
||||
color: var(--alt-button-color);
|
||||
}
|
||||
|
||||
/* Increase touch area to make it easy not to miss the button */
|
||||
.alt-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--alt-button-margin) - 1px);
|
||||
right: calc(-1 * var(--alt-button-margin) - 1px);
|
||||
bottom: calc(-1 * var(--alt-button-margin) - 1px);
|
||||
left: calc(-1 * var(--alt-button-margin) - 1px);
|
||||
}
|
||||
|
||||
@media (max-width: 240px) {
|
||||
|
@ -103,6 +141,7 @@
|
|||
<script>
|
||||
import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media.js'
|
||||
import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
|
||||
import { importShowMediaAltDialog } from '../dialog/asyncDialogs/importShowMediaAltDialog.js'
|
||||
import { mouseover } from '../../_utils/events.js'
|
||||
import NonAutoplayGifv from '../NonAutoplayGifv.html'
|
||||
import PlayVideoIcon from '../PlayVideoIcon.html'
|
||||
|
@ -116,7 +155,7 @@
|
|||
export default {
|
||||
async oncreate () {
|
||||
const { elementId } = this.get()
|
||||
registerClickDelegate(this, elementId, () => this.onClick())
|
||||
registerClickDelegate(this, elementId, () => this.handleImageClick())
|
||||
},
|
||||
computed: {
|
||||
focus: ({ meta }) => meta && meta.focus,
|
||||
|
@ -176,16 +215,29 @@ export default {
|
|||
),
|
||||
animatedLabel: ({ description }) => (
|
||||
formatIntl('intl.animatedImage', { description })
|
||||
),
|
||||
altLabel: ({ index }) => (
|
||||
formatIntl('intl.altMediaAriaLabel', { number: index + 1 })
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
handleImageClick () {
|
||||
(async () => {
|
||||
const { mediaAttachments, index } = this.get()
|
||||
const showMediaDialog = await importShowMediaDialog()
|
||||
showMediaDialog(mediaAttachments, index)
|
||||
})()
|
||||
return true
|
||||
},
|
||||
handleAltClick (event) {
|
||||
(async () => {
|
||||
const { mediaAttachments, index } = this.get()
|
||||
const media = mediaAttachments[index]
|
||||
const { description } = media
|
||||
const showMediaAltDialog = await importShowMediaAltDialog()
|
||||
showMediaAltDialog(description)
|
||||
})()
|
||||
return true
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
|
|
|
@ -23,22 +23,22 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.status-media.grouped-images > :global(.inline-media) {
|
||||
.status-media.grouped-images :global(.inline-media) {
|
||||
padding-bottom: 56.25%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-media.grouped-images.two-cols > :global(.inline-media) {
|
||||
.status-media.grouped-images.two-cols :global(.inline-media) {
|
||||
padding-bottom: calc(112.5% + 5px);
|
||||
}
|
||||
|
||||
.status-media.grouped-images.odd-cols > :global(.inline-media:first-child) {
|
||||
.status-media.grouped-images.odd-cols :global(.inline-media:first-child) {
|
||||
grid-row-end: span 2;
|
||||
padding-bottom: calc(112.5% + 5px);
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.status-media.not-grouped-images > :global(.inline-media) {
|
||||
.status-media.not-grouped-images :global(.inline-media) {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
|
|
@ -77,6 +77,9 @@
|
|||
--mask-opaque-bg: #{rgba($toast-bg, 0.8)};
|
||||
--loading-bg: #{#ededed};
|
||||
|
||||
--alt-button-bg: #{rgba($toast-bg, 0.8)};
|
||||
--alt-button-color: #{$secondary-text-color};
|
||||
|
||||
--account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.85)};
|
||||
--account-profile-bg: #{rgba($main-bg-color, 0.9)};
|
||||
|
||||
|
|
Loading…
Reference in New Issue