[WIP] redesign platform

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@bimdata/bcf-components": "6.7.7",
     "@bimdata/components": "1.10.1",
-    "@bimdata/design-system": "2.4.3",
+    "@bimdata/design-system": "3.0.0-beta.47",
     "@bimdata/typescript-fetch-api-client": "10.46.1",
     "@bimdata/viewer": "2.18.0-beta.6",
     "@paddle/paddle-js": "^1.6.4",

src/AppLayout.vue

@@ -14,24 +14,29 @@
     <AppNotification />
     <AppSidePanel />
 
-    <AppHeader />
-    <div
-      ref="viewContainer"
-      class="app-layout__view-container"
-      :class="{ loading }"
-    >
-      <router-view></router-view>
-    </div>
-    <transition name="fade">
-      <div class="app-layout__overlay" v-show="loading">
-        <BIMDataSpinner class="app-layout__loader" />
+    <AppSidebar />
+    <div class="app-layout__main">
+      <div v-if="hasHeaderAction" class="app-layout__header-action">
+        <AppSlot name="app-header-action" />
+      </div>
+      <div
+        ref="viewContainer"
+        class="app-layout__view-container"
+        :class="{ loading }"
+      >
+        <router-view></router-view>
       </div>
-    </transition>
+      <transition name="fade">
+        <div class="app-layout__overlay" v-show="loading">
+          <BIMDataSpinner class="app-layout__loader" />
+        </div>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script>
-import { onMounted, provide, ref, watch } from "vue";
+import { computed, onMounted, provide, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { contexts, useLoadingContext } from "./composables/loading.js";
 import {
@@ -43,17 +48,20 @@ import routeNames from "./router/route-names.js";
 import { useUser } from "./state/user.js";
 
 // Components
-import AppHeader from "./components/specific/app/app-header/AppHeader.vue";
+import AppSidebar from "./components/specific/app/app-sidebar/AppSidebar.vue";
 import AppModal from "./components/specific/app/app-modal/AppModal.vue";
 import AppNotification from "./components/specific/app/app-notification/AppNotification.vue";
 import AppSidePanel from "./components/specific/app/app-side-panel/AppSidePanel.vue";
+import AppSlot from "./components/specific/app/app-slot/AppSlot.js";
+import { useAppSlot } from "./components/specific/app/app-slot/app-slot.js";
 
 export default {
   components: {
-    AppHeader,
+    AppSidebar,
     AppModal,
     AppNotification,
-    AppSidePanel
+    AppSidePanel,
+    AppSlot
   },
   setup() {
     const router = useRouter();
@@ -64,6 +72,9 @@ export default {
     const viewContainer = ref(null);
     provide("viewContainer", viewContainer);
 
+    const headerActionSlot = useAppSlot("app-header-action");
+    const hasHeaderAction = computed(() => Boolean(headerActionSlot.value));
+
     const tourToDisplay = ref(null);
 
     onMounted(async () => {
@@ -86,6 +97,7 @@ export default {
     return {
       // References
       isGuidedTourEnabled: IS_GUIDED_TOUR_ENABLED,
+      hasHeaderAction,
       loading,
       tours,
       tourToDisplay,

src/components/specific/app/app-breadcrumb/AppBreadcrumb.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="app-breadcrumb">
-    <GoBackButton />
+    <GoBackButton class="m-r-6" />
     <template v-if="breadcrumb">
-      <div class="breadcrumb-separator"></div>
       <component :is="breadcrumb" />
     </template>
   </div>
@@ -20,23 +19,23 @@ import BreadcrumbSpaceSelector from "./breadcrumb-space-selector/BreadcrumbSpace
 const BREADCRUMB_COMPONENTS = {
   [routeNames.spaceBoard]: "BreadcrumbSpaceSelector",
   [routeNames.projectBoard]: "BreadcrumbProjectSelector",
-  [routeNames.groupBoard]: "BreadcrumbGroupSelector"
+  [routeNames.groupBoard]: "BreadcrumbGroupSelector",
 };
 
 export default {
   components: {
     GoBackButton,
     BreadcrumbGroupSelector,
     BreadcrumbProjectSelector,
-    BreadcrumbSpaceSelector
+    BreadcrumbSpaceSelector,
   },
   setup() {
     const route = useRoute();
 
     return {
-      breadcrumb: BREADCRUMB_COMPONENTS[route.name]
+      breadcrumb: BREADCRUMB_COMPONENTS[route.name],
     };
-  }
+  },
 };
 </script>