Skip to content

Commit

Permalink
fix(ui): Improve OIBus CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
burgerni10 committed Jul 12, 2023
1 parent 9174565 commit 2d255a2
Show file tree
Hide file tree
Showing 33 changed files with 504 additions and 142 deletions.
3 changes: 3 additions & 0 deletions frontend/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -130,5 +130,8 @@
}
}
}
},
"cli": {
"analytics": false
}
}
2 changes: 1 addition & 1 deletion frontend/src/app/about/about.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h1 class="visually-hidden" translate="login.title"></h1>

<div class="row">
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3">
<div class="border rounded bg-light row py-5">
<div class="oib-inner-form bg-light row py-5">
<div class="col-6">
<div class="d-flex flex-column align-items-center">
<img src="/assets/oibus_white.svg" alt="" class="img-fluid mb-4" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/auth/login/login.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h1 class="visually-hidden" translate="login.title"></h1>

<div class="row">
<div class="col-xs-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<div class="border rounded bg-light p-5">
<div class="oib-inner-form bg-light p-5">
<img src="/assets/oibus_white.svg" alt="" class="img-fluid mb-5" />
<form [formGroup]="form" (ngSubmit)="login()">
<div [ngbCollapse]="!loginError" class="alert alert-danger" translate="login.login-error"></div>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/auth/login/login.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
input.form-control {
background-color: white;
}

Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h1 translate="engine.edit-title"></h1>
<!-- Level -->
<div class="col-4">
<div class="form-group">
<label for="file-level" translate="engine.logger.file.level"></label>
<label class="form-label" for="file-level" translate="engine.logger.file.level"></label>
<select formControlName="level" class="form-select mb-2 mr-sm-2" id="file-level">
<option *ngFor="let level of logLevels" [ngValue]="level">{{ 'enums.log-levels.' + level | translate }}</option>
</select>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/engine/engine-detail.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h1 translate="engine.title"></h1>
</div>

<oib-box boxTitle="engine.general-settings.title">
<table class="table table-sm table-hover oib-table mt-3">
<table class="table table-sm table-hover oib-table mb-3">
<tbody class="general-settings">
<tr>
<td translate="engine.general-settings.name"></td>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/engine/engine-detail.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { IpFilterListComponent } from './ip-filter-list/ip-filter-list.component
import { NotificationService } from '../shared/notification.service';
import { ConfirmationService } from '../shared/confirmation.service';
import { switchMap } from 'rxjs';
import { BoxComponent } from '../shared/box/box.component';
import { EnabledEnumPipe } from '../shared/enabled-enum.pipe';
import { ObservableState } from '../shared/save-button/save-button.component';
import { BoxComponent } from '../shared/box/box.component';

@Component({
selector: 'oib-engine-detail',
Expand All @@ -24,10 +24,10 @@ import { ObservableState } from '../shared/save-button/save-button.component';
ScanModeListComponent,
ExternalSourceListComponent,
IpFilterListComponent,
BoxComponent,
EnabledEnumPipe,
NgForOf,
AsyncPipe
AsyncPipe,
BoxComponent
],
templateUrl: './engine-detail.component.html',
styleUrls: ['./engine-detail.component.scss']
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<ng-template oibBoxTitle>
<div class="d-flex justify-content-between align-items-center">
<span translate="engine.external-source.list" id="title"></span>
<button type="button" class="btn btn-primary btn-sm" (click)="addExternalSource()">
<button type="button" class="btn btn-primary btn-sm oib-box-btn" (click)="addExternalSource()">
<span class="fa fa-plus" id="add-external-source"></span>
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<ng-template oibBoxTitle>
<div class="d-flex justify-content-between align-items-center">
<span translate="engine.ip-filter.list" id="title"></span>
<button type="button" class="btn btn-primary btn-sm" (click)="addIpFilter()">
<button type="button" class="btn btn-primary btn-sm oib-box-btn" (click)="addIpFilter()">
<span class="fa fa-plus" id="add-ip-filter"></span>
</button>
</div>
Expand All @@ -11,7 +11,7 @@

<!-- the IP filter list -->
<div *ngIf="ipFilters.length !== 0; else emptyIpFilters">
<table class="mt-2 table table-sm table-hover oib-table">
<table class="mb-2 table table-sm table-hover oib-table">
<thead class="light">
<tr>
<th translate="engine.ip-filter.address"></th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<ng-template oibBoxTitle>
<div class="d-flex justify-content-between align-items-center">
<span translate="engine.scan-mode.list" id="title"></span>
<button type="button" class="btn btn-primary btn-sm" (click)="addScanMode()" id="add-scan-mode">
<button type="button" class="btn btn-primary btn-sm oib-box-btn" (click)="addScanMode()" id="add-scan-mode">
<span class="fa fa-plus"></span>
</button>
</div>
Expand All @@ -11,7 +11,7 @@

<!-- the scan mode list -->
<div *ngIf="scanModes.length !== 0; else emptyScanModes">
<table class="mt-2 table table-sm table-hover oib-table">
<table class="mb-2 table table-sm table-hover oib-table">
<thead class="light">
<tr>
<th translate="engine.scan-mode.name"></th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ <h1 translate="history-query.edit-title" [translateParams]="{ name: historyQuery
></oib-history-query-items>
</form>

<div id="actions" class="mb-2 mt-3 d-flex justify-content-end">
<div id="actions" class="mb-2 d-flex justify-content-end">
<div class="btn-group">
<oib-save-button form="history-query-form" [state]="state"></oib-save-button>
<button class="btn btn-cancel" translate="common.cancel" id="cancel-edit-button" oibBackButton></button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
<div class="d-flex align-items-center">
<span translate="south.items.title"></span>
<input
class="ms-4 form form-control"
style="width: 20rem"
class="ms-4 form form-control oib-box-input-header"
[formControl]="searchControl"
[placeholder]="'south.items.search-placeholder' | translate"
type="text"
Expand All @@ -32,9 +31,9 @@
</ng-template>
<input #fileInput (change)="onImportClick($event)" id="file" type="file" accept=".csv" class="d-none" />

<div class="mt-3" *ngIf="historyQuery?.id; else saveBefore">
<div *ngIf="historyQuery?.id; else saveBefore">
<ng-container *ngIf="displayedItems.content.length > 0; else empty">
<table class="mt-2 table table-sm table-hover oib-table">
<table class="table table-sm table-hover oib-table">
<thead class="light">
<tr>
<th translate="south.items.name"></th>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/app/logs/logs.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ <h1>{{ 'logs.title' | translate }}</h1>
<oib-pagination [page]="logs" [navigate]="true"></oib-pagination>
</div>
</div>
<div *ngIf="logs.totalElements !== 0; else empty">
<table class="table table-sm table-hover oib-table">
<div class="table-container" *ngIf="logs.totalElements !== 0; else empty">
<table class="table table-sm table-hover oib-table-logs">
<thead>
<tr>
<th translate="logs.date"></th>
Expand All @@ -65,7 +65,9 @@ <h1>{{ 'logs.title' | translate }}</h1>
<tbody>
<tr class="data" *ngFor="let log of logs.content">
<td class="text-nowrap">{{ log.timestamp | datetime:'mediumWithSeconds'}}</td>
<td>{{ log.level | logLevelsEnum }}</td>
<td>
<span [class]="'level-badge ' + log.level.toLowerCase()">{{ log.level | logLevelsEnum }}</span>
</td>
<td>{{ log.scope }}</td>
<td class="text-break">{{ log.message }}</td>
</tr>
Expand Down
126 changes: 126 additions & 0 deletions frontend/src/app/logs/logs.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
@import 'src/common.scss';

.level-badge {
display: inline-block;
padding: 0.25rem 0.8rem;
border-radius: 10rem;
font-weight: bold;
text-align: center;
}

.level-badge.error {
background-color: #E24D42;
color: $lightGrey;
}

.level-badge.warn {
background-color: #EAB837;
color: $darkGrey;
}

.level-badge.info {
background-color: #7CB26C;
color: $lightGrey;
}

.level-badge.debug {
background-color: #2478BE;
color: $lightGrey;
}

.level-badge.trace {
background-color: #72CDDE;
color: $lightGrey;
}

// changes of the default display
.oib-table-logs {
// table header
thead {
color: white;
background-color: $darkGrey;
// alternative case
&.light {
color: $darkGrey;
background-color: white;
}
// case of table header
th {
padding-left: 1rem;
border-style: none;
}
// first case of the first line
th:first-child {
border-top-left-radius: 1rem;
width: 11rem;
}
// last case of the first line
th:last-child {
border-top-right-radius: 1rem;
}
// alternative case if oib-box-title is on top of table
.light {
background-color: $white;
}
}
// body of the table
tbody {
padding: 0;
// case of table
td {
padding-left: 1rem;
border-bottom-width: 0px;
vertical-align: middle;
}
// line
tr {
max-width: 155rem;
// color of button in table in line
.btn {
color: $blue;
}
// hover settings
&:hover {
// color of button in line when hover the line
.btn {
color: $darkGrey;
// color of button when hover it
&:hover {
color: $yellow;
}
}
}
td:first-child {
width: 11rem;
}
td:nth-child(2) {
width: 2rem;
}
td:nth-child(3) {
width: 6rem;
}
td:last-child {
text-align: right;
padding-right: 1em;
overflow-wrap: break-word;
max-width: 12rem; //idk why but with a little max-width the table isn't broken
}
}
// customised colours on the lines (one out of two)
tr:nth-child(even) {
background-color: $white;
// changes color when hover
&:hover {
background-color: $mediumGrey;
}
}
// customised colours on the lines (one out of two)
tr:nth-child(odd) {
background-color: $veryLightGrey;
// changes color when hover
&:hover {
background-color: $mediumGrey;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,26 @@ <h4 class="modal-title" translate="north.choose-north-type-title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-md-6" *ngFor="let northType of northTypes">
<button class="btn d-flex align-items-center category-button" (click)="selectType(northType.id)">
<div class="image-block">
<img
class="category-image"
[src]="'/assets/' + northType.category + '.svg'"
[alt]="'enums.categories.' + northType.category | translate"
/>
</div>
<div class="ms-5 text-start">
<h6 class="mb-0">{{ northType.name }}</h6>
<p class="mb-0">{{ northType.description }}</p>
</div>
</button>
</div>
<ng-container *ngFor="let group of groupedNorthTypes">
<div class="col-lg-12 col-md-12">
<h1 class="mt-2">{{ 'enums.categories.' + group.category | translate }}</h1>
</div>
<div class="col-lg-4 col-md-4 modal-container-list" *ngFor="let northType of group.types">
<button class="btn d-flex align-items-center category-button modal-content-list" (click)="selectType(northType.id)">
<div class="image-block col-2">
<img
class="category-image"
[src]="'/assets/' + northType.category + '.svg'"
[alt]="'enums.categories.' + northType.category | translate"
/>
</div>
<div class="ms-3 text-start">
<h6 class="mb-0">{{ northType.name }}</h6>
<p class="mb-0">{{ northType.description }}</p>
</div>
</button>
</div>
</ng-container>
</div>
</div>
<div class="modal-footer">
Expand Down
Loading

0 comments on commit 2d255a2

Please sign in to comment.