You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/10/03 18:36:35 UTC
[incubator-streampipes] 03/03: [hotfix] Harmonize appearance of
settings components
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-426
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit c0c2a6e9862fcce6150340aafb86b1d66c08ff3c
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Oct 3 20:33:23 2021 +0200
[hotfix] Harmonize appearance of settings components
---
.../app/configuration/configuration.component.html | 18 ++-
ui/src/app/configuration/configuration.module.ts | 6 +-
.../datalake-configuration.component.html | 122 +++++++++---------
.../messaging-configuration.component.html | 142 ++++++++++-----------
.../pipeline-element-configuration.component.html | 92 +++++++------
.../security-configuration.component.html | 18 +++
.../split-section/split-section.component.html | 16 ++-
.../split-section/split-section.component.scss | 5 +
.../token/token-management-settings.component.scss | 5 -
ui/src/scss/sp/main.scss | 6 +
10 files changed, 229 insertions(+), 201 deletions(-)
diff --git a/ui/src/app/configuration/configuration.component.html b/ui/src/app/configuration/configuration.component.html
index 2456699..5219006 100644
--- a/ui/src/app/configuration/configuration.component.html
+++ b/ui/src/app/configuration/configuration.component.html
@@ -16,26 +16,32 @@
~
-->
-<div fxLayout="column" fxFlex="100" class="page-container">
+<div fxLayout="column" class="page-container">
<div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav">
<div fxLayout="fill">
<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)"
color="accent">
- <mat-tab label="Pipeline Element Configuration"></mat-tab>
+ <mat-tab label="DataLake"></mat-tab>
<mat-tab label="Messaging"></mat-tab>
- <mat-tab
- label="DataLake"></mat-tab>
+ <mat-tab label="Pipeline Element Configuration"></mat-tab>
+ <mat-tab label="Security"></mat-tab>
</mat-tab-group>
</div>
</div>
+ <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex == 0">
- <pipeline-element-configuration fxFlex="100"></pipeline-element-configuration>
+ <sp-datalake-configuration fxFlex="100"></sp-datalake-configuration>
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex == 1">
<messaging-configuration fxFlex="100"></messaging-configuration>
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex == 2">
- <sp-datalake-configuration fxFlex="100"></sp-datalake-configuration>
+ <pipeline-element-configuration fxFlex="100"></pipeline-element-configuration>
+ </div>
+ <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex == 3">
+ <sp-security-configuration fxFlex="100"></sp-security-configuration>
</div>
+ </div>
+
</div>
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
index cfa5f63..3005794 100644
--- a/ui/src/app/configuration/configuration.module.ts
+++ b/ui/src/app/configuration/configuration.module.ts
@@ -44,6 +44,8 @@ import { DatalakeRestService } from '../core-services/datalake/datalake-rest.ser
import { DeleteDatalakeIndexComponent } from './dialog/delete-datalake-index/delete-datalake-index-dialog.component';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { SecurityConfigurationComponent } from './security-configuration/security-configuration.component';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { MatDividerModule } from '@angular/material/divider';
@NgModule({
imports: [
@@ -56,9 +58,11 @@ import { SecurityConfigurationComponent } from './security-configuration/securit
MatIconModule,
MatInputModule,
MatCheckboxModule,
+ MatDividerModule,
MatTooltipModule,
FormsModule,
- DragDropModule
+ DragDropModule,
+ CoreUiModule
],
declarations: [
ConfigurationComponent,
diff --git a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
index 146619b..bbc29d5 100644
--- a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
+++ b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
@@ -16,52 +16,48 @@
~
-->
-<div fxFlex="100" fxLayout="column" style="margin-top:40px;">
- <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch">
- <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>Datalake Settings</h4>
- <span flex></span>
- </div>
- </div>
-
- <div fxFlex="100" class="sp-blue-border">
- <table
- fxFlex="100"
- mat-table
- data-cy="datalake-settings"
- [dataSource]="dataSource"
- style="width: 100%;"
- matSort>
+<div fxLayout="row" class="page-container-padding">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
+ <sp-split-section title="Data Lake Settings"
+ subtitle="Truncate and delete persisted data streams">
+ <div fxFlex="100" fxLayout="column">
+ <div class="subsection-title">Existing data lake indices</div>
+ <table
+ fxFlex="100"
+ mat-table
+ data-cy="datalake-settings"
+ [dataSource]="dataSource"
+ style="width: 100%;"
+ matSort>
- <ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
- <td mat-cell *matCellDef="let configurationEntry">
- <h4 style="margin-bottom:0px;">{{configurationEntry.name}}</h4>
- </td>
- </ng-container>
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ <h4 style="margin-bottom:0px;">{{configurationEntry.name}}</h4>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="pipeline">
- <th mat-header-cell mat-sort-header *matHeaderCellDef>Related Pipeline</th>
- <td mat-cell *matCellDef="let configurationEntry">
- {{configurationEntry.pipelines}}
- </td>
- </ng-container>
+ <ng-container matColumnDef="pipeline">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Related Pipeline</th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ {{configurationEntry.pipelines}}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="events">
- <th mat-header-cell mat-sort-header *matHeaderCellDef># Events</th>
- <td
- mat-cell
- data-cy="datalake-number-of-events"
- *matCellDef="let configurationEntry">
- {{configurationEntry.events | number}}
- </td>
- </ng-container>
+ <ng-container matColumnDef="events">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef># Events</th>
+ <td
+ mat-cell
+ data-cy="datalake-number-of-events"
+ *matCellDef="let configurationEntry">
+ {{configurationEntry.events | number}}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="truncate">
- <th mat-header-cell *matHeaderCellDef>Truncate</th>
- <td mat-cell *matCellDef="let configurationEntry">
- <div fxLayout="row">
+ <ng-container matColumnDef="truncate">
+ <th mat-header-cell *matHeaderCellDef>Truncate</th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ <div fxLayout="row">
<span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
<button color="accent"
mat-button
@@ -73,14 +69,14 @@
<i class="material-icons">local_fire_department</i>
</button>
</span>
- </div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="remove">
- <th mat-header-cell *matHeaderCellDef>Remove</th>
- <td mat-cell *matCellDef="let configurationEntry">
- <div fxLayout="row">
+ <ng-container matColumnDef="remove">
+ <th mat-header-cell *matHeaderCellDef>Remove</th>
+ <td mat-cell *matCellDef="let configurationEntry">
+ <div fxLayout="row">
<span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
<button color="accent"
mat-button
@@ -93,20 +89,22 @@
<i class="material-icons">delete</i>
</button>
</span>
- </div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
- </table>
- </div>
- <div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="availableMeasurements.length == 0">
- <h5>(no stored measurements)</h5>
- </div>
+ </table>
+ </div>
+ <div fxFlex="100" fxLayoutAlign="end end">
+ <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
+ </div>
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="availableMeasurements.length == 0">
+ <h5>(no stored measurements)</h5>
+ </div>
+ </sp-split-section>
</div>
</div>
+
diff --git a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
index f8dba27..b64ea3a 100644
--- a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
+++ b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
@@ -16,83 +16,81 @@
~
-->
-<div fxFlex="100" fxLayout="column" style="margin-top:40px;">
- <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch">
- <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>Kafka Settings</h4>
- <span flex></span>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border page-container-padding-inner">
- <form (ngSubmit)="updateMessagingSettings()" class="form-width" fxFlex="100" fxLayout="column" *ngIf="loadingCompleted">
- <mat-form-field class="form-field" fxFlex="100">
- <input matInput [(ngModel)]="messagingSettings.batchSize"
- [placeholder]="'Batch Size'" type="text"
- [ngModelOptions]="{standalone: true}">
- </mat-form-field>
- <mat-form-field class="form-field" fxFlex="100">
- <input matInput [(ngModel)]="messagingSettings.messageMaxBytes"
- [placeholder]="'Message Max Bytes'" type="text"
- [ngModelOptions]="{standalone: true}">
- </mat-form-field>
- <mat-form-field class="form-field" fxFlex="100">
- <input matInput [(ngModel)]="messagingSettings.acks"
- [placeholder]="'Acks'" type="text"
- [ngModelOptions]="{standalone: true}">
- </mat-form-field>
- <mat-form-field class="form-field" fxFlex="100">
- <input matInput [(ngModel)]="messagingSettings.lingerMs"
- [placeholder]="'Linger MS'" type="text"
- [ngModelOptions]="{standalone: true}">
- </mat-form-field>
- <div fxLayoutAlign="end center">
- <button mat-raised-button color="accent" type="submit" class="md-raised md-primary submit-button">Update
- </button>
- </div>
-
- </form>
- </div>
+<div fxLayout="row" class="page-container-padding">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
+ <sp-split-section title="Kafka Settings"
+ subtitle="Manage Kafka settings for pipeline communication">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="page-container-padding-inner">
+ <form (ngSubmit)="updateMessagingSettings()" class="form-width" fxFlex="100" fxLayout="column"
+ *ngIf="loadingCompleted">
+ <mat-form-field class="form-field" fxFlex="100">
+ <input matInput [(ngModel)]="messagingSettings.batchSize"
+ [placeholder]="'Batch Size'" type="text"
+ [ngModelOptions]="{standalone: true}">
+ </mat-form-field>
+ <mat-form-field class="form-field" fxFlex="100">
+ <input matInput [(ngModel)]="messagingSettings.messageMaxBytes"
+ [placeholder]="'Message Max Bytes'" type="text"
+ [ngModelOptions]="{standalone: true}">
+ </mat-form-field>
+ <mat-form-field class="form-field" fxFlex="100">
+ <input matInput [(ngModel)]="messagingSettings.acks"
+ [placeholder]="'Acks'" type="text"
+ [ngModelOptions]="{standalone: true}">
+ </mat-form-field>
+ <mat-form-field class="form-field" fxFlex="100">
+ <input matInput [(ngModel)]="messagingSettings.lingerMs"
+ [placeholder]="'Linger MS'" type="text"
+ [ngModelOptions]="{standalone: true}">
+ </mat-form-field>
+ <div fxLayoutAlign="start center" class="mt-10">
+ <button mat-raised-button color="accent" type="submit"
+ class="md-raised md-primary submit-button">Update
+ </button>
+ </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" style="margin-top:40px;">
- <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>Message Formats</h4>
- <span flex></span>
+ </form>
</div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border page-container-padding-inner">
- <div cdkDropList class="data-format-list" (cdkDropListDropped)="drop($event)" *ngIf="loadingCompleted">
- <div class="data-format-box" *ngFor="let format of messagingSettings.prioritizedFormats" cdkDrag>
- {{format}}
+ </sp-split-section>
+ <mat-divider></mat-divider>
+ <div class="mt-30">
+ <sp-split-section title="Message Formats"
+ subtitle="Manage the priority of message formats used">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="page-container-padding-inner">
+ <div cdkDropList class="data-format-list" (cdkDropListDropped)="drop($event)"
+ *ngIf="loadingCompleted">
+ <div class="data-format-box" *ngFor="let format of messagingSettings.prioritizedFormats"
+ cdkDrag>
+ {{format}}
+ </div>
+ </div>
+ <div fxLayoutAlign="start center" class="mt-10">
+ <button mat-raised-button color="accent" type="submit"
+ class="md-raised md-primary submit-button" (click)="updateMessagingSettings()">Update
+ </button>
+ </div>
</div>
- </div>
- <div fxLayoutAlign="end center">
- <button mat-raised-button color="accent" type="submit" class="md-raised md-primary submit-button" (click)="updateMessagingSettings()">Update
- </button>
- </div>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" style="margin-top:40px;">
- <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>Protocols</h4>
- <span fxFlex></span>
- </div>
+ </sp-split-section>
</div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border page-container-padding-inner">
- <div cdkDropList class="data-format-list" (cdkDropListDropped)="dropProtocol($event)"
- *ngIf="loadingCompleted">
- <div class="data-format-box" *ngFor="let protocol of messagingSettings.prioritizedProtocols" cdkDrag>
- {{protocol}}
+ <mat-divider></mat-divider>
+ <div class="mt-30">
+ <sp-split-section title="Protocols"
+ subtitle="Manage the priority of protocols used">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="page-container-padding-inner">
+ <div cdkDropList class="data-format-list" (cdkDropListDropped)="dropProtocol($event)"
+ *ngIf="loadingCompleted">
+ <div class="data-format-box" *ngFor="let protocol of messagingSettings.prioritizedProtocols"
+ cdkDrag>
+ {{protocol}}
+ </div>
+ </div>
+ <div fxLayoutAlign="start center" class="mt-10">
+ <button mat-raised-button color="accent" type="submit"
+ class="md-raised md-primary submit-button" (click)="updateMessagingSettings()">Update
+ </button>
+ </div>
</div>
- </div>
- <div fxLayoutAlign="end center">
- <button mat-raised-button color="accent" type="submit" class="md-raised md-primary submit-button" (click)="updateMessagingSettings()">Update
- </button>
- </div>
+ </sp-split-section>
</div>
-
</div>
</div>
diff --git a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.html b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.html
index 68df495..339fe0a 100644
--- a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.html
+++ b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.html
@@ -16,64 +16,60 @@
~
-->
-<div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch" style="margin-top:40px;">
- <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <h4>Pipeline Element Configuration</h4>
- <span flex></span>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border">
- <table fxFlex="100" mat-table [dataSource]="dataSource" multiTemplateDataRows>
+<div fxLayout="row" class="page-container-padding">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start">
+ <sp-split-section title="Pipeline Element Configuration"
+ subtitle="Configure basic settings of core and extensions services">
+ <table fxFlex="100" mat-table [dataSource]="dataSource" multiTemplateDataRows>
- <ng-container matColumnDef="status">
- <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Status</th>
- <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <ng-container matColumnDef="status">
+ <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Status</th>
+ <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
<span *ngIf="element.meta.status === 'passing'" fxLayoutAlign="center center">
<mat-icon class="service-icon-passing">lens</mat-icon>
</span>
- <span *ngIf="element.meta.status === 'critical'" fxLayoutAlign="center center">
+ <span *ngIf="element.meta.status === 'critical'" fxLayoutAlign="center center">
<mat-icon class="service-icon-critical">lens</mat-icon>
</span>
- </td>
- </ng-container>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="name">
- <th fxFlex="40" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Extensions Service Group
- </th>
- <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
- {{element.name}}
- </td>
- </ng-container>
+ <ng-container matColumnDef="name">
+ <th fxFlex="40" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Extensions Service Group
+ </th>
+ <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ {{element.name}}
+ </td>
+ </ng-container>
- <ng-container matColumnDef="action">
- <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Action</th>
- <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
- <button mat-button mat-raised-button color="primary" (click)="expand(element)">
- Edit
- </button>
- </td>
- </ng-container>
+ <ng-container matColumnDef="action">
+ <th fxFlex="30" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Action</th>
+ <td fxFlex="30" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <button mat-button mat-raised-button color="accent" (click)="expand(element)">
+ Edit
+ </button>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="expandedDetail">
- <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
- <div class="consul-configuration-detail"
- [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
- <div fxFlex="100">
- <consul-configs [consulService]="element"
- (updateConsulService)="updateConsulService($event)"></consul-configs>
+ <ng-container matColumnDef="expandedDetail">
+ <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
+ <div class="consul-configuration-detail"
+ [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+ <div fxFlex="100">
+ <consul-configs [consulService]="element"
+ (updateConsulService)="updateConsulService($event)"></consul-configs>
+ </div>
</div>
- </div>
- </td>
- </ng-container>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let element; columns: displayedColumns;"
- class="consul-configuration-row"
- [class.consul-configuration-row-expanded]="expandedElement === element">
- </tr>
- <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="consul-configuration-detail-row"></tr>
- </table>
- <!-- <mat-paginator [pageSize]="20" [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons></mat-paginator>-->
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let element; columns: displayedColumns;"
+ class="consul-configuration-row"
+ [class.consul-configuration-row-expanded]="expandedElement === element">
+ </tr>
+ <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="consul-configuration-detail-row"></tr>
+ </table>
+ </sp-split-section>
</div>
</div>
diff --git a/ui/src/app/configuration/security-configuration/security-configuration.component.html b/ui/src/app/configuration/security-configuration/security-configuration.component.html
index e69de29..e40d375 100644
--- a/ui/src/app/configuration/security-configuration/security-configuration.component.html
+++ b/ui/src/app/configuration/security-configuration/security-configuration.component.html
@@ -0,0 +1,18 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
diff --git a/ui/src/app/core-ui/split-section/split-section.component.html b/ui/src/app/core-ui/split-section/split-section.component.html
index 4cabfbe..b275d0c 100644
--- a/ui/src/app/core-ui/split-section/split-section.component.html
+++ b/ui/src/app/core-ui/split-section/split-section.component.html
@@ -16,12 +16,14 @@
~
-->
-<div fxLayout="row" fxFlex="100">
- <div fxFlex="300px" fxLayout="column" class="split-section">
- <div class="split-section-title">{{title}}</div>
- <div class="split-section-description">{{subtitle}}</div>
- </div>
- <div fxFill fxLayout="column">
- <ng-content></ng-content>
+<div fxFlex="100" fxLayout="column">
+ <div fxLayout="row">
+ <div fxFlex="300px" fxLayout="column" class="split-section">
+ <div class="split-section-title">{{title}}</div>
+ <div class="split-section-description">{{subtitle}}</div>
+ </div>
+ <div fxFlex fxLayout="column">
+ <ng-content></ng-content>
+ </div>
</div>
</div>
diff --git a/ui/src/app/core-ui/split-section/split-section.component.scss b/ui/src/app/core-ui/split-section/split-section.component.scss
index 53d13f0..2d75a6f 100644
--- a/ui/src/app/core-ui/split-section/split-section.component.scss
+++ b/ui/src/app/core-ui/split-section/split-section.component.scss
@@ -16,6 +16,10 @@
*
*/
+:host {
+ width: 100%;
+}
+
.split-section-title {
font-weight: bold;
font-size: 16pt;
@@ -28,4 +32,5 @@
.split-section {
border-right: 2px solid gray;
margin-right: 15px;
+ padding-right: 5px;
}
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.scss b/ui/src/app/profile/components/token/token-management-settings.component.scss
index b713f43..67df1a9 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.scss
+++ b/ui/src/app/profile/components/token/token-management-settings.component.scss
@@ -20,11 +20,6 @@
width: 300px;
}
-.subsection-title {
- font-size: 12pt;
- font-weight: bold;
- margin-bottom: 10px;
-}
.subsection {
margin-bottom: 15px;
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 91063a9..9ee9197 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -369,6 +369,12 @@ md-content {
}
+.subsection-title {
+ font-size: 12pt;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
.page-container-no-border {
margin: 10px;
min-height: calc(100% - 20px);