[Remove Vuetify from Studio] Channel details in Channels - page layout

contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue

@@ -0,0 +1,145 @@
+<template>
+
+  <div
+    v-if="value"
+    class="modal-wrapper"
+  >
+    <KToolbar
+      :textColor="dark ? 'white' : 'black'"
+      :style="{ backgroundColor: toolbarBackgroundColor }"
+    >
+      <template #icon>
+        <KIconButton
+          icon="close"
+          :ariaLabel="$tr('close')"
+          :tooltip="$tr('close')"
+          :color="dark ? $themeTokens.textInverted : $themeTokens.text"
+          data-test="close"
+          @click="$emit('input', false)"
+        />
+      </template>
+
+      <template #default>
+        <span class="notranslate toolbar-title">
+          <slot name="header">{{ title }}</slot>
+        </span>
+      </template>
+
+      <template #actions>
+        <slot name="action"></slot>
+      </template>
+    </KToolbar>
+
+    <StudioOfflineAlert :offset="64" />
+
+    <StudioPage
+      :offline="offline"
+      :marginTop="contentMarginTop"
+    >
+      <slot></slot>
+    </StudioPage>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import StudioOfflineAlert from './StudioOfflineAlert';
+  import StudioPage from './StudioPage';
+
+  export default {
+    name: 'StudioImmersiveModal',
+    components: {
+      StudioOfflineAlert,
+      StudioPage,
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      color: {
+        type: String,
+        default: 'appBarDark',
+      },
+      dark: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      toolbarBackgroundColor() {
+        return this.color === 'appBarDark'
+          ? this.$themePalette.grey.v_900
+          : this.$themeTokens[this.color] || this.color;
+      },
+      contentMarginTop() {
+        return this.offline ? 112 : 64;
+      },
+    },
+    watch: {
+      value(val) {
+        this.hideHTMLScroll(!!val);
+        if (val) {
+          document.addEventListener('keydown', this.handleKeyDown);
+        } else {
+          document.removeEventListener('keydown', this.handleKeyDown);
+        }
+      },
+    },
+    beforeDestroy() {
+      this.hideHTMLScroll(false);
+      document.removeEventListener('keydown', this.handleKeyDown);
+    },
+    methods: {
+      hideHTMLScroll(hidden) {
+        document.querySelector('html').style = hidden
+          ? 'overflow-y: hidden !important;'
+          : 'overflow-y: auto !important';
+      },
+      handleKeyDown(event) {
+        if (event.key === 'Escape') {
+          this.$emit('input', false);
+        }
+      },
+    },
+    $trs: {
+      close: 'Close',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .modal-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 17;
+    overflow-y: auto;
+    background-color: white;
+  }
+
+  .toolbar-title {
+    display: block;
+    max-width: calc(100% - 80px);
+    margin-inline-start: 16px;
+    margin-inline-end: 16px;
+    white-space: nowrap;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/StudioPage.vue

@@ -1,6 +1,9 @@
 <template>
 
-  <main class="studio-page-outer">
+  <main
+    class="studio-page-outer"
+    :style="outerStyle"
+  >
     <div
       class="studio-page-inner"
       :style="innerStyle"
@@ -31,10 +34,19 @@
         maxWidth: windowIsLarge.value ? '1000px' : '100%',
       }));
 
-      return { innerStyle };
+      const outerStyle = computed(() => {
+        const marginTop = props.marginTop !== null ? props.marginTop : 104;
+        return {
+          marginTop: `${marginTop}px`,
+          height: `calc(100vh - ${marginTop}px)`,
+        };
+      });
+
+      return { innerStyle, outerStyle };
     },
     props: {
       offline: { type: Boolean, default: false },
+      marginTop: { type: Number, default: null },
     },
   };
 
@@ -45,8 +57,6 @@
 
   .studio-page-outer {
     width: 100%;
-    height: calc(100vh - 104px);
-    margin-top: 104px;
     margin-bottom: 16px;
     overflow-x: hidden;
     overflow-y: auto;

contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue

@@ -1,57 +1,39 @@
 <template>
 
-  <FullscreenModal
+  <StudioImmersiveModal
     v-model="dialog"
     color="appBarDark"
     :dark="true"
   >
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>
     </template>
-    <LoadingText
-      v-if="loading"
-      absolute
-    />
-    <VCardText v-else-if="channel">
-      <VLayout class="mb-3">
-        <VSpacer v-if="$vuetify.breakpoint.smAndUp" />
-        <BaseMenu>
-          <template #activator="{ on }">
-            <VBtn
-              color="primary"
-              dark
-              :block="$vuetify.breakpoint.xsOnly"
-              v-on="on"
-            >
-              {{ $tr('downloadButton') }}
-              &nbsp;
-              <Icon
-                icon="dropdown"
-                :color="$themeTokens.textInverted"
-              />
-            </VBtn>
+    <StudioLargeLoader v-if="loading" />
+    <div v-else-if="channel">
+      <div class="download-button-container">
+        <KButton
+          class="download-button"
+          :text="$tr('downloadButton')"
+          :primary="true"
+          hasDropdown
+          data-test="download-button"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="downloadOptions"
+              @select="handleDownloadSelect"
+            />
           </template>
-          <VList>
-            <VListTile @click="generatePDF">
-              <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              data-test="dl-csv"
-              @click="generateCSV"
-            >
-              <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </BaseMenu>
-      </VLayout>
+        </KButton>
+      </div>
       <DetailsPanel
         v-if="channel && details"
         class="channel-details-wrapper"
         :details="channelWithDetails"
         :loading="loading"
       />
-    </VCardText>
-  </FullscreenModal>
+    </div>
+  </StudioImmersiveModal>
 
 </template>
 
@@ -61,16 +43,16 @@
   import { mapActions, mapGetters } from 'vuex';
   import { channelExportMixin } from './mixins';
   import DetailsPanel from 'shared/views/details/DetailsPanel.vue';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
+  import StudioImmersiveModal from 'shared/views/StudioImmersiveModal';
   import { routerMixin } from 'shared/mixins';
-  import LoadingText from 'shared/views/LoadingText';
-  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'ChannelDetailsModal',
     components: {
       DetailsPanel,
-      LoadingText,
-      FullscreenModal,
+      StudioLargeLoader,
+      StudioImmersiveModal,
     },
     mixins: [routerMixin, channelExportMixin],
     props: {
@@ -98,6 +80,12 @@
         }
         return { ...this.channel, ...this.details };
       },
+      downloadOptions() {
+        return [
+          { label: this.$tr('downloadPDF'), value: 'pdf' },
+          { label: this.$tr('downloadCSV'), value: 'csv' },
+        ];
+      },
       backLink() {
         return {
           name: this.$route.query.last,
@@ -135,6 +123,13 @@
     },
     methods: {
       ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      handleDownloadSelect(option) {
+        if (option.value === 'pdf') {
+          this.generatePDF();
+        } else if (option.value === 'csv') {
+          this.generateCSV();
+        }
+      },
       async generatePDF() {
         this.$analytics.trackEvent('channel_details', 'Download PDF', {
           id: this.channelId,
@@ -187,14 +182,24 @@
 
 <style lang="scss" scoped>
 
-  .v-toolbar__title {
-    font-weight: bold;
+  .download-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 24px;
   }
 
-  .draft-header {
-    padding-right: 10px;
-    font-style: italic;
-    color: gray;
+  [dir='rtl'] .download-button-container {
+    justify-content: flex-start;
+  }
+
+  @media (max-width: 600px) {
+    .download-button-container {
+      justify-content: center;
+    }
+
+    .download-button {
+      width: 100%;
+    }
   }
 
   .channel-details-wrapper {