Make User Setting dialog to use compact controls; add user avatar to …

…User Account section (#2452)
SAP · Jan 25, 2022 · 0f54f15 · 0f54f15
1 parent 341e644
commit 0f54f15
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
@@ -108,7 +108,7 @@
         !isAuthorizationEnabled && isProfileLogoutItem}
         <div class="fd-bar__element" data-testid="{getTestId(profileNav.logout)}">
           <button
-            class="fd-button fd-button--transparent"
+            class="fd-button fd-button--transparent fd-button--compact"
             tabindex="0"
             on:click="{onLogoutClick}"
             data-testid="logout-btn"
@@ -118,15 +118,15 @@
         </div>
         {/if} {#if isAuthorizationEnabled && !isLoggedIn}
         <button
-          class="fd-button fd-button--transparent"
+          class="fd-button fd-button--transparent fd-button--compact"
           tabindex="0"
           on:click="{startAuthorization}"
           data-testid="login-btn"
         >
           Login
         </button>
         <button
-          class="fd-button fd-button--transparent"
+          class="fd-button fd-button--transparent fd-button--compact"
           tabindex="0"
           on:click="{startAuthorization}"
           data-testid="login-btn"

diff --git a/core/src/UserSettingsDialog.html b/core/src/UserSettingsDialog.html
@@ -162,9 +162,11 @@
         closeNavOnCategoryClickMobile();
       }
     } else {
-      document
-        .querySelectorAll('.lui-us-list .lui-us-navlist__item')[0]
-        .classList.add('is-selected');
+      const firstListItem = document.querySelectorAll(
+        '.lui-us-list .lui-us-navlist__item'
+      )[0];
+      firstListItem.classList.add('is-selected');
+      firstListItem.focus();
       if (
         window.innerWidth !== 0 &&
         window.innerWidth < CSS_BREAKPOINTS.desktopMinWidth
@@ -472,6 +474,7 @@
     }
 
     .lui-usersettings-content-header__back-btn {
+      margin-right: 0.5em;
       display: inline-block;
       position: relative;
       z-index: 1;
@@ -503,7 +506,6 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
               {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
               <li
                 role="listitem"
-                tabindex="-1"
                 class="fd-list__item fd-list__item--link lui-us-navlist__item"
                 data-testid="us-navigation-item"
                 on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}"
@@ -520,7 +522,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
                   </span>
                   {:else}
                   <span
-                    class="fd-image--s fd-list__thumbnail"
+                    class="{userSettingsGroupProperty[1].iconClassAttribute || 'fd-image--s fd-list__thumbnail'}"
                     aria-label="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
                     style="background-image:url('{userSettingsGroupProperty[1].icon}'); background-size:cover;"
                   ></span>
@@ -545,7 +547,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
       </div>
       <div class="fd-side-nav__group-header lui-usersettings-dialog-sub-header">
         <button
-          class="fd-button fd-button--transparent lui-usersettings-content-header__back-btn"
+          class="fd-button fd-button--transparent fd-button--compact lui-usersettings-content-header__back-btn"
           on:click="{toggleNavMobile}"
         >
           <i class="sap-icon--navigation-left-arrow"></i>

diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
@@ -137,17 +137,13 @@
 
 <style>
   .lui-usersettings-content .fd-row {
-    min-height: 2.75rem; /*required for empty labels to not shrink*/
+    min-height: 2rem; /*required for empty labels to not shrink*/
   }
 
   .lui-usersettings-content .fd-col {
     overflow: visible; /*make dropdown visible above the text below*/
   }
 
-  .lui-fd-enum-button {
-    margin-top: 6px;
-  }
-
   .lui-usersettings-content .fd-col--8 .fd-form-label {
     float: left;
   }
@@ -177,7 +173,7 @@
       {#each Object.entries(userSettingGroup[1].settings) as [key, schemaItem], i}
       <div class="fd-row">
         <div class="fd-col fd-col--4">
-          <label class="fd-form-label">{$getTranslation(schemaItem.label)}: </label>
+          <label class="fd-form-label" for="lui-us-input{i}">{$getTranslation(schemaItem.label)}: </label>
         </div>
         <div class="fd-col fd-col--8">
           {#if schemaItem.type==='string'} {#if schemaItem.isEditable ||
@@ -188,16 +184,18 @@
             aria-label="Image label"
             placeholder="{$getTranslation(schemaItem.placeholder)}"
             data-testid="lui-us-input{i}"
+            id="lui-us-input{i}"
             bind:value="{storedUserSettingData[userSettingGroup[0]][key]}"
             disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
           />
           {:else}
-          <label
-            class="fd-form-label"
+          <div
+            class="fd-text"
             data-testid="lui-us-input{i}"
+            id="lui-us-input{i}"
             disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
             >{storedUserSettingData[userSettingGroup[0]][key]}
-          </label>
+          </div>
           {/if} {/if} {#if schemaItem.type==='enum' && (schemaItem.style === undefined ||
           schemaItem.style === 'list')}
           <div class="fd-form-item">
@@ -214,6 +212,7 @@
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Language"
+                    id="lui-select-input{i}"
                     class="fd-select__control lui-anchor-node"
                     on:keyup="{(event) => handleKeyUp(event)}"
                     data-testid="lui-us-language-dropdown"
@@ -237,7 +236,7 @@
                 aria-hidden="true"
               >
                 {#if Array.isArray(schemaItem.options)}
-                  <ul class="fd-list fd-list--dropdown" role="listbox">
+                  <ul class="fd-list fd-list--compact fd-list--dropdown" role="listbox">
                     {#each schemaItem.options as option, optionIndex}
                     <li
                       role="option"

diff --git a/docs/user-settings.md b/docs/user-settings.md
@@ -101,6 +101,11 @@ These parameters used in the example above allow you to configure the items in t
 - **type** string (optional)
 - **description** name of the icon, without the `sap-icon--` prefix or path to an image.
 
+#### iconClassAttribute
+
+- **type** string (optional)
+- **description** adds specified class(es) to the icon container. Custom classes help to style the image which can be set under the **icon** attribute above. 
+
 #### title
 
 - **type** string (optional)

diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
@@ -134,7 +134,7 @@ describe('Navigation', () => {
       //Email Input field should be disabled and a usual text
       cy.get('[data-testid="lui-us-input1"]')
         .should('exist')
-        .should('have.class', 'fd-form-label')
+        .should('have.class', 'fd-text')
         .should('have.attr', 'disabled');
 
       cy.get('[data-testid="lui-us-label-switch_checkbox"]')

diff --git a/test/e2e-test-application/src/luigi-config/extended/userSettings.js b/test/e2e-test-application/src/luigi-config/extended/userSettings.js
@@ -12,7 +12,8 @@ class UserSettings {
     userAccount: {
       label: 'User Account',
       sublabel: 'username',
-      icon: 'account',
+      icon: '/assets/favicon-sap.ico',
+      iconClassAttribute: 'fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail',
       title: 'User Account',
       settings: {
         name: { type: 'string', label: 'Name', placeholder: 'Name' },
@@ -47,7 +48,12 @@ class UserSettings {
           type: 'enum',
           label: 'Language and Region',
           placeholder: 'Language and Region',
-          options: [{ value: 'de', label: 'Deutsch (de)' }, { value: 'en', label: 'English (en)' }, 'Français', '简体中文'],
+          options: [
+            { value: 'de', label: 'Deutsch (de)' },
+            { value: 'en', label: 'English (en)' },
+            'Français',
+            '简体中文'
+          ],
           description: 'After you save your settings, the browser will refresh for the new language to take effect.'
         },
         date: { type: 'string', label: 'Date Format', placeholder: 'DD-MM-YYYY' },