added open color modal and add nested class

Author: katherinek123

src/components/right-sidebar/HTMLQueue.vue

@@ -44,6 +44,7 @@ Description:
           <p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
           <p v-if="element.id === this.activeHTML"> You've binded to - {{ element.binding }}</p>
         </div>
+
         <!--attribute child's child-->
         <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
           :key="element.id + Date.now()">
@@ -52,12 +53,12 @@ Description:
           </ul>
         </div>
 
-        <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
+        <!-- <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
           :key="element.id + Date.now()">
           <ul v-for="element1 in element.children" :key="element1.id + Date.now()">
             <li v-if="element1.id === this.activeHTML">You've binded to - {{ element1.binding }}</li>
           </ul>
-        </div>
+        </div> -->
 
         <div class="formBox">
           <q-form autofocus v-on:submit.prevent="submitClass">
@@ -67,15 +68,15 @@ Description:
             <q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
               :disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
           </q-form>
-          <q-form autofocus v-on:submit.prevent="addBinding">
+          <!-- <q-form autofocus v-on:submit.prevent="addBinding">
             <p class="title">Add Binding:</p>
 
             <q-input label="Add two way binding here" filled dark autofocus true hide-bottom-space v-model="bindingText"
               @keyup.enter="addBinding"></q-input>
             <q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Add Binding"
               :disable="bindingText.length > 0 ? false : true" @click="addBinding(bindingText, this.activeHTML)">
             </q-btn>
-          </q-form>
+          </q-form> -->
           <q-btn label="Close" @click="this.openAttributeModal" />
         </div>
       </div>
@@ -200,17 +201,17 @@ export default {
       this.addActiveComponentClass(payload);
       this.classText = '';
     },
-    addBinding(input, idNum) {
-      if (input === '') {
-        return;
-      }
-      const payload = {
-        binding: input,
-        id: idNum
-      }
-      this.addBindingText(payload);
-      this.bindingText = '';
-    },
+    // addBinding(input, idNum) {
+    //   if (input === '') {
+    //     return;
+    //   }
+    //   const payload = {
+    //     binding: input,
+    //     id: idNum
+    //   }
+    //   this.addBindingText(payload);
+    //   this.bindingText = '';
+    // },
   },
   watch: {
     attributeModalOpen() {

src/store/mutations.js

@@ -799,7 +799,9 @@ const mutations = {
       }
     })
   },
-
+  [types.OPEN_COLOR_MODAL]: (state) => {
+    state.colorModalOpen = !state.colorModalOpen;
+  },
   [types.OPEN_NOTE_MODAL]: (state) => {
     state.noteModalOpen = !state.noteModalOpen;
   },