made aesthetic changes

Author: ziggrace

src/components/ComponentDetails.vue

@@ -14,30 +14,30 @@
         <q-tab name="props" label="Component Props" id="label-text" />
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
-        <q-tab-panel name="state" v-model="activeState">
+        <q-tab-panel name="state">
           <ul id="stateList">
-            <li v-for="comp in activeState" :key="comp">
+            <li v-for="comp in compObj.state" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
-        <q-tab-panel name="actions" v-model="activeActions">
+        <q-tab-panel name="actions">
           <ul id="actionList">
-            <li v-for="comp in activeActions" :key="comp">
+            <li v-for="comp in compObj.actions" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
-        <q-tab-panel name="props" v-model="activeProps">
+        <q-tab-panel name="props"> 
           <ul id="propsList">
-            <li v-for="comp in activeProps" :key="comp">
+            <li v-for="comp in compObj.props" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-    <q-card v-else>Select a component to show details</q-card>
+    <q-card id="blank-card" v-else>Select a component to show details</q-card>
   </div>
 </template>
 
@@ -48,39 +48,11 @@ export default {
   name: "ComponentDetails",
   computed: {
     ...mapState(["activeComponentObj"]),
-    activeState: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.state;
-        return []
-      },
-    },
-    activeProps: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.props;
-        return [];
-      },
-    },
-    activeActions: {
-      get() {
-        if (this.activeComponentObj) return this.activeComponentObj.actions;
-        return [];
-      },
-    },
-    // componentActions: {
-    //   get() {
-    //     return this.$store.state.activeComponentObj.actions;
-    //   },
-    // },
-    // componentState: {
-    //   get() {
-    //     return this.$store.state.activeComponentObj.state;
-    //   },
-    // },
-    // componentProps: {
-    //   get() {
-    //     return this.$store.state.activeComponentObj.props;
-    //   },
-    // },
+    compObj: {
+      get(){
+        return this.activeComponentObj
+      }
+    }
   },
   data() {
     return {
@@ -143,20 +115,17 @@ i
   background black
 
 #store-cards
-  height 100%
+  height 80%
   border-radius 0
   background #737578
 
+#blank-card
+  height 80%
+  border-radius 0
+  background-color #202122 
+
+
 .html-bg
   // give html background color of grey
   background-color #202122
 </style>
-
-
-let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
-
-    active.props
-    active.state
-    active.actions

src/components/DashboardVuexStore.vue

@@ -107,7 +107,7 @@ i
   background black
 
 #store-cards
-  height 100%
+  height 80%
   border-radius 0
   background #737578
 

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -21,9 +21,9 @@ Description:
     </q-input>
     <template>
       <div id="action-select">
-        <br />
         <multiselect
           v-model="selectAction"
+          class="multiselect"
           placeholder="Select Action"
           :multiple="true"
           :close-on-select="false"
@@ -39,15 +39,16 @@ Description:
     </template>
     <template>
       <div>
-        <br />
         <q-btn
           id="add-actions-btn"
+          class="add-btn"
           color="secondary"
           label="Add Action(s)"
           @click="addActionToComp"
         />
       </div>
     </template>
+    <br/>
     <!-- STATE PORTION -->
     <q-input
       standout="bg-secondary text-white"
@@ -63,9 +64,9 @@ Description:
     </q-input>
     <template>
       <div id="state-select">
-        <br />
         <multiselect
           v-model="selectState"
+          class="multiselect"
           placeholder="Select State"
           :multiple="true"
           :close-on-select="false"
@@ -81,16 +82,17 @@ Description:
     </template>
     <template>
       <div>
-        <br />
         <q-btn
-          id="add-actions-btn"
+          id="add-state-btn"
+          class="add-btn"
           color="secondary"
-          label="Add State(s)"
+          label="Add State"
           @click="addStateToComp"
         />
       </div>
     </template>
     <!-- PROPS PORTION -->
+    <br />
     <q-input
       standout="bg-secondary text-white"
       bottom-slots
@@ -105,9 +107,9 @@ Description:
     </q-input>
     <template>
       <div id="props-select">
-        <br />
         <multiselect
           v-model="selectProps"
+          class="multiselect"
           placeholder="Select Props"
           :multiple="true"
           :close-on-select="false"
@@ -123,9 +125,9 @@ Description:
     </template>
     <template>
       <div>
-        <br />
         <q-btn
           id="add-props-btn"
+          class="add-btn"
           color="secondary"
           label="Add Prop(s)"
           @click="addPropsToComp"
@@ -268,11 +270,22 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 <style scoped>
-#parent-select {
+.multiselect {
   height: 30px;
   margin: 0.75rem;
   width: 90%;
 }
+.add-btn {
+  height: 15px;
+  margin: 0.75rem;
+  width: 90%;
+}
+.home-sidebar {
+  margin: 1rem;
+  padding: 0.5rem;
+  border-radius: 5px;
+}
+
 </style>
 
 <style lang="stylus" scoped>

src/store/mutations.js

@@ -92,9 +92,10 @@ const mutations = {
   },
 
   [types.ADD_ACTION_TO_COMPONENT]: (state, payload) => {
-    let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
+    // let active = (state.routes[state.activeRoute].filter(comp => {
+    //   return comp.componentName === state.activeComponent
+    // })[0])
+    let active = state.activeComponentObj
 
     if (!active.actions) {
       active.actions = payload
@@ -121,9 +122,10 @@ const mutations = {
   },
 
   [types.ADD_PROPS_TO_COMPONENT]: (state, payload) => {
-    let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
+    // let active = (state.routes[state.activeRoute].filter(comp => {
+    //   return comp.componentName === state.activeComponent
+    // })[0])
+    let active = state.activeComponentObj
 
     if (!active.props) {
       active.props = payload
@@ -148,9 +150,10 @@ const mutations = {
   },
 
   [types.ADD_STATE_TO_COMPONENT]: (state, payload) => {
-    let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
+    // let active = (state.routes[state.activeRoute].filter(comp => {
+    //   return comp.componentName === state.activeComponent
+    // })[0])
+    let active = state.activeComponentObj
 
     if (!active.state) {
       active.state = payload