Theme button is now material button

This commit is contained in:
asuyou 2021-12-17 18:35:43 +02:00
parent 225d37f88d
commit 61900a7ba8
4 changed files with 39 additions and 19 deletions

48
ui/package-lock.json generated
View file

@ -23,6 +23,7 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@ng-bootstrap/ng-bootstrap": "^10.0.0", "@ng-bootstrap/ng-bootstrap": "^10.0.0",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"bootstrap-icons": "^1.7.2",
"ngx-cookie-service": "^12.0.3", "ngx-cookie-service": "^12.0.3",
"ngx-socket-io": "^4.1.0", "ngx-socket-io": "^4.1.0",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
@ -3759,6 +3760,14 @@
"popper.js": "^1.16.1" "popper.js": "^1.16.1"
} }
}, },
"node_modules/bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
"engines": {
"node": ">=10"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -8709,9 +8718,9 @@
"dev": true "dev": true
}, },
"node_modules/json-schema": { "node_modules/json-schema": {
"version": "0.2.3", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
"dev": true "dev": true
}, },
"node_modules/json-schema-traverse": { "node_modules/json-schema-traverse": {
@ -8771,18 +8780,18 @@
] ]
}, },
"node_modules/jsprim": { "node_modules/jsprim": {
"version": "1.4.1", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"dev": true, "dev": true,
"engines": [
"node >=0.6.0"
],
"dependencies": { "dependencies": {
"assert-plus": "1.0.0", "assert-plus": "1.0.0",
"extsprintf": "1.3.0", "extsprintf": "1.3.0",
"json-schema": "0.2.3", "json-schema": "0.4.0",
"verror": "1.10.0" "verror": "1.10.0"
},
"engines": {
"node": ">=0.6.0"
} }
}, },
"node_modules/jszip": { "node_modules/jszip": {
@ -20239,6 +20248,11 @@
"integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==", "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
"requires": {} "requires": {}
}, },
"bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -24056,9 +24070,9 @@
"dev": true "dev": true
}, },
"json-schema": { "json-schema": {
"version": "0.2.3", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
"dev": true "dev": true
}, },
"json-schema-traverse": { "json-schema-traverse": {
@ -24109,14 +24123,14 @@
"dev": true "dev": true
}, },
"jsprim": { "jsprim": {
"version": "1.4.1", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"dev": true, "dev": true,
"requires": { "requires": {
"assert-plus": "1.0.0", "assert-plus": "1.0.0",
"extsprintf": "1.3.0", "extsprintf": "1.3.0",
"json-schema": "0.2.3", "json-schema": "0.4.0",
"verror": "1.10.0" "verror": "1.10.0"
} }
}, },

View file

@ -26,6 +26,7 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@ng-bootstrap/ng-bootstrap": "^10.0.0", "@ng-bootstrap/ng-bootstrap": "^10.0.0",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"bootstrap-icons": "^1.7.2",
"ngx-cookie-service": "^12.0.3", "ngx-cookie-service": "^12.0.3",
"ngx-socket-io": "^4.1.0", "ngx-socket-io": "^4.1.0",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",

View file

@ -13,8 +13,12 @@
</div> </div>
--> -->
<div> <div>
<span class="text-white">Toggle Theme</span> <button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()">
<input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()"> <i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i>
<ng-template #sunIcon>
<i class="bi bi-moon-stars-fill"></i>
</ng-template>
</button>
</div> </div>
</nav> </nav>

View file

@ -2,3 +2,4 @@
/* Importing Bootstrap SCSS file. */ /* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap' @import '~bootstrap/scss/bootstrap'
@import '~bootstrap-icons/font/bootstrap-icons.css'