496 lines
11 KiB
Vue
496 lines
11 KiB
Vue
|
<template>
|
||
|
|
<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-left">
|
||
|
|
<slot name="header-left" />
|
||
|
|
</div>
|
||
|
|
<div class="dialog-header-center">
|
||
|
|
<h3 v-if="dialogTitle">{{ 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'"
|
||
|
|
>
|
||
|
|
<awesome-icon v-if="isFullscreen" icon="compress" />
|
||
|
|
<awesome-icon v-else icon="expand" />
|
||
|
|
</button>
|
||
|
|
<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,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
<div
|
||
|
|
class="dialog-body-content"
|
||
|
|
v-if="dialogContent"
|
||
|
|
v-html="dialogContent"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="dialog-footer" v-if="showFooter">
|
||
|
|
<div class="dialog-footer-left">
|
||
|
|
<span v-if="messageText" class="dialog-message" :class="messageClass">
|
||
|
|
<awesome-icon v-if="messageIcon" :icon="messageIcon" />
|
||
|
|
{{ messageText }}
|
||
|
|
</span>
|
||
|
|
<slot name="footer-left" />
|
||
|
|
</div>
|
||
|
|
<div class="dialog-footer-center">
|
||
|
|
<slot name="footer-center" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<slot name="footer-right" />
|
||
|
|
<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.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"
|
||
|
|
/>
|
||
|
|
{{ buttonText }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "DialogControl",
|
||
|
|
props: {
|
||
|
|
title: { type: String, default: "" },
|
||
|
|
content: { type: String, default: "" },
|
||
|
|
closeOnEscape: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
closeOnFocusLost: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
closeOnButtonClick: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
disableXscroll: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
disableYscroll: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
showFooter: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showHeader: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showHeaderOnMobile: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showCloseButton: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showFooterButtons: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showFullscreenButton: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
enableFooterButtons: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
buttonText: {
|
||
|
|
type: String,
|
||
|
|
default: "Done",
|
||
|
|
},
|
||
|
|
buttonClass: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
buttonIcon: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
buttons: {
|
||
|
|
type: Array,
|
||
|
|
},
|
||
|
|
maxSize: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
openTitle: "",
|
||
|
|
openContent: "",
|
||
|
|
openButtons: null,
|
||
|
|
isFullscreen: false,
|
||
|
|
callback: null,
|
||
|
|
messageText: "",
|
||
|
|
messageClass: "",
|
||
|
|
messageIcon: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open(title = null, content = null, buttons = null, callback = null) {
|
||
|
|
this.visible = true;
|
||
|
|
if (title) {
|
||
|
|
this.openTitle = title;
|
||
|
|
}
|
||
|
|
if (content) {
|
||
|
|
this.openContent = content;
|
||
|
|
}
|
||
|
|
if (buttons) {
|
||
|
|
this.openButtons = buttons;
|
||
|
|
}
|
||
|
|
if (callback) {
|
||
|
|
this.callback = callback;
|
||
|
|
}
|
||
|
|
window.addEventListener("keydown", this.keydownListener);
|
||
|
|
this.focusButton();
|
||
|
|
this.$emit("opened");
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$emit("closing");
|
||
|
|
this.visible = false;
|
||
|
|
window.removeEventListener("keydown", this.keydownListener);
|
||
|
|
this.$emit("closed");
|
||
|
|
if (this.callback) {
|
||
|
|
this.callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
cancel() {
|
||
|
|
this.$emit("canceled");
|
||
|
|
this.close();
|
||
|
|
},
|
||
|
|
focusButton() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (this.$refs.dialogButton) {
|
||
|
|
this.$refs.dialogButton.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
click(name, parameter = null) {
|
||
|
|
this.$emit(name, parameter);
|
||
|
|
if (this.callback) {
|
||
|
|
this.callback(parameter || name);
|
||
|
|
this.callback = undefined;
|
||
|
|
}
|
||
|
|
if (this.closeOnButtonClick) {
|
||
|
|
this.close();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bgClicked(e) {
|
||
|
|
if (
|
||
|
|
e.srcElement == this.$refs.dialogBackground &&
|
||
|
|
this.closeOnFocusLost
|
||
|
|
) {
|
||
|
|
this.cancel();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
headerDoubleClick() {
|
||
|
|
if (this.showFullscreenButton) {
|
||
|
|
this.isFullscreen = !this.isFullscreen;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
keydownListener(e) {
|
||
|
|
if (e.key == "Escape" && this.closeOnEscape) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.cancel();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
dialogTitle() {
|
||
|
|
return this.openTitle || this.title;
|
||
|
|
},
|
||
|
|
dialogButtons() {
|
||
|
|
return this.openButtons || this.buttons;
|
||
|
|
},
|
||
|
|
dialogContent() {
|
||
|
|
return this.openContent || this.content;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.dialog-background {
|
||
|
|
position: fixed;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #00000080;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
animation: fadeIn ease 0.15s;
|
||
|
|
}
|
||
|
|
.dialog-window {
|
||
|
|
box-shadow: 0px 8px 32px var(--shadow);
|
||
|
|
background-color: var(--white);
|
||
|
|
max-width: 90%;
|
||
|
|
max-height: 80%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
}
|
||
|
|
.dialog-window.max-size {
|
||
|
|
width: 90%;
|
||
|
|
height: 90%;
|
||
|
|
}
|
||
|
|
.dialog-window.fullscreen {
|
||
|
|
max-width: initial;
|
||
|
|
max-height: initial;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-top-left-radius: 0px;
|
||
|
|
border-top-right-radius: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-header {
|
||
|
|
display: flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
background-color: var(--background);
|
||
|
|
box-shadow: 0px 1px 4px var(--shadow);
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.dialog-header h3 {
|
||
|
|
flex-grow: 1;
|
||
|
|
margin: 0;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
font-weight: bold;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
align-self: center;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.dialog-header input,
|
||
|
|
.dialog-header select {
|
||
|
|
padding: 0 4px;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
background-color: var(--white);
|
||
|
|
align-self: stretch;
|
||
|
|
}
|
||
|
|
.dialog-header button,
|
||
|
|
.dialog-header a {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 4px;
|
||
|
|
margin: 2px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 {
|
||
|
|
margin-left: 12px;
|
||
|
|
}
|
||
|
|
.dialog-header svg {
|
||
|
|
width: 16px !important;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
.dialog-header > div,
|
||
|
|
.dialog-footer > div {
|
||
|
|
display: flex;
|
||
|
|
align-items: 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 {
|
||
|
|
border-left: 1px solid var(--light-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
flex-shrink: 0;
|
||
|
|
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) {
|
||
|
|
.dialog-window {
|
||
|
|
max-width: initial;
|
||
|
|
max-height: initial;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|