scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 05:18:01 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5942 from sboursen-scinote/sb_SCI-8987

Browse source 
Fix micro-interactions for shareable links modals [SCI-8987]
This commit is contained in:
ajugo 2023-08-17 15:28:43 +02:00 • committed by GitHub
commit dd80b4019b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/shared_styles/elements/toggles.scss
View file

@ -52,6 +52,12 @@ input[type="checkbox"].sci-toggle-checkbox {
} }
} }
&:focus + .sci-toggle-checkbox-label {
box-shadow: 0 0 0 4px var(--sn-science-blue-hover);
outline: 2px solid transparent;
outline-offset: 2px;
}
&.hidden + .sci-toggle-checkbox-label { &.hidden + .sci-toggle-checkbox-label {
display: none; display: none;
} }

6
app/javascript/vue/shareable_links/components/delete_shareable_link.vue
View file

@ -3,7 +3,7 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" tabindex="0" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="modal-destroy-shareable-link"> <h4 class="modal-title" id="modal-destroy-shareable-link">
{{ i18n.t('shareable_links.destroy_modal.title')}} {{ i18n.t('shareable_links.destroy_modal.title')}}
</h4> </h4>
@ -12,8 +12,8 @@
<p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p> <p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button> <button class="btn btn-secondary" tabindex="0" @click="cancel">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-danger" @click="confirm">{{ i18n.t('shareable_links.destroy_modal.deactivate')}}</button> <button class="btn btn-danger" tabindex="0" @click="confirm">{{ i18n.t('shareable_links.destroy_modal.deactivate')}}</button>
</div> </div>
</div> </div>
</div> </div>

8
app/javascript/vue/shareable_links/components/shareable_link_modal.vue
View file

@ -18,6 +18,7 @@
type="button" type="button"
class="close float-right !ml-auto" class="close float-right !ml-auto"
data-dismiss="modal" data-dismiss="modal"
tabindex="0"
aria-label="Close" aria-label="Close"
> >
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@ -31,6 +32,7 @@
v-model="sharedEnabled" v-model="sharedEnabled"
id="checkbox" id="checkbox"
class="sci-toggle-checkbox" class="sci-toggle-checkbox"
tabindex="0"
@change="checkboxChange" @change="checkboxChange"
@keyup.enter="handleCheckboxEnter"/> @keyup.enter="handleCheckboxEnter"/>
<span class="sci-toggle-checkbox-label"></span> <span class="sci-toggle-checkbox-label"></span>
@ -39,6 +41,7 @@
<div> <div>
<div class="sci-input-container-v2 textarea-lg mb-2"> <div class="sci-input-container-v2 textarea-lg mb-2">
<textarea ref="textarea" <textarea ref="textarea"
tabindex="0"
class="sci-input-field" class="sci-input-field"
:class="{ 'error': error }" :class="{ 'error': error }"
v-model="description" v-model="description"
@ -54,8 +57,8 @@
<div class="mb-2" v-if="editing"> <div class="mb-2" v-if="editing">
<div class="sci-btn-group flex justify-end"> <div class="sci-btn-group flex justify-end">
<button class="btn btn-secondary btn-sm" tabindex="-1" @mousedown="cancelDescriptionEdit">{{ i18n.t('general.cancel') }}</button> <button class="btn btn-secondary btn-sm" tabindex="0" @mousedown="cancelDescriptionEdit">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-secondary btn-sm" tabindex="-1" @mousedown="saveDescription" :disabled="error">{{ i18n.t('general.save') }}</button> <button class="btn btn-secondary btn-sm" tabindex="0" @mousedown="saveDescription" :disabled="error">{{ i18n.t('general.save') }}</button>
</div> </div>
</div> </div>
</div> </div>
@ -71,6 +74,7 @@
:disabled="true" :disabled="true"
/> />
<button class="btn btn-primary share-link-copy" <button class="btn btn-primary share-link-copy"
tabindex="0"
@click="copy($refs.clone.value)" @click="copy($refs.clone.value)"
:disabled="!sharedEnabled">{{ i18n.t('shareable_links.modal.copy_button') }} :disabled="!sharedEnabled">{{ i18n.t('shareable_links.modal.copy_button') }}
</button> </button>