Merge pull request #6 from oslabs-beta/html_display

Updated Footer File

Author: codeByCandlelight

src/components/CodeSnippet.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Dynamically renders Code Snippet in Footer
+  Dynamically renders Code Snippet in Dashboard
   Functionality includes: Displays children components and (nested) HTML elements in order of selection.
   -->
 

src/components/ComponentDetails.vue

@@ -42,30 +42,30 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 
 export default {
-  name: "ComponentDetails",
+  name: 'ComponentDetails',
   computed: {
-    ...mapState(["activeComponentObj"]),
+    ...mapState(['activeComponentObj']),
     activeState: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.state;
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.state
         return []
-      },
+      }
     },
     activeProps: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.props;
-        return [];
-      },
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.props
+        return []
+      }
     },
     activeActions: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.actions;
-        return [];
-      },
-    },
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.actions
+        return []
+      }
+    }
     // componentActions: {
     //   get() {
     //     return this.$store.state.activeComponentObj.actions;
@@ -82,12 +82,12 @@ export default {
     //   },
     // },
   },
-  data() {
+  data () {
     return {
-      tab: "state",
-    };
-  },
-};
+      tab: 'state'
+    }
+  }
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -98,13 +98,13 @@ i
   font-size 8px
   margin 5px
 
-// styling for the entire footer
+// styling for the entire dashboard
 .q-footer
   transition-timing-function ease-in
   transition .2s
   background $subsecondary
 
-// changes the footer toolbar height
+// changes the dashboard toolbar height
 .q-toolbar
   min-height 25px !important
   padding 0 6px !important
@@ -152,11 +152,10 @@ i
   background-color #202122
 </style>
 
-
 let active = (state.routes[state.activeRoute].filter(comp => {
       return comp.componentName === state.activeComponent
     })[0])
 
     active.props
     active.state
-    active.actions
+    active.actions

src/components/ComponentDisplay.vue

@@ -33,14 +33,17 @@ Description:
       <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
-      <p> Elements in Component: </p>
-      <p
-        v-for="htmlElement in componentMap[componentData.componentName]
-          .htmlList"
-        :key="htmlElement"
-      >
-        {{ htmlElement.text }}
-      </p>
+      <div class="component-html-info">
+        <p>Elements in Component:</p>
+        <p
+          class="list-of-elements"
+          v-for="htmlElement in componentMap[componentData.componentName]
+            .htmlList"
+          :key="htmlElement"
+        >
+           {{  htmlElement.text  }}
+        </p>
+      </div>
       <q-menu context-menu>
         <q-list color="black" class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -393,6 +396,28 @@ export default {
   line-height: 1.2;
   z-index: -1;
 }
+/* .component-html-info {
+  position: relative;
+  font-size: 16px;
+  top: -18px;
+  left: 2px;
+  color: black;
+  -webkit-text-stroke: 0.4px white;
+  font-weight: 800;
+  line-height: 1.2;
+  z-index: -1;
+} */
+.component-html-info {
+    display: flex;
+    /* flex-basis: auto; */
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+    /* justify-content: center; */
+    /* flex-flow: column wrap; */
+    /* align-content: stretch; */
+    /* align-items: flex-start; */
+    font-weight: 800;
+  }
 .component-children {
   position: relative;
   top: 0rem;

src/components/Footer.vue renamed to src/components/Dashboard.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Displays OverVue's footer containing Code Snippet, component details (TBD), Project Tree, and HTML Elements tabs
+  Displays OverVue's dashboard containing Code Snippet, component details (TBD), Project Tree, and HTML Elements tabs
   Functionality includes: opening/closing drawer, deselecting active html, and
   toggling to html elements tab during component creation
   -->
@@ -13,7 +13,7 @@ Description:
       </q-btn>
       <q-toolbar-title>Dashboard</q-toolbar-title>
     </q-toolbar>
-    <q-card id="footer-cards">
+    <q-card id="dashboard-cards">
       <q-tabs
         v-model="tab"
         dense
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     ...mapActions(['setActiveHTML']),
-    // toggles open/close action of footer drawer
+    // toggles open/close action of dashboard drawer
     openBottomDrawer () {
       // 15in mb pro - 1027 px 3.75
       // big screens 2.5
@@ -103,23 +103,23 @@ export default {
       }
     }
   },
-  // toggles footer to "html" tab when existing component is not in focus
+  // toggles dashboard to "html" tab when existing component is not in focus
   watch: {
     activeComponent: function () {
-      // console.log('watching activeComponent in Footer');
+      // console.log('watching activeComponent in Dashboard');
       if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
         this.tab = 'html'
       }
     },
-    // toggles footer to "html" tab if component name has value & elements are in queue
+    // toggles dashboard to "html" tab if component name has value & elements are in queue
     componentNameInputValue: function () {
       // console.log('watching componentNameInputVal')
       if (this.componentNameInputValue !== '' && this.selectedElementList.length !== 0 && this.activeComponent === '') {
         // console.log(this.selectedElementList)
         this.tab = 'html'
       }
     },
-    // toggles footer to "html" tab if elements are added to queue on component creation
+    // toggles dashboard to "html" tab if elements are added to queue on component creation
     selectedElementList: function () {
       // console.log('watching selectedElementList')
       if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
@@ -140,14 +140,14 @@ i {
   margin: 5px;
 }
 
-// styling for the entire footer
+// styling for the entire dashboard
 .q-footer {
   transition-timing-function: ease-in;
   transition: 0.2s;
   background: $subsecondary;
 }
 
-// changes the footer toolbar height
+// changes the dashboard toolbar height
 .q-toolbar {
   min-height: 25px !important;
   padding: 0 6px !important;
@@ -192,7 +192,7 @@ i {
   background: black;
 }
 
-#footer-cards {
+#dashboard-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;

src/components/DashboardVuexStore.vue

@@ -33,25 +33,25 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 
 export default {
-  name: "VuexStore",
+  name: 'VuexStore',
   computed: {
-    ...mapState(["userActions", "userState"]),
-    actionOptions() {
-      return this.userActions;
-    },
-    stateOptions() {
-      return this.userState;
+    ...mapState(['userActions', 'userState']),
+    actionOptions () {
+      return this.userActions
     },
+    stateOptions () {
+      return this.userState
+    }
   },
-  data() {
+  data () {
     return {
-      tab: "state",
-    };
-  },
-};
+      tab: 'state'
+    }
+  }
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -62,13 +62,13 @@ i
   font-size 8px
   margin 5px
 
-// styling for the entire footer
+// styling for the entire Dashboard
 .q-footer
   transition-timing-function ease-in
   transition .2s
   background $subsecondary
 
-// changes the footer toolbar height
+// changes the Dashboard toolbar height
 .q-toolbar
   min-height 25px !important
   padding 0 6px !important

src/components/Tree.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Displays project tree in Footer
+  Displays project tree in Dashboard
   Functionality includes: formating componentMap object to displaying in tree form
   -->
 

src/layouts/MyLayout.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Displays OverVue application layout including undo/redo button, openProject, saveProject, and exportProject, side panels, and footer
+  Displays OverVue application layout including undo/redo button, openProject, saveProject, and exportProject, side panels, and dashboard
   Functionality includes: Toolbar to the left that can be toggled open/closed and undo/redo functionality
   -->
 
@@ -37,13 +37,13 @@ Description:
     <q-page-container>
       <router-view />
     </q-page-container>
-    <Footer />
+    <Dashboard/>
   </q-layout>
 </template>
 
 <script>
 import HomeSideDropDown from '../components/HomeSideDropDown'
-import Footer from '../components/Footer'
+import Dashboard from '../components/Dashboard'
 import CreateComponent from '../components/CreateComponent'
 import ExportProjectComponent from '../components/ExportProject'
 import SaveProjectComponent from '../components/SaveProjectComponent'
@@ -59,7 +59,7 @@ export default {
   },
   components: {
     HomeSideDropDown,
-    Footer,
+    Dashboard,
     CreateComponent,
     ExportProjectComponent,
     SaveProjectComponent,