Skip to content

Commit

Permalink
Update user settings dialog HTML layout (SAP#1895)
Browse files Browse the repository at this point in the history
  • Loading branch information
@UlianaMunich
UlianaMunich authored Apr 28, 2021
1 parent 2d5aab4 commit a672721
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 176 deletions.
3 changes: 2 additions & 1 deletion core/fundamentalStyleClasses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ module.exports = [
'./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',
'./node_modules/fundamental-styles/dist/input-group.css',
//'./node_modules/fundamental-styles/dist/info-label.css',
//'./node_modules/fundamental-styles/dist/layout-grid.css',
'./node_modules/fundamental-styles/dist/layout-grid.css',
//'./node_modules/fundamental-styles/dist/layout-panel.css',
'./node_modules/fundamental-styles/dist/link.css',
'./node_modules/fundamental-styles/dist/list.css',
Expand Down
2 changes: 1 addition & 1 deletion core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
},
{
"path": "./public/luigi.css",
"maxSize": "461 kB",
"maxSize": "528 kB",
"compression": "none"
},
{
Expand Down
3 changes: 3 additions & 0 deletions core/src/UserSettingsDialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@
.fd-list__item {
cursor: pointer;
}

.fd-list__item.is-selected,
.fd-list__item[aria-selected='true'] {
background: #e5f0fa;
Expand All @@ -476,11 +477,13 @@
border-bottom: var(--sapList_BorderWidth, 0.0625rem) solid
var(--sapList_SelectionBorderColor, #0854a0);
}

.fd-list__item.is-hover,
.fd-list__item:hover {
background: #f5f5f5;
background: var(--sapList_Hover_Background, #f5f5f5);
}

.fd-list__item.is-selected:hover {
background: var(--sapList_Hover_SelectionBackground, #d8e9f8);
}
Expand Down
315 changes: 142 additions & 173 deletions core/src/UserSettingsEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,203 +81,172 @@
</script>

<style>
.lui-form-grid {
display: grid;
display: -ms-grid;
grid-template-columns: minmax(0, 1fr) 2fr;
-ms-grid-columns: minmax(0, 1fr) 2fr;
.lui-usersettings-content .fd-row {
min-height: 2.75rem; /*required for empty labels to not shrink*/
}

.lui-value-container {
grid-column: 2;
-ms-grid-column: 2;
position: relative;
}

.lui-value-container > input[type='checkbox'] {
margin-top: 13px;
}

.lui-form-label {
grid-column: 1;
-ms-grid-column: 1;
text-align: right;
padding-top: 10px;
overflow: hidden;
min-width: 0;
word-break: break-word;
padding: 10px;
}

.fd-form-label {
white-space: pre-line;
}

.lui-us-content-header-container {
width: 100%;
padding: 1.5rem 2rem;
display: flex;
}

.lui-title--h2 {
font-size: var(--sapFontHeader2Size, 1.5rem);
}

.lui-title {
line-height: var(--sapContent_LineHeight, 1.4);
font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif);
font-weight: 400;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
color: var(--sapTextColor, #32363a);
.lui-usersettings-content .fd-col {
overflow: visible; /*make dropdown visible above the text below*/
}

.lui-fd-enum-button {
margin-top: 6px;
}

.lui-form-text {
position: absolute;
top: 50%;
transform: translate(0, -50%);
.lui-usersettings-content .fd-col--8 .fd-form-label {
float: left;
}

/*Vertical alignement for mobile label/input view*/
@media (max-width: 600px) {
.lui-usersettings-content .fd-col--4,
.lui-usersettings-content .fd-col--8 {
min-width: 100%;
max-width: 100%;
}
.lui-usersettings-content .fd-col--4 .fd-form-label {
float: left;
}
}
</style>
<div class="lui-usersettings-content">
{#if userSettingGroup && userSettingGroup[0] && userSettingGroup[1]} {#if
userSettingGroup[1].settings}
<div class="fd-page__content">
<div class="fd-container lui-form-grid">
<div class="fd-container fd-form-layout-grid-container">
{#each Object.entries(userSettingGroup[1].settings) as [key, schemaItem], i}
<div class="lui-form-label">
<label class="fd-form-label">{$getTranslation(schemaItem.label)}: </label>
</div>
<div class="lui-value-container">
{#if schemaItem.type==='string'} {#if schemaItem.isEditable ||
schemaItem.isEditable === undefined}
<input
class="fd-input"
type="text"
placeholder="Field placeholder text"
aria-label="Image label"
data-testid="lui-us-input{i}"
bind:value="{storedUserSettingData[userSettingGroup[0]][key]}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
/>
{:else}
<label class="lui-form-text" data-testid="lui-us-input{i}"
>{storedUserSettingData[userSettingGroup[0]][key]}
</label>
{/if} {/if} {#if schemaItem.type==='enum' && (schemaItem.style === undefined ||
schemaItem.style === 'list')}
<div class="fd-form-item">
<div class="fd-popover">
<div
class="fd-popover__control"
aria-expanded="false"
aria-haspopup="true"
on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
>
<div class="fd-input-group fd-input-group--control">
<input
type="text"
class="fd-input fd-input-group__input"
placeholder="{$getTranslation(storedUserSettingData[userSettingGroup[0]][key])}"
data-testid="lui-us-input{i}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
/>
<span class="fd-input-group__addon fd-input-group__addon--button">
<button
aria-label="show/hide fruit options"
aria-expanded="false"
aria-haspopup="true"
class="fd-input-group__button fd-button fd-button--transparent"
<div class="fd-row">
<div class="fd-col fd-col--4">
<label class="fd-form-label">{$getTranslation(schemaItem.label)}: </label>
</div>
<div class="fd-col fd-col--8">
{#if schemaItem.type==='string'} {#if schemaItem.isEditable ||
schemaItem.isEditable === undefined}
<input
class="fd-input"
type="text"
placeholder="Field placeholder text"
aria-label="Image label"
data-testid="lui-us-input{i}"
bind:value="{storedUserSettingData[userSettingGroup[0]][key]}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
/>
{:else}
<label
class="fd-form-label"
data-testid="lui-us-input{i}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>{storedUserSettingData[userSettingGroup[0]][key]}
</label>
{/if} {/if} {#if schemaItem.type==='enum' && (schemaItem.style === undefined ||
schemaItem.style === 'list')}
<div class="fd-form-item">
<div class="fd-popover">
<div
class="fd-popover__control"
aria-expanded="false"
aria-haspopup="true"
on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
>
<div class="fd-input-group fd-input-group--control">
<input
type="text"
class="fd-input fd-input-group__input"
placeholder="{$getTranslation(storedUserSettingData[userSettingGroup[0]][key])}"
data-testid="lui-us-input{i}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>
<i class="sap-icon--navigation-down-arrow"></i>
</button>
</span>
/>
<span class="fd-input-group__addon fd-input-group__addon--button">
<button
aria-label="show/hide fruit options"
aria-expanded="false"
aria-haspopup="true"
class="fd-input-group__button fd-button fd-button--transparent"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>
<i class="sap-icon--navigation-down-arrow"></i>
</button>
</span>
</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 docs-max-height">
<ul class="fd-list fd-list--dropdown" role="listbox">
{#each schemaItem.options as option, optionIndex}
<li
role="option"
tabindex="0"
class="fd-list__item"
data-testid="lui-us-option{i}_{optionIndex}"
on:click="{() => updateComboBox(key,option)}"
>
<span class="fd-list__title">
<span class="fd-list__bold">{$getTranslation(option)}</span>
</span>
</li>
{/each}
</ul>
</div>
{/if}
</div>
</div>
</div>
{/if} {#if schemaItem.type==='enum' && schemaItem.style === 'button' &&
Array.isArray(schemaItem.options)}
<div class="fd-form-item">
<div
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
aria-hidden="true"
class="fd-segmented-button enum-buttons-container-{key}"
role="group"
aria-label="Group label"
>
{#if Array.isArray(schemaItem.options)}
<div class="fd-popover__wrapper docs-max-height">
<ul class="fd-list fd-list--dropdown" role="listbox">
{#each schemaItem.options as option, optionIndex}
<li
role="option"
tabindex="0"
class="fd-list__item"
data-testid="lui-us-option{i}_{optionIndex}"
on:click="{() => updateComboBox(key,option)}"
>
<span class="fd-list__title">
<span class="fd-list__bold">{$getTranslation(option)}</span>
</span>
</li>
{/each}
</ul>
</div>
{/if}
{#each schemaItem.options as option, optionIndex}
<button
class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
on:click="{() => updateEnumButton(key,option)}"
id="lui-us-enum_button_{key}_{option}"
data-testid="lui-us-enum_button_{key}_{option}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>
{$getTranslation(option)}
</button>
{/each}
</div>
</div>
</div>
{/if} {#if schemaItem.type==='enum' && schemaItem.style === 'button' &&
Array.isArray(schemaItem.options)}
<div class="fd-form-item">
<div
class="fd-segmented-button enum-buttons-container-{key}"
role="group"
aria-label="Group label"
{/if} {#if schemaItem.type==='boolean' && (!schemaItem.style || schemaItem.style
=== 'switch')}
<label
class="fd-switch fd-switch--compact"
data-testid="lui-us-label-switch_{key}"
>
{#each schemaItem.options as option, optionIndex}
<button
class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
on:click="{() => updateEnumButton(key,option)}"
id="lui-us-enum_button_{key}_{option}"
data-testid="lui-us-enum_button_{key}_{option}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>
{$getTranslation(option)}
</button>
{/each}
</div>
</div>
{/if} {#if schemaItem.type==='boolean' && (!schemaItem.style || schemaItem.style
=== 'switch')}
<label
class="fd-switch fd-switch--compact"
data-testid="lui-us-label-switch_{key}"
>
<span class="fd-switch__control">
<input
class="fd-switch__input"
type="checkbox"
aria-labelledby="label1"
data-testid="lui-us-checkbox-switch_{key}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
bind:checked="{storedUserSettingData[userSettingGroup[0]][key]}"
/>
<div class="fd-switch__slider">
<div class="fd-switch__track">
<span class="fd-switch__handle" role="presentation"></span>
<span class="fd-switch__control">
<input
class="fd-switch__input"
type="checkbox"
aria-labelledby="label1"
data-testid="lui-us-checkbox-switch_{key}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
bind:checked="{storedUserSettingData[userSettingGroup[0]][key]}"
/>
<div class="fd-switch__slider">
<div class="fd-switch__track">
<span class="fd-switch__handle" role="presentation"></span>
</div>
</div>
</div>
</span>
</label>
{/if} {#if schemaItem.type==='boolean' && schemaItem.style === 'checkbox'}
<input
type="checkbox"
class="fd-checkbox"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
bind:checked="{storedUserSettingData[userSettingGroup[0]][key]}"
/>
{/if}
</span>
</label>
{/if} {#if schemaItem.type==='boolean' && schemaItem.style === 'checkbox'}
<input
type="checkbox"
class="fd-checkbox"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
bind:checked="{storedUserSettingData[userSettingGroup[0]][key]}"
/>
{/if}
</div>
</div>
{/each}
</div>
Expand Down
Loading

0 comments on commit a672721

Please sign in to comment.