openvidu-testapp: form fields size adjusted in dialogs

pull/203/head
pabloFuente 2019-01-22 17:33:40 +01:00
parent a75d13275c
commit 7467e7de47
3 changed files with 114 additions and 112 deletions

View File

@ -15,8 +15,8 @@ mat-divider {
mat-dialog-content button { mat-dialog-content button {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding-left: 12px; padding-left: 10px;
padding-right: 12px; padding-right: 10px;
display: inline-flex; display: inline-flex;
} }
@ -30,7 +30,7 @@ mat-dialog-content button {
} }
.inner-text-input { .inner-text-input {
margin-left: 16px; margin-left: 9px;
} }
#rec-properties-btn { #rec-properties-btn {

View File

@ -7,7 +7,7 @@
<button mat-button id="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</button> <button mat-button id="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</button>
<button mat-button id="close-session-btn" (click)="closeSession()">Close this session</button> <button mat-button id="close-session-btn" (click)="closeSession()">Close this session</button>
</div> </div>
<mat-form-field class="inner-text-input"> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="resource-id-field" placeholder="resourceId" [(ngModel)]="resourceId"> <input matInput id="resource-id-field" placeholder="resourceId" [(ngModel)]="resourceId">
</mat-form-field> </mat-form-field>
<div> <div>
@ -26,10 +26,10 @@
</button> </button>
<div *ngIf="showRecProperties" id="rec-properties-div"> <div *ngIf="showRecProperties" id="rec-properties-div">
<div> <div>
<mat-form-field class="inner-text-input"> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name"> <input matInput id="recording-name-field" placeholder="Recording name" [(ngModel)]="recordingProperties.name">
</mat-form-field> </mat-form-field>
<mat-form-field class="inner-text-input"> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode"> <mat-select id="rec-outputmode-select" placeholder="Output mode" [(ngModel)]="recordingProperties.outputMode">
<mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator"> <mat-option *ngFor="let enumerator of enumToArray(recMode)" [value]="enumerator">
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span> <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
@ -38,14 +38,15 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="rec-layout-div"> <div *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="rec-layout-div">
<mat-form-field class="inner-text-input"> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout"> <mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
<mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator"> <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
{{ enumerator }} {{ enumerator }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]" class="inner-text-input"> <mat-form-field *ngIf="recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]" class="inner-text-input"
[style.fontSize.px]=14>
<input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout"> <input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
</mat-form-field> </mat-form-field>
</div> </div>
@ -53,12 +54,12 @@
<mat-checkbox [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox> <mat-checkbox [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
<mat-checkbox [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox> <mat-checkbox [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
<mat-form-field *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="recording-resolution-form" <mat-form-field *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="recording-resolution-form"
class="inner-text-input"> class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="recording-resolution-field" placeholder="Resolution" type="text" [(ngModel)]="recordingProperties.resolution"> <input matInput id="recording-resolution-field" placeholder="Resolution" type="text" [(ngModel)]="recordingProperties.resolution">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<mat-form-field class="inner-text-input"> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId"> <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
</mat-form-field> </mat-form-field>
<div> <div>

View File

@ -83,7 +83,8 @@
<mat-form-field style="width: 70%"> <mat-form-field style="width: 70%">
<input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName"> <input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
</mat-form-field> </mat-form-field>
<button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;" title="Add allowed filter" (click)="filters.push(filterName); filterName = '';"> <button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Add allowed filter">add_circle</mat-icon> <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Add allowed filter">add_circle</mat-icon>
</button> </button>
</div> </div>