feat(models-manager): add models-manager menu

bimdata · Jan 27, 2022 · c2bd726 · c2bd726
1 parent 7956420
commit c2bd726
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 28 deletions.
diff --git a/src/components/specific/models/models-manager/ModelsManager.scss b/src/components/specific/models/models-manager/ModelsManager.scss
@@ -46,4 +46,36 @@
       color: var(--color-white);
     }
   }
+
+  &__menu {
+    position: relative;
+
+    &__container {
+      position: absolute;
+      z-index: 1;
+      top: 30px;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      width: 100px;
+      padding: calc(var(--spacing-unit) / 2) 0;
+      box-shadow: var(--box-shadow);
+      background-color: var(--color-white);
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-unit);
+      padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
+
+      &.disabled > span {
+        opacity: 0.6;
+      }
+
+      &:hover:not(.disabled) {
+        background-color: var(--color-silver-light);
+      }
+    }
+  }
 }
diff --git a/src/components/specific/models/models-manager/ModelsManager.vue b/src/components/specific/models/models-manager/ModelsManager.vue
@@ -1,34 +1,55 @@
 <template>
   <div class="models-manager">
     <div class="models-manager__head">
-      <div
-        v-for="tab of tabs"
-        :key="tab.id"
-        class="models-manager__tab"
-        :class="{ selected: tab.id === currentTab.id }"
-        @click="selectTab(tab)"
-      >
-        <span class="models-manager__tab__icon">
-          <img :src="`/static/${tab.id}-file.svg`" />
-        </span>
-        <span class="models-manager__tab__text">
-          {{ tab.label }}
-        </span>
-        <span class="models-manager__tab__count" v-if="tab.models.length > 0">
-          {{ tab.models.length }}
-        </span>
-      </div>
+      <template v-for="tab of tabs" :key="tab.id">
+        <div
+          v-if="tab.displayed"
+          class="models-manager__tab"
+          :class="{ selected: tab.id === currentTab.id }"
+          @click="selectTab(tab)"
+        >
+          <span class="models-manager__tab__icon">
+            <img :src="`/static/${tab.id}-file.svg`" />
+          </span>
+          <span class="models-manager__tab__text">
+            {{ tab.label }}
+          </span>
+          <span class="models-manager__tab__count" v-if="tab.models.length > 0">
+            {{ tab.models.length }}
+          </span>
+        </div>
+      </template>
+
+      <div class="models-manager__menu">
+        <BIMDataButton>
+          <BIMDataIcon
+            color="granite-light"
+            name="ellipsis"
+            size="l"
+            fill
+            :rotate="90"
+            @click="toggleMenu"
+          />
+        </BIMDataButton>
 
-      <BIMDataButton>
-        <BIMDataIcon
-          name="ellipsis"
-          size="l"
-          fill
-          color="granite-light"
-          :rotate="90"
-        />
-      </BIMDataButton>
+        <div class="models-manager__menu__container" v-show="showMenu">
+          <div
+            class="models-manager__menu__item"
+            :class="{ disabled: tab.models.length > 0 }"
+            v-for="tab of tabs"
+            :key="tab.id"
+          >
+            <BIMDataCheckbox
+              :disabled="tab.models.length > 0"
+              :modelValue="tab.models.length > 0 || tab.displayed"
+              @update:modelValue="tab.displayed = !tab.displayed"
+            />
+            <span>{{ `.${tab.id}` }}</span>
+          </div>
+        </div>
+      </div>
     </div>
+
     <div class="models-manager__body">
       <transition name="fade">
         <keep-alive>
@@ -45,6 +66,7 @@
 
 <script>
 import { ref, watch } from "vue";
+import { useToggle } from "@/composables/toggle.js";
 // Components
 import DWGManager from "./dwg-manager/DWGManager.vue";
 import IFCManager from "./ifc-manager/IFCManager.vue";
@@ -76,6 +98,8 @@ export default {
     }
   },
   setup(props) {
+    const { isOpen: showMenu, toggle: toggleMenu } = useToggle();
+
     const tabs = ref([]);
     const currentTab = ref({});
 
@@ -89,7 +113,8 @@ export default {
         tabs.value = tabsDef.map(tab => ({
           ...tab,
           // TODO: set models for each tab based on type
-          models: tab.id === "ifc" ? models : []
+          models: tab.id === "ifc" ? models : [],
+          displayed: true
         }));
         currentTab.value = tabs.value[0];
       },
@@ -99,9 +124,11 @@ export default {
     return {
       // References
       currentTab,
+      showMenu,
       tabs,
       // Methods
-      selectTab
+      selectTab,
+      toggleMenu
     };
   }
 };