fix: improve UI/a11y of media upload (#1241)

This commit is contained in:
Nolan Lawson 2019-05-27 12:31:49 -07:00 committed by GitHub
parent 482ee3d3bb
commit 12179505e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 12 deletions

View file

@ -8,12 +8,12 @@
</button>
</div>
<div class="compose-media-alt">
<input id="compose-media-input-{uuid}"
type="text"
<textarea id="compose-media-input-{uuid}"
class="compose-media-alt-input"
placeholder="Description"
placeholder="Describe for the visually impaired"
ref:textarea
bind:value=rawText
>
></textarea>
<label for="compose-media-input-{uuid}" class="sr-only">
Describe {shortName} for the visually impaired
</label>
@ -51,6 +51,9 @@
font-size: 1.2em;
background: var(--alt-input-bg);
color: var(--body-text-color);
max-height: 100px;
border: 1px solid var(--input-border);
resize: none;
}
.compose-media-alt-input:focus {
background: var(--main-bg);
@ -66,12 +69,15 @@
margin: 2px;
}
.compose-media-delete-button {
padding: 10px;
background: none;
border: none;
padding: 7px 10px 5px;
background: var(--floating-button-bg);
border: 1px solid var(--button-border);
}
.compose-media-delete-button:hover {
background: var(--toast-border);
background: var(--floating-button-bg-hover);
}
.compose-media-delete-button:active {
background: var(--floating-button-bg-active);
}
:global(.compose-media-delete-button-svg) {
fill: var(--button-text);
@ -87,6 +93,9 @@
.compose-media-realm-dialog {
max-height: 15vh;
}
.compose-media-alt-input {
max-height: 7vh;
}
}
</style>
<script>
@ -96,11 +105,16 @@
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras'
import SvgIcon from '../SvgIcon.html'
import { autosize } from '../../_thirdparty/autosize/autosize'
export default {
oncreate () {
this.setupSyncFromStore()
this.setupSyncToStore()
this.setupAutosize()
},
ondestroy () {
this.teardownAutosize()
},
data: () => ({
rawText: ''
@ -141,6 +155,12 @@
saveStore()
}, { init: false })
},
setupAutosize () {
autosize(this.refs.textarea)
},
teardownAutosize () {
autosize.destroy(this.refs.textarea)
},
onDeleteMedia () {
let {
realm,

View file

@ -87,7 +87,7 @@
--status-direct-background: #{darken($body-bg-color, 5%)};
--main-theme-color: #{$main-theme-color};
--warning-color: #{#e01f19};
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
--alt-input-bg: #{rgba($main-bg-color, 0.9)};
--muted-modal-text: #{$secondary-text-color};
--muted-modal-bg: #{transparent};
@ -112,4 +112,8 @@
--tooltip-bg: rgba(30, 30, 30, 0.9);
--tooltip-color: white;
--floating-button-bg: #{rgba($main-bg-color, 0.8)};
--floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)};
--floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)};
}

View file

@ -18,7 +18,7 @@
--status-direct-background: #{darken($body-bg-color, 5%)};
--main-theme-color: #{$main-theme-color};
--warning-color: #{#c7423d};
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
--alt-input-bg: #{rgba($main-bg-color, 0.9)};
--muted-modal-bg: #{transparent};
--muted-modal-focus: #{#999};

View file

@ -82,7 +82,7 @@ export const instanceSettingNotificationMentions = $('#instance-option-notificat
export const notificationBadge = $('#main-nav li:nth-child(2) .nav-link-badge')
export function getComposeModalNthMediaAltInput (n) {
return $(`.modal-dialog .compose-media:nth-child(${n}) .compose-media-alt input`)
return $(`.modal-dialog .compose-media:nth-child(${n}) .compose-media-alt textarea`)
}
export function getComposeModalNthMediaImg (n) {
@ -211,7 +211,7 @@ export const getScrollTop = exec(() => {
})
export function getNthMediaAltInput (n) {
return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt input`)
return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt textarea`)
}
export function getNthComposeReplyInput (n) {