diff options
Diffstat (limited to 'app/javascript')
5 files changed, 41 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js index 70e86905f..2846d53d7 100644 --- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js @@ -244,6 +244,16 @@ class FocalPointModal extends ImmutablePureComponent { const previewWidth = 200; const previewHeight = previewWidth / previewRatio; + let descriptionLabel = null; + + if (media.get('type') === 'audio') { + descriptionLabel = <FormattedMessage id='upload_form.audio_description' defaultMessage='Describe for people with hearing loss' />; + } else if (media.get('type') === 'video') { + descriptionLabel = <FormattedMessage id='upload_form.video_description' defaultMessage='Describe for people with hearing loss or visual impairment' />; + } else { + descriptionLabel = <FormattedMessage id='upload_form.description' defaultMessage='Describe for the visually impaired' />; + } + return ( <div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}> <div className='report-modal__target'> @@ -255,7 +265,9 @@ class FocalPointModal extends ImmutablePureComponent { <div className='report-modal__comment'> {focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>} - <label className='setting-text-label' htmlFor='upload-modal__description'><FormattedMessage id='upload_form.description' defaultMessage='Describe for the visually impaired' /></label> + <label className='setting-text-label' htmlFor='upload-modal__description'> + {descriptionLabel} + </label> <div className='setting-text__wrapper'> <Textarea diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 747c5309d..1920c33ea 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -504,6 +504,10 @@ code { &__overlay-area { position: relative; + &__blurred form { + filter: blur(2px); + } + &__overlay { position: absolute; top: 0; @@ -514,8 +518,10 @@ code { justify-content: center; align-items: center; background: rgba($ui-base-color, 0.65); - backdrop-filter: blur(2px); border-radius: 4px; + margin-left: -4px; + margin-top: -4px; + padding: 4px; &__content { text-align: center; diff --git a/app/javascript/mastodon/features/compose/components/poll_form.js b/app/javascript/mastodon/features/compose/components/poll_form.js index 923f1029f..7dac950b1 100644 --- a/app/javascript/mastodon/features/compose/components/poll_form.js +++ b/app/javascript/mastodon/features/compose/components/poll_form.js @@ -144,7 +144,7 @@ class PollForm extends ImmutablePureComponent { <div className='poll__footer'> <button disabled={options.size >= 5} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button> - <select value={expiresIn} onChange={this.handleSelectDuration}> + <select value={expiresIn} onBlur={this.handleSelectDuration}> <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option> <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option> <option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option> diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js index bbd463fca..ddbe3961d 100644 --- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js +++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js @@ -244,6 +244,16 @@ class FocalPointModal extends ImmutablePureComponent { const previewWidth = 200; const previewHeight = previewWidth / previewRatio; + let descriptionLabel = null; + + if (media.get('type') === 'audio') { + descriptionLabel = <FormattedMessage id='upload_form.audio_description' defaultMessage='Describe for people with hearing loss' />; + } else if (media.get('type') === 'video') { + descriptionLabel = <FormattedMessage id='upload_form.video_description' defaultMessage='Describe for people with hearing loss or visual impairment' />; + } else { + descriptionLabel = <FormattedMessage id='upload_form.description' defaultMessage='Describe for the visually impaired' />; + } + return ( <div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}> <div className='report-modal__target'> @@ -255,7 +265,9 @@ class FocalPointModal extends ImmutablePureComponent { <div className='report-modal__comment'> {focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>} - <label className='setting-text-label' htmlFor='upload-modal__description'><FormattedMessage id='upload_form.description' defaultMessage='Describe for the visually impaired' /></label> + <label className='setting-text-label' htmlFor='upload-modal__description'> + {descriptionLabel} + </label> <div className='setting-text__wrapper'> <Textarea diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index b729d912e..a0478bf7f 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -513,6 +513,10 @@ code { &__overlay-area { position: relative; + &__blurred form { + filter: blur(2px); + } + &__overlay { position: absolute; top: 0; @@ -523,8 +527,10 @@ code { justify-content: center; align-items: center; background: rgba($ui-base-color, 0.65); - backdrop-filter: blur(2px); border-radius: 4px; + margin-left: -4px; + margin-top: -4px; + padding: 4px; &__content { text-align: center; |