Merge pull request #16 from oslabs-beta/megan/editdeletemenu

Styling updates for Edit/DeleteMenu

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -39,23 +39,23 @@ Description:
       <q-menu context-menu>
         <q-list color="black" class="menu">
             <q-item clickable v-ripple v-close-popup @click="handleExportComponent">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Export Component</q-item-section
             >
             <q-item-section avatar>
                         <q-icon color="primary" name="upload" />
                       </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
-            <q-item-section style="color: white"
+            <q-item-section style="color: menutext"
               >Update Children</q-item-section
             >
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
           <q-item clickable v-ripple v-close-popup>
-            <q-item-section class="layer" style="color: white"
+            <q-item-section class="layer" style="color: menutext"
               >Layer</q-item-section
             >
             <q-btn
@@ -65,7 +65,7 @@ Description:
               label="-"
               @click="(e) => handleLayer(e)"
             />
-            <p id="counter" style="color: white">{{ componentData.z }}</p>
+            <p id="counter" style="color: menutext">{{ componentData.z }}</p>
             <q-btn
               class="btn"
               color="transparent"
@@ -404,7 +404,7 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
-  -webkit-text-stroke: 0.4px white;
+  -webkit-text-stroke: 0.4px $menutext;
   font-weight: 800;
   line-height: 1.2;
   z-index: -1;
@@ -460,9 +460,9 @@ export default {
   margin-bottom: 0px !important;
 }
 .component-box {
-  color: white;
-  border: 1.2px dashed rgb(231, 203, 75);
-  background-color: rgba(172, 83, 83, 0.42);
+  color: $menutext;
+  border: 1.2px dashed $darktext;
+  background-color: rgba($darktext, .42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
@@ -482,7 +482,7 @@ export default {
 .btn:hover,
 .btn:focus,
 .btn:active {
-  color: white;
+  color: $menutext;
   background-color: transparent;
 }
 #counter {

src/components/dashboard_items/Dashboard.vue

@@ -17,10 +17,7 @@ Description:
       dense
       breakpoint="1050"
     >
-      <q-tab
-        name="detail"
-        label="Component Details"
-        id="label-text"
+      <q-tab name="detail" label="Component Details" id="label-text"
         ></q-tab>
       <q-tab name="tree" label="Project Tree" id="label-text"
         ></q-tab>
@@ -145,18 +142,10 @@ i {
   padding: 5px;
 }
 
-/* this class selector does not change anything */
-.q-tab__label {
-  /* // font-size not changing */
-  font-size: 10px !important;
-  line-height: 1.718em;
-  font-weight: 500;
-}
-
 /* // changes the tab label styling */
 #label-text {
   font-size: 4px !important;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .q-tab-panel {

src/components/dashboard_items/HTMLQueue.vue

@@ -142,7 +142,7 @@ li {
   min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
-  border: 2px solid white;
+  border: 2px solid $menutext;
   background-color: $secondary;
   height: 35px;
   padding-top: 6px;
@@ -151,7 +151,7 @@ li {
 
 .fa-trash:hover {
   cursor: pointer;
-  color: red;
+  color: $darktext;
 }
 
 .fa-trash {
@@ -169,7 +169,7 @@ li {
 
 .fa-angle-double-down:hover {
   cursor: pointer;
-  color: #41B883;
+  color: $darktext;
 }
 
 .fa-chevron-up {

src/components/dashboard_items/RouteDisplay.vue

@@ -5,18 +5,30 @@ Includes functionality to:
 -->
 
 <template>
-  <div>
+  <div class="route-display">
     <q-input
       @keyup.enter="handleEnterKeyPress"
-      standout="bg-secondary text-white"
+      color="menutext"
+      dark
+      outlined
       bottom-slots
       v-model="newRoute"
-      label="Enter new route"
+      label="Add new route"
       dense
+      no-error-icon
       class="input-add"
       @click="resetActiveComponent"
-    ></q-input>
-
+      reactive-rules
+      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
+    >
+    <template v-slot:append>
+      <q-btn
+        flat
+        icon="add"
+        @click="handleEnterKeyPress"
+      />
+    </template>
+    </q-input>
     <Routes></Routes>
   </div>
 </template>
@@ -65,13 +77,8 @@ export default {
 
 <style scoped>
 .route-display {
-  border: 1px solid rgba(208, 208, 208, 0.694);
   overflow: auto;
-  height: 60%;
-  padding: 0;
-  margin: 1rem;
-  padding: 0.5rem;
-  border-radius: 5px;
+  padding: 1rem;
 }
 
 i:hover {

src/components/dashboard_items/Routes.vue

@@ -5,7 +5,8 @@ Description:
   -->
 
 <template>
-  <div class="home-sidebar">
+  <div>
+    <p>Click to view route</p>
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"
       v-for="route in Object.keys(routes)"
@@ -47,9 +48,5 @@ export default {
 </script>
 
 <style scoped>
-.route-view {
-  margin: 1rem;
-  display: flex;
-  flex-direction: column;
-}
+
 </style>

src/components/dashboard_items/Tree.vue

@@ -179,24 +179,23 @@ export default {
   min-width: 80%; 
   margin: 6px;
   min-height: 28px;
-  color: #FFFFFF;
+  color: $menutext;
   background-color: $secondary;
   text-align: center;
   line-height: 28px;
-  border-radius: 3px;
+  border-radius: 4px;
   word-wrap: break-word;
 }
 
 .tree-node-active {
   background-color: $accent;
-  color: #155158;
-  border: 2px solid rgb(196, 154, 19);
+  color: $darktext;
+  border: 2px solid $menutext;
 }
 
 .tree-node-activeRoute {
-  background-color: $accent;
-  color: #155158;
-  border: 2px solid rgb(196, 154, 19);
+  background-color: $darktext;
+  border: 2px solid $menutext;
 }
 
 

src/components/dashboard_items/tutorial/AdvancedFunctions.vue

@@ -1,7 +1,7 @@
 <template>
   <!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
-  Advanced Functions Here!
-      <q-btn
+    <p>Advanced Functions Here!</p>
+    <q-btn
       id="tut-btn"
       color="secondary"
       label="Get Started with OverVue"

src/components/home_sidebar_items/ComponentTab/AddProps.vue

@@ -1,25 +1,27 @@
 <template>
   <div>
     <q-input
-      @keyup.enter.native="createNewProp(textProps)"
-      standout="bg-secondary text-white"
+      @keyup.enter="createNewProp(textProps)"
+      color="menutext"
+      dark
+      outlined
       bottom-slots
       v-model="textProps"
-      label="Create Prop"
+      label="Create new prop"
       dense
       class="input-add"
       v-on:keyup.delete.stop
     >
       <template v-slot:append>
-        <q-btn round dense flat icon="add" @click="createNewProp(textProps)" />
+        <q-btn dense flat icon="add" @click="createNewProp(textProps)" />
       </template>
     </q-input>
 
     <div id="props-select">
       <VueMultiselect
         v-model="selectProps"
         class="multiselect"
-        placeholder="Select Props for Component"
+        placeholder="Select from existing props"
         :multiple="true"
         :close-on-select="false"
         :max-height="180"
@@ -29,7 +31,7 @@
         :searchable="false"
         @search-change="stopDelete($event)"
       >
-        <span slot="noResult">No props found.</span>
+        <template v-slot:noResult>No props found.</template>
       </VueMultiselect>
     </div>
     <br />
@@ -94,3 +96,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+  .q-field {
+    margin: 30px 0 10px;
+  }
+</style>

src/components/home_sidebar_items/ComponentTab/ComponentActions.vue

@@ -7,7 +7,7 @@
 -->
 
 <template>
-  <div>
+  <div class="selection-container">
     <div id="action-select">
       <VueMultiselect
         v-model="selectAction"
@@ -98,7 +98,7 @@ export default {
     ]),
     // Prevent Delete on changes to searchable multiselect
     stopDelete(e) {
-      if (e.code === "Backspce") e.stopPropogation();
+      if (e.code === "Backspace") e.stopPropogation();
       // console.log(e);
     },
     // adds an action to the currently selected component
@@ -112,3 +112,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.selection-container {
+    padding: 30px 0;
+  }
+</style>

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -7,7 +7,7 @@
 -->
 
 <template>
-  <div>
+  <div class="selection-container">
     <div id="state-select">
       <VueMultiselect
         v-model="selectState"
@@ -111,3 +111,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+  .selection-container {
+    padding: 30px 0;
+  }
+</style>