ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Improved activities toolbar tags styles

pull/780/head
Carlos Santos 2023-02-21 23:34:42 +01:00
parent b4e7523277
commit eba30772a3
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
View File

@ -70,6 +70,13 @@
flex-direction: column; flex-direction: column;
} }
#activities-tag {
display: inline-flex;
}
#activities-tag > div {
margin-left: 5px;
}
.recording-tag, .recording-tag,
.broadcasting-tag { .broadcasting-tag {
padding: 0 10px; padding: 0 10px;

21
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
View File

@ -4,16 +4,19 @@
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo /> <img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
<div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED"> <div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED">
<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span> <span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag"> <div id="activities-tag">
<mat-icon class="blink">radio_button_checked</mat-icon> <div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
<span class="blink">REC</span> <mat-icon class="blink">radio_button_checked</mat-icon>
<span> | {{ recordingTime | date : 'H:mm:ss' }}</span> <span class="blink">REC</span>
</div> <span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag"> </div>
<mat-icon class="blink">sensors</mat-icon> <div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
<span class="blink">LIVE</span> <mat-icon class="blink">sensors</mat-icon>
<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span> <span class="blink">LIVE</span>
<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>