feat(search): made the tag selection aside sitcky, so it is always vi…

…sible when user scrolls down the list of annotations. gh-74
kingsdigitallab · Oct 1, 2024 · 20046f6 · 20046f6
1 parent 74b8c9e
commit 20046f6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -467,6 +467,25 @@ div[data-tei-subtype='section'] .textpart-number:before {
 .annotation-preview .tags span {
   margin-left: 0.1em;
 }
+
 .selection .tags-selector img {
   margin-left: 0.5em;
 }
+.selection .tags-selector {
+  max-height: 39%;
+  overflow: auto;
+}
+.selection .tags-selector label {
+  display: block;
+}
+.selection .tags-selector label:hover {
+  background-color: var(--hover-color);
+}
+.selection {
+  position: sticky;
+  display: inline-block;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  max-height: 90vh;
+}
diff --git a/app/assets/search.mjs b/app/assets/search.mjs
@@ -108,6 +108,29 @@ createApp({
         total: 0
       }
     },
+    tagSelection() {
+      let ret = ''
+      let stats = [0, 0]
+
+      for (let state of Object.values(this.definitions.tags)) {
+        if (state === false) stats[1]++;
+        if (state === true) stats[0]++;
+      }
+
+      if (stats[0]) {
+        ret += `+${stats[0]}`
+      }
+      if (stats[1]) {
+        if (ret) ret += ', ';
+        ret += `-${stats[1]}`
+      }
+
+      if (ret) {
+        ret = `(${ret})`
+      }
+
+      return ret
+    },
     lastMessage() {
       let ret = {
         content: '',

diff --git a/app/search.html b/app/search.html
@@ -172,24 +172,22 @@ <h2 class="title is-3">Annotations ({{ pagination.total }})</h2>
             <h2 class="title is-3">Bulk edit ({{ selection.items.size }})
               <button @click.prevent.stop="saveChangeQueue()" class="button is-primary" :disabled="!canEdit || !isUnsaved">Save</button>
             </h2>
-            <h3 class="title is-4">Tags:</h3>
+            <h3 class="title is-4">Tags {{ tagSelection }}:</h3>
             <ul class="tags-selector">
               <li v-for="state, tag in definitions.tags">
                 <label @click.stop.prevent="onClickTag(tag)" :class="`state-${state}`"><input type="checkbox" :checked="state === true" :disabled="state === null"> {{ tag }}</label>
                 <img :src="getThumbUrlFromTag(tag, 40)" alt="annotation thumbnail" class="graph-thumb" v-if="getThumbUrlFromTag(tag, 40)">
               </li>
-              <li>
-                <div class="field has-addons">
-                  <div class="control">
-                    <input :class="{input: 1, 'is-danger': tagFormatError}" type="text" v-model="selection.newTagName" @keyup.enter="onAddTag()">
-                  </div>
-                  <div class="control">
-                    <button class="button" @click="onAddTag()" :disabled="!canEdit || Boolean(tagFormatError) || !(selection.newTagName || '').trim()">Add</button>
-                  </div>
-                </div>
-                <div class="tag-error" v-if="tagFormatError">{{tagFormatError}}</div>
-              </li>
             </ul>
+            <div class="field has-addons">
+              <div class="control">
+                <input :class="{input: 1, 'is-danger': tagFormatError}" type="text" v-model="selection.newTagName" @keyup.enter="onAddTag()">
+              </div>
+              <div class="control">
+                <button class="button" @click="onAddTag()" :disabled="!canEdit || Boolean(tagFormatError) || !(selection.newTagName || '').trim()">Add</button>
+              </div>
+            </div>
+            <div class="tag-error" v-if="tagFormatError">{{tagFormatError}}</div>
             <p>
               <br>
               <a href="https://github.com/kingsdigitallab/crossreads/blob/main/annotations/change-queue.json" target="_blank">{{ changeQueue?.changes?.length || 'no' }} change(s)</a> pending.