UX: Improve styles, hide scrollbar in Places and Photo Viewer

frontend/src/app.js

@@ -32,6 +32,7 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import Api from "common/api";
 import Notify from "common/notify";
+import Scrollbar from "common/scrollbar";
 import Clipboard from "common/clipboard";
 import Components from "component/components";
 import icons from "component/icons";
@@ -79,6 +80,7 @@ window.Hls = Hls;
 // Assign helpers to VueJS prototype
 Vue.prototype.$event = Event;
 Vue.prototype.$notify = Notify;
+Vue.prototype.$scrollbar = Scrollbar;
 Vue.prototype.$viewer = viewer;
 Vue.prototype.$session = session;
 Vue.prototype.$api = Api;

frontend/src/common/config.js

@@ -203,6 +203,12 @@ export default class Config {
 
     this.theme = themes[name] ? themes[name] : themes["default"];
 
+    if (this.theme.dark) {
+      document.body.classList.add("dark-theme");
+    } else {
+      document.body.classList.remove("dark-theme");
+    }
+
     if (this.$vuetify) {
       this.$vuetify.theme = this.theme.colors;
     }

frontend/src/common/scrollbar.js

@@ -0,0 +1,76 @@
+/*
+
+Copyright (c) 2018 - 2021 Michael Mayer <hello@photoprism.org>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+    PhotoPrism® is a registered trademark of Michael Mayer.  You may use it as required
+    to describe our software, run your own server, for educational purposes, but not for
+    offering commercial goods, products, or services without prior written permission.
+    In other words, please ask.
+
+Feel free to send an e-mail to hello@photoprism.org if you have questions,
+want to support our work, or just want to say hello.
+
+Additional information can be found in our Developer Guide:
+https://docs.photoprism.org/developer-guide/
+
+*/
+
+let hidePending = 0;
+let hideDefault = document.body.classList.contains("hide-scrollbar");
+
+const Scrollbar = {
+  html: function () {
+    return document.getElementsByTagName("html")[0];
+  },
+  body: function () {
+    return document.body;
+  },
+  update: function () {
+    const htmlEl = this.html();
+    const bodyEl = this.body();
+
+    if (!htmlEl || !bodyEl) {
+      return;
+    }
+
+    if (this.hidden()) {
+      htmlEl.setAttribute("class", "overflow-y-hidden");
+      bodyEl.classList.add("hide-scrollbar");
+    } else {
+      htmlEl.removeAttribute("class");
+      bodyEl.classList.remove("hide-scrollbar");
+    }
+  },
+  show: function () {
+    if (hidePending > 0) {
+      hidePending--;
+    }
+
+    this.update();
+  },
+  hide: function () {
+    hidePending++;
+
+    this.update();
+  },
+  hidden: function () {
+    return hidePending > 0 || hideDefault;
+  },
+};
+
+Scrollbar.update();
+
+export default Scrollbar;

frontend/src/component/photo/viewer.vue

@@ -130,13 +130,12 @@ export default {
   },
   methods: {
     onShow() {
-      document.body.classList.add("viewer");
+      this.$scrollbar.hide();
     },
     onHide() {
       this.closePlayer();
       this.onPause();
-
-      document.body.classList.remove("viewer");
+      this.$scrollbar.show();
     },
     onChange(ev, data) {
       const psp = this.$viewer.gallery;

frontend/src/css/maps.css

@@ -15,3 +15,7 @@
     border-radius: 50%;
     cursor: pointer;
 }
+
+#photoprism .mapboxgl-ctrl-attrib-inner a {
+    color: #333 !important;
+}

frontend/src/css/themes.css

@@ -9,6 +9,12 @@ input:-webkit-autofill:focus {
     transition: background-color 9999s !important;
 }
 
+/* Dark Scrollbar */
+
+body.dark-theme {
+    scrollbar-color: dark;
+}
+
 /* Grayscale Theme */
 
 .theme-grayscale .v-content__wrap,

frontend/src/pages/places.vue

@@ -181,8 +181,12 @@ export default {
     }
   },
   mounted() {
+    this.$scrollbar.hide();
     this.renderMap();
   },
+  destroyed() {
+    this.$scrollbar.show();
+  },
   methods: {
     query: function () {
       return this.$route.params.q ? this.$route.params.q : "";

frontend/src/share.js

@@ -32,6 +32,7 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import Api from "common/api";
 import Notify from "common/notify";
+import Scrollbar from "common/scrollbar";
 import Clipboard from "common/clipboard";
 import Components from "share/components";
 import icons from "./component/icons";
@@ -78,6 +79,7 @@ window.Hls = Hls;
 // Assign helpers to VueJS prototype
 Vue.prototype.$event = Event;
 Vue.prototype.$notify = Notify;
+Vue.prototype.$scrollbar = Scrollbar;
 Vue.prototype.$viewer = viewer;
 Vue.prototype.$session = session;
 Vue.prototype.$api = Api;