merge enter binding

Author: katherinek123

src/components/Canvas.vue

@@ -151,6 +151,7 @@
                 </div>
                 <div class="formBox">
                 <q-form autofocus v-on:submit.prevent="submitNote">
+<<<<<<< Updated upstream
                     <q-input
                       v-model="noteText"
                       label="Add your note here"
@@ -175,6 +176,14 @@
                     label="Close"
                     @click="this.openNoteModal"
                     />
+=======
+                  <q-input v-model="noteText" label="Add your note here" filled dark autofocus true hide-bottom-space
+                    :hint="hint" @keyup.enter="submitNote"></q-input>
+                  <q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Note"
+                    :disable="noteText.length > 0 ? false : true" @keyup.enter="submitNote" @click="submitNote" />
+                  <q-btn id="note-btn-close" class="sidebar-btn closeAction" label="Close"
+                    @click="this.openNoteModal" />
+>>>>>>> Stashed changes
                 </q-form>
 
                 </div>

src/components/left-sidebar/ComponentTab/AttributesSubMenu.vue

@@ -1,42 +1,34 @@
 <template>
   <div>
 
-<q-btn-dropdown class="attributeDropDown" color="primary" :label="attributeSelection">
+    <q-btn-dropdown class="attributeDropDown" color="primary" :label="attributeSelection">
       <q-list>
-        <q-item clickable v-close-popup @click="changeAttribute('id')">
+        <q-item clickable v-close-popup @keyup.enter="changeAttribute('id')" @click="changeAttribute('id')">
           <q-item-section>
             <q-item-label>ID</q-item-label>
           </q-item-section>
         </q-item>
 
-        <q-item clickable v-close-popup @click="changeAttribute('class')">
+        <q-item clickable v-close-popup @keyup.enter="changeAttribute('class')" @click="changeAttribute('class')">
           <q-item-section>
             <q-item-label>Class</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
     </q-btn-dropdown>
 
-    <q-input
-      @keyup.enter="createAttribute(attributeText)"
-      color="white"
-      dark
-      outlined
-      bottom-slots
-      v-model="attributeText"
-      label="Enter Label"
-      dense
-      class="input-add"
-      v-on:keyup.delete.stop
-    >
+    <q-input @keyup.enter="createAttribute(attributeText)" color="white" dark outlined bottom-slots
+      v-model="attributeText" label="Enter Label" dense class="input-add" v-on:keyup.delete.stop>
       <template v-slot:append>
         <q-btn flat icon="add" @click="createAttribute(attributeText)" />
       </template>
     </q-input>
 
-    <button v-if = "this.activeComponentObj.htmlAttributes.class !== ''" class = "deleteButton" @click="deleteAttribute('class')" color="primary">Remove class</button>
+    <button v-if="this.activeComponentObj.htmlAttributes.class !== ''" class="deleteButton"
+      @click="deleteAttribute('class')" color="primary">Remove class</button>
 
-    <button v-if = "this.activeComponentObj.htmlAttributes.id !== ''" class = "deleteButton" @click="deleteAttribute('id')" color="primary">Remove id</button>
+    <button v-if="this.activeComponentObj.htmlAttributes.id !== ''" class="deleteButton" @click="deleteAttribute('id')"
+      color="primary">Remove id</button>
 
     <!-- <div>
       <q-btn
@@ -64,30 +56,30 @@ export default {
     return {
       attributeText: "",
       attributeSelection: "id",
-      deleteText:"",
+      deleteText: "",
     };
   },
   computed: {
     ...mapState([
-      "selectedProps", 
+      "selectedProps",
       "userProps",
-      "activeComponentObj", 
+      "activeComponentObj",
       "activeComponent",
       "routes",
-      ]),
+    ]),
   },
 
   methods: {
     ...mapActions([
-      "editAttribute", 
-      "activeRoute", 
+      "editAttribute",
+      "activeRoute",
       "activeComponentData"
-      ]),
+    ]),
     // Prevent Delete on changes to searchable multiselect
     stopDelete(e) {
       if (e.code === "Backspace") e.stopPropogation();
     },
- 
+
     createAttribute(attributeText) {
       this.editAttribute({
         attribute: this.attributeSelection,
@@ -109,38 +101,36 @@ export default {
         activeComponent: this.activeComponent,
         routeArray: this.routes[this.activeRoute],
         activeComponentData: this.activeComponentData,
-      }) 
+      })
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
-
-  .attributeDropDown {
-    margin-top: 15px;
-    padding-right: 10px;
-    font-size: 1em;
-  }
-
-  .input-add {
-    // position:absolute;
-    // margin-left: 7em;
-    // bottom:-100%;
-    margin-top:1em;
-    margin-bottom: -1em;
-  }
-  .deleteButton{
-    width:100px;
-    height:30px;
-    background-color:rgba(204, 190, 190, 0.164);
-    color: $menutext;
-    margin-right:2em;
-  }
-
-  .deleteButton:hover{
-    cursor: pointer;
-  }
-
-
+.attributeDropDown {
+  margin-top: 15px;
+  padding-right: 10px;
+  font-size: 1em;
+}
+
+.input-add {
+  // position:absolute;
+  // margin-left: 7em;
+  // bottom:-100%;
+  margin-top: 1em;
+  margin-bottom: -1em;
+}
+
+.deleteButton {
+  width: 100px;
+  height: 30px;
+  background-color: rgba(204, 190, 190, 0.164);
+  color: $menutext;
+  margin-right: 2em;
+}
+
+.deleteButton:hover {
+  cursor: pointer;
+}
 </style>