mirror of https://github.com/OpenVidu/openvidu.git
openvidu-testapp: form fields size adjusted in dialogs
pabloFuente
parent
a75d13275c
commit
7467e7de47
|
|
@ -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 {
|
||||||
|
|
@ -57,4 +57,4 @@ mat-dialog-content button {
|
||||||
|
|
||||||
#recording-resolution-form {
|
#recording-resolution-form {
|
||||||
max-width: 100px !important;
|
max-width: 100px !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,105 +1,106 @@
|
||||||
<div>
|
<div>
|
||||||
<div fxLayout="row" fxLayoutGap="20px">
|
<div fxLayout="row" fxLayoutGap="20px">
|
||||||
<div>
|
<div>
|
||||||
<h2 mat-dialog-title>Session properties</h2>
|
<h2 mat-dialog-title>Session properties</h2>
|
||||||
<mat-dialog-content>
|
<mat-dialog-content>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
|
<mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
|
||||||
<mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
|
<mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
|
||||||
{{ enumerator }}
|
{{ enumerator }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode">
|
<mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode">
|
||||||
<mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
|
<mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
|
||||||
{{ enumerator }}
|
{{ enumerator }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingLayout">
|
<mat-select placeholder="DefaultRecordingLayout" [(ngModel)]="sessionProperties.defaultRecordingLayout">
|
||||||
<mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
|
<mat-option *ngFor="let enumerator of enumToArray(defaultRecordingLayout)" [value]="enumerator">
|
||||||
{{ enumerator }}
|
{{ enumerator }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field *ngIf="this.sessionProperties.defaultRecordingLayout === 'CUSTOM'">
|
<mat-form-field *ngIf="this.sessionProperties.defaultRecordingLayout === 'CUSTOM'">
|
||||||
<input matInput placeholder="DefaultCustomLayout" type="text" [(ngModel)]="sessionProperties.defaultCustomLayout">
|
<input matInput placeholder="DefaultCustomLayout" type="text" [(ngModel)]="sessionProperties.defaultCustomLayout">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
|
<input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<label class="label">Turn configuration</label>
|
<label class="label">Turn configuration</label>
|
||||||
<div id="turn-div">
|
<div id="turn-div">
|
||||||
<mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
|
<mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
|
||||||
<mat-radio-button value="auto">Auto</mat-radio-button>
|
<mat-radio-button value="auto">Auto</mat-radio-button>
|
||||||
<mat-radio-button value="freeice">Freeice</mat-radio-button>
|
<mat-radio-button value="freeice">Freeice</mat-radio-button>
|
||||||
<mat-radio-button value="manual">Manual</mat-radio-button>
|
<mat-radio-button value="manual">Manual</mat-radio-button>
|
||||||
</mat-radio-group>
|
</mat-radio-group>
|
||||||
<div *ngIf="turnConf === 'manual'" id="manual-turn-div">
|
<div *ngIf="turnConf === 'manual'" id="manual-turn-div">
|
||||||
<mat-form-field style="width: 100%">
|
<mat-form-field style="width: 100%">
|
||||||
<input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
|
<input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field style="width: 48%; padding-right: 2px">
|
<mat-form-field style="width: 48%; padding-right: 2px">
|
||||||
<input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
|
<input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field style="width: 48%; padding-left: 2px">
|
<mat-form-field style="width: 48%; padding-left: 2px">
|
||||||
<input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
|
<input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</mat-dialog-content>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 mat-dialog-title>User configuration</h2>
|
|
||||||
<mat-dialog-content>
|
|
||||||
<label class="label">Role</label>
|
|
||||||
<div id="role-div">
|
|
||||||
<mat-radio-group name="Role" [(ngModel)]="tokenOptions.role">
|
|
||||||
<mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
|
|
||||||
<mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
|
|
||||||
<mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
|
|
||||||
</mat-radio-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="label" style="margin-bottom: 8px">Kurento config</label>
|
|
||||||
<div id="kurento-config-div">
|
|
||||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
|
||||||
<input matInput placeholder="Max recv" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMaxRecvBandwidth">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field style="width: 39%">
|
|
||||||
<input matInput placeholder="Min recv" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMinRecvBandwidth">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field style="width: 39%; margin-right: 5px">
|
|
||||||
<input matInput placeholder="Max send" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMaxSendBandwidth">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field style="width: 39%">
|
|
||||||
<input matInput placeholder="Min send" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMinSendBandwidth">
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-chip-list *ngIf="filters.length > 0">
|
|
||||||
<mat-chip style="height: 20px" *ngFor="let filterName of filters" (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
|
|
||||||
</mat-chip-list>
|
|
||||||
<mat-form-field style="width: 70%">
|
|
||||||
<input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
|
|
||||||
</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 = '';">
|
|
||||||
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Add allowed filter">add_circle</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="label">Token</label>
|
|
||||||
<div id="custom-token-div">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</mat-dialog-content>
|
|
||||||
</div>
|
</div>
|
||||||
|
</mat-dialog-content>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 mat-dialog-title>User configuration</h2>
|
||||||
|
<mat-dialog-content>
|
||||||
|
<label class="label">Role</label>
|
||||||
|
<div id="role-div">
|
||||||
|
<mat-radio-group name="Role" [(ngModel)]="tokenOptions.role">
|
||||||
|
<mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
|
||||||
|
<mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
|
||||||
|
<mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
<mat-dialog-actions>
|
<label class="label" style="margin-bottom: 8px">Kurento config</label>
|
||||||
<button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
|
<div id="kurento-config-div">
|
||||||
<button id="save-btn" mat-button [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, tokenOptions: generateTokenOptions(), customToken: customToken}">SAVE</button>
|
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||||
</mat-dialog-actions>
|
<input matInput placeholder="Max recv" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMaxRecvBandwidth">
|
||||||
</div>
|
</mat-form-field>
|
||||||
|
<mat-form-field style="width: 39%">
|
||||||
|
<input matInput placeholder="Min recv" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMinRecvBandwidth">
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field style="width: 39%; margin-right: 5px">
|
||||||
|
<input matInput placeholder="Max send" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMaxSendBandwidth">
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field style="width: 39%">
|
||||||
|
<input matInput placeholder="Min send" type="number" [(ngModel)]="tokenOptions.kurentoOptions.videoMinSendBandwidth">
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-chip-list *ngIf="filters.length > 0">
|
||||||
|
<mat-chip style="height: 20px" *ngFor="let filterName of filters" (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
|
||||||
|
</mat-chip-list>
|
||||||
|
<mat-form-field style="width: 70%">
|
||||||
|
<input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
|
||||||
|
</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 = '';">
|
||||||
|
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Add allowed filter">add_circle</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="label">Token</label>
|
||||||
|
<div id="custom-token-div">
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</mat-dialog-content>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-dialog-actions>
|
||||||
|
<button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
|
||||||
|
<button id="save-btn" mat-button [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, tokenOptions: generateTokenOptions(), customToken: customToken}">SAVE</button>
|
||||||
|
</mat-dialog-actions>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue