Frontend: Update about page and footer

Signed-off-by: Michael Mayer <[email protected]>

frontend/.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
     "no-console": 0,
     "no-case-declarations": 0,
     "no-prototype-builtins": 0,
+    "vue/no-v-text-v-html-on-component": 0,
     "vue/valid-model-definition": 0,
     "vue/valid-attribute-name": 0,
     "vue/first-attribute-linebreak": [

frontend/src/common/config.js

@@ -602,8 +602,6 @@ export default class Config {
 
     if (!s) {
       return "PhotoPrism";
-    } else if (s === "PhotoPrism" && this.values.sponsor) {
-      return "PhotoPrism+";
     }
 
     return s;
@@ -613,7 +611,7 @@ export default class Config {
     const s = this.get("about");
 
     if (!s) {
-      return "PhotoPrism® Dev";
+      return "PhotoPrism®";
     }
 
     return s;
@@ -633,11 +631,13 @@ export default class Config {
     return this.getEdition() === "ce";
   }
 
-  getLicense() {
-    const s = this.get("license");
+  getMembership() {
+    const s = this.get("membership");
 
     if (!s) {
       return "ce";
+    } else if (s === "ce" && this.isSponsor()) {
+      return "essentials";
     }
 
     return s;

frontend/src/component/components.js

@@ -42,6 +42,9 @@ import PSubjectClipboard from "component/subject/clipboard.vue";
 import PAuthHeader from "component/auth/header.vue";
 import PAuthFooter from "component/auth/footer.vue";
 import PAboutFooter from "component/footer.vue";
+import IconLivePhoto from "component/icon/live-photo.vue";
+import IconSponsor from "component/icon/sponsor.vue";
+import IconPrism from "component/icon/prism.vue";
 
 const components = {};
 
@@ -65,6 +68,9 @@ components.install = (Vue) => {
   Vue.component("PAuthHeader", PAuthHeader);
   Vue.component("PAuthFooter", PAuthFooter);
   Vue.component("PAboutFooter", PAboutFooter);
+  Vue.component("IconLivePhoto", IconLivePhoto);
+  Vue.component("IconSponsor", IconSponsor);
+  Vue.component("IconPrism", IconPrism);
 };
 
 export default components;

frontend/src/component/footer.vue

@@ -3,7 +3,7 @@
     <v-card-actions class="footer-actions">
       <v-layout wrap align-top pt-3>
         <v-flex xs12 sm6 class="px-0 pb-2 body-1 text-selectable text-xs-left">
-          <strong><router-link to="/about" class="text-link">{{ about }}</router-link></strong>
+          <strong><router-link to="/about" class="text-link text-selectable">{{ about }}&nbsp;{{ getMembership() }}</router-link></strong>
           <span class="body-link text-selectable">Build&nbsp;<a href="https://docs.photoprism.app/release-notes/" target="_blank" :title="version" class="body-link">{{ build }}</a></span>
         </v-flex>
 
@@ -27,19 +27,35 @@ export default {
     const ver = this.$config.getVersion().split("-");
     const build = ver.slice(0, 2).join("-");
     const about = this.$config.getAbout();
-    const customer = this.$config.get("customer");
+    const membership = this.$config.getMembership();
+    const customer = this.$config.getCustomer();
     const evaluation = !customer;
 
     return {
       rtl: this.$rtl,
       build: build,
       about: about,
-      version: this.$config.getVersion(),
-      sponsor: this.$config.isSponsor(),
+      membership: membership,
       customer: customer,
       evaluation: evaluation,
+      version: this.$config.getVersion(),
+      sponsor: this.$config.isSponsor(),
     };
   },
-  methods: {},
+  methods: {
+    getMembership() {
+      const m = this.$config.getMembership();
+      switch (m) {
+        case "ce":
+          return "CE";
+        case "cloud":
+          return "Cloud";
+        case "essentials":
+          return "Essentials";
+        default:
+          return "Plus";
+      }
+    }
+  },
 };
 </script>

frontend/src/component/icon/prism.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 936 80 456l120-240h560l120 240-400 480ZM368 426h224l-75-150h-74l-75 150Zm82 381V486H183l267 321Zm60 0 267-321H510v321Zm149-381h136l-75-150H584l75 150Zm-494 0h136l75-150H240l-75 150Z" style="fill: currentcolor" /></svg>
+</template>
+<script>
+export default {
+  name: "IconPrism",
+};
+</script>

frontend/src/component/icons.js

@@ -23,8 +23,9 @@ Additional information can be found in our Developer Guide:
 
 */
 
-import IconLivePhoto from "component/icon/live_photo.vue";
+import IconLivePhoto from "component/icon/live-photo.vue";
 import IconSponsor from "component/icon/sponsor.vue";
+import IconPrism from "component/icon/prism.vue";
 
 const icons = {
   live_photo: {
@@ -39,6 +40,12 @@ const icons = {
       name: "sponsor",
     },
   },
+  prism: {
+    component: IconPrism,
+    props: {
+      name: "prism",
+    },
+  },
 };
 
 export default icons;

frontend/src/component/navigation.vue

@@ -671,7 +671,6 @@
 </template>
 
 <script>
-import Album from "model/album";
 import Event from "pubsub-js";
 
 export default {
@@ -714,7 +713,7 @@ export default {
       appIcon: this.$config.getIcon(),
       indexing: false,
       drawer: null,
-      featUpgrade: this.$config.getLicense() === "ce",
+      featUpgrade: this.$config.getMembership() === "ce",
       isRestricted: isRestricted,
       isMini: localStorage.getItem('last_navigation_mode') !== 'false' || isRestricted,
       isDemo: isDemo,

frontend/src/component/photo/cards.vue

@@ -247,7 +247,7 @@ import download from "common/download";
 import Notify from "common/notify";
 import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
 import {virtualizationTools} from 'common/virtualization-tools';
-import IconLivePhoto from "component/icon/live_photo.vue";
+import IconLivePhoto from "component/icon/live-photo.vue";
 
 export default {
   name: 'PPhotoCards',

frontend/src/component/photo/list.vue

@@ -142,7 +142,7 @@
 import download from "common/download";
 import Notify from "common/notify";
 import {virtualizationTools} from 'common/virtualization-tools';
-import IconLivePhoto from "component/icon/live_photo.vue";
+import IconLivePhoto from "component/icon/live-photo.vue";
 
 export default {
   name: 'PPhotoList',

frontend/src/component/photo/mosaic.vue

@@ -133,7 +133,7 @@
 <script>
 import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
 import {virtualizationTools} from 'common/virtualization-tools';
-import IconLivePhoto from "component/icon/live_photo.vue";
+import IconLivePhoto from "component/icon/live-photo.vue";
 
 export default {
   name: 'PPhotoMosaic',

frontend/src/css/app.css

@@ -26,7 +26,7 @@ Additional information can be found in our Developer Guide:
 @import url("vendor/icons/material-design-icons.css");
 @import url("../../node_modules/vuetify/dist/vuetify.min.css");
 @import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
-@import url("font.css");
+@import url("typography.css");
 @import url("wallpapers.css");
 @import url("scrollbar.css");
 @import url("themes.css");

frontend/src/css/themes.css

@@ -87,6 +87,8 @@ body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__
 body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
 body.dark-theme #photoprism .theme--light {
     color: #ffffff;
+    caret-color: #ffffff;
+    stroke: #ffffff;
 }
 
 body.dark-theme #photoprism .theme--light.v-label {

frontend/src/css/font.css → frontend/src/css/typography.css

@@ -25,6 +25,15 @@ body .application {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+@media (min-width: 600px) {
+    .text-columns {
+        column-count: 2;
+        column-gap: 2em;
+        orphans: 3;
+        widows: 0;
+    }
+}
+
 button.v-btn.compact  {
     font-size: 14px;
     height: 34px;