handled merge conflicts with full team

Faraz Moallemi [email protected]
Sean Grace [email protected]
Nicholas Schillaci [email protected]

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

@@ -84,13 +84,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/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">
@@ -402,6 +405,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
@@ -67,7 +67,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
@@ -85,23 +85,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) {
@@ -122,14 +122,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;
@@ -174,7 +174,7 @@ i {
   background: black;
 }
 
-#footer-cards {
+#dashboard-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;

src/components/DashboardVuexStore.vue

@@ -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,