[DO NOT MERGE] Changed color of continue button of welcome modal to grey, added composable useTour and added TooltipTour component

kolibri/plugins/device/assets/src/views/PostSetupModalGroup.vue

@@ -48,7 +48,7 @@
   import { availableChannelsPageLink } from './ManageContentPage/manageContentLinks';
   import WelcomeModal from './WelcomeModal';
   import PermissionsChangeModal from './PermissionsChangeModal';
-
+  import useTour  from '../../../../learn/assets/src/composables/useTour';
   const facilityImported = 'FACILITY_IS_IMPORTED';
 
   const Steps = Object.freeze({
@@ -71,11 +71,12 @@
       const { isUserLoggedIn } = useUser();
       const { createSnackbar } = useSnackbar();
       const { facilities } = useFacilities();
-
+      const {startTour}=useTour();
       return {
         isUserLoggedIn,
         createSnackbar,
         facilities,
+        startTour
       };
     },
     props: {
@@ -123,6 +124,7 @@
           if (this.importedFacility) {
             this.step = Steps.SELECT_SOURCE_FACILITY_PEER;
           } else {
+             this.startTour();
             this.$emit('cancel');
           }
         } else if (this.step === Steps.SELECT_SOURCE_FACILITY_PEER) {

kolibri/plugins/device/assets/src/views/WelcomeModal.vue

@@ -2,8 +2,7 @@
 
   <KModal
     :title="$tr('welcomeModalHeader')"
-    :submitText="coreString('continueAction')"
-    @submit="$emit('submit')"
+     @submit="$emit('submit')"
   >
     <p
       v-for="(paragraph, idx) in paragraphs"
@@ -12,6 +11,11 @@
     >
       {{ paragraph }}
     </p>
+    <template #actions>
+      <KButton  @click="$emit('submit')">
+ {{ coreString('continueAction') }}
+      </KButton>
+      </template>
   </KModal>
 
 </template>

kolibri/plugins/learn/assets/src/composables/useTour.js

@@ -0,0 +1,40 @@
+import { ref } from "vue";
+
+
+const steps = ref([]);
+const elements = ref([]);
+const tourActive = ref(false);
+
+
+function registerStep({ key, el, content, stepIndex }) {
+  if (!el) {
+    console.warn(`Element for key "${key}" is null. Skipping this step.`);
+    return;
+  }
+  steps.value.push({ key, content, stepIndex });
+  elements.value.push({ key, el, stepIndex });
+}
+
+
+function startTour() {
+  steps.value.sort((a, b) => a.stepIndex - b.stepIndex);
+  elements.value.sort((a, b) => a.stepIndex - b.stepIndex);
+  tourActive.value = true;
+}
+
+
+function endTour() {
+  tourActive.value = false;
+}
+
+
+export default function useTour() {
+  return {
+    steps,
+    elements,
+    tourActive,
+    registerStep,
+    startTour,
+    endTour,
+  };
+}

kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue

@@ -1,20 +1,16 @@
 <template>
 
   <KGrid gutter="16">
-    <KGridItem
-      v-for="content in contents"
-      :key="content.id"
-      :layout="{ span: layoutSpan }"
-    >
-      <ChannelCard
-        :isMobile="windowIsSmall"
-        :title="content.title || content.name"
-        :thumbnail="content.thumbnail"
-        :tagline="content.tagline || content.description"
+    <KGridItem v-for="(content, index) in contents" :key="content.id" :layout="{ span: layoutSpan }">
+      <ChannelCard v-if="index === 0" ref="firstChannelCard" :isMobile="windowIsSmall"
+        :title="content.title || content.name" :thumbnail="content.thumbnail"
+        :tagline="content.tagline || content.description" :numCoachContents="content.num_coach_contents"
+        :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)" :isRemote="isRemote" />
+      <ChannelCard v-else :isMobile="windowIsSmall" :title="content.title || content.name"
+        :thumbnail="content.thumbnail" :tagline="content.tagline || content.description"
         :numCoachContents="content.num_coach_contents"
-        :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
-        :isRemote="isRemote"
-      />
+        :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)" :isRemote="isRemote" />
+
     </KGridItem>
     <slot></slot>
   </KGrid>
@@ -24,64 +20,85 @@
 
 <script>
 
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import { validateObject } from 'kolibri/utils/objectSpecs';
-  import useCardLayoutSpan from '../composables/useCardLayoutSpan';
-  import useContentLink from '../composables/useContentLink';
-  import ChannelCard from './ChannelCard';
+import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+import { validateObject } from 'kolibri/utils/objectSpecs';
+import useCardLayoutSpan from '../composables/useCardLayoutSpan';
+import useContentLink from '../composables/useContentLink';
+import ChannelCard from './ChannelCard';
+import useTour from "../composables/useTour";
+import { ref, onMounted, nextTick } from 'vue';
+export default {
+  name: 'ChannelCardGroupGrid',
+  components: {
+    ChannelCard,
+  },
+  setup() {
+    const { genContentLinkBackLinkCurrentPage } = useContentLink();
+    const { windowIsSmall } = useKResponsiveWindow();
+    const { layoutSpan } = useCardLayoutSpan();
+    const { registerStep } = useTour();
+    const firstChannelCard = ref(null);
+
+    onMounted(async () => {
+      await nextTick();
+      if (firstChannelCard && firstChannelCard.$el) {
+        registerStep({
+          key: 'firstChannelCard',
+          el: firstChannelCard.$el,
+          content: 'Channels are collections of videos, exercises, and other learning resources.',
+          stepIndex: 1,
+        });
+        console.log(' Registered firstChannelCard');
+      } else {
+        console.warn('firstChannelCard not yet available');
+      }
+
+    });
 
-  export default {
-    name: 'ChannelCardGroupGrid',
-    components: {
-      ChannelCard,
+
+    return {
+      genContentLinkBackLinkCurrentPage,
+      windowIsSmall,
+      layoutSpan,
+      registerStep,
+      firstChannelCard
+    };
+  },
+  props: {
+    contents: {
+      type: Array,
+      required: true,
+      validator(contents) {
+        return contents.every(content =>
+          validateObject(content, {
+            id: { type: String, required: true },
+            title: { type: String, required: false, default: '' },
+            name: { type: String, required: false, default: '' },
+            thumbnail: { type: String, required: false, default: '' },
+            tagline: { type: String, required: false, default: '' },
+            description: { type: String, required: false, default: '' },
+            num_coach_contents: { type: Number, required: false, default: 0 },
+          }),
+        );
+      },
     },
-    setup() {
-      const { genContentLinkBackLinkCurrentPage } = useContentLink();
-      const { windowIsSmall } = useKResponsiveWindow();
-      const { layoutSpan } = useCardLayoutSpan();
-      return {
-        genContentLinkBackLinkCurrentPage,
-        windowIsSmall,
-        layoutSpan,
-      };
+    deviceId: {
+      type: String,
+      required: false,
+      default: null,
     },
-    props: {
-      contents: {
-        type: Array,
-        required: true,
-        validator(contents) {
-          return contents.every(content =>
-            validateObject(content, {
-              id: { type: String, required: true },
-              title: { type: String, required: false, default: '' },
-              name: { type: String, required: false, default: '' },
-              thumbnail: { type: String, required: false, default: '' },
-              tagline: { type: String, required: false, default: '' },
-              description: { type: String, required: false, default: '' },
-              num_coach_contents: { type: Number, required: false, default: 0 },
-            }),
-          );
-        },
-      },
-      deviceId: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      isRemote: {
-        type: Boolean,
-        default: false,
-      },
+    isRemote: {
+      type: Boolean,
+      default: false,
     },
-  };
+  },
+};
 
 </script>
 
 
 <style lang="scss" scoped>
-
-  .grid {
-    padding-top: 8px;
-  }
-
+.grid {
+  padding-top: 8px;
+}
 </style>

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue

@@ -177,7 +177,14 @@
           :canDownloadExternally="canDownloadExternally && !deviceId"
         />
       </SidePanelModal>
+      <TooltipTour
+      v-if="tourActive"
+      :steps="steps"
+      :elements="elements"
+      @tourEnded="tourActive=false"
+    />
     </LearnAppBarPage>
+
   </div>
 
 </template>
@@ -222,7 +229,8 @@
   import ResumableContentGrid from './ResumableContentGrid';
   import OtherLibraries from './OtherLibraries';
   import NoResourcePage from './NoResourcePage';
-
+  import TooltipTour from 'kolibri-common/components/onboarding/TooltipTour.vue';
+  import  useTour  from '../../composables/useTour';
   const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
   export default {
@@ -245,13 +253,14 @@
       OtherLibraries,
       PostSetupModalGroup,
       NoResourcePage,
+      TooltipTour
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {
       const currentInstance = getCurrentInstance().proxy;
       const store = currentInstance.$store;
       const router = currentInstance.$router;
-
+      const {steps,elements,tourActive} =useTour();
       const {
         isUserLoggedIn,
         isCoach,
@@ -291,7 +300,7 @@
           search(keywords);
         }
       });
-
+   
       const rootNodes = ref([]);
       const rootNodesLoading = ref(false);
 
@@ -421,7 +430,11 @@
         isUserLoggedIn,
         canManageContent,
         isLearnerOnlyImport,
+        steps,
+        elements,
+        tourActive
       };
+
     },
     props: {
       deviceId: {
@@ -548,7 +561,7 @@
     },
     methods: {
       hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
+        window.localStorage.setItem(welcomeDismissalKey,false);
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
       },
       findFirstEl() {