scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-11 15:45:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix micro-interactions for shareable links modals [SCI-8987]

Browse source
This commit is contained in:
sboursen-scinote 2023-08-08 18:39:32 +02:00
parent b2b4c30ee2
commit ef9368d2cb
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 {
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-content">
<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">
{{ i18n.t('shareable_links.destroy_modal.title')}}
</h4>
@ -12,8 +12,8 @@
<p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" @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-secondary" tabindex="0" @click="cancel">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-danger" tabindex="0" @click="confirm">{{ i18n.t('shareable_links.destroy_modal.deactivate')}}</button>
</div>
</div>
</div>

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

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