WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

change header bar. added "flatDialogHeader" property
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Artem Anufrij 2023-10-05 10:52:30 +02:00
parent 023649e647
commit 81b649bd59
2 changed files with 87 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/base-components/Dialog.vue
View File

@ -1,65 +1,32 @@
<template>
<div
ref="dialogBackground"
class="dialog-background"
v-if="visible"
@click="bgClicked"
>
<div
class="dialog-window"
:class="{
<div ref="dialogBackground" class="dialog-background" v-if="visible" @click="bgClicked">
<div class="dialog-window" :class="{
fullscreen: isFullscreen,
'max-size': maxSize,
playing: $store.getters['player/isPlaying'],
}"
>
<div
class="dialog-header"
:class="{ hideOnMobile: showHeaderOnMobile == false }"
v-if="showHeader"
@dblclick="headerDoubleClick"
>
}">
<div class="dialog-header" :class="{ hideOnMobile: showHeaderOnMobile == false, 'flat-dialog-header': flatDialogHeader == true }" v-if="showHeader" @dblclick="headerDoubleClick">
<div class="dialog-header-left">
<slot name="header-left" />
</div>
<div class="dialog-header-center">
<h3 v-if="dialogTitle">{{ dialogTitle }}</h3>
<h3 v-if="dialogTitle && !flatDialogHeader">{{ dialogTitle }}</h3>
<slot name="header-center" />
</div>
<div class="dialog-header-right">
<slot name="header-right" />
<button
class="hideOnMobile"
@click="isFullscreen = !isFullscreen"
v-if="showFullscreenButton"
:title="isFullscreen ? 'Restore' : 'Fullscreen'"
>
<button class="hideOnMobile" @click="isFullscreen = !isFullscreen" v-if="showFullscreenButton" :title="isFullscreen ? 'Restore' : 'Fullscreen'">
<awesome-icon v-if="isFullscreen" icon="compress" />
<awesome-icon v-else icon="expand" />
</button>
<button
@click="cancel"
class="red"
v-if="showCloseButton"
title="Close"
>
<button @click="cancel" class="red" v-if="showCloseButton" title="Close">
<awesome-icon icon="times" />
</button>
</div>
</div>
<div
class="dialog-body"
:class="{
hideXScroll: disableXscroll == true,
hideYScroll: disableYscroll == true,
}"
>
<div class="dialog-body" :class="{ hideXScroll: disableXscroll == true, hideYScroll: disableYscroll == true, }">
<slot />
<div
class="dialog-body-content"
v-if="dialogContent"
v-html="dialogContent"
/>
<div class="dialog-body-content" v-if="dialogContent" v-html="dialogContent" />
</div>
<div class="dialog-footer" v-if="showFooter">
<div class="dialog-footer-left">
@ -74,41 +41,15 @@
</div>
<div>
<slot name="footer-right" />
<div
class="dialog-footer-controls"
v-if="
showFooterButtons &&
<div class="dialog-footer-controls" v-if="showFooterButtons &&
(openButtons == null || openButtons.length > 0)
"
>
<button
v-for="(button, i) in dialogButtons"
:key="i"
@click="click('clicked', button.text || button)"
:class="button.class || ''"
:disabled="button.disabled"
:title="button.title || ''"
v-show="button.visible != false"
>
<awesome-icon
v-if="button.icon"
:icon="button.icon"
class="ma-right8"
/>
">
<button v-for="( button, i ) in dialogButtons " :key="i" @click="click('clicked', button.text || button)" :class="button.class || ''" :disabled="button.disabled" :title="button.title || ''" v-show="button.visible != false">
<awesome-icon v-if="button.icon" :icon="button.icon" class="ma-right8" />
{{ button.text || button }}
</button>
<button
ref="dialogButton"
@click="click('accept')"
v-if="showFooterButtons && !dialogButtons"
:disabled="!enableFooterButtons"
:class="buttonClass"
>
<awesome-icon
v-if="buttonIcon"
:icon="buttonIcon"
class="ma-right8"
/>
<button ref="dialogButton" @click="click('accept')" v-if="showFooterButtons && !dialogButtons" :disabled="!enableFooterButtons" :class="buttonClass">
<awesome-icon v-if="buttonIcon" :icon="buttonIcon" class="ma-right8" />
{{ buttonText }}
</button>
</div>
@ -143,6 +84,10 @@ export default {
type: Boolean,
default: false,
},
flatDialogHeader: {
type: Boolean,
default: false
},
showFooter: {
type: Boolean,
default: true,
@ -301,6 +246,7 @@ export default {
z-index: 1000;
animation: fadeIn ease 0.20s;
}
.dialog-window {
box-shadow: 0px 8px 32px var(--shadow);
background-color: var(--white);
@ -310,11 +256,14 @@ export default {
flex-direction: column;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
position: absolute;
}
.dialog-window.max-size {
width: 90%;
height: 90%;
}
.dialog-window.fullscreen {
max-width: initial;
max-height: initial;
@ -333,6 +282,17 @@ export default {
border-top-right-radius: 4px;
z-index: 1;
}
.dialog-header.flat-dialog-header {
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
box-shadow: none;
z-index: 101;
}
.dialog-header h3 {
flex-grow: 1;
margin: 0;
@ -344,6 +304,7 @@ export default {
align-self: center;
cursor: default;
}
.dialog-header input,
.dialog-header select {
padding: 0 4px;
@ -352,6 +313,7 @@ export default {
background-color: var(--white);
align-self: stretch;
}
.dialog-header button,
.dialog-header a {
background-color: transparent;
@ -365,85 +327,112 @@ export default {
.dialog-header button:hover {
background-color: var(--light-gray);
}
.dialog-header button.red:hover {
background-color: var(--red50);
color: var(--white);
}
.dialog-header button.red svg {
color: var(--red);
}
.dialog-header button.red:hover svg {
color: var(--white);
}
.dialog-header button.blue {
background-color: var(--blue);
}
.dialog-header button.green:hover {
background-color: var(--green);
color: var(--green);
}
.dialog-header button.green svg {
color: var(--green);
}
.dialog-header button.yellow {
background-color: var(--yellow);
}
/* SUCCESS */
.dialog-header button.success svg {
color: var(--success);
}
.dialog-header button.success:hover {
background-color: var(--success);
}
.dialog-header button.success:hover svg {
color: var(--white);
}
.dialog-header button.primary,
.dialog-header a.primary {
background-color: var(--primary);
color: var(--white);
}
.dialog-header button > span,
.dialog-header a > span {
.dialog-header button>span,
.dialog-header a>span {
margin-left: 12px;
}
.dialog-header svg {
width: 16px !important;
height: 16px;
}
.dialog-header > div,
.dialog-footer > div {
.dialog-header>div,
.dialog-footer>div {
display: flex;
align-items: center;
}
.dialog-header > .dialog-header-center,
.dialog-footer > .dialog-footer-center {
.dialog-header>.dialog-header-center,
.dialog-footer>.dialog-footer-center {
flex-grow: 1;
justify-content: center;
margin: 0 12px;
}
.dialog-header > .dialog-header-right input,
.dialog-header > .dialog-header-right select {
.dialog-header>.dialog-header-right input,
.dialog-header>.dialog-header-right select {
border-left: 1px solid var(--light-border);
}
.dialog-header.flat-dialog-header>.dialog-header-right>button {
color: var(--white);
}
.dialog-header.flat-dialog-header>.dialog-header-right>button:hover {
color: var(--gray);
}
.dialog-body {
display: flex;
flex-direction: column;
overflow-y: auto;
flex-grow: 1;
}
.dialog-body.hideXScroll {
overflow-x: hidden;
}
.dialog-body.hideYScroll {
overflow-y: hidden;
}
.dialog-body-content {
margin: 4px;
display: flex;
flex-direction: column;
}
.dialog-footer {
border-top: 1px solid var(--light-border);
display: flex;
@ -451,27 +440,33 @@ export default {
align-items: center;
background-color: var(--background);
}
.dialog-footer button:disabled {
opacity: 0.5;
}
.dialog-footer .dialog-message {
flex-grow: 1;
display: flex;
align-items: center;
margin-left: 4px;
}
.dialog-footer .dialog-message svg {
margin-right: 4px;
}
.dialog-footer .dialog-footer-controls {
padding: 4px;
display: flex;
}
.dialog-footer .dialog-footer-controls button:not(:last-child) {
margin-right: 4px;
}
@media (max-width: 480px), (max-height: 480px) {
@media (max-width: 480px),
(max-height: 480px) {
.dialog-window {
max-width: initial;
max-height: initial;
@ -480,14 +475,17 @@ export default {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dialog-window.max-size {
width: 100%;
height: 100%;
}
.dialog-header {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dialog-window.playing {
margin-bottom: 60px;
height: calc(100% - 60px);

4
src/components/dialogs/ArtistViewer.vue
View File

@ -1,5 +1,5 @@
<template>
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showHeader="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :flatDialogHeader="true" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
<div id="artistViewer">
<div id="header" class="flex-column">
<div id="background" :style="coverBackground" />
@ -31,7 +31,7 @@
<DropDown v-if="$store.getters['user/isAdministrator']" class="ma-left hideOnMobile">
<button class="flat pa-left pa-right">
<awesome-icon icon="ellipsis-v" class="white-text"/>
<awesome-icon icon="ellipsis-v" class="white-text" />
</button>
<template v-slot:dropdown-content>
<div>