WEBUI-1935: WEBUI REBRANDING USING SATORI ASSETS [LTS-2023]

.github/workflows/a11y.yaml

@@ -5,11 +5,13 @@ on:
     branches:
       - maintenance-3.1.x
       - lts-2025
+      - WEBUI-1935-POC-REBRANDING
 
   pull_request_target:
     branches:
       - maintenance-3.1.x
       - lts-2025
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_call:
     inputs:

.github/workflows/clean.yaml

@@ -5,6 +5,7 @@ on:
     types: [closed, unlabeled]
     branches:
       - maintenance-3.1.x
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_dispatch:
     inputs:

.github/workflows/crowdin.yaml

@@ -8,7 +8,7 @@ on:
 
   # Sync when a commit is done on maintenance-3.1.x
   push:
-    branches: ["maintenance-3.1.x"]
+    branches: ["maintenance-3.1.x", "WEBUI-1935-POC-REBRANDING"]
     paths:
       - 'i18n/messages.json'
 

.github/workflows/ftest.yaml

@@ -5,11 +5,13 @@ on:
     branches:
       - maintenance-3.1.x
       - lts-2025
+      - WEBUI-1935-POC-REBRANDING
 
   pull_request_target:
     branches:
       - maintenance-3.1.x
       - lts-2025
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_call:
     inputs:

.github/workflows/lint.yaml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - maintenance-3.1.x
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_call:
     inputs:

.github/workflows/main.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - maintenance-3.1.x
+      - WEBUI-1935-POC-REBRANDING
   workflow_dispatch:
 
 permissions:

.github/workflows/preview.yaml

@@ -5,6 +5,7 @@ on:
     types: [opened, synchronize, reopened, labeled]
     branches:
       - maintenance-3.1.x
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_dispatch:
     inputs:

.github/workflows/test.yaml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - maintenance-3.1.x
+      - WEBUI-1935-POC-REBRANDING
 
   workflow_call:
     inputs:

elements/document/nuxeo-collapsible-document-page.js

@@ -40,6 +40,13 @@ Polymer({
     <style include="nuxeo-styles">
       .page {
         @apply --layout-vertical;
+        background-color: var(--nuxeo-app-header-background);
+        padding: 16px;
+      }
+
+      #detailsCard {
+        border-bottom: 1px solid var(--divider-color);
+        box-shadow: none;
       }
 
       .details {

elements/nuxeo-app.js

@@ -116,6 +116,62 @@ Polymer({
         }
       }
 
+      /* Profile avatar with initials */
+      .profile-avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--nuxeo-sidebar-menu);
+        padding: 12px 13px;
+        width: var(--nuxeo-sidebar-width);
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        outline: none;
+        text-decoration: none;
+        box-sizing: border-box;
+      }
+
+      .profile-avatar:hover {
+        background: rgba(0, 0, 0, 0.2);
+        color: var(--nuxeo-sidebar-menu-hover);
+      }
+
+      :host([sidebar-expanded]) .profile-avatar:hover,
+      .profile-avatar.selected {
+        background: rgba(0, 0, 0, 0.2);
+        color: var(--nuxeo-sidebar-menu-hover);
+      }
+
+      .profile-initials {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: var(--sat-profile-avatar-bg);
+        color: var(--nuxeo-sidebar-menu);
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0;
+        flex-shrink: 0;
+      }
+
+      .profile-avatar-image {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+
+      .profile-avatar-label {
+        display: none;
+      }
+
       /* Layout base */
       app-drawer-layout {
         display: flex;
@@ -263,7 +319,7 @@ Polymer({
         width: calc(100% - var(--nuxeo-sidebar-width));
         height: calc(100vh - (var(--nuxeo-app-top, 0) + var(--nuxeo-app-bottom, 0)));
         margin-left: var(--nuxeo-sidebar-width);
-        background-color: var(--nuxeo-drawer-background);
+        background-color: var(--sat-drawer-content-background, var(--nuxeo-drawer-background));
       }
 
       :host([dir='rtl']) #drawer iron-pages {
@@ -303,7 +359,14 @@ Polymer({
         top: 5px;
         left: 6px;
         z-index: 99;
-        background-color: var(--nuxeo-drawer-background);
+        background-color: var(--sat-drawer-toggle-bg, var(--nuxeo-drawer-background));
+      }
+
+      .header h5 {
+        font-weight: var(--sat-home-header-font-weight);
+        font-size: var(--sat-home-header-font-size);
+        color: var(--sat-home-header-color, var(--nuxeo-drawer-text));
+        font-family: var(--sat-font-family-primary);
       }
 
       #drawerToggle svg,
@@ -448,18 +511,38 @@ Polymer({
               <nuxeo-slot name="DRAWER_ITEMS" model="[[actionContext]]"></nuxeo-slot>
               <nuxeo-menu-icon
                 name="administration"
-                icon="nuxeo:admin"
                 label="app.administration"
                 class="settings"
                 hidden$="[[!hasAdministrationPermissions(currentUser)]]"
+                icon="nuxeo:admin"
               ></nuxeo-menu-icon>
-              <nuxeo-menu-icon
+              <a
                 name="profile"
-                src="[[currentUser.contextParameters.userprofile.avatar.data]]"
-                icon="nuxeo:user-settings"
-                label="app.account"
-                class="settings"
-              ></nuxeo-menu-icon>
+                class="settings profile-avatar"
+                href="[[urlFor('page', 'profile')]]"
+                id="profileWrapper"
+                role="option"
+              >
+                <template is="dom-if" if="[[currentUser.contextParameters.userprofile.avatar.data]]">
+                  <img
+                    class="profile-avatar-image"
+                    src="[[currentUser.contextParameters.userprofile.avatar.data]]"
+                    alt="[[_displayUser(currentUser)]]"
+                  />
+                </template>
+                <template is="dom-if" if="[[!currentUser.contextParameters.userprofile.avatar.data]]">
+                  <span class="profile-initials">[[_userInitials(currentUser)]]</span>
+                </template>
+              </a>
+              <nuxeo-tooltip
+                for="profileWrapper"
+                position="right"
+                offset="0"
+                animation-delay="0"
+                id="profileTooltip"
+                tabindex="-1"
+                >[[i18n('app.account')]]</nuxeo-tooltip
+              >
             </paper-listbox>
 
             <!-- drawer content -->
@@ -1152,7 +1235,46 @@ Polymer({
   },
 
   _logo(baseUrl) {
-    return `${baseUrl}themes/${localStorage.getItem('theme') || 'default'}/logo.png`;
+    return `${baseUrl}themes/${localStorage.getItem('theme') || 'default'}/logo.svg`;
+  },
+
+  _userInitials(user) {
+    if (!user) {
+      return '';
+    }
+    const firstName = user.properties && user.properties.firstName ? user.properties.firstName.trim() : '';
+    const lastName = user.properties && user.properties.lastName ? user.properties.lastName.trim() : '';
+
+    // Case 1: Both first and last name - use first letter of each
+    if (firstName && lastName) {
+      return (firstName.charAt(0) + lastName.charAt(0)).toUpperCase();
+    }
+
+    // Case 2: Only first name with 2+ characters - use first two
+    if (firstName && firstName.length >= 2) {
+      return firstName.substring(0, 2).toUpperCase();
+    }
+
+    // Case 3: Only first name with 1 character
+    if (firstName) {
+      return firstName.charAt(0).toUpperCase();
+    }
+
+    // Case 4: Only last name
+    if (lastName && lastName.length >= 2) {
+      return lastName.substring(0, 2).toUpperCase();
+    }
+
+    if (lastName) {
+      return lastName.charAt(0).toUpperCase();
+    }
+
+    // Fallback to user id first two characters
+    if (user.id) {
+      return user.id.substring(0, 2).toUpperCase();
+    }
+
+    return '??';
   },
 
   showHome(e) {

elements/nuxeo-app/nuxeo-page-item.js

@@ -33,7 +33,7 @@ Polymer({
         outline: none;
         user-select: none;
         cursor: pointer;
-        color: var(--disabled-text-color);
+        color: var(--sat-page-tabs-unselected-color, var(--disabled-text-color));
         margin: 0 0 0 16px;
         padding: 12px 6px 12px 6px;
         border-bottom: 2px solid transparent;
@@ -47,10 +47,10 @@ Polymer({
         border-bottom: 2px solid var(--nuxeo-app-header-pill-hover);
         color: var(--nuxeo-app-header-pill-hover);
       }
-
+      /* Active tab border and font color */
       :host(.iron-selected) {
         border-bottom: 2px solid var(--nuxeo-app-header-pill-active);
-        color: var(--nuxeo-app-header-pill-active);
+        color: var(--nuxeo-text-default, var(--nuxeo-app-header-pill-active));
       }
 
       :host(:focus) {

elements/nuxeo-app/nuxeo-page.js

@@ -38,13 +38,24 @@ Polymer({
         height: calc(100vh - (var(--nuxeo-app-top, 0) + var(--nuxeo-app-bottom, 0)));
         display: flex;
         flex-direction: column;
+        background-color: var(--sat-drawer-content-background);
       }
 
       #content {
         flex: 1 1 auto;
         position: relative;
         overflow-y: auto;
-        padding: 16px 16px 0 16px;
+        padding: var(--nuxeo-page-content-padding, 16px 16px 2px 16px);
+        background-color: var(--sat-drawer-content-background, var(--nuxeo-app-content-background));
+      }
+
+      .main-section-container {
+        padding: var(--nuxeo-page-main-section-padding);
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0; /* Important for flex children with overflow */
+        margin-bottom: var(--nuxeo-page-margin-bottom, 0);
       }
 
       .toolbar {
@@ -53,8 +64,8 @@ Polymer({
         @apply --layout-center;
         height: var(--nuxeo-drawer-header-height);
         color: var(--nuxeo-app-header);
-        background: var(--nuxeo-app-header-background);
-        box-shadow: var(--nuxeo-app-header-box-shadow);
+        background: var(--sat-app-header-box-background-color, var(--nuxeo-app-header-background));
+        box-shadow: var(--sat-app-header-box-shadow, var(--nuxeo-app-header-box-shadow));
         overflow-x: auto;
       }
 
@@ -64,11 +75,11 @@ Polymer({
 
       #tabs {
         flex: 0 0 auto;
-        background: var(--nuxeo-app-header-background);
-        box-shadow: var(--nuxeo-app-header-box-shadow);
+        background: var(--nuxeo-page-tabs-background, var(--nuxeo-app-header-background));
         margin-top: 1px;
         overflow-x: auto;
         z-index: 1;
+        border-radius: var(--nuxeo-page-tabs-border-radius, 0);
       }
 
       :host([dir='rtl']) #tabs {
@@ -114,11 +125,13 @@ Polymer({
       <div class="toolbar" id="toolbar">
         <slot id="header" slot="header" name="header"></slot>
       </div>
-      <div id="tabs" role="navigation">
-        <slot name="tabs"></slot>
-      </div>
-      <div id="content">
-        <slot></slot>
+      <div class="main-section-container">
+        <div id="tabs" role="navigation">
+          <slot name="tabs"></slot>
+        </div>
+        <div id="content">
+          <slot></slot>
+        </div>
       </div>
     </div>
   `,