Merge pull request #13 from ltouroumov/wip/style-engine

Styling Engine 😶

assets/css/bootstrap/_config.scss

@@ -1,4 +1,5 @@
 @import "bootstrap/scss/mixins/banner";
+
 @include bsBanner("");
 
 // Configuration
@@ -9,8 +10,14 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
-// Helpers
-@import "bootstrap/scss/helpers";
+$widths: map-merge(
+    map-get(map-get($utilities, "width"), "values"),
+    (20: 20%, 14: 14%, 12: 12%, 11: 11%, 10: 10%, 9: 9%)
+);
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import "utils/width";
+@import "bootstrap/scss/utilities/api";
+
+// Helpers
+@import "bootstrap/scss/helpers";

assets/css/bootstrap/global.scss

@@ -3,4 +3,4 @@
 
 body {
   background: $body-bg-dark;
-}
+}

assets/css/bootstrap/utils/_width.scss

@@ -0,0 +1,6 @@
+@each $width, $size in $widths {
+  .w-#{$width} {
+    flex: 0 0 $size !important;
+    max-width: $size !important;
+  }
+}

components/viewer/ViewMenuBar.vue

@@ -4,7 +4,10 @@
   >
     <div class="container-fluid">
       <div class="d-flex flex-row items-center">
-        <button class="btn btn-light btn-lg i-solar-hamburger-menu-outline" />
+        <button
+          class="btn btn-light btn-lg i-solar-hamburger-menu-outline"
+          @click="toggleProjectMenu(true)"
+        />
       </div>
       <ViewScoreStatus />
       <div class="d-flex gap-1">
@@ -25,7 +28,11 @@
 import ViewScoreStatus from '~/components/viewer/ViewScoreStatus.vue';
 import { useViewerStore } from '~/composables/store/viewer';
 
-const { toggleBackpack, toggleSearch } = useViewerStore();
+const { toggleBackpack, toggleSearch, toggleProjectMenu } = useViewerStore();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.navbar {
+  position: sticky;
+}
+</style>

components/viewer/ViewProjectObj.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="objClass">
+  <div :id="`obj-${obj.id}`" :class="objClass">
+    <StyleObj
+      v-if="obj.isPrivateStyling"
+      :styles="obj.styling"
+      :obj-id="obj.id"
+    />
     <div
       class="project-obj"
       :class="{
@@ -19,7 +24,7 @@
         />
         <div class="obj-content">
           <div class="obj-title">
-            <span class="obj-title-text">{{ obj.title }}</span>
+            {{ obj.title }}
           </div>
           <template v-if="obj.isSelectableMultiple">
             <div class="obj-select-multi">
@@ -46,12 +51,8 @@
           <ViewRequirements :requireds="obj.requireds" />
           <div class="obj-text" v-html="formatText(obj.text)"></div>
         </div>
-        <ViewAddon
-          v-for="(addon, idx) in obj.addons"
-          :key="idx"
-          :addon="addon"
-        />
       </div>
+      <ViewAddon v-for="(addon, idx) in obj.addons" :key="idx" :addon="addon" />
     </div>
   </div>
 </template>
@@ -65,6 +66,8 @@ import { ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 import { formatText } from '~/composables/text';
 
+import StyleObj from './style/StyleObj.vue';
+
 const {
   row,
   obj,
@@ -132,65 +135,40 @@ const decrement = () => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/bootstrap/_config.scss';
-
 .obj-preview {
   overflow: auto;
 }
-
 .project-obj {
   height: 100%;
-  border: 1px solid white;
-  border-radius: 1em;
   overflow: hidden;
-
   display: flex;
   flex-direction: column;
 
   .project-obj-content {
     overflow: auto;
   }
 
-  &.selected {
-    background-color: #193c78ff;
-  }
-
-  &.disabled {
-    background-color: gray;
-  }
-
   &.notSelectable {
     border: none;
-    border-radius: none;
+    border-radius: 0;
   }
 
   .obj-image {
     width: 100%;
-    aspect-ratio: 5/3;
   }
 
   .obj-content {
-    padding: 0.5em;
     overflow-x: auto;
 
     .obj-title {
-      font-size: 1.2em;
-      font-weight: bolder;
       margin-bottom: 5px;
-      text-align: center;
     }
 
     .obj-select-multi {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      margin-bottom: 5px;
-    }
-
-    .obj-text {
-      text-align: center;
-      margin-top: 1rem;
     }
   }
 }

components/viewer/ViewProjectRow.vue

@@ -3,18 +3,18 @@
     <StyleRow
       v-if="row.isPrivateStyling"
       :styles="row.styling"
-      :row-id="row.id"
+      row-id="row.id"
     />
-    <div :class="{ 'project-row': true, hidden: !isVisible }">
-      <div class="row-meta">
+    <div class="project-row" :class="{ hidden: !isVisible }">
+      <div class="row-body">
         <img
           v-if="row.image"
           class="row-image"
           :src="row.image"
           :alt="row.title"
         />
         <div class="row-title">{{ row.title }}</div>
-        <div v-if="row.titleText" class="row-text">{{ row.titleText }}</div>
+        <div v-if="row.titleText" class="row-text" v-html="row.titleText" />
       </div>
       <div class="container-fluid p-0">
         <div class="row g-2">
@@ -50,25 +50,17 @@ const isVisible = computed(() => condition(selectedIds.value));
 
 <style lang="scss">
 .project-row {
+  // Prevents collapsing margins with .row-body
+  display: flex;
+  flex-direction: column;
+
   &.hidden {
     display: none;
   }
 
   .row-meta {
     display: flex;
     flex-direction: column;
-
-    .row-title {
-      padding: 5px 0;
-      font-size: 1.5em;
-      font-weight: bold;
-      text-align: center;
-    }
-
-    .row-text {
-      padding: 5px;
-      text-align: center;
-    }
   }
 }
 </style>

components/viewer/ViewRequirement.vue

@@ -10,10 +10,10 @@
     </div>
     <div v-else-if="req.type === 'or'">
       <span v-for="(orReq, idx) in req.orRequired" :key="idx">
-        <div v-if="orReq.req">
+        <template v-if="orReq.req">
           <span v-if="idx > 0">, or</span>
           {{ getObject(orReq.req)?.title ?? '???' }}
-        </div>
+        </template>
       </span>
     </div>
     <div v-else>Unknown Condition</div>

components/viewer/modal/ViewProjectMenu.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="dialog-container">
+    <div class="dialog bg-dark-subtle text-light">
+      <h5>Default Files</h5>
+      <ul class="list-group mb-3">
+        <li
+          v-for="projects in projectList.items"
+          :key="projects.title"
+          class="list-group-item"
+        >
+          <a
+            href="#"
+            :data-fileurl="projects.remoteFileUrl"
+            @click.prevent="loadRemoteFile"
+          >
+            {{ projects.title }}
+          </a>
+        </li>
+      </ul>
+      <div
+        v-if="isLoading"
+        class="d-flex align-items-center justify-content-start gap-3 mb-3"
+      >
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <strong>Loading ...</strong>
+      </div>
+
+      <h5>Load File</h5>
+      <LoadProject />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ViewerProjectList } from 'composables/viewer';
+import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+import { useViewerStore } from '~/composables/store/viewer';
+
+const isLoading = ref<boolean>(false);
+
+const { projectList } = defineProps<{
+  projectList: ViewerProjectList;
+}>();
+
+const { loadProject, unloadProject } = useProjectStore();
+const { toggleProjectMenu } = useViewerStore();
+const { isLoaded } = useProjectRefs();
+
+const loadRemoteFile = async ({ target }: MouseEvent) => {
+  if (target && target instanceof HTMLAnchorElement) {
+    const fileURL = target.dataset.fileurl;
+    if (!fileURL) return;
+    isLoading.value = true;
+    const result: any = await $fetch(fileURL, { parseResponse: JSON.parse });
+    if (!isLoaded.value) {
+      loadProject(result, fileURL);
+    } else {
+      unloadProject();
+      // Wait for the unloadProject to finish before loading the new project
+      nextTick(() => {
+        if (!isLoaded.value) {
+          loadProject(result, fileURL);
+          toggleProjectMenu(false);
+        }
+      });
+    }
+    isLoading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+</style>

components/viewer/style/StyleObj.vue

@@ -4,22 +4,13 @@
 
 <script setup lang="ts">
 import DynamicStyles from '~/components/utils/DynamicStyles.vue';
-import { RowStyles } from '~/composables/project';
+import { ObjStylesGen, createStyles } from '~/components/viewer/style/engine';
+import { ObjStyles } from '~/composables/project';
 
-const { styles, objId } = defineProps<{ styles: RowStyles; objId: string }>();
+const { styles, objId } = defineProps<{ styles: ObjStyles; objId: string }>();
 
+const generators = [new ObjStylesGen({ container: `#obj-${objId}` })];
 const stylesheet = computed(() => {
-  const parts = [];
-
-  // TODO: Wire the right props here
-  if (styles.rowBgColorIsOn) {
-    parts.push(`&.project-obj { background-color: ${styles.rowBgColor}; }`);
-  }
-
-  if (parts.length > 0) {
-    return `#obj-${objId} { ${parts.join('\n')} }`;
-  } else {
-    return '';
-  }
+  return createStyles(styles, generators);
 });
 </script>

components/viewer/style/StyleRow.vue

@@ -4,20 +4,20 @@
 
 <script setup lang="ts">
 import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import {
+  ObjStylesGen,
+  RowStylesGen,
+  createStyles,
+} from '~/components/viewer/style/engine';
 import { RowStyles } from '~/composables/project';
 
 const { styles, rowId } = defineProps<{ styles: RowStyles; rowId: string }>();
 
+const generators = [
+  new RowStylesGen({ container: `#row-${rowId}` }),
+  new ObjStylesGen(),
+];
 const stylesheet = computed(() => {
-  const parts = [];
-  if (styles.rowBgColorIsOn) {
-    parts.push(`.project-row { background-color: ${styles.rowBgColor}; }`);
-  }
-
-  if (parts.length > 0) {
-    return `#row-${rowId} { ${parts.join('\n')} }`;
-  } else {
-    return '';
-  }
+  return createStyles(styles, generators);
 });
 </script>