[WIP] Align with design feedback

Author: MisRob

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue

@@ -1,50 +1,51 @@
 <template>
 
-  <KPageContainer class="page-container">
-    <div
-      :class="{ 'table-header-mobile': isMobile() }"
-      :style="{
-        marginTop: windowIsSmall ? '24px' : '32px',
-      }"
-    >
-      <div class="header-top">
-        <h1 class="page-title">{{ $tr('pageTitle') }}</h1>
-        <KButton
-          v-if="!loading"
-          appearance="raised-button"
-          primary
-          :text="$tr('addChannelSetTitle')"
-          @click="newChannelSet"
-        />
-      </div>
-
-      <div class="header-bottom">
-        <KButton
-          v-if="tableRows.length > 0"
-          appearance="basic-link"
-          :text="$tr('aboutChannelSetsLink')"
-          @click="infoDialog = true"
-        />
-      </div>
+  <KPageContainer
+    class="page-container"
+    :class="{ 'larger-window': !windowIsSmall }"
+  >
+    <div class="header">
+      <h1>{{ $tr('pageTitle') }}</h1>
+      <KButton
+        v-if="!loading"
+        appearance="raised-button"
+        primary
+        class="new-collection-button"
+        :text="$tr('addChannelSetTitle')"
+        @click="newChannelSet"
+      />
     </div>
-
+    <KButton
+      v-if="tableRows.length > 0"
+      appearance="basic-link"
+      :text="$tr('aboutChannelSetsLink')"
+      @click="infoDialog = true"
+    />
+
+    <!-- Two wrapping divs needed to prevent brief loader shift after content displayed  -->
     <div v-if="show('loader', loading, 500)">
-      <KCircularLoader />
+      <div class="loader">
+        <KCircularLoader />
+      </div>
     </div>
 
-    <div v-else-if="tableRows.length === 0">
-      <p class="mb-0">
+    <div
+      v-else-if="tableRows.length === 0"
+      class="no-channels"
+    >
+      <div>
         {{ $tr('noChannelSetsFound') }}
         <KButton
           appearance="basic-link"
           :text="$tr('aboutChannelSetsLink')"
           @click="infoDialog = true"
         />
-      </p>
+      </div>
     </div>
 
     <KTable
       v-else
+      class="table"
       :stickyColumns="stickyColumns"
       :caption="$tr('tableCaption')"
       :headers="tableHeaders"
@@ -70,6 +71,9 @@
           <StudioCopyToken
             v-if="content"
             :token="content"
+            :style="copyTokenStyle"
+            :showLabel="false"
+            :showCopyButton="showCopyTokenButton"
           />
           <em
             v-else
@@ -90,7 +94,7 @@
           class="actions-cell"
         >
           <KButton
-            v-if="!isSmallScreen()"
+            v-if="windowBreakpoint > 2"
             :text="$tr('options')"
             appearance="flat-button"
             :hasDropdown="true"
@@ -156,8 +160,9 @@
   import { mapActions, mapGetters } from 'vuex';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useClipboard from '../../../shared/composables/useClipboard';
   import { RouteNames } from '../../constants';
-  import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
+  import StudioCopyToken from '../../../shared/views/StudioCopyToken';
 
   export default {
     name: 'StudioCollectionsTable',
@@ -166,12 +171,14 @@
     },
     setup() {
       const { show } = useKShow();
-      const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
+      const { windowIsSmall, windowBreakpoint } = useKResponsiveWindow();
+      const { copyToClipboard } = useClipboard();
 
       return {
         show,
-        windowBreakpoint,
         windowIsSmall,
+        windowBreakpoint,
+        copyToClipboard,
       };
     },
     data() {
@@ -184,34 +191,44 @@
     },
     computed: {
       ...mapGetters('channelSet', ['channelSets', 'getChannelSet']),
-
+      showCopyTokenButton() {
+        return this.windowBreakpoint > 2;
+      },
+      tokenInputWidth() {
+        return this.showCopyTokenButton ? '170px' : '130px';
+      },
+      copyTokenStyle() {
+        return {
+          position: 'relative',
+          top: '-6px',
+          minWidth: this.tokenInputWidth,
+        };
+      },
       tableHeaders() {
         return [
           {
             label: this.$tr('title'),
             dataType: 'string',
             minWidth: '200px',
-            width: '55%',
+            width: '40%',
             columnId: 'name',
           },
           {
             label: this.$tr('token'),
             dataType: 'string',
-            minWidth: '200px',
-            width: '20%',
+            width: this.tokenInputWidth,
             columnId: 'tokens',
           },
           {
             label: this.$tr('channelNumber'),
             dataType: 'number',
-            minWidth: '100px',
-            width: '15%',
+            minWidth: '200px',
+            width: '20%',
             columnId: 'channel_count',
           },
           {
             label: '',
             dataType: 'undefined',
-            width: '10%',
             columnId: 'actions',
           },
         ];
@@ -240,7 +257,7 @@
       },
 
       dropdownOptions() {
-        return [
+        const options = [
           {
             label: this.$tr('edit'),
             value: 'edit',
@@ -252,6 +269,14 @@
             icon: 'trash',
           },
         ];
+        if (!this.showCopyTokenButton) {
+          options.unshift({
+            label: this.$tr('copyToken'),
+            value: 'copy-token',
+            icon: 'copy',
+          });
+        }
+        return options;
       },
     },
     mounted() {
@@ -261,15 +286,6 @@
     },
     methods: {
       ...mapActions('channelSet', ['loadChannelSetList', 'deleteChannelSet']),
-
-      isMobile() {
-        return this.windowBreakpoint <= 0;
-      },
-
-      isSmallScreen() {
-        return this.windowBreakpoint <= 2;
-      },
-
       handleOptionSelect(option, collectionId) {
         if (option.value === 'edit') {
           this.$router.push({
@@ -282,9 +298,24 @@
             this.channelSets.find(c => c.id === collectionId) ||
             null;
           if (this.collectionToDelete) this.deleteDialog = true;
+        } else if (option.value === 'copy-token') {
+          const collection =
+            this.getChannelSet(collectionId) ||
+            this.channelSets.find(c => c.id === collectionId) ||
+            null;
+          if (collection && collection.secret_token) {
+            this.handleCopyToken(collection.secret_token);
+          }
         }
       },
 
+      handleCopyToken(value) {
+        this.copyToClipboard(value, {
+          successMessage: this.$tr('copiedTokenId'),
+          errorMessage: this.$tr('copyFailed'),
+        });
+      },
+
       confirmDelete() {
         if (this.collectionToDelete) {
           this.deleteChannelSet(this.collectionToDelete)
@@ -335,6 +366,9 @@
       saving: 'Saving',
       collectionDeleted: 'Collection  deleted',
       deleteError: 'Error deleting collection',
+      copyToken: 'Copy token',
+      copiedTokenId: 'Token copied',
+      copyFailed: 'Copy failed',
     },
   };
 
@@ -346,52 +380,62 @@
   .page-container {
     width: 100%;
     max-width: 1440px;
+    min-height: 400px; // TOOD have a look at Kolibri's user table
     margin: 0 auto;
   }
 
-  .header-top {
+  .header {
     display: flex;
+    flex-direction: column-reverse;
+    margin-top: 24px;
+
+    h1 {
+      margin-top: 8px;
+    }
+
+    .new-collection-button {
+      align-self: flex-end;
+    }
+  }
+
+  .larger-window .header {
+    flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 16px;
-  }
 
-  .collection-name {
-    display: inline-block;
-    font-size: 16px;
-    font-weight: 500;
-    border-radius: 2px;
+    h1 {
+      margin-top: 0;
+    }
   }
 
-  .header-bottom {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
+  .loader {
+    margin-top: 64px;
   }
 
-  .page-title {
-    margin: 0;
+  .no-channels {
+    margin-top: 24px;
   }
 
-  .actions-cell {
-    display: flex;
-    justify-content: flex-end;
+  .larger-window .no-channels {
+    max-width: 800px;
+    margin: 64px auto 0;
+    text-align: center;
   }
 
-  .table-header-mobile {
-    .header-top {
-      flex-direction: column;
-      gap: 12px;
-      text-align: center;
-    }
+  .table {
+    margin-top: 32px;
+  }
 
-    .header-bottom {
-      justify-content: center;
-    }
+  .collection-name {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 2px;
   }
 
-  .page-container .k-table-wrapper {
-    overflow: hidden;
+  .actions-cell {
+    display: flex;
+    justify-content: flex-end;
   }
 
 </style>

contentcuration/contentcuration/frontend/settings/pages/Account/index.vue

@@ -155,10 +155,10 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
+  import StudioCopyToken from '../../../shared/views/StudioCopyToken';
   import FullNameForm from './FullNameForm';
   import ChangePasswordForm from './ChangePasswordForm';
   import DeleteAccountForm from './DeleteAccountForm';
-  import StudioCopyToken from './StudioCopyToken.vue';
 
   export default {
     name: 'Account',