Added functionality to nav bar button, specifically for Slack login, import componenent, and get started.

Julia Bakerink · Julia Bakerink · commit 97d9153c253f · 2022-03-04T16:09:09.000-08:00
diff --git a/src/components/file_system_interface/OpenProjectComponent.vue b/src/components/file_system_interface/OpenProjectComponent.vue
@@ -10,7 +10,8 @@ Description:
       <div class="settings-dropdown column items-center"> 
       <p class="center">Import:</p>
       <q-btn class="menu-btn" no-caps color="secondary" label="Project" @click="openProjectJSON"/> 
-      <q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/> 
+      <!-- <ImportComponent title="Component"/> -->
+      <!-- <q-btn class="menu-btn" no-caps color="secondary" label="Component" @click="exportProject"/>  -->
       </div>
     </q-menu>
   
@@ -19,11 +20,15 @@ Description:
 
 <script>
 import { mapActions } from "vuex";
+import ImportComponent from "../home_sidebar_items/ComponentTab/ImportComponent.vue"
 const Mousetrap = require("mousetrap");
 const { fs, ipcRenderer } = window;
 
 export default {
   name: "OpenProjectComponent",
+  components: {
+    ImportComponent
+  },
   methods: {
     ...mapActions(["openProject"]),
     // opens project
@@ -64,4 +69,9 @@ export default {
 .mr-sm {
   margin-right: 0.2rem;
 }
+.menu-btn{
+  width: 85%;
+  margin: 10px 0px;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+}
 </style>
diff --git a/src/components/home_sidebar_items/ComponentTab/CreateComponent.vue b/src/components/home_sidebar_items/ComponentTab/CreateComponent.vue
@@ -8,7 +8,7 @@ Description:
 <template>
   <div class="create-component-div drawer-menu">
     <q-expansion-item group="accordion" label="Import Component">
-      <ImportComponent v-if="activeComponent === ''" @imported="createComponent" />
+      <ImportComponent v-if="activeComponent === ''" @imported="createComponent" title="Import Component" />
     </q-expansion-item>
     <q-expansion-item group="accordion" label="Create Component">
       <form class="create-component-form" v-on:submit.prevent="createComponent">
diff --git a/src/components/home_sidebar_items/ComponentTab/ImportComponent.vue b/src/components/home_sidebar_items/ComponentTab/ImportComponent.vue
@@ -1,17 +1,17 @@
 <template>
-      <q-btn
+    <q-btn
       id="import-component-btn"
       size="md"
       color="secondary"
-      label="Import Component"
+      :label=title
       @click="importComponent"
     />
 </template>
 
 <script>
 
 export default {
-
+  props: ['title'],
   methods: {
     //emitter to send the importedObj to CreateComponent when fully parsed.
     createImport(importObj){
@@ -256,11 +256,11 @@ export default {
 </script>
 
 <style scoped>
-  #import-component-btn {
-    margin: 20px 0;
-    width: 100%;
-    align-items: center;
-  }
+#import-component-btn{
+  width: 85%;
+  margin: 10px 0px;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+}
 </style>
 
 
diff --git a/src/components/slack_login/SlackLoginWindow.vue b/src/components/slack_login/SlackLoginWindow.vue
@@ -3,28 +3,6 @@
   <div>
     <!-- <div>
       <q-btn class="glossy bg-black openModalBtn" size="5px" @click="openLogin">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          style="height: 18px; width: 18px; margin-right: 0"
-          viewBox="0 0 122.8 122.8"
-        >
-          <path
-            d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
-            fill="#e01e5a"
-          ></path>
-          <path
-            d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
-            fill="#36c5f0"
-          ></path>
-          <path
-            d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
-            fill="#2eb67d"
-          ></path>
-          <path
-            d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
-            fill="#ecb22e"
-          ></path>
-        </svg>
       </q-btn>
     </div> -->
 
@@ -35,6 +13,37 @@
     <!--
         Skip button:
         -->
+                <q-btn
+              class="menu-btn"
+              color= "purple"
+              no-caps
+              @click="openLogin"
+            >
+                 <svg
+                xmlns="http://www.w3.org/2000/svg"
+                style="height: 20px; width: 20px; margin-right: 12px"
+                viewBox="0 0 122.8 122.8"
+              >
+                <path
+                  d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
+                  fill="#e01e5a"
+                ></path>
+                <path 
+                  d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
+                  fill="#36c5f0"
+                ></path>
+                <path
+                  d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
+                  fill="#2eb67d"
+                ></path>
+                <path
+                  d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
+                  fill="#ecb22e"
+                ></path>
+              </svg>
+              Slack Login
+            </q-btn>
+
     <q-dialog
       v-model="showLogin"
       persistent
@@ -87,7 +96,7 @@ export default {
   data() {
     return {
       isAuthenticating: false,
-      showLogin: true,
+      showLogin: false,
       errorMessage: "",
     };
   },
@@ -150,6 +159,7 @@ export default {
       this.errorMessage = "";
     },
     openLogin: function () {
+      console.log('trying to open!')
       this.showLogin = true;
     },
   },
@@ -171,6 +181,7 @@ export default {
   color: $menutext;
   background-color: purple;
   margin-bottom: 10px;
+
 }
 
 #skipButton {
@@ -199,4 +210,10 @@ export default {
 .openModalBtn {
   border: 1px solid #289ead;
 }
+.menu-btn{
+  width: 100%;
+  margin-bottom:20px;
+}
+
+
 </style>
diff --git a/src/layouts/MyLayout.vue b/src/layouts/MyLayout.vue
@@ -13,12 +13,6 @@ Description:
     <!-- the top header of OverVue -->
     <q-header elevated class="gradient text-white">
       <q-toolbar>
-        <!-- <q-btn dense flat color="subaccent" round @click="left = !left">
-          <i
-            :class="[left ? 'fas fa-chevron-left' : 'fas fa-list-ul']"
-            id="btn"
-          ></i>
-        </q-btn> -->
         <q-toolbar-title><img alt="OverVue" src="../assets/OverVue_navLogo.png" id="nav-logo"><div id="undo-redo">
         <q-btn>
         <i
@@ -44,28 +38,8 @@ Description:
         <i v-else class="fa fa-redo" id="unavailable" aria-hidden="true"></i>
         </q-btn>
       </div></q-toolbar-title>
-        <!-- <SlackLoginWindow /> -->
         <div></div>
-        <!-- <i
-          v-if="doneAction.length"
-          class="fa fa-backward"
-          aria-hidden="true"
-          @click="undo"
-        ></i>
-        <i
-          v-else
-          class="fa fa-backward"
-          id="unavailable"
-          aria-hidden="true"
-        ></i>
-        <i
-          v-if="undoneAction.length"
-          class="fa fa-forward"
-          aria-hidden="true"
-          @click="redo"
-        ></i>
-        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i> -->
-        
+      
         <SaveProjectComponent />
         <OpenProjectComponent />
         <ExportProjectComponent />
@@ -80,41 +54,15 @@ Description:
               color="secondary"
               label="Getting Started"
               no-caps
+              @click= "this.toggleTutorial"
             />
            
-            <q-btn
-              class="menu-btn"
-              color="secondary"
-              no-caps
-            >
-                 <svg
-                xmlns="http://www.w3.org/2000/svg"
-                style="height: 20px; width: 20px; margin-right: 12px"
-                viewBox="0 0 122.8 122.8"
-              >
-                <path
-                  d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
-                  fill="#e01e5a"
-                ></path>
-                <path 
-                  d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
-                  fill="#36c5f0"
-                ></path>
-                <path
-                  d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
-                  fill="#2eb67d"
-                ></path>
-                <path
-                  d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
-                  fill="#ecb22e"
-                ></path>
-              </svg>
-              Connect to Slack
-            </q-btn>
-            <div>
-            <label for="typescript"  class="switch">
+        <SlackLoginWindow />
+            <div class="typescript">
+              <p> <b>TypeScript: </b> </p> 
+              <label for="typescript"  class="switch"> 
               <input class="switch-input" type="checkbox" name="typescript" id="typescript" :value="exportAsTypescript" @change="syncTypescriptFlag" />
-                <span class="switch-label" data-on="TypeScript" data-off="JavaScript"></span> 
+                <span class="switch-label" data-on="On" data-off="Off"></span> 
                 <span class="switch-handle"></span> 
               </label>
              </div>
@@ -203,7 +151,7 @@ import OpenProjectComponent from "../components/file_system_interface/OpenProjec
 import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 import ComponentTab from "../components/home_sidebar_items/ComponentTab/ComponentTab.vue";
 import StoreTab from "../components/home_sidebar_items/StoreTab/StoreTab.vue";
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 export default {
   // Passed down from App.vue
@@ -213,7 +161,7 @@ export default {
       tab: "component",
       left: true,
       right: true,
-      dashWidth: 950,
+      dashWidth: 650,
       originalWidth: 400,
       originalLeft: 400,
       timer: null,
@@ -229,9 +177,10 @@ export default {
     StoreTab,
   },
   computed: {
-    ...mapState(["exportAsTypescript", "toggleTutorial"]),
+    ...mapState(["exportAsTypescript"]),
   },
   methods: {
+    ...mapActions(["toggleTutorial"]),
     hideRight() {
       this.right = !this.right;
       if (this.$refs.resizeBox.style.display === "none") {
@@ -482,7 +431,7 @@ background: #5c5e61;
 	position: relative;
 	display: block;
 	vertical-align: top;
-	width: 100px;
+	width: 100%;
 	height: 30px;
 	padding: 3px;
 	margin: 0 10px 10px 0;
@@ -504,7 +453,7 @@ background: #5c5e61;
 	position: relative;
 	display: block;
 	height: inherit;
-	font-size: 10px;
+	font-size: 0.8rem;
 	text-transform: uppercase;
 	background: #eceeef;
 	border-radius: inherit;
@@ -536,7 +485,7 @@ background: #5c5e61;
 	opacity: 0;
 }
 .switch-input:checked ~ .switch-label {
-	background: #289ead;
+	background: #42B883;
 	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
 }
 .switch-input:checked ~ .switch-label:before {
@@ -563,14 +512,14 @@ background: #5c5e61;
 	left: 50%;
 	margin: -6px 0 0 -6px;
 	width: 12px;
-	height: 12px;
+	height: 12px ;
 	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
 	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
 	border-radius: 6px;
 	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
 }
 .switch-input:checked ~ .switch-handle {
-	left: 74px;
+	left: 56%;
 	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 }
  
@@ -582,4 +531,11 @@ background: #5c5e61;
 	-moz-transition: All 0.3s ease;
 	-o-transition: All 0.3s ease;
 }
+.typescript{
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  width: 90%;
+  flex-direction: row;
+}
 </style>
