From dfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 4 Jul 2021 02:22:39 +0200
Subject: viewer: use CSS modules

GitHub: closes #196
---
 viewer/src/components/LdBreadcrumb.vue             | 15 +++++++-------
 viewer/src/components/LdCommand.vue                | 12 +++++------
 viewer/src/components/LdCommandSearch.vue          |  6 +++---
 viewer/src/components/LdGallery.vue                |  6 +++---
 viewer/src/components/LdProposition.vue            | 23 +++++++++++++---------
 viewer/src/components/LdTagInput.vue               |  6 +++---
 viewer/src/components/LdThumbnail.vue              |  8 ++++----
 .../components/item_handlers/LdDirectoryViewer.vue |  2 --
 .../src/components/item_handlers/LdPdfViewer.vue   |  2 --
 .../src/components/item_handlers/LdVideoViewer.vue |  2 --
 viewer/src/views/GalleryNavigation.vue             |  2 --
 viewer/src/views/GallerySearch.vue                 |  2 --
 viewer/src/views/PanelTop.vue                      |  2 --
 13 files changed, 41 insertions(+), 47 deletions(-)

(limited to 'viewer')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 2c17554..d518365 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -21,14 +21,15 @@
   <div
     ref="breadcrumb"
     v-dragscroll
-    class="ld-breadcrumb flex scrollbar"
+    class="flex scrollbar"
+    :class="$style.ldBreadcrumb"
     @click.capture="e => dragScrollClickFix.onClickCapture(e)"
     @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
     @dragscrollmove="checkForOverflowMask"
   >
-    <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
-    <ul class="ld-breadcrumb">
+    <div v-show="overflowMask" :class="$style.ldBreadcrumbOverflowMask"></div>
+    <ul>
       <li v-for="(item, idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
@@ -89,10 +90,10 @@ export default class LdBreadcrumb extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-.ld-breadcrumb-overflow-mask {
+.ldBreadcrumbOverflowMask {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -104,7 +105,7 @@ export default class LdBreadcrumb extends Vue {
   pointer-events: none;
 }
 
-.ld-breadcrumb {
+.ldBreadcrumb {
   ul {
     display: flex;
     white-space: nowrap;
@@ -117,7 +118,7 @@ export default class LdBreadcrumb extends Vue {
     align-self: center;
     margin-right: $breadcrumb-margins;
   }
-  &.scrollbar {
+  &:global(.scrollbar) {
     overflow-y: hidden;
     scrollbar-width: none;
     &::-webkit-scrollbar {
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7ffa670..19174ad 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,14 +19,14 @@
 -->
 
 <template>
-  <div class="flex command-btns">
+  <div class="flex" :class="$style.commandBtns">
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" />
     </a>
     <ld-command-sort />
     <a
-      :class="{ disabled: isEntryPoint() }"
-      class="link command-secondary"
+      class="link"
+      :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
       :title="$t('command.back')"
       @click="isEntryPoint() || $router.back()"
     >
@@ -68,11 +68,11 @@ export default class LdCommand extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/_buefy_variables.scss";
 @import "~@/assets/scss/theme.scss";
 
-.command-btns {
+.commandBtns {
   background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
@@ -90,7 +90,7 @@ export default class LdCommand extends Vue {
   @media only screen and (max-width: $tablet) {
     flex: 0 1;
 
-    > .command-secondary {
+    > .commandSecondary {
       display: none;
     }
   }
diff --git a/viewer/src/components/LdCommandSearch.vue b/viewer/src/components/LdCommandSearch.vue
index 33ab804..61b66f4 100644
--- a/viewer/src/components/LdCommandSearch.vue
+++ b/viewer/src/components/LdCommandSearch.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div class="flex webkit-flex-shrink-fix">
+  <div class="flex" :class="$style.webkitFlexShrinkFix">
     <b-button @click="clear">
       <fa-icon icon="eraser" />
       <span>{{ $t("command.search.clear") }}</span>
@@ -47,10 +47,10 @@ export default class LdCommandSearch extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 // fix flexbox shrinking and overlap in old webkit versions
 // https://github.com/pacien/ldgallery/issues/183
-.webkit-flex-shrink-fix {
+.webkitFlexShrinkFix {
   flex: none;
 }
 </style>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index 1443927..e567e7c 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -19,7 +19,7 @@
 
 <template>
   <ld-error v-if="hasNoResults" icon="search" :message="noresult" />
-  <div v-else class="thumbnail-tiles">
+  <div v-else :class="$style.thumbnailTiles">
     <router-link v-for="item in sortedItems" :key="item.path" :to="item.path">
       <ld-thumbnail :item="item" />
     </router-link>
@@ -45,8 +45,8 @@ export default class LdPicture extends Vue {
 }
 </script>
 
-<style lang="scss">
-.thumbnail-tiles {
+<style lang="scss" module>
+.thumbnailTiles {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 088e249..07b27f5 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,11 +19,14 @@
 -->
 
 <template>
-  <div class="proposition">
-    <h2 v-if="showCategory && Object.keys(propositions).length" class="subtitle category">{{ title }}</h2>
+  <div :class="$style.proposition">
+    <h2 v-if="showCategory && Object.keys(propositions).length" :class="[$style.subtitle, $style.category]">
+      {{ title }}
+    </h2>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
-        class="operation-btns link"
+        class="link"
+        :class="$style.operationBtns"
         :title="$t('tag-propositions.substraction')"
         @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
       >
@@ -31,7 +34,8 @@
       </a>
 
       <a
-        class="operation-btns link"
+        class="link"
+        :class="$style.operationBtns"
         :title="$t('tag-propositions.addition')"
         @click="add(Operation.ADDITION, proposed.rawTag)"
       >
@@ -39,7 +43,8 @@
       </a>
 
       <a
-        class="operation-tag link"
+        class="link"
+        :class="$style.operationTag"
         :title="$t('tag-propositions.intersection')"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
         >{{ proposed.rawTag }}</a
@@ -47,7 +52,7 @@
 
       <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
     </div>
-    <div v-if="showMoreCount > 0" class="showmore" @click="limit += showMoreCount">
+    <div v-if="showMoreCount > 0" :class="$style.showmore" @click="limit += showMoreCount">
       {{ $t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon icon="angle-double-down" />
     </div>
   </div>
@@ -137,7 +142,7 @@ export default class LdProposition extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
 .proposition {
@@ -153,14 +158,14 @@ export default class LdProposition extends Vue {
     display: flex;
     align-items: center;
     padding-right: 7px;
-    .operation-tag {
+    .operationTag {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       flex-grow: 1;
       cursor: pointer;
     }
-    .operation-btns {
+    .operationBtns {
       padding: 2px 7px;
       cursor: pointer;
     }
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 855813a..49ea3f4 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -28,7 +28,7 @@
     field="display"
     type="is-black"
     size="is-medium"
-    class="paneltag-input"
+    :class="$style.paneltagInput"
     @typing="searchTags"
     @add="clearCurrentFilter"
     @remove="clearCurrentFilter"
@@ -89,8 +89,8 @@ export default class LdTagInput extends Vue {
 }
 </script>
 
-<style lang="scss">
-.paneltag-input .autocomplete .dropdown-content {
+<style lang="scss" module>
+.paneltagInput :global(.autocomplete) :global(.dropdown-content) {
   max-height: 300px;
 }
 </style>
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 3f67a43..4623b44 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div :class="{ preload: loading }">
+  <div :class="{ [$style.preload]: loading }">
     <v-lazy-image
       v-if="item.thumbnail"
       :src="pictureSrc(item.thumbnail.resource)"
@@ -27,7 +27,7 @@
       @intersect="loading = true"
       @load="loading = false"
     />
-    <div v-else class="thumbnail-other flex-column flex-center">
+    <div v-else class="flex-column flex-center" :class="$style.thumbnailOther">
       <div>
         <fa-icon :icon="icon" size="4x" />
       </div>
@@ -62,10 +62,10 @@ export default class LdThumbnail extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-.thumbnail-other {
+.thumbnailOther {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
   padding-top: $body-line-height * 1em;
diff --git a/viewer/src/components/item_handlers/LdDirectoryViewer.vue b/viewer/src/components/item_handlers/LdDirectoryViewer.vue
index 7440f54..2259f12 100644
--- a/viewer/src/components/item_handlers/LdDirectoryViewer.vue
+++ b/viewer/src/components/item_handlers/LdDirectoryViewer.vue
@@ -39,5 +39,3 @@ export default class LdDirectoryViewer extends Vue {
   }
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/viewer/src/components/item_handlers/LdPdfViewer.vue b/viewer/src/components/item_handlers/LdPdfViewer.vue
index c6999bf..04cba0c 100644
--- a/viewer/src/components/item_handlers/LdPdfViewer.vue
+++ b/viewer/src/components/item_handlers/LdPdfViewer.vue
@@ -42,5 +42,3 @@ export default class LdPdfViewer extends Vue {
   }
 }
 </script>
-
-<style lang="scss" module></style>
diff --git a/viewer/src/components/item_handlers/LdVideoViewer.vue b/viewer/src/components/item_handlers/LdVideoViewer.vue
index be44922..ed95bc2 100644
--- a/viewer/src/components/item_handlers/LdVideoViewer.vue
+++ b/viewer/src/components/item_handlers/LdVideoViewer.vue
@@ -44,5 +44,3 @@ export default class LdVideoViewer extends Vue {
   }
 }
 </script>
-
-<style lang="scss" module></style>
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 8bb225a..fdd3922 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -80,5 +80,3 @@ export default class GalleryNavigation extends Vue {
   }
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 6d3deb4..5ab56e0 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -52,5 +52,3 @@ export default class GalleryPicture extends Vue {
   }
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index f10a722..4e92f07 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -30,5 +30,3 @@ import { Component, Vue } from "vue-property-decorator";
 @Component
 export default class PanelTop extends Vue {}
 </script>
-
-<style lang="scss"></style>
-- 
cgit v1.2.3