left sidebar restyling in progress: removed upload mockup; removed icons from tabs; reordered create component fields; added accordion to create component; moved undo redo buttons;

megatera · megatera · commit ec61f47622a4 · 2022-02-28T21:30:13.000-08:00
Co-authored by Aram Paparian &lt;apaparian@gmail.com&gt;
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.12.5",
+    "@ssthouse/vue3-tree-chart": "^0.2.3",
     "core-js": "^3.21.1",
     "dotenv": "^16.0.0",
     "electron-deeplink": "^1.0.9",
diff --git a/src/components/ComponentDisplay.vue b/src/components/ComponentDisplay.vue
@@ -396,7 +396,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .component-title {
   position: relative;
   font-size: 16px;
@@ -430,25 +430,25 @@ export default {
   background-color: rgba(223, 218, 218, 0.886);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-  background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-    -webkit-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: -moz-linear-gradient(white 2px, transparent 2px),
-    -moz-linear-gradient(0, white 2px, transparent 2px),
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  background-image: linear-gradient(white 2px, transparent 2px),
-    linear-gradient(90deg, white 2px, transparent 2px),
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
-    linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
+  -pie-background: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
       20px,
-    #269;
+    $secondary;
   behavior: url(/pie/PIE.htc);
 }
 .menu {
@@ -464,7 +464,7 @@ export default {
   position: absolute;
 }
 .active {
-  background-color: rgba(105, 179, 190, 0.514);
+  background-color: $accent;
   border: 1px dashed rgb(227, 203, 71);
 }
 .btn {
diff --git a/src/components/home_sidebar_items/ComponentTab/ComponentTab.vue b/src/components/home_sidebar_items/ComponentTab/ComponentTab.vue
@@ -2,7 +2,6 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
-    <UploadImage v-if="activeComponent === ''"/>
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -35,7 +34,7 @@ export default {
 <style lang="scss">
 // give html background color of grey
 .html-bg {
-    background-color: #202122;
+    background-color: $subprimary;
 }
 #store-cards {
   height: 100%;
diff --git a/src/components/home_sidebar_items/ComponentTab/CreateComponent.vue b/src/components/home_sidebar_items/ComponentTab/CreateComponent.vue
@@ -6,43 +6,51 @@ Description:
 <!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
 
 <template>
-  <div class="inner-div drawer-menu">
-    <br />
-    <form v-on:submit.prevent="createComponent">
-      <!-- will render if creating new component -->
-      <q-input
-        v-if="activeComponent === ''"
-        standout="bg-secondary text-white"
-        bottom-slots
-        v-on:keyup.delete.stop
-        v-model="componentNameInputValue"
-        label="Component Name"
-        dense
-        class="input-add"
-      ></q-input>
-    </form>
-    <div class="icon-container">
-      <Icons
-        class="icons"
-        @getClickedIcon="addToSelectedElementList"
-        @activeElement="addToComponentElementList"
-        @activeHTML="addNestedHTML"
-        @activeLayer="addNestedNoActive"
-      />
-    </div>
-    <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
-    <br />
+  <div class="create-component-div inner-div drawer-menu">
+    <q-expansion-item group="accordion" label="Import Component">
+      <ImportComponent v-if="activeComponent === ''" @imported="createComponent" />
+    </q-expansion-item>
+    <q-expansion-item group="accordion" label="Create Component">
+      <form class="create-component-form" v-on:submit.prevent="createComponent">
+        <!-- will render if creating new component -->
+        <q-input
+          v-if="activeComponent === ''"
+          v-on:keyup.delete.stop
+          v-model="componentNameInputValue"
+          label="Component Name"
+          color="accent"
+          dark
+          dense
+          outlined
+          item-aligned
+          padding="5px"
+          class="input-add"
+        ></q-input>
+      </form>
 
-    <q-btn
-      v-if="activeComponent === ''"
-      id="add-component-btn"
-      color="secondary"
-      label="Create Component"
-      @click="createComponent"
-      :disabled="!componentNameInputValue.trim()"
-    />
-    <ImportComponent v-if="activeComponent === ''" @imported="createComponent"/>
+      <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
+      <div class="subsection">HTML Elements</div>
+      <div class="icon-container">
+        <Icons
+          class="icons"
+          @getClickedIcon="addToSelectedElementList"
+          @activeElement="addToComponentElementList"
+          @activeHTML="addNestedHTML"
+          @activeLayer="addNestedNoActive"
+        />
+      </div>
+      <div class="componentHTML"></div>
+      <br />
 
+      <q-btn
+        id="create-component-btn"
+        v-if="activeComponent === ''"
+        color="secondary"
+        label="Create Component"
+        @click="createComponent"
+        :disabled="!componentNameInputValue.trim()"
+      />
+    </q-expansion-item>
   </div>
 </template>
 
@@ -152,25 +160,58 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.is-primary {
-  height: 45px;
-}
-#add-component-btn {
-  height: 15px;
-  margin: 0.75rem;
-  width: 90%;
-}
-#import-component-btn {
-  height: 15px;
-  margin: 0 0.75rem;
-  width: 90%;
-}
-.inner-div {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding-left: 15px;
-  padding-right: 15px;
-  height: 100%;
-}
+  .create-component-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    margin: 20px;
+  }
+  .create-component-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: -20px;
+  }
+  .subsection {
+    border-top: 1px solid rgba(245, 245, 245, 0.3);
+    padding: 10px 0 0;
+    margin: 20px 0 0;
+  }
+  .componentHTML {
+    height: 100px;
+    margin-top: 20px;
+    overflow-y: scroll;
+    border: 1px solid rgba(245, 245, 245, 0.3);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #create-component-btn {
+    width: 100%;
+  }
+// .is-primary {
+//   height: 45px;
+// }
+// #add-component-btn {
+//   height: 15px;
+//   margin: 0.75rem;
+//   width: 90%;
+// }
+// #import-component-btn {
+//   height: 15px;
+//   margin: 0 0.75rem;
+//   width: 90%;
+// }
+// .inner-div {
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: flex-start;
+//   padding-left: 15px;
+//   padding-right: 15px;
+//   height: 100%;
+// }
 </style>
diff --git a/src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue b/src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue
@@ -385,7 +385,7 @@ p {
 }
 
 #deleteButton {
-  background-color: #289ead;
+  background-color: $secondary;
   color: white;
 }
 
diff --git a/src/components/home_sidebar_items/ComponentTab/Icons.vue b/src/components/home_sidebar_items/ComponentTab/Icons.vue
@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .icon-grid {
   display: grid;
   grid-template-columns: 33% 33% 33%;
@@ -111,11 +111,11 @@ button {
 }
 button:hover {
   cursor: pointer;
-  color: #00ffff;
+  color: $secondary;
 }
 button:focus {
   outline: none;
-  color: #00ffff;
+  color: $secondary;
 }
 button:active {
   box-shadow: 0 5px inherit;
@@ -129,7 +129,7 @@ button:active {
   font-weight: bold;
   float: right;
   border-radius: 50%;
-  background-color: #228585;
+  background-color: $secondary;
   color: white;
 }
 </style>
diff --git a/src/components/home_sidebar_items/ComponentTab/ImportComponent.vue b/src/components/home_sidebar_items/ComponentTab/ImportComponent.vue
@@ -1,6 +1,7 @@
 <template>
       <q-btn
       id="import-component-btn"
+      size="md"
       color="secondary"
       label="Import Component"
       @click="importComponent"
@@ -254,6 +255,14 @@ export default {
 
 </script>
 
+<style scoped>
+  #import-component-btn {
+    margin: 20px 0;
+    width: 100%;
+    align-items: center;
+  }
+</style>
+
 
 
 
diff --git a/src/components/home_sidebar_items/ComponentTab/ParentMultiselect.vue b/src/components/home_sidebar_items/ComponentTab/ParentMultiselect.vue
@@ -6,7 +6,6 @@ Description:
 
 <template>
   <div id="parent-select">
-    <br />
     <VueMultiselect
       v-model="value"
       placeholder="Parent Component"
@@ -15,7 +14,7 @@ Description:
       :options="options"
       @select="selectParent"
       @open="resetActiveComponent"
-      :max-height="90"
+      :max-height="150"
       :option-height="20"
       :searchable="true"
     >
@@ -76,10 +75,31 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style scoped>
-#parent-select {
-  height: 30px;
-  margin: 0.75rem;
-  width: 90%;
+<style scoped lang="scss">
+  :global(.multiselect__tags) {
+    background-color: $subprimary;
+    border: 1px solid rgb(180, 180, 180);
+  }
+  :global(.multiselect__input) {
+    background-color: $subprimary;
+    color: white;
+  }
+  :global(.multiselect__content) {
+    background-color: $subprimary;
+    color: white;
+  }
+  :global(.multiselect__option) {
+    color: white;
+  }
+  :global(.multiselect__single) {
+    background-color: $subsecondary;
+    color: white;
+  }
+  :global(.multiselect__single:focus) {
+    background-color: $subsecondary;
+    color: white;
+  }
+  :global(.multiselect__input::placeholder) {
+  color: white;
 }
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
diff --git a/src/layouts/MyLayout.vue b/src/layouts/MyLayout.vue

Original file line number	Diff line number	Diff line change
`@@ -385,7 +385,7 @@ p {`
`385`	`385`	`}`
`386`	`386`
`387`	`387`	`#deleteButton {`
`388`		`- background-color: #289ead;`
	`388`	`+ background-color: $secondary;`
`389`	`389`	`color: white;`
`390`	`390`	`}`
`391`	`391`