add to current topic

Author: marcellamaki

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -5,6 +5,56 @@
     fluid
     class="ma-0 main pa-0 panel"
   >
+    <div
+      v-if="canEdit && !announcementDismissed"
+      class="recommendations-announcement"
+      :style="{
+        backgroundColor: $themePalette.blue.v_100,
+      }"
+    >
+      <div
+        class="recommendations-announcement-icon-wrapper"
+        :style="{
+          backgroundColor: $themePalette.blue.v_200,
+        }"
+      >
+        <KIcon
+          icon="library"
+          class="recommendations-announcement-icon"
+          :color="$themePalette.white"
+          :style="{
+            backgroundColor: $themePalette.blue.v_400,
+          }"
+        />
+      </div>
+      <div class="recommendations-announcement-content">
+        <div>
+          <h2>
+            {{ searchRecommendationsStrings.trySearchRecommendationsHeader$() }}
+          </h2>
+          <p>
+            {{ searchRecommendationsStrings.trySearchRecommendationsText$() }}
+          </p>
+        </div>
+        <KRouterLink
+          v-if="canEdit"
+          appearance="flat-button"
+          :primary="true"
+          :to="importFromChannelsRoute"
+          class="recommendations-announcement-cta"
+          @click="trackClickEvent('View recommendations')"
+        >
+          {{ searchRecommendationsStrings.viewRecommendationsButton$() }}
+        </KRouterLink>
+      </div>
+      <KIconButton
+        icon="close"
+        :tooltip="searchRecommendationsStrings.closeAction$()"
+        class="recommendations-announcement-dismiss"
+        @click="dismissAnnouncement"
+      />
+    </div>
+
     <!-- Breadcrumbs -->
     <VToolbar
       dense
@@ -306,6 +356,7 @@
   import { DraggableTypes, DropEffect } from 'shared/mixins/draggable/constants';
   import { DraggableFlags } from 'shared/vuex/draggablePlugin/module/constants';
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
+  import { searchRecommendationsStrings } from 'shared/strings/searchRecommendationsStrings';
 
   export default {
     name: 'CurrentTopicView',
@@ -322,6 +373,9 @@
       InheritAncestorMetadataModal,
     },
     mixins: [titleMixin, routerMixin],
+    setup() {
+      return { searchRecommendationsStrings };
+    },
     props: {
       topicId: {
         type: String,
@@ -335,6 +389,8 @@
     },
     data() {
       return {
+        announcementDismissed:
+          localStorage.getItem('recommendations-announcement-dismissed') === 'true',
         loadingAncestors: false,
         elevated: false,
         moveModalOpen: false,
@@ -650,6 +706,10 @@
       ]),
       ...mapMutations('contentNode', ['CLEAR_INHERITING_NODES']),
       ...mapActions('clipboard', ['copyAll']),
+      dismissAnnouncement() {
+        localStorage.setItem('recommendations-announcement-dismissed', 'true');
+        this.announcementDismissed = true;
+      },
       clearSelections() {
         this.selected = [];
       },
@@ -1075,4 +1135,58 @@
     flex-shrink: 0;
   }
 
+  .recommendations-announcement {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+    padding: 20px;
+    margin: 24px 36px;
+    border-radius: 4px;
+
+    .recommendations-announcement-content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: flex-end;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .recommendations-announcement-cta {
+      margin-top: 12px;
+    }
+
+    .recommendations-announcement-icon-wrapper {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 96px;
+      height: 96px;
+      border-radius: 2px;
+
+      .recommendations-announcement-icon {
+        width: 40px;
+        height: 40px;
+        padding: 6px;
+        border-radius: 50%;
+      }
+
+      .recommendations-button {
+        align-items: flex-end;
+      }
+    }
+
+    h2 {
+      font-size: 18px;
+    }
+
+    .recommendations-announcement-dismiss {
+      flex-shrink: 0;
+      align-self: flex-start;
+    }
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelsPage/index.vue

@@ -24,10 +24,10 @@
       </div>
       <div>
         <h2>
-          {{ $tr('trySearchRecommendationsHeader') }}
+          {{ searchRecommendationsStrings.trySearchRecommendationsHeader$() }}
         </h2>
         <p>
-          {{ $tr('trySearchRecommendationsText') }}
+          {{ searchRecommendationsStrings.trySearchRecommendationsText$() }}
         </p>
       </div>
     </div>
@@ -86,6 +86,7 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import ChannelInvitation from '../ChannelInvitation';
   import StudioRaisedBox from 'shared/views/StudioRaisedBox';
+  import { searchRecommendationsStrings } from 'shared/strings/searchRecommendationsStrings';
 
   export default {
     name: 'StudioChannelsPage',
@@ -134,6 +135,7 @@
         channelsMaxWidthStyle,
         invitationsMaxWidthStyle,
         skeletonsConfig,
+        searchRecommendationsStrings,
       };
     },
     props: {
@@ -149,9 +151,6 @@
     $trs: {
       noChannelsFound: 'No channels found',
       invitations: 'You have {count, plural,\n =1 {# invitation}\n other {# invitations}}',
-      trySearchRecommendationsHeader: "Try our new 'Recommendations' feature!",
-      trySearchRecommendationsText:
-        "Based on the title and descriptions of your folders, we'll suggest content from the Kolibri Library. Choose 'Import from channels' in any channel folder to see your recommendations.",
     },
   };
 
@@ -172,6 +171,7 @@
   }
 
   .invitations {
+    margin-top: 24px; // added for space between search recs announcement and invitations box
     margin-bottom: 24px;
   }
 

contentcuration/contentcuration/frontend/shared/strings/searchRecommendationsStrings.js

@@ -1,6 +1,19 @@
 import { createTranslator } from 'shared/i18n';
 
 export const searchRecommendationsStrings = createTranslator('SearchRecommendationsStrings', {
+  trySearchRecommendationsHeader: {
+    message: "Try our new 'Recommendations' feature!",
+    context: 'Header for a banner announcing the new recommendations feature',
+  },
+  trySearchRecommendationsText: {
+    message:
+      "Based on the title and descriptions of your folders, we'll suggest content from the Kolibri Library. Choose 'Import from channels' in any channel folder to see your recommendations.",
+    context: 'Body text for a banner announcing the new recommendations feature',
+  },
+  viewRecommendationsButton: {
+    message: 'View recommendations',
+    context: 'Label for a button that takes the user to the recommendations feature',
+  },
   aboutRecommendationsText: {
     message: 'About recommendations',
     context: 'A title that introduces how the recommendation system works',