Add hide button to media modal

This commit is contained in:
Tusooa Zhu 2022-03-03 12:51:13 -05:00
parent 7e21853cca
commit 5fb302d0f1
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 60 additions and 20 deletions

View file

@ -10,13 +10,15 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronLeft, faChevronLeft,
faChevronRight, faChevronRight,
faCircleNotch faCircleNotch,
faTimes
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronLeft, faChevronLeft,
faChevronRight, faChevronRight,
faCircleNotch faCircleNotch,
faTimes
) )
const MediaModal = { const MediaModal = {

View file

@ -58,25 +58,36 @@
<button <button
v-if="canNavigate" v-if="canNavigate"
:title="$t('media_modal.previous')" :title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev" class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
@click.stop.prevent="goPrev" @click.stop.prevent="goPrev"
> >
<FAIcon <FAIcon
class="arrow-icon" class="button-icon arrow-icon"
icon="chevron-left" icon="chevron-left"
/> />
</button> </button>
<button <button
v-if="canNavigate" v-if="canNavigate"
:title="$t('media_modal.next')" :title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next" class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
@click.stop.prevent="goNext" @click.stop.prevent="goNext"
> >
<FAIcon <FAIcon
class="arrow-icon" class="button-icon arrow-icon"
icon="chevron-right" icon="chevron-right"
/> />
</button> </button>
<button
class="modal-view-button modal-view-button-hide"
:title="$t('media_modal.hide')"
@click.stop.prevent="hide"
>
<FAIcon
class="button-icon"
icon="times"
/>
</button>
<span <span
v-if="description" v-if="description"
class="description" class="description"
@ -104,11 +115,16 @@
<script src="./media_modal.js"></script> <script src="./media_modal.js"></script>
<style lang="scss"> <style lang="scss">
$modal-view-button-icon-height: 30px;
$modal-view-button-icon-width: 32px;
$modal-view-button-icon-margin: 6px;
.modal-view.media-modal-view { .modal-view.media-modal-view {
z-index: 1001; z-index: 1001;
flex-direction: column; flex-direction: column;
.modal-view-button-arrow { .modal-view-button-arrow,
.modal-view-button-hide {
opacity: 0.75; opacity: 0.75;
&:focus, &:focus,
@ -139,8 +155,8 @@
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
max-width: 90%; max-width: 100%;
max-height: 95%; max-height: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
@ -200,13 +216,7 @@
} }
} }
.modal-view-button-arrow { .modal-view-button {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0; border: 0;
padding: 0; padding: 0;
opacity: 0; opacity: 0;
@ -217,11 +227,29 @@
cursor: pointer; cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.button-icon {
position: absolute;
height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width;
font-size: 14px;
line-height: $modal-view-button-icon-height;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
.arrow-icon { .arrow-icon {
position: absolute; position: absolute;
top: 35px; top: 35px;
height: 30px;
width: 32px;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: #FFF; color: #FFF;
@ -232,16 +260,26 @@
&--prev { &--prev {
left: 0; left: 0;
.arrow-icon { .arrow-icon {
left: 6px; left: $modal-view-button-icon-margin;
} }
} }
&--next { &--next {
right: 0; right: 0;
.arrow-icon { .arrow-icon {
right: 6px; right: $modal-view-button-icon-margin;
} }
} }
} }
.modal-view-button-hide {
position: absolute;
top: 0;
right: 0;
.button-icon {
top: $modal-view-button-icon-margin;
right: $modal-view-button-icon-margin;
}
}
} }
</style> </style>