Augment popper, fix arrow handling, allow variants

guerler · Jul 27, 2023 · ddb5bc3 · ddb5bc3
1 parent 4bb5ea4
commit ddb5bc3
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 25 deletions.
diff --git a/client/src/components/Common/ContextMenu.vue b/client/src/components/Common/ContextMenu.vue
@@ -33,7 +33,13 @@ watch(
 
 <template>
     <div v-if="visible">
-        <Popper placement="right" class="context-menu" :style="placeContextMenu" :force-show="true" :dark-mode="false">
+        <Popper
+            placement="right"
+            class="context-menu"
+            :style="placeContextMenu"
+            :force-show="true"
+            :arrow="false"
+            mode="light">
             <div class="context-menu-slot">
                 <slot />
             </div>

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
@@ -9,8 +9,8 @@
             v-bind="popperProps"
             ref="popper"
             class="popper-element mt-1"
-            :class="{ 'popper-element-dark': darkMode, 'popper-element-light': !darkMode }">
-            <div v-if="darkMode" class="popper-arrow" data-popper-arrow />
+            :class="`popper-element-${mode}`">
+            <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <slot />
         </component>
     </div>
@@ -53,13 +53,17 @@ export default defineComponent({
         referenceProps: {
             type: Object,
         },
+        arrow: {
+            type: Boolean,
+            default: true,
+        },
         disabled: {
             type: Boolean,
             default: false,
         },
-        darkMode: {
-            type: Boolean,
-            default: true,
+        mode: {
+            type: String,
+            default: "dark",
         },
     },
 
@@ -119,52 +123,89 @@ export default defineComponent({
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+@function popper-border($border-color) {
+    @return 1px solid $border-color;
+}
+
 .popper-element {
     z-index: 9999;
     border-radius: $border-radius-base;
 }
 
+/** Available variants */
 .popper-element-dark {
     background: $brand-dark;
+    border: popper-border($brand-dark);
     color: $brand-light;
     max-width: 12rem;
     opacity: 0.95;
+    .popper-arrow:before {
+        background: $brand-dark;
+        border: popper-border($brand-dark);
+    }
 }
 
 .popper-element-light {
     background: $white;
+    border: popper-border($border-color);
     color: $brand-dark;
-    border: $border-default;
-    width: 50%;
+    .popper-arrow:before {
+        background: $white;
+        border: popper-border($border-color);
+    }
 }
 
+/** Arrow positioning and border handling */
 .popper-arrow,
 .popper-arrow:before {
-    height: 10px;
-    width: 10px;
+    height: 9px;
+    width: 9px;
     position: absolute;
-    z-index: -1;
-}
-
-.popper-arrow:before {
-    background: $brand-dark;
     content: "";
     transform: rotate(45deg);
 }
 
-.popper-element[data-popper-placement^="top"] > .popper-arrow {
-    bottom: -5px;
+.popper-element[data-popper-placement^="top"] {
+    > .popper-arrow {
+        bottom: 0px;
+    }
+    > .popper-arrow:before {
+        bottom: -5px;
+        border-top: none;
+        border-left: none;
+    }
 }
 
-.popper-element[data-popper-placement^="bottom"] > .popper-arrow {
-    top: -5px;
+.popper-element[data-popper-placement^="right"] {
+    > .popper-arrow {
+        left: 0px;
+    }
+    > .popper-arrow:before {
+        left: -5px;
+        border-top: none;
+        border-right: none;
+    }
 }
 
-.popper-element[data-popper-placement^="left"] > .popper-arrow {
-    right: -5px;
+.popper-element[data-popper-placement^="bottom"] {
+    > .popper-arrow {
+        top: 0px;
+    }
+    > .popper-arrow:before {
+        top: -5px;
+        border-bottom: none;
+        border-right: none;
+    }
 }
 
-.popper-element[data-popper-placement^="right"] > .popper-arrow {
-    left: -5px;
+.popper-element[data-popper-placement^="left"] {
+    > .popper-arrow {
+        right: 0px;
+    }
+    > .popper-arrow:before {
+        right: -5px;
+        border-bottom: none;
+        border-left: none;
+    }
 }
 </style>
diff --git a/client/src/components/Upload/Default.vue b/client/src/components/Upload/Default.vue
@@ -386,6 +386,7 @@ export default {
             var newModel = new UploadModel.Model(modelProps);
             this.collection.add(newModel);
             this.uploadList.push(modelProps);
+            this._updateStateForCounters();
         },
         /** Error */
         _eventError: function (index, message) {

diff --git a/client/src/components/Upload/DefaultRow.vue b/client/src/components/Upload/DefaultRow.vue
@@ -16,7 +16,7 @@ const props = defineProps({
     extension: String,
     genome: String,
     model: Object,
-    index: String,
+    index: Number,
 });
 const id = computed(() => props.model.id);
 const percentage = computed(() => parseInt(props.model.percentage || 0));
@@ -57,7 +57,7 @@ function removeUpload() {
             <select2 class="upload-extension" v-model="model.extension">
                 <option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
             </select2>
-            <Popper reference-is="span" popper-is="span" placement="bottom" :dark-mode="false">
+            <Popper reference-is="span" popper-is="span" placement="bottom" mode="light">
                 <template v-slot:reference>
                     <FontAwesomeIcon icon="fa-search" />
                 </template>