Walkthrough

package.json

@@ -22,6 +22,7 @@
     "clone": "^2.1.2",
     "dragula": "^3.7.2",
     "firebase": "^6.6.2",
+    "intro.js": "^2.9.3",
     "jsonschema": "^1.2.5",
     "node-fetch": "^2.6.0",
     "request": "^2.88.0",

src/assets/scss/introjs.scss

@@ -0,0 +1,103 @@
+.introjs-tooltip {
+    background-color: white;
+    border-radius: 9px;
+}
+.introjs-helperNumberLayer{
+    display: none;
+}
+.introjs-helperLayer{
+    border-radius: 9px;
+}
+.introjs-donebutton{
+    color: white !important;
+    background-image: none !important;
+    background-color: #508197 !important;
+    text-shadow: none;
+    border: none;
+    border-radius: 3px;
+    float: right !important;
+    font-family: "ProximaNova";
+    padding: .5em .7em .5em !important;
+}
+.introjs-donebutton:hover{
+    color: white !important;
+    background-color: #508197;
+    background-image: none;
+}
+.introjs-donebutton:focus{
+    color: white !important;
+    background-color: #508197;
+    background-image: none;
+}
+.introjs-skipbutton{
+    float:left;
+    border:none;
+    background-image: none;
+    font-family:"ProximaNova"; 
+    padding-left: 0px;
+    background-color: white;
+    color: #508197;
+}
+.introjs-skipbutton:active{
+    background-image: none;
+    background-color:transparent;
+    font-family:"ProximaNova"; 
+    padding-left: 0px;
+    color: #508197;
+    background-color: white;
+}
+.introjs-skipbutton:focus{
+    background-image: none;
+    background-color:transparent;
+    font-family:"ProximaNova"; 
+    padding-left: 0px;
+    color: #508197;
+    background-color: white;
+}
+.introjs-skipbutton:hover{
+    box-shadow:none;
+}
+.introjs-nextbutton{
+    // display: none;
+    color: white !important;
+    background-image: none;
+    background-color: #508197;
+    text-shadow: none;
+    border: none;
+    border-radius: 3px;
+    font-family: "ProximaNova"
+}
+.introjs-nextbutton:hover{
+    // display: none;
+    color: white !important;
+    background-color: #508197;
+    background-image: none;
+}
+.introjs-nextbutton:focus{
+    // display: none;
+    color: white !important;
+    background-color: #508197;
+    background-image: none;
+}
+.introjs-prevbutton{
+    display:none !important;
+}
+a:not([href]) {
+    color: #508197;
+}
+.introjs-bullets {
+    display:none;
+}
+.introjs-bodytext{
+    color:#757575;
+}
+.introjs-disabled {
+    display: none !important;
+}
+.tooltipCenter{
+    align-self: center;
+    width: 20vw;
+}
+.introjs-tooltipReferenceLayer{
+    display: flex;
+}

src/components/Dashboard.vue

@@ -17,7 +17,9 @@
           :semesters="semesters"
           :user="user"
           :key="requirementsKey"
+          :startTour="startTour"
           @requirementsMap="loadRequirementsMap"
+          @showTourEndWindow="showTourEnd"
          />
       </div>
       <semesterview v-if="loaded && ((!isOpeningRequirements && isTablet) || !isTablet)"
@@ -33,6 +35,24 @@
         @updateRequirementsMenu="updateRequirementsMenu"
       />
     </div>
+    <tourwindow
+      :title="welcome"
+      :text="welcomeBodytext"
+      :exit="welcomeExit"
+      :buttonText="welcomeButtonText"
+      v-on:hide = "welcomeHidden = false; if(startTour==false) startTour = true"
+      v-if="welcomeHidden"
+    >
+    </tourwindow>
+    <tourwindow
+      :title="congrats"
+      :text="congratsBodytext"
+      :exit="congratsExit"
+      :buttonText="congratsButtonText"
+      v-on:hide = "showTourEndWindow = false;"
+      v-if="showTourEndWindow"
+    >
+    </tourwindow>
     <div id="dashboard-bottomView">
       <bottombar
       v-if="bottomCourses.length > 0 && ((!isOpeningRequirements && isTablet) || !isTablet)"
@@ -50,12 +70,14 @@
 <script>
 import Vue from 'vue';
 
+import introJs from 'intro.js';
 import Course from '@/components/Course';
 import SemesterView from '@/components/SemesterView';
 import Requirements from '@/components/Requirements';
 import BottomBar from '@/components/BottomBar';
 import NavBar from '@/components/NavBar';
 import Onboarding from '@/components/Modals/Onboarding';
+import TourWindow from '@/components/Modals/TourWindow';
 
 import '@/vueDragulaConfig';
 import { auth, userDataCollection } from '@/firebaseConfig';
@@ -66,6 +88,13 @@ Vue.component('requirements', Requirements);
 Vue.component('bottombar', BottomBar);
 Vue.component('navbar', NavBar);
 Vue.component('onboarding', Onboarding);
+Vue.component('tourwindow', TourWindow);
+
+const tour = introJs();
+tour.setOption('exitOnEsc', 'false');
+tour.setOption('doneLabel', 'Finish');
+tour.setOption('skipLabel', 'Skip This Tutorial');
+tour.setOption('nextLabel', 'Next');
 
 export default {
   data() {
@@ -100,7 +129,18 @@ export default {
       isOpeningRequirements: false,
       isTablet: window.innerWidth <= 878,
       isMobile: window.innerWidth <= 440,
-      maxBottomBarTabs: window.innerWidth <= 1347 ? 2 : 4
+      maxBottomBarTabs: window.innerWidth <= 1347 ? 2 : 4,
+      welcome: 'Welcome Cornellian!',
+      welcomeBodytext: 'View your college requirements, plan your semesters and courses, and more.',
+      welcomeExit: 'No, I want to skip this',
+      welcomeButtonText: 'Start Tutorial',
+      welcomeHidden: false,
+      startTour: false,
+      showTourEndWindow: false,
+      congrats: 'Congratulations! That’s a wrap',
+      congratsBodytext: 'Other than this, there is more you can explore, so feel free to surf through CoursePlan 🏄',
+      congratsExit: '',
+      congratsButtonText: 'Start Planning'
     };
   },
   created() {
@@ -174,7 +214,6 @@ export default {
         this.compactVal = false;
       }
     },
-
     /**
      * Creates credit range based on course
      * Example: [1, 4] is the credit range for the given course
@@ -400,7 +439,10 @@ export default {
       // Get map of requirements
       this.buildRequirementsAlert(requirementsMap);
     },
-
+    showTourEnd() {
+      this.showTourEndWindow = true;
+      console.log('asdfasdf');
+    },
     buildRequirementsAlert(requirementsMap) {
       // Update semesters with alerts
       this.semesters.forEach(semester => {
@@ -549,6 +591,7 @@ export default {
 
       this.cancelOnboarding();
       this.updateRequirementsMenu();
+      this.welcomeHidden = true;
     },
 
     cancelOnboarding() {

src/components/Login.vue

@@ -118,6 +118,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import firebase, { User } from 'firebase/app';
+// @ts-ignore
+import introJs from 'intro.js';
 
 // eslint-disable-next-line import/extensions
 import Footer from '@/components/Footer.vue';

src/components/Modals/TourWindow.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="tour">
+    <div class = "blackout">
+      <div class ="intropage">
+        <div class = "picture">
+          <img src = "@/assets/images/Person_planning.svg" alt = "person planning">
+        </div>
+        <div class = "content">
+          <div class = "title">
+            {{ title }}
+          </div>
+          <div class = "body">
+            {{ text }}
+          </div>
+          <button v-on:click = "$emit('hide'); $emit('startTour')">
+            {{ buttonText }}
+          </button>
+          <a v-on:click = "$emit('hide')">
+            {{ exit }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const clickOutside = {
+  bind(el, binding, vnode) {
+    el.event = event => {
+      if (!(el === event.target || el.contains(event.target))) {
+        vnode.context[binding.expression](event, binding.arg);
+      }
+    };
+    document.body.addEventListener('click', el.event);
+  },
+  unbind(el) {
+    document.body.removeEventListener('click', el.event);
+  }
+};
+
+export default {
+  props: {
+    title: String,
+    text: String,
+    exit: String,
+    buttonText: String
+  },
+  data() {
+    return {
+      hideOnClick: ''
+    };
+  },
+  directives: {
+    'click-outside': clickOutside
+  },
+  mounted() {
+  },
+  methods: {
+    startWalkthrough() {
+      // add stuff for starting tour
+    }
+  }
+};
+
+</script>
+
+<style scoped lang="scss">
+.blackout{
+  z-index: 100;
+  background-color:rgba(0,0,0,0.5);
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  left:0px;
+  bottom:0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.intropage{
+  z-index: 200;
+  width: 40vw;
+  height: 80vh;
+  background-color:white;
+  opacity: 1;
+  position: absolute;
+  border-radius: 9px;
+  padding: 0px;
+}
+.picture{
+  width: 100%;
+  height: 66%;
+  display: flex;
+  justify-content: center;
+  background-color: #1AA9A5;
+  border-top-left-radius: 9px;
+  border-top-right-radius: 9px;
+  img{
+    height: 100%;
+  }
+}
+.content{
+  width: 100%;
+  height: 34%;
+  border-radius: 9px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  .title{
+    font-weight: 600;
+  }
+  .body{
+    font-size: .9em;
+    text-align: center;
+    color: #757575;
+    width: 90%;
+  }
+  button{
+    background-color: #508197;
+    color: white;
+    border: none;
+    padding-right: .7em;
+    padding-left: .7em;
+    padding-top: .3em;
+    padding-bottom: .3em;
+    font-style: normal;
+    font-weight: normal;
+    border-radius: 3px;
+  }
+  a{
+    font-weight: normal;
+  }
+}
+
+</style>