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

#81 - clean up file box dark/light mode styling
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2021-02-04 15:04:46 -06:00
parent 388a788b8b
commit f5258429af
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
3 changed files with 79 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/nodes/file-box/file-box.component.html
View File

@ -1,4 +1,4 @@
<div class="file-box-wrapper" *ngIf="!notAvailableOffline">
<div [ngClass]="'file-box-wrapper ' + (isDark() ? 'dark' : '')" *ngIf="!notAvailableOffline">
<ion-toolbar>
<div style="display: flex; flex-direction: row">
<button
@ -28,7 +28,7 @@
<div *ngIf="items && items.length" class="folders">
<ng-container *ngFor="let item of items">
<div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
<div class="icon" style="color: #ecd3a9"><i class="fa fa-folder"></i></div>
<div class="icon folder"><i class="fa fa-folder"></i></div>
<div class="title">{{ item.title }}</div>
</div>
</ng-container>
@ -36,7 +36,7 @@
<div *ngIf="items && items.length" class="files">
<ng-container *ngFor="let item of items">
<div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
<div class="icon"><i [ngClass]="categoryIcons[item.category]" [ngStyle]="{ color: categoryColors[item.category] }"></i></div>
<div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div>
<div class="title">{{ item.title }}</div>
</div>
</ng-container>

76
src/app/components/nodes/file-box/file-box.component.scss
View File

@ -13,7 +13,7 @@ div.file-box-wrapper {
.content-wrapper {
min-height: 200px;
background: #222;
background: #f5f5f5;
display: flex;
flex-direction: column;
@ -23,7 +23,7 @@ div.file-box-wrapper {
justify-content: center;
display: flex;
flex-direction: column;
color: #ccc;
color: #666;
}
}
@ -35,7 +35,7 @@ div.file-box-wrapper {
.item {
display: flex;
flex-direction: row;
background: #393939;
background: #dddddd;
padding: 10px;
margin: 10px;
border-radius: 3px;
@ -43,11 +43,79 @@ div.file-box-wrapper {
&:hover {
cursor: pointer;
background: #424242;
background: #d0d0d0;
}
.icon {
margin-right: 10px;
&.document {
color: #4269a5;
}
&.spreadsheet {
color: #39825a;
}
&.presentation {
color: #dc6141;
}
&.image {
color: #cf9f20;
}
&.pdf {
color: #d32f2f;
}
&.video {
color: #8049c0;
}
&.code {
color: #ff4500;
}
&.text {
color: #444444;
}
&.folder {
color: #ac9379;
}
}
}
}
.file-box-wrapper.dark {
.content-wrapper {
background: #222;
.empty-text {
color: #ccc;
}
}
.item {
background: #393939;
&:hover {
background: #424242;
}
.icon {
&.text {
color: #cccccc;
}
&.image {
color: #ffbf50;
}
&.folder {
color: #ecd3a9;
}
}
}
}

16
src/app/components/nodes/file-box/file-box.component.ts
View File

@ -51,18 +51,6 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
other: 'fa fa-file',
};
categoryColors = {
document: '#4269a5',
spreadsheet: '#39825a',
presentation: '#dc6141',
image: '#ffbf50',
pdf: '#d32f2f',
video: '#8049c0',
code: '#ff4500',
text: '#cccccc',
other: '#ffffff',
};
protected dirty = false;
protected pendingSetup = true;
public notAvailableOffline = false;
@ -87,6 +75,10 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
@Inject(APP_BASE_HREF) private baseHref: string
) { super(); }
public isDark() {
return document.body.classList.contains('dark');
}
public isDirty(): boolean | Promise<boolean> {
return this.dirty;
}