src/components/base-components/Dialog.vue

@@ -1,65 +1,32 @@
 <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,
       'max-size': maxSize,
       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">
           <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
+          <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-else icon="expand" />
           </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" />
           </button>
         </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 />
-        <div
+        <div class="dialog-body-content" v-if="dialogContent" v-html="dialogContent" />
-          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
+          <div class="dialog-footer-controls" v-if="showFooterButtons &&
-            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">
-            <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>
-            <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 }}
             </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);

src/components/dialogs/ArtistViewer.vue

@@ -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>