forked from AkkomaGang/akkoma-fe
Add hide button to media modal
This commit is contained in:
parent
7e21853cca
commit
5fb302d0f1
2 changed files with 60 additions and 20 deletions
|
@ -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 = {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue