ui and ux changes

index.html

@@ -42,7 +42,6 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
     <script src="/js/jquery.min.js"></script>
-    <script src="/js/darkmode.min.js"></script>
     <script src="/js/bootstrap.bundle.min.js"></script>
   </body>
 </html>

src/App.vue

@@ -19,10 +19,6 @@ const { loggedIn } = storeToRefs(store);
   <header>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css"
-    />
   </header>
 
   <nav

src/assets/styles/main.css

@@ -54,4 +54,9 @@
 
 .small-logo {
   height: 40px;
+}
+
+.tooltip-inner {
+  max-width: 250px!important;
+  width: 250px!important;; 
 }

src/components/PermissionListItem.vue

@@ -33,7 +33,7 @@ library.add(faUser, faNewspaper, faTag, faXmark);
   <div class="border rounded">
     <div class="row">
       <div class="col-8">
-        <h5 class="col ms-2 mt-1 text-truncate">
+        <h5 class="col ms-2 mt-1 text-truncate" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="a">
           <i class="fas fa-user"></i>
           <span v-if="!objectid">&nbsp; {{ grant }}</span>
           <span v-else>
@@ -58,7 +58,15 @@ library.add(faUser, faNewspaper, faTag, faXmark);
 </template>
 
 <script>
+import { getString } from "@/plugins/Translations.js"
 export default {
+  mounted() {
+    var h5 = this.$el.querySelector("h5");
+    console.log(autofill[this.grant] ? autofill[this.grant][this.objectid] : null)
+    h5.setAttribute("data-bs-title", getString("permission_" + this.grant, autofill[this.grant] ? autofill[this.grant][this.objectid] : null));
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+  },
   methods: {
     remove() {
       var btn = this.$el.querySelector("#btn-remove");

src/components/barItems/DarkModeBarItem.vue

@@ -10,6 +10,11 @@
 import { usePolifemoStore } from "@/stores/polifemo";
 
 export default {
+  data() {
+    return {
+      store: usePolifemoStore()
+    };
+  },
   computed: {
     darkMode: function () {
       return localStorage.getItem("bs.prefers-color-scheme") === "dark";
@@ -18,25 +23,46 @@ export default {
 
   mounted() {
     this.updateIcon(this.darkMode);
+    this.loadDarkModePreference();
   },
 
   methods: {
     toggleDarkMode() {
-      const store = usePolifemoStore();
-      darkmode.toggleDarkMode();
-      store.darkModeEnabled = !store.darkModeEnabled;
+      this.store.darkModeEnabled = !this.store.darkModeEnabled;
+      localStorage.setItem(
+        "bs.prefers-color-scheme",
+        this.store.darkModeEnabled ? "dark" : "light"
+      );
       this.updateIcon();
+      this.applyDarkModePreference();
     },
 
     updateIcon(force) {
-      const store = usePolifemoStore();
-      if (store.darkModeEnabled || force) {
+      if (this.store.darkModeEnabled || force) {
         document.getElementById("darkmode-icon").classList.remove("fa-moon");
         document.getElementById("darkmode-icon").classList.add("fa-sun");
       } else {
         document.getElementById("darkmode-icon").classList.remove("fa-sun");
         document.getElementById("darkmode-icon").classList.add("fa-moon");
       }
+    },
+
+    loadDarkModePreference() {
+      // The dark mode preference might not be set, so we need to check it
+      if (localStorage.getItem("bs.prefers-color-scheme") === null) {
+        localStorage.setItem("bs.prefers-color-scheme", "light");
+      }
+      this.store.darkModeEnabled =
+        localStorage.getItem("bs.prefers-color-scheme") === "dark";
+      this.applyDarkModePreference();
+    },
+
+    applyDarkModePreference() {
+      if (this.store.darkModeEnabled) {
+        document.documentElement.setAttribute("data-bs-theme", "dark");
+      } else {
+        document.documentElement.removeAttribute("data-bs-theme");
+      }
     }
   }
 };

src/plugins/Translations.js

@@ -0,0 +1,8 @@
+import strings from "@/stores/strings.json";
+export const getString = (key, ...args) => {
+    var str = strings[key];
+    for (var i = 0; i < args.length; i++) {
+        str = str.replace("%" + (i+1), args[i]);
+      }
+    return str;
+}

src/stores/strings.json

@@ -0,0 +1,9 @@
+{
+    "permission_permissions": "Può aggiungere e rimuovere permessi agli utenti",
+    "permission_authors": "Può pubblicare e eliminare articoli per conto di %1",
+    "tags_altro": "Altro",
+    "tags_studenti": "Studenti",
+    "tags_polimiworld": "Polimiworld",
+    "tags_ateneo": "Ateneo",
+    "tags_ricerca": "Ricerca e innovazione"
+}

src/views/ArticlesView.vue

@@ -299,6 +299,7 @@ import axios from "axios";
 import Cherry from "cherry-markdown/dist/cherry-markdown.core";
 import { API_BASE_URL, checkPagePermission } from "@/plugins/AuthUtils";
 import { showToast } from "@/plugins/ToastManager";
+import { getString } from "@/plugins/Translations.js"
 import ArticlesSearchForm from "@/components/ArticlesSearchForm.vue";
 
 library.add(
@@ -388,10 +389,8 @@ export default {
       .get(API_BASE_URL + "/tags")
       .then((response) => {
         response.data.tags.forEach((cat) => {
-          var catname =
-            cat.name.charAt(0).toUpperCase() + cat.name.slice(1).toLowerCase();
           $("#selectcategoria").append(
-            '<option value="' + cat.name + '">' + catname + "</option>"
+            '<option value="' + cat.name + '">' + getString(cat.name) + "</option>"
           );
         });
       })

src/views/PermissionsView.vue

@@ -144,6 +144,7 @@ export default {
 
   methods: {
     getPermissionsOfUser() {
+      this.tempPermList = [];
       $("#permissions-loading").removeClass("d-none");
       axios
         .get(

src/views/WelcomeView.vue

@@ -40,7 +40,7 @@
 
 <style>
 @import "@/assets/styles/main.css";
-@import "@/assets/styles/bootstrap-nightshade.min.css";
+@import "@/assets/styles/bootstrap.min.css";
 </style>
 
 <script>