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