Skip to content

Commit cb4f87f

Browse files
Lukas742Lukas742
committed
update UXC pattern
1 parent 11dd1d4 commit cb4f87f

3 files changed

Lines changed: 63 additions & 45 deletions

File tree

‎patterns/navigation-layout/src/NLShellBar.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function NLShellBar(props: NLShellBarProps) {
4343
const [assistantBtnPressed, setAssistantBtnPressed] = useState(false);
4444
const [notificationsPopoverOpen, setNotificationsPopoverOpen] = useState(false);
4545
const [userMenuOpen, setUserMenuOpen] = useState(false);
46-
const [scopeData, setScopeData] = useState(_scopeData);
46+
const [scope, setScope] = useState<undefined | string>('all');
4747

4848
const handleAssistantClick: ToggleButtonPropTypes['onClick'] = (e) => {
4949
setAssistantBtnPressed(e.currentTarget!.pressed);
@@ -72,8 +72,7 @@ export function NLShellBar(props: NLShellBarProps) {
7272
};
7373

7474
const handleSearchScopeChange: ShellBarSearchPropTypes['onScopeChange'] = (e) => {
75-
const scopeText = e.detail.scope?.text === 'All' ? '' : e.detail.scope?.text?.toLowerCase();
76-
setScopeData(_scopeData.filter((item) => !scopeText || item.scope === scopeText));
75+
setScope(e.detail.scope?.value);
7776
};
7877

7978
return (
@@ -122,15 +121,17 @@ export function NLShellBar(props: NLShellBarProps) {
122121
onScopeChange={handleSearchScopeChange}
123122
scopes={
124123
<>
125-
<SearchScope text="All" selected />
126-
<SearchScope text="Apps" />
127-
<SearchScope text="Products" />
124+
<SearchScope text="All" value="all" />
125+
<SearchScope text="Apps" value="apps" />
126+
<SearchScope text="Products" value="products" />
128127
</>
129128
}
130129
>
131-
{scopeData.map((item) => (
132-
<SearchItem key={item.name} text={item.name} scopeName={item.scope} />
133-
))}
130+
{_scopeData
131+
.filter((item) => scope === 'all' || item.scope === scope)
132+
.map((item) => (
133+
<SearchItem key={item.name} text={item.name} scopeName={item.scope} />
134+
))}
134135
</ShellBarSearch>
135136
}
136137
profile={

‎patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
11
import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
2+
import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
23
import {
3-
Button,
4-
CheckBox,
5-
Label,
6-
List,
7-
ListItemStandard,
8-
Panel,
9-
Toast,
4+
Switch,
5+
UserSettingsAppearanceView,
6+
UserSettingsAppearanceViewGroup,
7+
UserSettingsAppearanceViewItem,
108
UserSettingsItem,
11-
UserSettingsView,
9+
Text,
1210
} from '@ui5/webcomponents-react';
1311

1412
export function AppearanceItem() {
1513
return (
1614
<UserSettingsItem icon={paletteIcon} text="Appearance" tooltip="Appearance" headerText="Appearance">
17-
<UserSettingsView text="Themes">
18-
<List separators="Inner" selectionMode="Single">
19-
<ListItemStandard icon={paletteIcon} selected>
20-
SAP Morning Horizon
21-
</ListItemStandard>
22-
<ListItemStandard icon={paletteIcon}>SAP Evening Horizon</ListItemStandard>
23-
<ListItemStandard icon={paletteIcon}>SAP High Contrast Black (SAP Horizon)</ListItemStandard>
24-
<ListItemStandard icon={paletteIcon}>SAP High Contrast White (SAP Horizon)</ListItemStandard>
25-
</List>
26-
<Button id="themeSave" className="save-btn" design="Emphasized">
27-
Save
28-
</Button>
29-
<Toast id="toastThemeSave">Changes applied.</Toast>
30-
</UserSettingsView>
31-
<UserSettingsView text="Display settings">
32-
<CheckBox checked text="Optimized for Touch Input" />
33-
<Panel fixed>
34-
<Label>
35-
Increases the size and spacing of controls to allow you to interact with them more easily using your
36-
fingertip. This is useful for hybrid devices that combine touch and mouse events.
37-
</Label>
38-
</Panel>
39-
</UserSettingsView>
15+
<UserSettingsAppearanceView
16+
text="Themes"
17+
onSelectionChange={(e) => {
18+
setTheme(e.detail.item.itemKey);
19+
}}
20+
additionalContent={
21+
<div>
22+
<div className="appearance-header ">
23+
<Text>Optimize for Touch Input</Text>
24+
<Switch />
25+
</div>
26+
27+
<Text className="appearance-detail">
28+
Increases the size and spacing of controls to allow you to interact with them more easily using your
29+
fingertip. This is useful for hybrid devices that combine touch and mouse events.
30+
</Text>
31+
</div>
32+
}
33+
>
34+
<UserSettingsAppearanceViewGroup headerText="SAP Horizon">
35+
<UserSettingsAppearanceViewItem itemKey="sap_horizon" text="SAP Morning Horizon" />
36+
<UserSettingsAppearanceViewItem itemKey="sap_horizon_dark" text="SAP Evening Horizon" />
37+
<UserSettingsAppearanceViewItem itemKey="sap_horizon_hcb" text="SAP Horizon High Contrast Black" />
38+
<UserSettingsAppearanceViewItem itemKey="sap_horizon_hcw" text="SAP Horizon High Contrast White" />
39+
</UserSettingsAppearanceViewGroup>
40+
41+
<UserSettingsAppearanceViewGroup headerText="SAP Quartz">
42+
<UserSettingsAppearanceViewItem itemKey="sap_fiori_3" text="SAP Quartz Light" />
43+
<UserSettingsAppearanceViewItem itemKey="sap_fiori_3_dark" text="SAP Quartz Dark" />
44+
<UserSettingsAppearanceViewItem itemKey="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black" />
45+
<UserSettingsAppearanceViewItem itemKey="sap_fiori_3_hcw" text="SAP Quartz High Contrast White" />
46+
</UserSettingsAppearanceViewGroup>
47+
</UserSettingsAppearanceView>
4048
</UserSettingsItem>
4149
);
4250
}

‎patterns/navigation-layout/src/index.css‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,6 @@ body {
8282
margin: 1rem;
8383
}
8484

85-
.save-btn {
86-
position: absolute;
87-
bottom: 1rem;
88-
}
89-
9085
.lr-item {
9186
display: grid;
9287
grid-template-columns: 150px 1fr;
@@ -100,4 +95,18 @@ body {
10095
margin: 0 1rem 0 1rem;
10196
}
10297

98+
.appearance-header {
99+
display: flex;
100+
justify-content: space-between;
101+
align-items: center;
102+
margin-bottom: 0.5rem;
103+
width: 100%;
104+
}
105+
106+
.appearance-detail {
107+
display: block;
108+
color: var(--sapContent_LabelColor);
109+
font-size: var(--sapFontSmallSize);
110+
}
111+
103112
/* End User Settings Dialog */

0 commit comments

Comments
 (0)