Skip to content

Commit

Permalink
Style language dropdown under User Settings Dialog (SAP#2391)
Browse files Browse the repository at this point in the history
  • Loading branch information
@UlianaMunich
UlianaMunich authored Nov 23, 2021
1 parent 1290279 commit 6803811
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 33 deletions.
1 change: 0 additions & 1 deletion core/fundamentalStyleClasses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ module.exports = [
'./node_modules/fundamental-styles/dist/form-item.css',
'./node_modules/fundamental-styles/dist/form-label.css',
//'./node_modules/fundamental-styles/dist/form-message.css',
//'./node_modules/fundamental-styles/dist/form-select.css',
'./node_modules/fundamental-styles/dist/form-layout-grid.css',
//'./node_modules/fundamental-styles/dist/inline-help.css',
'./node_modules/fundamental-styles/dist/input.css',
Expand Down
50 changes: 28 additions & 22 deletions core/src/UserSettingsEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
let settingsSchema;
let displayOptions;
let getTranslation = getContext('getTranslation');
let selectedLanguageLabel;

export function updateSettingsObject() {
dispatch('updateSettingsObject', { storedUserSettingData });
Expand Down Expand Up @@ -46,23 +47,27 @@
}

function toggleOptions(event, editable) {
let self = closest(event.target, '.fd-popover__control', 20);
let currentState = self.getAttribute('aria-expanded') === 'true';

if (editable || editable === undefined) {
const self = closest(event.target, '.fd-popover__control', 20);
closeAllCombos(self);
const currentState = self.getAttribute('aria-expanded') === 'true';
setExpandedState(self, !currentState);
}
}

function setExpandedState(self, value) {
const indicatorBtn = self.querySelector('.lui-activate-language-dropdown');
const optionsPopOver = self.parentNode.querySelector('.fd-popover__body');
const optionsPopover = self.parentNode.querySelector('.fd-popover__body');
const optionsSelectControl = self.parentNode.querySelector('.fd-select__control');
self.setAttribute('aria-expanded', value);
optionsPopOver.setAttribute('aria-hidden', !value);
optionsPopover.setAttribute('aria-hidden', !value);
optionsSelectControl.setAttribute('aria-expanded', value);
indicatorBtn.setAttribute('aria-expanded', value);
}

function updateComboBox(key, option) {
function updateComboBox(key, option, optionIndex) {
selectedLanguageLabel = optionIndex;
storedUserSettingData[userSettingGroup[0]][key] = option.value || option;
}

Expand All @@ -86,10 +91,12 @@
if (GenericHelpers.isObject(options[i])) {
if (options[i].value && options[i].value === optionValue) {
label = options[i].label;
selectedLanguageLabel = i;
break;
}
} else {
label = optionValue;
selectedLanguageLabel = options.indexOf(optionValue);
break;
}
}
Expand All @@ -110,7 +117,7 @@
}

export function handleKeyUp({ keyCode }) {
if (keyCode === KEYCODE_ENTER || keyCode === KEYCODE_SPACE) {
if (keyCode === KEYCODE_SPACE) {
document.querySelector('.lui-anchor-node').click();
}
}
Expand All @@ -123,9 +130,9 @@
}
}

/*to display a language on forst load of the User Settings dialog*/

/*to display a language on first load of the User Settings dialog*/
getLabelForValue();

</script>

<style>
Expand Down Expand Up @@ -156,6 +163,11 @@
float: left;
}
}

/*Override of FDF Styles margin v0.20.0 due to the row width*/
.fd-row .fd-col .fd-select__control.lui-anchor-node {
margin: 0;
}
</style>
<div class="lui-usersettings-content">
{#if userSettingGroup && userSettingGroup[0] && userSettingGroup[1]} {#if
Expand All @@ -171,7 +183,7 @@
{#if schemaItem.type==='string'} {#if schemaItem.isEditable ||
schemaItem.isEditable === undefined}
<input
class="fd-input"
class="fd-input fd-input--compact"
type="text"
aria-label="Image label"
placeholder="{$getTranslation(schemaItem.placeholder)}"
Expand All @@ -196,8 +208,8 @@
aria-haspopup="true"
on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
>
<div class="fd-select">
<div
<div class="fd-select fd-select--compact">
<button
tabindex="0"
aria-expanded="false"
aria-haspopup="listbox"
Expand All @@ -214,38 +226,32 @@
schemaItem.options)}
</span>
<span
class="fd-button fd-button--transparent fd-select__button lui-activate-language-dropdown"
>
class="fd-button fd-button--transparent fd-select__button lui-activate-language-dropdown">
<i class="sap-icon--slim-arrow-down"></i>
</span>
</div>
</button>
</div>
</div>
<div
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
aria-hidden="true"
>
{#if Array.isArray(schemaItem.options)}
<div class="fd-popover__wrapper">
<ul class="fd-list fd-list--dropdown" role="listbox">
{#each schemaItem.options as option, optionIndex}
<li
role="option"
tabindex="0"
class="fd-list__item"
class:is-selected={selectedLanguageLabel === optionIndex}
data-testid="lui-us-option{i}_{optionIndex}"
on:click="{() => updateComboBox(key,option)}"
on:click="{() => updateComboBox(key,option,optionIndex)}"
on:keyup="{(event) => handleKeyListItem(event,[optionIndex])}"
>
<span class="fd-list__title">
<span class="fd-list__bold">
{getLabel(option)}
</span>
</span>
<span class="fd-list__title">{getLabel(option)}</span>
</li>
{/each}
</ul>
</div>
{/if}
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion core/src/navigation/LeftNav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -769,7 +769,6 @@

.lui-nav-title {
height: $navHeaderHeight;
background: green;
width: var(--luigi__left-sidenav--width);
border-bottom: var(--sapList_BorderWidth, 0.0625rem) solid
var(--sapList_BorderColor, #e4e4e4);
Expand Down
17 changes: 15 additions & 2 deletions test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -575,7 +575,7 @@ describe('Fiddle', () => {
language: {
type: 'enum',
label: 'Language and Region',
options: [{ value: 'de', label: 'German' }, { value: 'en', label: 'English' }, 'Spanish', 'French'],
options: [{ value: 'de', label: 'Deutsch' }, { value: 'en', label: 'English' }, '简体中文', { value: 'fr', label: 'Français' }],
description:
'After you save your settings, the browser will refresh for the new language to take effect.'
},
Expand Down Expand Up @@ -626,14 +626,27 @@ describe('Fiddle', () => {
cy.get('[data-testid="lui-us-option0_0"]').click();
cy.get('[data-testid="lui-us-input0"]')
.should('exist')
.should('contain', 'German');
.should('contain', 'Deutsch');

cy.get('[data-testid="lui-us-input0"]').click();
cy.get('[data-testid="lui-us-option0_1"]').click();
cy.get('[data-testid="lui-us-input0"]')
.should('exist')
.should('contain', 'English');


cy.get('[data-testid="lui-us-language-dropdown"]')
.eq(0)
.click();
cy.get('[data-testid="lui-us-language-dropdown"]')
.should('be.visible');
cy.get('[data-testid="lui-us-language-dropdown"]')
.eq(0)
.click();
cy.wait(500);
cy.get('[data-testid="lui-us-option0_0"]')
.should('not.be.visible');

cy.get('[data-testid="lui-us-dismissBtn"]').click();
cy.get('.lui-usersettings-dialog').should('not.be.visible');
});
Expand Down
12 changes: 6 additions & 6 deletions test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,19 +183,19 @@ describe('Navigation', () => {
//Check we should have 4 options
cy.get('.lui-usersettings-content .fd-page__content .fd-form-item')
.eq(0)
.find(' .fd-list--dropdown .fd-list__item')
.find('.fd-list--dropdown .fd-list__item')
.children()
.should('have.length', 4);

//Click on Spanish list item
//Click on Français list item
cy.get('[data-testid="lui-us-option0_2"]')
.should('exist')
.click();

//Check Placeholder of input field is Spanish
//Check Placeholder of input field is Français
cy.get('[data-testid="lui-us-input0"]')
.should('exist')
.should('contain', 'Spanish');
.should('contain', 'Français');

//Check Date Formant Input field and type a new format
cy.get('[data-testid="lui-us-input1"]')
Expand All @@ -213,10 +213,10 @@ describe('Navigation', () => {
.eq(1)
.click();

//Check Placeholder of input field is Spanish
//Check Placeholder of input field is Français
cy.get('[data-testid="lui-us-input0"]')
.should('exist')
.should('contain', 'Spanish');
.should('contain', 'Français');

//Check Name Input field and type a new name
cy.get('[data-testid="lui-us-input1"]').should('have.value', setting_date_format);
Expand Down
2 changes: 1 addition & 1 deletion test/e2e-test-application/src/luigi-config/extended/userSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class UserSettings {
type: 'enum',
label: 'Language and Region',
placeholder: 'Language and Region',
options: [{ value: 'de', label: 'German' }, { value: 'en', label: 'English' }, 'Spanish', 'French'],
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' },
Expand Down

0 comments on commit 6803811

Please sign in to comment.