nitowa/fb-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layouting (I LIKE BIG BOXES)

Browse Source
This commit is contained in:
peter
2019-08-14 10:53:23 +02:00
parent 9de85cf1f4
commit 434cce25f2
14 changed files with 163 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
+8 -6
View File
@@ -31,7 +31,8 @@ const fb = !isDevMode() ? window["fb"] : {
@Component({
selector: 'consumptions',
template: `
<div class="card">
<div class="clr-row">
<div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
<div class="card-header">
Consumptions
</div>
@@ -52,18 +53,19 @@ const fb = !isDevMode() ? window["fb"] : {
<clr-dg-column>UUID</clr-dg-column>
<clr-dg-column>Expiry</clr-dg-column>
<clr-dg-column>Creation</clr-dg-column>
<clr-dg-column> </clr-dg-column>
<clr-dg-row *ngFor="let line of entries">
<clr-dg-cell>{{line.uid}}</clr-dg-cell>
<clr-dg-cell>{{line.expiry}}</clr-dg-cell>
<clr-dg-cell>{{line.created | date}}</clr-dg-cell>
<clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
<button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Quit</button>
</clr-dg-row-detail>
</clr-dg-row>
<clr-dg-footer>
{{entries.length}} entries</clr-dg-footer>
{{entries.length}} entries
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
+5 -5
View File
@@ -17,7 +17,8 @@ const fb = !isDevMode ? window["fb"] : {
@Component({
selector: 'settings',
template: `
<div class="card">
<div class="clr-row">
<div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
<div class="card-header">
Settings
</div>
@@ -36,7 +37,7 @@ const fb = !isDevMode ? window["fb"] : {
<input class="clr-col-12 clr-col-md-8" clrInput type="text" name="apiKey" required />
</clr-input-container>
<clr-input-container *ngIf="advanced">
<clr-input-container *ngIf="advanced" class="clr-row">
<label class="clr-col-12 clr-col-md-4">API address</label>
<input class="clr-col-12 clr-col-md-8" type="text" [(ngModel)]="data.apiHost" (change)="updatePort($event)" clrInput name="apiHost" required />
<clr-control-error>This field is required!</clr-control-error>
@@ -45,7 +46,7 @@ const fb = !isDevMode ? window["fb"] : {
<div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
<label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
<div class="clr-col-12 clr-col-md-8">
<input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
<input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
</div>
</div>
@@ -55,8 +56,6 @@ const fb = !isDevMode ? window["fb"] : {
<clr-control-error>Valid range 1024 - 65536
</clr-control-error>
</clr-input-container>
</form>
</div>
</div>
@@ -71,6 +70,7 @@ const fb = !isDevMode ? window["fb"] : {
<button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
</div>
</div>
</div>
`
})
export class ApiclientFormComponent implements OnInit {
src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
+9 -6
View File
@@ -32,7 +32,8 @@ const fb = !isDevMode() ? window["fb"] : {
@Component({
selector: 'subscriptions',
template: `
<div class="card">
<div class="clr-row">
<div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
<div class="card-header">
Subscriptions
</div>
@@ -53,18 +54,19 @@ const fb = !isDevMode() ? window["fb"] : {
<clr-dg-column>UUID</clr-dg-column>
<clr-dg-column>Expiry</clr-dg-column>
<clr-dg-column>Creation</clr-dg-column>
<clr-dg-column> </clr-dg-column>
<clr-dg-row *ngFor="let line of entries">
<clr-dg-cell>{{line.uid}}</clr-dg-cell>
<clr-dg-cell>{{line.expiry}}</clr-dg-cell>
<clr-dg-cell>{{line.created | date}}</clr-dg-cell>
<clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
<button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Unsubscribe</button>
</clr-dg-row-detail>
</clr-dg-row>
<clr-dg-footer>
{{entries.length}} entries</clr-dg-footer>
{{entries.length}} entries
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
@@ -73,6 +75,7 @@ const fb = !isDevMode() ? window["fb"] : {
</div>
</div>
</div>
`
})
export class ApiclientSubscriptionComponent implements OnInit {
src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
-2
View File
@@ -26,7 +26,6 @@ declare const fb
<clr-accordion-panel *ngFor="let entry of plugins">
<clr-accordion-title>{{entry.name}}</clr-accordion-title>
<clr-accordion-content *clrIfExpanded>
<div class="btn-group btn-primary">
<button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(entry.name)"><clr-icon shape="play"></clr-icon></button>
<button *ngIf="entry.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(entry.name)"><clr-icon shape="stop"></clr-icon></button>
<button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(entry.name)"><clr-icon shape="trash"></clr-icon></button>
@@ -34,7 +33,6 @@ declare const fb
<button *ngIf="entry.available !== entry.installed && entry.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(entry.name)">
<clr-icon shape="sync"></clr-icon>
</button>
</div>
</clr-accordion-content>
</clr-accordion-panel>
</clr-accordion>
src/frontend/dashboard/src/app/app.component.html
+3 -6
View File
@@ -1,8 +1,5 @@
<div class="main-container">
<clr-main-container >
<header-bar></header-bar>
<subnav></subnav>
<div class="content-container">
<sidebar></sidebar>
<dynamic-loader></dynamic-loader>
</div>
</div>
<dynamic-loader style="height: 100%;"></dynamic-loader>
</clr-main-container>
src/frontend/dashboard/src/app/app.component.scss
+3
View File
@@ -0,0 +1,3 @@
.heightmax{
height: 100%
}
src/frontend/dashboard/src/app/content-area/main.component.html
+1 -2
View File
@@ -1,4 +1,3 @@
<div class="content-area">
<div class="content-area clr-col-12 clr-col-sm-12 clr-col-lg-12 clr-col-xl-12">
<router-outlet></router-outlet>
</div>
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html
+3 -2
View File
@@ -1,3 +1,4 @@
<div class="content-container">
<content-area></content-area>
<div class="content-container" style="height: 100%;">
<sidebar></sidebar>
<content-area style="height: 100%; width: 100%"></content-area>
</div>
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss
+3
View File
@@ -0,0 +1,3 @@
.heightmax{
height: 100%!important;
}
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
+4 -13
View File
@@ -35,7 +35,7 @@ SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTyp
SystemJS.config({ meta: { '*': { authorization: true } } });
/** --------- */
import { AfterViewInit, Component } from '@angular/core';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { Router } from '@angular/router';
import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"
@@ -54,25 +54,16 @@ const fb = environment.production ? window["fb"] : {
styleUrls: ['./dynamic-loader.component.scss']
})
export class DynamicLoaderComponent implements AfterViewInit {
sidebar: SidebarComponent
@ViewChild(SidebarComponent, {static:false})
private sidebar:SidebarComponent
constructor(
private router: Router,
private sidebarService: SidebarEntryService
) {
}
ngAfterViewInit() {
const _this = this;
(function awaitSidebar() {
const sb = _this.sidebarService.getSidebar()
if (sb != null) {
_this.sidebar = sb
_this.loadWidgets()
return
}
setTimeout(awaitSidebar, 25)
})()
this.loadWidgets()
}
private async loadWidgets() {
src/frontend/dashboard/src/app/header-bar/header-bar.component.html
+3 -3
View File
@@ -1,4 +1,4 @@
<header class="header header-1">
<clr-header class="header header-1">
<div class="branding">
<span class="title">Frontblock</span>
@@ -6,7 +6,7 @@
<div class="header-actions">
<a class="nav-link nav-icon-text">
<clr-icon shape="bug"></clr-icon>
<span class="nav-text">ALPHA</span>
<span class="nav-text">ALPHA {{devmode}}</span>
</a>
</div>
</header>
</clr-header>
src/frontend/dashboard/src/app/header-bar/header-bar.component.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, isDevMode } from '@angular/core';
@Component({
selector: 'header-bar',
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./header-bar.component.scss']
})
export class HeaderBarComponent implements OnInit {
devmode = isDevMode()?"{ DEV }":""
constructor() { }
ngOnInit() {
src/frontend/dashboard/src/app/sidebar/sidebar.component.html
+1 -2
View File
@@ -1,4 +1,4 @@
<clr-vertical-nav style="height: 100%" class="nav-trigger--bottom" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed">
<clr-vertical-nav [clr-nav-level]="1" class="nav-trigger--bottom" style="height: 100%;" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" >
<clr-vertical-nav-group *ngFor="let e of multientires" routerLinkActive="active">
<clr-icon [attr.shape]="e.icon" clrVerticalNavIcon></clr-icon>
{{e.text}}
@@ -16,5 +16,4 @@
<clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
{{entry.text}}
</a>
</clr-vertical-nav>
src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
+2
View File
@@ -9,6 +9,8 @@ import { environment } from 'src/environments/environment';
})
export class SidebarComponent implements OnInit {
collapsed = true
entries:SidebarEntry[] = [
]