Skip to content

Commit 0972e15

Browse files
ilhan007ilhan007
committed
feat: add theme switch
1 parent 68e78d8 commit 0972e15

12 files changed

+109
-35
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@ui5/webcomponents": "^1.4.0",
3030
"@ui5/webcomponents-base": "^1.4.0",
3131
"@ui5/webcomponents-fiori": "^1.4.0",
32+
"@ui5/webcomponents-icons": "^1.4.0",
3233
"core-js": "^2.5.4",
3334
"ngx-build-plus": "^12.2.0",
3435
"rxjs": "~6.3.3",

‎src/app/app.component.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
1+
html, body {
2+
padding: 0;
3+
margin: 0;
4+
height: 100%;
5+
background: var(--sapBackgroundColor);
6+
}
7+
18
.app-content {
9+
height: 100%;
210
padding: 0 1rem;
311
}
412

13+
.list-todos-wrapper {
14+
margin: 2rem 0;
15+
}
16+
17+
.list-todos-panel {
18+
margin: 2rem 0;
19+
}
20+
521
.dialog-content {
622
max-width: 320px;
723
padding: 2rem;

‎src/app/app.component.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
<app-header></app-header>
22
<section class="app-content">
33
<app-user-input (addTodo)="handleAddTodo($event)"></app-user-input>
4-
<app-list [todos]="unDone"
5-
(editPressed)="editItem($event)"
6-
(deletedItem)="removeItem($event)"
7-
(changeSelection)="handleUndone($event)"></app-list>
84

9-
<ui5-panel [collapsed]="!this.done.length" header-text="Completed Tasks">
10-
<app-list [todos]="done" (editPressed)="editItem($event)"
11-
(deletedItem)="removeItem($event)"
12-
(changeSelection)="handleDone($event)"></app-list>
5+
<ui5-panel
6+
[collapsed]="!this.unDone.length"
7+
header-text="Incompleted Tasks"
8+
class="list-todos-panel">
9+
<app-list [todos]="unDone"
10+
(editPressed)="editItem($event)"
11+
(deletedItem)="removeItem($event)"
12+
(changeSelection)="handleUndone($event)">
13+
</app-list>
14+
</ui5-panel>
15+
16+
<ui5-panel
17+
[collapsed]="!this.done.length"
18+
header-text="Completed Tasks"
19+
class="list-todos-panel">
20+
<app-list [todos]="done"
21+
(editPressed)="editItem($event)"
22+
(deletedItem)="removeItem($event)"
23+
(changeSelection)="handleDone($event)">
24+
</app-list>
1325
</ui5-panel>
1426
</section>
1527

‎src/app/app.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Component, Input, ViewChild, ElementRef } from '@angular/core';
1+
import { Component, Input, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
22

33
@Component({
44
selector: 'app-root',
55
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css']
6+
styleUrls: ['./app.component.css'],
7+
encapsulation: ViewEncapsulation.None
78
})
89

910
export class AppComponent {

‎src/app/app.module.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ import '@ui5/webcomponents/dist/Dialog';
1919
import '@ui5/webcomponents/dist/Label';
2020
import '@ui5/webcomponents/dist/TextArea';
2121
import '@ui5/webcomponents/dist/StandardListItem';
22-
import '@ui5/webcomponents-fiori/dist/ShellBar';
22+
import "@ui5/webcomponents/dist/Tab";
23+
import "@ui5/webcomponents/dist/TabContainer";
24+
import "@ui5/webcomponents-fiori/dist/ShellBar";
25+
import "@ui5/webcomponents-fiori/dist/ShellBarItem";
26+
import "@ui5/webcomponents-icons/dist/palette.js";
2327
import '@ui5/webcomponents-fiori/dist/Assets';
2428
setTheme('sap_horizon');
2529
@NgModule({

‎src/app/header/header.component.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.app-bar-theming-popover {
2+
width: 250px;
3+
}
4+
15
.header-toolbar {
26
position:sticky;
37
z-index: 42;

‎src/app/header/header.component.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
11
<header className="app-header">
2-
<ui5-shellbar primary-title="UI5 Web Components Angular Sample Application">
2+
<ui5-shellbar primary-title="UI5 Web Components Angular Sample Application"
3+
show-notifications
4+
notifications-count="2">
35
<img src="./assets/images/logo.png" slot="logo">
6+
<ui5-shellbar-item icon="palette" text="Theme" ref="themeChangeItem" (click)="handleThemeSettingsToggle($event)"></ui5-shellbar-item>
7+
<ui5-avatar slot="profile" size="XS" initials="JD"></ui5-avatar>
48
</ui5-shellbar>
9+
10+
<ui5-tabcontainer fixed collapsed>
11+
<ui5-tab text="My Todos"></ui5-tab>
12+
</ui5-tabcontainer>
13+
14+
<ui5-popover #themeSettingsPopover
15+
class="app-bar-theming-popover"
16+
placement-type="Bottom"
17+
horizontal-align="Right"
18+
header-text="Theme"
19+
>
20+
<ui5-list #themeSelect mode="SingleSelect"(selectionChange)="handleThemeChange($event)">
21+
<ui5-li icon="palette" data-theme="sap_horizon" selected>SAP Horizon Morning</ui5-li>
22+
<ui5-li icon="palette" data-theme="sap_horizon_dark">SAP Horizon Evening</ui5-li>
23+
<ui5-li icon="palette" data-theme="sap_horizon_hcb">SAP Horizon HCB</ui5-li>
24+
<ui5-li icon="palette" data-theme="sap_horizon_hcw">SAP Horizon HCW</ui5-li>
25+
<ui5-li icon="palette" data-theme="sap_fiori_3">SAP Quartz Light</ui5-li>
26+
<ui5-li icon="palette" data-theme="sap_fiori_3_dark">SAP Quartz Dark</ui5-li>
27+
<ui5-li icon="palette" data-theme="sap_fiori_3_hcb">SAP Quartz HCB</ui5-li>
28+
<ui5-li icon="palette" data-theme="sap_fiori_3_hcw">SAP Quartz HCW</ui5-li>
29+
</ui5-list>
30+
</ui5-popover>
531
</header>

‎src/app/header/header.component.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
2+
import {setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
3+
24

35
@Component({
46
selector: 'app-header',
57
templateUrl: './header.component.html',
68
styleUrls: ['./header.component.css']
79
})
10+
811
export class HeaderComponent implements OnInit {
12+
@Input() selectionChange;
13+
@ViewChild('themeSettingsPopover') themeSettingsPopover: ElementRef;
914

1015
constructor() { }
1116

1217
ngOnInit() {
1318
}
1419

20+
handleThemeSettingsToggle(event) {
21+
this.themeSettingsPopover.nativeElement.showAt(event.detail.targetRef);
22+
};
23+
24+
handleThemeChange(event) {
25+
setTheme(event.detail.selectedItems[0].getAttribute("data-theme"));
26+
this.themeSettingsPopover.nativeElement.close();
27+
};
28+
1529
}

‎src/app/user-input/user-input.component.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
display: flex;
33
align-items: center;
44
justify-content: center;
5-
padding-top: 0.5rem;
6-
padding-bottom: 2rem;
7-
border-bottom: 1px solid #b3b3b3;
5+
padding: 2rem 1rem;
6+
margin: 2rem 0;
87
box-sizing: border-box;
8+
background-color: var(--sapObjectHeader_Background);
99
}
1010

1111
.add-todo-element-width {

0 commit comments

Comments
 (0)