patrick/Homeautomation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css generalized 'tile' (BulkList)

Browse Source
This commit is contained in:
Patrick Haßel 2024-09-11 14:04:27 +02:00
parent 8915d9a8d4
commit 073c42002a
11 changed files with 78 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html
View File

@ -1,12 +1,9 @@
<ng-container *ngIf="bulk">
<h1>
<app-text [initial]="bulk.name" (valueChange)="set(bulk, 'name', $event)"></app-text>
</h1>
<p>
<button (click)="create()">+ Hinzufügen</button>
</p>
<table>
<tr>
<th>Eigenschaft</th>
@ -56,4 +53,6 @@
</ng-container>
</table>
<button (click)="create()">+ Hinzufügen</button>
</ng-container>

3
src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less
View File

@ -0,0 +1,3 @@
table {
width: 100%;
}

45
src/main/angular/src/app/pages/bulk/list/bulk-list.component.html
View File

@ -1,37 +1,32 @@
<p>
<button (click)="create()">+ Hinzufügen</button>
</p>
<div class="tiles">
<div class="tile" *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
<div class="tileHead disabledBack" [class.enabledBack]="bulk.enabled">
<table>
<tr>
<th>&nbsp;</th>
<th>Bezeichnung</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
<tr *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
<td class="boolean" (click)="set(bulk, 'enabled', !bulk.enabled)" [class.true]="bulk.enabled" [class.false]="!bulk.enabled">
<div (click)="set(bulk, 'enabled', !bulk.enabled)">
<fa-icon *ngIf="bulk.enabled" [icon]="faCheckCircle"></fa-icon>
<fa-icon *ngIf="!bulk.enabled" [icon]="faCircle"></fa-icon>
</td>
</div>
<td [routerLink]="['/Bulk', {id: bulk.id}]">
<div class="flexGrow" [routerLink]="['/Bulk', {id: bulk.id}]">
{{ bulk.name }}
</td>
</div>
<td class="run" (click)="run(bulk)">
<div class="tileHeadRight" (click)="run(bulk)">
<fa-icon title="Ausführen" [icon]="faPlay"></fa-icon>
</td>
</div>
<td class="duplicate" (click)="duplicate(bulk)">
<div class="tileHeadRight" (click)="duplicate(bulk)">
<fa-icon title="Duplizieren" [icon]="faCopy"></fa-icon>
</td>
</div>
<td class="delete" (click)="delete(bulk)">
<div class="tileHeadDelete" (click)="delete(bulk)">
<fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
</td>
</div>
</tr>
</table>
</div>
</div>
</div>
<div class="config">
<button (click)="create()">+ Hinzufügen</button>
</div>

3
src/main/angular/src/app/pages/device/editor/device-editor.component.less
View File

@ -0,0 +1,3 @@
table {
width: 100%;
}

14
src/main/angular/src/app/pages/device/list/device-list.component.html
View File

@ -1,12 +1,8 @@
<div class="config">
<button (click)="create()">+ Hinzufügen</button>
</div>
<ng-container *ngFor="let device of devices; trackBy: Device.trackBy">
<ng-container [ngSwitch]="device.type">
<div class="device" *ngSwitchCase="'DeviceSwitch'" [ngClass]="getSwitchClassList(device)">
<div class="title">
<div class="tileHeadTitle">
<app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
</div>
<div class="edit" [routerLink]="['/Device', {id: device.id}]">
@ -19,7 +15,7 @@
</div>
<div class="device" *ngSwitchCase="'DeviceStateScene'" [ngClass]="getStateSceneClassList(device)">
<div class="title">
<div class="tileHeadTitle">
<app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
</div>
<div class="edit" [routerLink]="['/Device', {id: device.id}]">
@ -33,7 +29,7 @@
</div>
<div class="device" *ngSwitchCase="'DeviceShutter'" [ngClass]="getShutterClassList(device)">
<div class="title">
<div class="tileHeadTitle">
<app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
</div>
<div class="edit" [routerLink]="['/Device', {id: device.id}]">
@ -75,3 +71,7 @@
</ng-container>
</ng-container>
<div class="config">
<button (click)="create()">+ Hinzufügen</button>
</div>

2
src/main/angular/src/app/pages/device/list/device-list.component.less
View File

@ -9,7 +9,7 @@
margin-right: 5px;
}
.title {
.tileHeadTitle {
float: left;
font-weight: bold;
}

10
src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html
View File

@ -13,7 +13,7 @@
<fa-icon *ngIf="entry.enabled" [icon]="faCheckCircle"></fa-icon>
<fa-icon *ngIf="!entry.enabled" [icon]="faCircle"></fa-icon>
</div>
<div class="title">
<div class="tileHeadTitle">
<select [ngModel]="entry.bulk?.id" (ngModelChange)="entryService.set(entry, 'bulk', $event)">
<option [ngValue]="null">-</option>
<option [ngValue]="bulk.id" *ngFor="let bulk of bulks.sort(Bulk.compareName)">{{ bulk.name }}</option>
@ -61,7 +61,7 @@
</div>
<div class="tileBodyFlex" *ngIf="entry.type === 'TIME'">
<div class="flexFull time">
<div class="flexGrow time">
<button class="buttonPlus" (click)="dayMinuteAdd(entry, +60)">+</button>
<button class="buttonMinus" (click)="dayMinuteAdd(entry, -60)">-</button>
<input type="time" [ngModel]="entry.time" (ngModelChange)="timeFromString(entry, $event)">
@ -71,7 +71,7 @@
</div>
<div class="tileBodyFlex" *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
<div class="flexFull sun">
<div class="flexGrow sun">
<div *ngFor="let zenith of getZenithEntries(entry.type); trackBy: trackByZenith">
<app-bool [label]="zenith.title" [value]="entry.zenith === zenith.value" (onChange)="entryService.set(entry, 'zenith', zenith.value)"></app-bool>
</div>
@ -101,13 +101,13 @@
</div>
<div class="tileBodyFlex">
<div class="flexFull timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
<div class="flexGrow timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
{{ timeService.relativeDate(entry.nextFuzzyTimestamp) }}
<span [class.fuzzyFont]="entry.fuzzySeconds" *ngIf="entry.fuzzySeconds">
(eig: {{ entry.nextClearTimestamp.date | date:'HH:mm' }})
</span>
</div>
<div class="flexFull inactive" *ngIf="entry.todo">
<div class="flexGrow inactive" *ngIf="entry.todo">
{{ entry.todo }}
</div>
</div>

8
src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
View File

@ -9,15 +9,15 @@
<fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
</div>
<div class="title" [routerLink]="['/Schedule', {id: schedule.id}]">
<div class="tileHeadTitle" [routerLink]="['/Schedule', {id: schedule.id}]">
{{ schedule.title }}
</div>
<div class="skip" (click)="skip(schedule.next)" *ngIf="schedule.next">
<div class="tileHeadRight" (click)="skip(schedule.next)" *ngIf="schedule.next">
<img class="icon" src="assets/skip.svg" [alt]="'Über.'">{{ schedule.next?.skip }}
</div>
<div class="delete" (click)="delete(schedule)">
<div class="tileHeadRight" (click)="delete(schedule)">
<fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
</div>
@ -48,4 +48,6 @@
</div>
<div class="config">
<button (click)="create()">+ Hinzufügen</button>
</div>

8
src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
View File

@ -1,13 +1,5 @@
@import "../../../../config";
.skip {
float: right !important;
}
.delete {
float: right !important;
}
.last {
color: gray;
font-size: 60%;

6
src/main/angular/src/styles.less
View File

@ -151,7 +151,11 @@ table.vertical {
.config {
clear: both;
margin-bottom: 5px;
margin: 0 @margin @margin;
@media (min-width: 1001px) {
width: 400px;
}
}
.buttonPlus {

20
src/main/angular/src/tile.less
View File

@ -23,10 +23,19 @@
padding: @padding;
}
.title {
.tileHeadTitle {
flex-grow: 1;
}
.tileHeadRight {
float: right;
}
.tileHeadDelete {
float: right;
color: darkred;
}
}
.tileBody {
@ -46,6 +55,10 @@
}
.flexGrow {
flex-grow: 1;
}
.flexHalf {
width: 50%;
}
@ -59,11 +72,6 @@
.flexIconInput {
float: left;
width: calc(100% - 1.5em);
text-align: center;
}
.flexFull {
width: 100%;
}
}