Localize tag add/delete, fix some translations, add LanguageIcon, add --lang arg, fix lightbox slideshow time, fix gif hover

2025-12-11 14:38:54 +00:00 · 2022-01-08 10:03:38 -05:00
parent 1107fe9a53
commit ed2a3f342a
22 changed files with 100 additions and 51 deletions
--- a/sist2-vue/src/components/DebugInfo.vue
+++ b/sist2-vue/src/components/DebugInfo.vue
@@ -15,7 +15,7 @@

 <script>
 import IndexDebugInfo from "@/components/IndexDebugInfo";
-import DebugIcon from "@/components/DebugIcon";
+import DebugIcon from "@/components/icons/DebugIcon";

 export default {
  name: "DebugInfo.vue",
@@ -27,7 +27,6 @@ export default {
        {key: "platform", value: this.$store.state.sist2Info.platform},
        {key: "debugBinary", value: this.$store.state.sist2Info.debug},
        {key: "sist2CommitHash", value: this.$store.state.sist2Info.sist2Hash},
-        {key: "libscanCommitHash", value: this.$store.state.sist2Info.libscanHash},
        {key: "esIndex", value: this.$store.state.sist2Info.esIndex},
        {key: "tagline", value: this.$store.state.sist2Info.tagline},
        {key: "dev", value: this.$store.state.sist2Info.dev},
--- a/sist2-vue/src/components/DocCard.vue
+++ b/sist2-vue/src/components/DocCard.vue
@@ -34,9 +34,11 @@
          </svg>
        </div>

-        <img v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
+        <img ref="tn"
+             v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
             :src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
             alt=""
+             :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
             class="pointer fit card-img-top" @click="onThumbnailClick()">
        <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
             class="fit card-img-top">
@@ -122,6 +124,9 @@ export default {
    },
    onTnLeave() {
      this.hover = false;
+    },
+    tnHeight() {
+      return this.$refs.tn.height;
    }
  },
 }
--- a/sist2-vue/src/components/DocListItem.vue
+++ b/sist2-vue/src/components/DocListItem.vue
@@ -1,5 +1,6 @@
 <template>
-  <b-list-group-item class="flex-column align-items-start mb-2" :class="{'sub-document': doc._props.isSubDocument}">
+  <b-list-group-item class="flex-column align-items-start mb-2" :class="{'sub-document': doc._props.isSubDocument}"
+                     @mouseenter="onTnEnter()" @mouseleave="onTnLeave()" >

    <!-- Info modal-->
    <DocInfoModal :show="showInfo" :doc="doc" @close="showInfo = false"></DocInfoModal>
@@ -56,7 +57,7 @@ import TagContainer from "@/components/TagContainer";
 import DocFileTitle from "@/components/DocFileTitle";
 import DocInfoModal from "@/components/DocInfoModal";
 import ContentDiv from "@/components/ContentDiv";
-import FileIcon from "@/components/FileIcon";
+import FileIcon from "@/components/icons/FileIcon";

 export default {
  name: "DocListItem",
@@ -85,7 +86,13 @@ export default {
        return this.doc.highlight["path.nGram"] + "/"
      }
      return this.doc._source.path + "/"
-    }
+    },
+    onTnEnter() {
+      this.hover = true;
+    },
+    onTnLeave() {
+      this.hover = false;
+    },
  }
 }
 </script>
--- a/sist2-vue/src/components/Lightbox.vue
+++ b/sist2-vue/src/components/Lightbox.vue
@@ -1,6 +1,5 @@
 <template>
  <div>
-    <!-- TODO: Set slideshowTime as a configurable option-->
    <FsLightbox
        :key="lightboxKey"
        :toggler="showLightbox"
@@ -10,7 +9,7 @@
        :types="lightboxTypes"
        :source-index="lightboxSlide"
        :custom-toolbar-buttons="customButtons"
-        :slideshow-time="1000 * 10"
+        :slideshow-time="$store.getters.optLightboxSlideDuration * 1000"
        :zoom-increment="0.5"
        :load-only-current-source="$store.getters.optLightboxLoadOnlyCurrent"
        :on-close="onClose"
--- a/sist2-vue/src/components/NavBar.vue
+++ b/sist2-vue/src/components/NavBar.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import Sist2Icon from "@/components/Sist2Icon";
+import Sist2Icon from "@/components/icons/Sist2Icon";

 export default {
  name: "NavBar",
--- a/sist2-vue/src/components/TagContainer.vue
+++ b/sist2-vue/src/components/TagContainer.vue
@@ -51,7 +51,7 @@
        >{{ tag.text.split(".").pop() }}</span>

        <b-popover :target="hit._id+tag.rawText" triggers="focus blur" placement="top">
-          <b-button variant="danger" @click="onTagDeleteClick(tag, $event)">Delete</b-button>
+          <b-button variant="danger" @click="onTagDeleteClick(tag, $event)">{{$t("deleteTag")}}</b-button>
        </b-popover>
      </div>

@@ -63,7 +63,7 @@
    </template>

    <!-- Add button -->
-    <small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">Add</small>
+    <small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">{{$t("addTag")}}</small>

    <!-- Size tag-->
    <small v-else class="text-muted badge-size">{{
--- a/sist2-vue/src/components/icons/DebugIcon.vue
+++ b/sist2-vue/src/components/icons/DebugIcon.vue
--- a/sist2-vue/src/components/icons/FileIcon.vue
+++ b/sist2-vue/src/components/icons/FileIcon.vue
--- a/sist2-vue/src/components/icons/GearIcon.vue
+++ b/sist2-vue/src/components/icons/GearIcon.vue
--- a/sist2-vue/src/components/icons/LanguageIcon.vue
+++ b/sist2-vue/src/components/icons/LanguageIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        fill="currentColor"
+        d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "LanguageIcon"
+}
+</script>
+
+<style scoped>
+svg {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+</style>
--- a/sist2-vue/src/components/icons/Sist2Icon.vue
+++ b/sist2-vue/src/components/icons/Sist2Icon.vue
--- a/sist2-vue/src/i18n/messages.ts
+++ b/sist2-vue/src/i18n/messages.ts
@@ -5,6 +5,8 @@ export default {
            advanced: "Advanced search",
            fuzzy: "Fuzzy"
        },
+        addTag: "Add",
+        deleteTag: "Delete",
        download: "Download",
        and: "and",
        page: "page",
@@ -132,6 +134,7 @@ export default {
        saveTagModalTitle: "Add tag",
        saveTagPlaceholder: "Tag name",
        confirm: "Confirm",
+        indexPickerPlaceholder: "Select an index",
        sort: {
            relevance: "Relevance",
            dateAsc: "Date (Older first)",
@@ -161,6 +164,8 @@ export default {
            advanced: "Recherche avancée",
            fuzzy: "Approximatif"
        },
+        addTag: "Ajouter",
+        deleteTag: "Supprimer",
        download: "Télécharger",
        and: "et",
        page: "page",
@@ -320,6 +325,8 @@ export default {
            advanced: "高级搜索",
            fuzzy: "模糊搜索"
        },
+        addTag: "添加",
+        deleteTag: "删除",
        download: "下载",
        and: "与",
        page: "页",
@@ -447,6 +454,7 @@ export default {
        saveTagModalTitle: "增加标签",
        saveTagPlaceholder: "标签名",
        confirm: "确认",
+        indexPickerPlaceholder: "选择一个索引",
        sort: {
            relevance: "相关度",
            dateAsc: "日期（由旧到新）",
--- a/sist2-vue/src/store/index.ts
+++ b/sist2-vue/src/store/index.ts
@@ -27,6 +27,7 @@ export default new Vuex.Store({
        size: 60,

        optLang: "en",
+        optLangIsDefault: true,
        optHideDuplicates: true,
        optTheme: "light",
        optDisplay: "grid",
@@ -82,7 +83,10 @@ export default new Vuex.Store({
        setSist2Info: (state, val) => state.sist2Info = val,
        setSeed: (state, val) => state.seed = val,
        setOptHideDuplicates: (state, val) => state.optHideDuplicates = val,
-        setOptLang: (state, val) => state.optLang = val,
+        setOptLang: (state, val) => {
+            state.optLang = val;
+            state.optLangIsDefault = false;
+        },
        setSortMode: (state, val) => state.sortMode = val,
        setIndices: (state, val) => {
            state.indices = val;
@@ -148,6 +152,7 @@ export default new Vuex.Store({
        setOptHideLegacy: (state, val) => state.optHideLegacy = val,

        setOptLightboxLoadOnlyCurrent: (state, val) => state.optLightboxLoadOnlyCurrent = val,
+        setOptLightboxSlideDuration: (state, val) => state.optLightboxSlideDuration = val,

        setUiMimeMap: (state, val) => state.uiMimeMap = val,

@@ -159,6 +164,13 @@ export default new Vuex.Store({
        },
    },
    actions: {
+        setSist2Info: (store, val) => {
+            store.commit("setSist2Info", val);
+
+            if (store.state.optLangIsDefault) {
+                store.commit("setOptLang", val.lang);
+            }
+        },
        loadFromArgs({commit}, route: Route) {

            if (route.query.q) {
--- a/sist2-vue/src/views/Configuration.vue
+++ b/sist2-vue/src/views/Configuration.vue
@@ -15,15 +15,8 @@
        <h4>{{ $t("displayOptions") }}</h4>

        <b-card>
-          <b-form-checkbox :checked="optLightboxLoadOnlyCurrent" @input="setOptLightboxLoadOnlyCurrent">
-            {{ $t("opt.lightboxLoadOnlyCurrent") }}
-          </b-form-checkbox>

-          <b-form-checkbox :checked="optHideLegacy" @input="setOptHideLegacy">
-            {{ $t("opt.hideLegacy") }}
-          </b-form-checkbox>
-
-          <label>{{ $t("opt.lang") }}</label>
+          <label><LanguageIcon/><span style="vertical-align: middle">&nbsp;{{ $t("opt.lang") }}</span></label>
          <b-form-select :options="langOptions" :value="optLang" @input="setOptLang"></b-form-select>

          <label>{{ $t("opt.theme") }}</label>
@@ -34,6 +27,16 @@

          <label>{{ $t("opt.columns") }}</label>
          <b-form-select :options="columnsOptions" :value="optColumns" @input="setOptColumns"></b-form-select>
+
+          <div style="height: 10px"></div>
+
+          <b-form-checkbox :checked="optLightboxLoadOnlyCurrent" @input="setOptLightboxLoadOnlyCurrent">
+            {{ $t("opt.lightboxLoadOnlyCurrent") }}
+          </b-form-checkbox>
+
+          <b-form-checkbox :checked="optHideLegacy" @input="setOptHideLegacy">
+            {{ $t("opt.hideLegacy") }}
+          </b-form-checkbox>
        </b-card>

        <br/>
@@ -117,15 +120,15 @@
 </template>

 <script>
-import Vue from "vue";
-import {mapGetters, mapMutations} from "vuex";
+import {mapActions, mapGetters, mapMutations} from "vuex";
 import DebugInfo from "@/components/DebugInfo.vue";
 import Preloader from "@/components/Preloader.vue";
 import sist2 from "@/Sist2Api";
-import GearIcon from "@/components/GearIcon.vue";
+import GearIcon from "@/components/icons/GearIcon.vue";
+import LanguageIcon from "@/components/icons/LanguageIcon";

 export default {
-  components: {GearIcon, DebugInfo, Preloader},
+  components: {LanguageIcon, GearIcon, DebugInfo, Preloader},
  data() {
    return {
      loading: true,
@@ -228,7 +231,7 @@ export default {
  },
  mounted() {
    sist2.getSist2Info().then(data => {
-      this.$store.commit("setSist2Info", data)
+      this.setSist2Info(data);
      this.loading = false;
    });

@@ -239,6 +242,9 @@ export default {
    });
  },
  methods: {
+    ...mapActions({
+      setSist2Info: "setSist2Info",
+    }),
    ...mapMutations([
      "setOptTheme",
      "setOptDisplay",
@@ -256,7 +262,6 @@ export default {
      "setOptTreemapSize",
      "setOptLightboxLoadOnlyCurrent",
      "setOptLightboxSlideDuration",
-      "setOptContainerWidth",
      "setOptResultSize",
      "setOptTagOrOperator",
      "setOptLang",
--- a/sist2-vue/src/views/SearchPage.vue
+++ b/sist2-vue/src/views/SearchPage.vue
@@ -60,7 +60,7 @@

 <script lang="ts">
 import Preloader from "@/components/Preloader.vue";
-import {mapGetters, mapMutations} from "vuex";
+import {mapActions, mapGetters, mapMutations} from "vuex";
 import sist2 from "../Sist2Api";
 import Sist2Api, {EsHit, EsResult} from "../Sist2Api";
 import SearchBar from "@/components/SearchBar.vue";
@@ -151,8 +151,10 @@ export default Vue.extend({
    });
  },
  methods: {
-    ...mapMutations({
+    ...mapActions({
      setSist2Info: "setSist2Info",
+    }),
+    ...mapMutations({
      setIndices: "setIndices",
      setDateBoundsMin: "setDateBoundsMin",
      setDateBoundsMax: "setDateBoundsMax",