Merge branch '2024.11'

tine-groupware · Dec 13, 2024 · a2dbf9a · a2dbf9a
2 parents f90445f + f6291dd
commit a2dbf9a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/tine20/Felamimail/js/Felamimail.js b/tine20/Felamimail/js/Felamimail.js
@@ -771,7 +771,8 @@ Tine.Felamimail.Application = Ext.extend(Tine.Tinebase.Application, {
         if (this.unreadcountInDefaultInbox < 0) {
             this.unreadcountInDefaultInbox = 0;
         }
-
+        Tine.Tinebase.appMgr.get('Calendar').setDockBadge(this.unreadcountInDefaultInbox)
+
         Tine.log.info('Updating title with new unreadcount: ' + this.unreadcountInDefaultInbox);
         const currentTitle = document.title;
         const unreadString = this.unreadcountInDefaultInbox ? '(' + this.unreadcountInDefaultInbox + ') ' : '';

diff --git a/tine20/Tinebase/js/Application.js b/tine20/Tinebase/js/Application.js
@@ -7,6 +7,7 @@
  */
 
 var EventEmitter = require('events');
+const {ref, toRef} = require("vue-demi");
 
 Ext.ns('Tine.Tinebase');
 
@@ -35,6 +36,8 @@ Tine.Tinebase.Application = function(config) {
     this.i18n = new Locale.Gettext();
     this.i18n.textdomain(this.appName);
 
+    this.dockBadge = this.hasMainScreen ? ref(0) : undefined;
+
     if (this.appName === 'Tinebase') {
         Ext.apply(this, Tine.Tinebase.Application.Tinebase);
     }
@@ -85,6 +88,22 @@ Ext.extend(Tine.Tinebase.Application, Ext.util.Observable , {
      */
     i18n: null,
 
+    /**
+     * @property {Ref<Number>|undefined} dockBadge
+     * If an application is docked, this number is shown as Bootstrap Badge
+     * Is undefined for apps with 'hasMainScreen' set to false
+     */
+    dockBadge: null,
+
+    /**
+     * Sets DockBadge
+     *
+     * @param {Number|String} value
+     */
+    setDockBadge: function(value) {
+        this.dockBadge.value = parseInt(value) || 0
+    },
+
     /**
      * returns title of this application
      * 

diff --git a/tine20/Tinebase/js/TineDock/TineDock.vue b/tine20/Tinebase/js/TineDock/TineDock.vue
@@ -41,7 +41,11 @@
             'dock-item__active': app.name === state.activeApp,
             }"
           >
-            <div :class="app.iconCls" class="h-100 w-100 dock-item__icon"/>
+            <div :class="app.iconCls" class="h-100 w-100 dock-item__icon position-relative">
+              <span class="app-badge translate-middle badge rounded-pill fw-light" v-if="app.dockBadge?.value">
+                {{app.dockBadge}}
+              </span>
+            </div>
             <span class="dock-item__label">{{getTitle(app.text)}}</span>
           </div>
         </div>
@@ -110,7 +114,8 @@ const availableApps = computed(() => {
         text: app.getTitle(),
         iconCls: app.getIconCls(),
         name: app.name,
-        id: `${DOCKED_APP_ID_PREFIX}-${app.name.toLowerCase().replace(' ', '-')}`
+        id: `${DOCKED_APP_ID_PREFIX}-${app.name.toLowerCase().replace(' ', '-')}`,
+        dockBadge: app.dockBadge,
       })
     }
   }, this)
@@ -288,6 +293,15 @@ const { y, arrivedState } = useScroll(tineDockRef, { behavior: 'smooth' })
         background-repeat: no-repeat;
         background-size: 30px 30px;
         background-position: center !important;
+
+        .app-badge{
+          position: absolute;
+          right: -10px;
+          top: 10px;
+
+          background-color: var(--focus-color);
+          color: white;
+        }
       }
 
       &__label{