Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

TASK #67 Dark mode toggle working

Browse Source
This commit is contained in:
Thomas Atkins
2020-02-08 15:07:47 -06:00
parent 868262bb18
commit 63fa78684c
6 changed files with 236 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/app.component.html
View File

@@ -1,4 +1,4 @@
<ion-app>
<ion-app class="dark">
<ion-split-pane when="sm">
<ion-menu class="sidebar">
<ion-header>
@@ -12,9 +12,15 @@
<ion-list-header>
Navigate
<ion-buttons class="ion-padding-end">
<ion-button fill="outline" color="light"><ion-icon color="primary" name="add-circle"></ion-icon></ion-button>
<ion-button fill="outline" color="light"><ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span style="color: #666;">Child</span></ion-button>
<ion-button fill="outline" color="light"><ion-icon color="danger" name="trash"></ion-icon></ion-button>
<ion-button fill="outline" color="light">
<ion-icon color="primary" name="add-circle"></ion-icon>
</ion-button>
<ion-button fill="outline" color="light">
<ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span style="color: #666;">Child</span>
</ion-button>
<ion-button fill="outline" color="light">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-buttons>
</ion-list-header>
@@ -39,4 +45,4 @@
</ion-content>
</div>
</ion-split-pane>
</ion-app>
</ion-app>

23
src/app/app.component.scss
View File

@@ -1,3 +1,26 @@
.sidebar {
max-width: 20em !important;
}
@media (prefers-color-scheme: no-preference) {
ion-toolbar {
--background: black;
color: white;
}
:root {
--background: black;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background: black;
color: white;
}
}
/* Fallback for older browsers or manual mode */
.dark {
--background: black !important;
color: white !important;
}

23
src/app/app.component.ts
View File

@@ -1,10 +1,10 @@
import {Component, OnInit} from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { ApiService } from './service/api.service';
import {Router} from '@angular/router';
import { Router } from '@angular/router';
import { TREE_ACTIONS } from 'angular-tree-component';
@Component({
@@ -13,18 +13,17 @@ import { TREE_ACTIONS } from 'angular-tree-component';
styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
public nodes = [];
public options = {
actionMapping: {
mouse: {
dblClick: (tree, node, $event) => {
console.log({tree, node, $event});
console.log({ tree, node, $event });
const id = node.data.id;
this.router.navigate(['/editor', {id}]);
this.router.navigate(['/editor', { id }]);
},
click: (tree, node, $event) => {
console.log('click', {tree, node, $event});
console.log('click', { tree, node, $event });
TREE_ACTIONS.FOCUS(tree, node, $event);
}
}
@@ -32,12 +31,13 @@ export class AppComponent implements OnInit {
};
public darkMode = false;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private api: ApiService,
protected router: Router,
protected router: Router
) {
this.initializeApp();
}
@@ -56,12 +56,15 @@ export class AppComponent implements OnInit {
}
toggleDark() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
this.darkMode = !this.darkMode;
console.log("toggel Dark mode");
console.log('toggel Dark mode');
document.body.classList.toggle('dark', this.darkMode);
if (this.darkMode) {
console.log("Dark Mode On");
console.log('Dark Mode On');
} else {
console.log("Dark Mode Off");
console.log('Dark Mode Off');
}
}
}

6
src/app/components/components.module.ts
View File

@@ -1,6 +1,6 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HostComponent } from "./editor/host/host.component";
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HostComponent } from './editor/host/host.component';
@NgModule({
declarations: [HostComponent],

54
src/app/pages/editor/editor.page.html
View File

@@ -1,28 +1,30 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
</ion-toolbar>
</ion-header>
<ng-container>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ng-container>
<div class="editor-root ion-padding">
<div class="host-container ion-padding">
<editor-host #editorHosts *ngFor="let record of hostRecords; let i = index" [(record)]="hostRecords[i]"
(newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)">
</editor-host>
<ion-content>
<ng-container>
<div class="editor-root ion-padding">
<div class="host-container ion-padding">
<editor-host #editorHosts *ngFor="let record of hostRecords; let i = index" [(record)]="hostRecords[i]"
(newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)">
</editor-host>
</div>
</div>
</div>
<div class="editor-buttons">
<ion-button (click)="onAddClick()" class="ion-padding ion-margin">Add Node</ion-button>
<ion-button (click)="onSaveClick()" class="ion-padding ion-margin">Save</ion-button>
</div>
</ng-container>
</ion-content>
<div class="editor-buttons">
<ion-button (click)="onAddClick()" class="ion-padding ion-margin">Add Node</ion-button>
<ion-button (click)="onSaveClick()" class="ion-padding ion-margin">Save</ion-button>
</div>
</ng-container>
</ion-content>
</ng-container>