Skip to content

Commit 1adb466

Browse files
ksmacleod99ksmacleod99
authored
Merge pull request #6 from jiangliwu/master
bug fix and add theme
2 parents d157489 + 4ae9833 commit 1adb466

20 files changed

+283
-39
lines changed

‎src/app/app.component.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</mat-toolbar>
66
</div>
77

8-
<div class="body">
8+
<div class="body bg-color">
99
<div class="left-part" [style.width.px]="dragObject.currentWidth">
1010
<div class="side-header mat-elevation-z1">
1111
<button mat-icon-button matTooltip="Refresh redis instance" (click)="onRefresh()">
@@ -16,9 +16,8 @@
1616
</button>
1717
<button mat-icon-button
1818
matTooltip="remove this redis Server"
19-
class="delete-btn"
2019
(click)="onDeleteServer()">
21-
<i class="material-icons">delete</i>
20+
<i class="material-icons delete-btn">delete</i>
2221
</button>
2322
<button mat-icon-button
2423
(click)="onInformationEvt()"
@@ -29,6 +28,7 @@
2928
<button mat-menu-item>Import</button>
3029
<button mat-menu-item>Export</button>
3130
</mat-menu>
31+
<button mat-icon-button matTooltip="Settings" (click)="onSettingsEvt()"><i class="material-icons">settings</i></button>
3232
<button mat-icon-button matTooltip="More" [matMenuTriggerFor]="sideMenu">
3333
<i class="material-icons">more_vert</i>
3434
</button>
@@ -68,7 +68,7 @@
6868

6969

7070
<!--redis cli panel-->
71-
<div class="{{'cli mat-elevation-z12 ' + ((cli$ | async)?.expanded ? 'cli-expanded':'')}}">
71+
<div class="{{'cli mat-elevation-z12 ' + ((cli$ | async)?.expanded ? 'cli-expanded':'') + ' cli-bg-color'}}">
7272
<div class="title">
7373
<span
7474
class="current-instance">{{currentInstance ? getShortName(currentInstance) : 'No redis instance select'}}</span>
@@ -92,14 +92,16 @@
9292
<div class="item" *ngFor="let item of (cli$ | async)?.items">
9393
<div class="command">
9494
<span class="time">[{{item.time | date:'medium'}}] ></span>
95-
<span (click)="onRawContentClick(item.rawCommand)">{{item.rawCommand}}</span></div>
95+
<span class="common-font-color" (click)="onRawContentClick(item.rawCommand)">{{item.rawCommand}}</span></div>
9696
<div class="{{'result ' + (item.error ? 'error':'')}}">{{item.result}}</div>
9797
</div>
9898
</div>
9999

100100
<div class="input">
101101
<mat-form-field class="example-full-width">
102-
<input matInput placeholder="{{!currentInstance ?'Please select a redis instance to Enter Redis command'
102+
<input matInput
103+
class="common-font-color"
104+
placeholder="{{!currentInstance ?'Please select a redis instance to Enter Redis command'
103105
: 'Enter Redis command'}}" value=""
104106
(keydown)="onCliInputKeyDown($event)"
105107
[(ngModel)]="cliInputValue"

‎src/app/app.component.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ $header-height: 60px;
3535
display: flex;
3636
flex-direction: row;
3737
.delete-btn{
38-
color: red;
38+
color: #e2552e !important;
3939
}
4040
}
4141
.slider-point {
@@ -60,7 +60,6 @@ $header-height: 60px;
6060
}
6161
.cli {
6262
height: 80px;
63-
background-color: white;
6463
position: fixed;
6564
left: 0;
6665
right: 0;

‎src/app/app.component.ts

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
1+
import {Component, ElementRef, HostBinding, OnInit, ViewChild} from '@angular/core';
22
import {MatDialog} from '@angular/material';
33
import {AddServerDialogComponent} from './components/add-server-dialog/add-server-dialog.component';
44
import {RedisInstance} from './models/redis-instance';
@@ -19,6 +19,8 @@ import {PageModel} from './models/page-model';
1919
import {ADD_COMMAND, CLEAR_HISTORY, TOGGLE_CLI} from './ngrx/actions/cli-actions';
2020
import {ConfirmDialogComponent} from './components/confirm-dialog/confirm-dialog.component';
2121
import {InformationDialogComponent} from './components/information-dialog/information-dialog.component';
22+
import {SettingsDialogComponent} from './components/settings-dialog/settings-dialog.component';
23+
import {ThemeConfig} from './theme-config';
2224

2325
/**
2426
* return a new right page component
@@ -59,6 +61,7 @@ export class AppComponent implements OnInit {
5961

6062
private requireId = '';
6163

64+
6265
constructor(public dialogService: MatDialog,
6366
private redisService: RedisService,
6467
private util: UtilService,
@@ -132,11 +135,15 @@ export class AppComponent implements OnInit {
132135
ins.expanded = true;
133136
}
134137
if (ins.expanded) {
135-
this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id, scb: () => {
136-
if (expandNodes) {
137-
setTimeout(() => this.expandDeepCommand$.next(), 0);
138+
this._store.dispatch({
139+
type: REQ_FETCH_TREE, payload: {
140+
id: ins.id, scb: () => {
141+
if (expandNodes) {
142+
setTimeout(() => this.expandDeepCommand$.next(), 0);
143+
}
144+
}
138145
}
139-
}}});
146+
});
140147
}
141148
}
142149
}
@@ -159,6 +166,9 @@ export class AppComponent implements OnInit {
159166
}
160167

161168
ngOnInit(): void {
169+
// set theme
170+
const theme = localStorage.getItem(ThemeConfig.THEME_KEY) || ThemeConfig.THEMES[0];
171+
document.getElementById(ThemeConfig.BODY_ID).classList.add(`${theme}-theme`);
162172
}
163173

164174
/**
@@ -181,6 +191,13 @@ export class AppComponent implements OnInit {
181191
});
182192
}
183193

194+
onSettingsEvt() {
195+
this.dialogService.open(SettingsDialogComponent, {
196+
width: '300px',
197+
height: '400px'
198+
});
199+
}
200+
184201
/**
185202
* when user enter values and click ok to add new value for redis
186203
* @param newValue the new value model

‎src/app/app.module.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import {CliEffect} from './ngrx/effects/cli-effect';
5858
import {reducer as redisReducer} from './ngrx/reducer/redis-reducer';
5959
import {reducer as pageReducer} from './ngrx/reducer/page-reducer';
6060
import {reducer as cliReducer} from './ngrx/reducer/cli-reducer';
61+
import {SettingsDialogComponent} from './components/settings-dialog/settings-dialog.component';
6162

6263

6364

@@ -73,7 +74,8 @@ import {reducer as cliReducer} from './ngrx/reducer/cli-reducer';
7374
DataViewerComponent,
7475
TreeNodeComponent,
7576
ImportDataDialogComponent,
76-
InformationDialogComponent
77+
InformationDialogComponent,
78+
SettingsDialogComponent
7779
],
7880
imports: [
7981
BrowserModule,
@@ -131,6 +133,7 @@ import {reducer as cliReducer} from './ngrx/reducer/cli-reducer';
131133
AddServerDialogComponent,
132134
ImportDataDialogComponent,
133135
InformationDialogComponent,
136+
SettingsDialogComponent,
134137
],
135138
})
136139
export class AppModule {

‎src/app/components/data-viewer/data-viewer.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<div class="title">
20-
<span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
20+
<span class="key common-font-color"><span class="t">Key</span>: {{pageData.item.key}}</span>
2121
</div>
2222

2323
<div *ngIf="loadingPageData" class="material-icons" class="loading-data">

‎src/app/components/information-dialog/information-dialog.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ <h1 mat-dialog-title class="title">Help
7373
</mat-expansion-panel-header>
7474

7575
<div class="help-content">
76-
<a target="_blank" href="https://redis.io/commands">Official Redis Command Document</a>
76+
<a class="link-color" target="_blank" href="https://redis.io/commands">Official Redis Command Document</a>
7777
<br/>
78-
<a target="_blank" href="https://redis.io/documentation">Official Redis Document</a>
78+
<a class="link-color" target="_blank" href="https://redis.io/documentation">Official Redis Document</a>
7979
</div>
8080
</mat-expansion-panel>
8181

‎src/app/components/instance-tree/instance-tree.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="instance-root">
2-
<div [class]="'item-line mat-elevation-z1 ' + (instance['selected'] ? 'selected':'')"
2+
<div [class]="'item-line mat-elevation-z1 node-color ' + (instance['selected'] ? 'selected':'')"
33
(click)="onClickRootItem()">
44

55
<div *ngIf="instance.working" class="material-icons">

‎src/app/components/instance-tree/instance-tree.component.scss

+1-8
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,9 @@
1818
align-items: center;
1919
justify-content: center;
2020
&.error {
21-
color: red;
21+
color: red !important;
2222
}
2323
}
24-
25-
&:hover {
26-
background-color: #f6f6f6;
27-
}
28-
&.selected {
29-
background-color: #dfdfdf;
30-
}
3124
}
3225
.sub-items {
3326
margin-top: 8px;

‎src/app/components/settings-dialog/settings-dialog.component.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="information-dialog">
2+
<h1 mat-dialog-title class="title">Settings
3+
<button mat-icon-button [mat-dialog-close]="null"><i class="material-icons">close</i></button>
4+
</h1>
5+
<div mat-dialog-content class="dialog-root">
6+
<mat-form-field>
7+
<mat-select placeholder="App Theme" [value]="currentTheme" (selectionChange)="onChange($event.value)">
8+
<mat-option *ngFor="let t of THEMES" [value]="t">
9+
{{t}}
10+
</mat-option>
11+
</mat-select>
12+
</mat-form-field>
13+
</div>
14+
</div>

‎src/app/components/settings-dialog/settings-dialog.component.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.information-dialog {
2+
.title {
3+
display: flex;
4+
flex-direction: row;
5+
position: relative;
6+
button {
7+
position: absolute;
8+
right: 0;
9+
top: 0;
10+
float: right;
11+
}
12+
}
13+
display: flex;
14+
flex-direction: column;
15+
}

‎src/app/components/settings-dialog/settings-dialog.component.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {Component, Inject, OnInit} from '@angular/core';
2+
import {MAT_DIALOG_DATA} from '@angular/material';
3+
import {ThemeConfig} from '../../theme-config';
4+
5+
6+
const THEME_KEY = ThemeConfig.THEME_KEY;
7+
8+
@Component({
9+
selector: 'app-settings-dialog',
10+
templateUrl: './settings-dialog.component.html',
11+
styleUrls: ['./settings-dialog.component.scss']
12+
})
13+
export class SettingsDialogComponent implements OnInit {
14+
public THEMES = ThemeConfig.THEMES;
15+
16+
public currentTheme = localStorage.getItem(THEME_KEY) || this.THEMES[0];
17+
18+
constructor(
19+
@Inject(MAT_DIALOG_DATA) public data) {
20+
}
21+
22+
clearTheme() {
23+
const node = document.getElementById(ThemeConfig.BODY_ID);
24+
this.THEMES.forEach(t => {
25+
node.classList.remove(`${t}-theme`);
26+
});
27+
}
28+
29+
onChange(evt) {
30+
if (this.currentTheme !== evt) {
31+
const node = document.getElementById(ThemeConfig.BODY_ID);
32+
this.currentTheme = evt;
33+
localStorage.setItem(THEME_KEY, evt);
34+
this.clearTheme();
35+
node.classList.add(`${evt}-theme`);
36+
}
37+
}
38+
39+
ngOnInit() {
40+
}
41+
42+
}

‎src/app/components/tree-node/tree-node.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
[style.marginLeft.px]="12"
33
[class]="'item-line item-line__sub ' + (item['deleted'] ? 'none':'') ">
44

5-
<div [class]=" 'single-line ' + (selectedMap[item.key+item.type] ? 'selected':'') "
5+
<div [class]=" 'single-line tree-child-color ' + (selectedMap[item.key+item.type] ? 'selected':'') "
66
(click)="onItemClick.emit(item)"
77
>
88
<span [class]="'value-type ' + item.type" *ngIf="item.type !== 'folder'">

‎src/app/components/tree-node/tree-node.component.scss

-7
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,9 @@
3333
flex-direction: row;
3434
align-items: center;
3535
padding-right: 24px;
36-
&:hover {
37-
background-color: #f6f6f6;
38-
}
39-
&.selected {
40-
background-color: #dfdfdf;
41-
}
4236

4337
.value-type {
4438
font-size: 8px;
45-
color: #4157af;
4639
font-weight: bold;
4740
width: 20px;
4841
margin-left: 4px;

‎src/app/components/tree-node/tree-node.component.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component, EventEmitter, Input, OnInit, Output, OnChanges} from '@angular/core';
2+
import {UtilService} from '../../services/util.service';
23

34
/**
45
* tree node component
@@ -14,7 +15,7 @@ export class TreeNodeComponent implements OnInit, OnChanges {
1415
@Input() expandedMap = null;
1516
@Output() onItemClick = new EventEmitter();
1617

17-
constructor() {
18+
constructor(private utilService: UtilService) {
1819
}
1920

2021
ngOnInit() {
@@ -50,9 +51,7 @@ export class TreeNodeComponent implements OnInit, OnChanges {
5051
if (item.key.indexOf(',') === -1) {
5152
return item.displayName = 'API Request' + '*';
5253
}
53-
54-
const regexResults = item.key.match(/[^,{}]+(?=,|{|})(?=,|\{)/g);
55-
54+
const regexResults = this.utilService.splitKey(item.key);
5655
let index = regexResults.length - 1;
5756
item.displayName = regexResults[index];
5857
while (item.displayName.indexOf(':') === -1) {

‎src/app/services/util.service.ts

+42
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,46 @@ export class UtilService {
3434
}
3535
return v.trim();
3636
}
37+
38+
/**
39+
* split request key
40+
* @param key the key value
41+
*/
42+
public splitKey(key) {
43+
const trimStr = (s, c): string => {
44+
if (c === ']') {
45+
c = '\\]';
46+
}
47+
if (c === '\\') {
48+
c = '\\\\';
49+
}
50+
return s.replace(new RegExp(
51+
'^[' + c + ']+|[' + c + ']+$', 'g'
52+
), '');
53+
};
54+
55+
const v = trimStr(key, '{');
56+
const newKeys = v.split(',');
57+
const results = [];
58+
59+
for (let i = 0; i < newKeys.length; i++) {
60+
if (newKeys[i].indexOf('{') > 0) {
61+
const keys = newKeys[i].split('{');
62+
results.push(keys[0]);
63+
for (let j = 1; j < keys.length; j++) {
64+
const t = trimStr(keys[j], '}');
65+
if (t && t.length > 0) {
66+
results.push(t);
67+
}
68+
}
69+
} else {
70+
results.push(trimStr(newKeys[i], '}'));
71+
}
72+
}
73+
if (key[key.length - 1] !== '}') {
74+
return results.slice(0, results.length - 1);
75+
}
76+
return results;
77+
}
78+
3779
}

‎src/app/theme-config.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class ThemeConfig {
2+
public static THEMES = ['light', 'dark'];
3+
public static THEME_KEY = 'THEME_KEY';
4+
public static BODY_ID = 'themeTag';
5+
}

‎src/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1010
<link rel="icon" type="image/x-icon" href="favicon.ico">
1111
</head>
12-
<body>
12+
<body id="themeTag">
1313
<app-root></app-root>
1414
</body>
1515
</html>

0 commit comments

Comments
 (0)