Skip to content

Commit c14de7c

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
committed
chore(ui5-user-settings): added touch optimisation to appearance samples
1 parent 8df934f commit c14de7c

5 files changed

Lines changed: 76 additions & 2 deletions

File tree

‎packages/fiori/test/pages/UserSettingsDialog.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,20 @@
1111

1212
</script>
1313
<link rel="stylesheet" type="text/css" href="./styles/UserSettingsDialog.css">
14+
<style>
15+
.ui5-user-settings-appearance-view-additional-content-header {
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
margin-bottom: 0.5rem;
20+
width: 100%;
21+
}
22+
.ui5-user-settings-appearance-view-additional-content-description {
23+
display: block;
24+
color: var(--sapContent_LabelColor);
25+
font-size: var(--sapFontSmallSize);
26+
}
27+
</style>
1428

1529
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
1630
</head>
@@ -59,6 +73,16 @@
5973

6074
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
6175
<ui5-user-settings-appearance-view text="Themes">
76+
<div slot="additionalContent">
77+
<div class="ui5-user-settings-appearance-view-additional-content-header">
78+
<ui5-text>Optimize for Touch Input</ui5-text>
79+
<ui5-switch></ui5-switch>
80+
</div>
81+
<ui5-text class="ui5-user-settings-appearance-view-additional-content-description">
82+
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
83+
This is useful for hybrid devices that combine touch and mouse events.
84+
</ui5-text>
85+
</div>
6286
<ui5-user-settings-appearance-view-item item-key="custom_blue" text="Custom Theme Blue"></ui5-user-settings-appearance-view-item>
6387
<ui5-user-settings-appearance-view-item item-key="custom_dark" text="Custom Theme Dark"></ui5-user-settings-appearance-view-item>
6488
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import "@ui5/webcomponents/dist/ComboBoxItem.js";
2323
import "@ui5/webcomponents/dist/RadioButton.js";
2424
import "@ui5/webcomponents/dist/Text.js";
2525
import "@ui5/webcomponents/dist/CheckBox.js";
26+
import "@ui5/webcomponents/dist/Switch.js";
2627
import "@ui5/webcomponents/dist/Toast.js";
2728
import "@ui5/webcomponents/dist/List.js";
2829
import "@ui5/webcomponents/dist/ListItemStandard.js";
@@ -31,7 +32,6 @@ import "@ui5/webcomponents-icons/dist/action-settings.js";
3132
import "@ui5/webcomponents-icons/dist/user-settings.js";
3233
import "@ui5/webcomponents-icons/dist/person-placeholder.js";
3334
import "@ui5/webcomponents-icons/dist/palette.js";
34-
import "@ui5/webcomponents-icons/dist/product.js";
3535
import "@ui5/webcomponents-icons/dist/iphone.js";
3636
import "@ui5/webcomponents-icons/dist/qr-code.js";
3737
import "@ui5/webcomponents-icons/dist/bell.js";

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,20 @@
1212
}
1313
</style>
1414
<link rel="stylesheet" href="main.css">
15+
<style>
16+
.ui5-user-settings-appearance-view-additional-content-header {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
margin-bottom: 0.5rem;
21+
width: 100%;
22+
}
23+
.ui5-user-settings-appearance-view-additional-content-description {
24+
display: block;
25+
color: var(--sapContent_LabelColor);
26+
font-size: var(--sapFontSmallSize);
27+
}
28+
</style>
1529
</head>
1630

1731
<body style="background-color: var(--sapBackgroundColor)">
@@ -58,6 +72,16 @@
5872

5973
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
6074
<ui5-user-settings-appearance-view text="Themes">
75+
<div slot="additionalContent">
76+
<div class="ui5-user-settings-appearance-view-additional-content-header">
77+
<ui5-text>Optimize for Touch Input</ui5-text>
78+
<ui5-switch></ui5-switch>
79+
</div>
80+
<ui5-text class="ui5-user-settings-appearance-view-additional-content-description">
81+
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
82+
This is useful for hybrid devices that combine touch and mouse events.
83+
</ui5-text>
84+
</div>
6185
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
6286
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
6387
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import "@ui5/webcomponents/dist/ComboBoxItem.js";
1818
import "@ui5/webcomponents/dist/RadioButton.js";
1919
import "@ui5/webcomponents/dist/CheckBox.js";
2020
import "@ui5/webcomponents/dist/Toast.js";
21+
import "@ui5/webcomponents/dist/Switch.js";
22+
2123

2224
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
2325
import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,20 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Sample</title>
99
<link rel="stylesheet" href="./main.css">
10+
<style>
11+
.ui5-user-settings-appearance-view-additional-content-header {
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
15+
margin-bottom: 0.5rem;
16+
width: 100%;
17+
}
18+
.ui5-user-settings-appearance-view-additional-content-description {
19+
display: block;
20+
color: var(--sapContent_LabelColor);
21+
font-size: var(--sapFontSmallSize);
22+
}
23+
</style>
1024
</head>
1125

1226
<body style="background-color: var(--sapBackgroundColor); height: 50rem;">
@@ -289,6 +303,16 @@
289303

290304
<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
291305
<ui5-user-settings-appearance-view text="Themes">
306+
<div slot="additionalContent">
307+
<div class="ui5-user-settings-appearance-view-additional-content-header">
308+
<ui5-text>Optimize for Touch Input</ui5-text>
309+
<ui5-switch></ui5-switch>
310+
</div>
311+
<ui5-text class="ui5-user-settings-appearance-view-additional-content-description">
312+
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
313+
This is useful for hybrid devices that combine touch and mouse events.
314+
</ui5-text>
315+
</div>
292316
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
293317
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
294318
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
@@ -301,7 +325,7 @@
301325
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
302326
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
303327
</ui5-user-settings-appearance-view-group>
304-
<ui5-user-settings-appearance-view text="Themes">
328+
</ui5-user-settings-appearance-view>
305329
</ui5-user-settings-item>
306330

307331
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">

0 commit comments

Comments
 (0)