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

openvidu-components: Parametrized styles properties

pull/707/head
csantosm 2022-02-28 12:12:16 +01:00
parent f23f39dd6f
commit 3e21207f8c
13 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
View File

@ -29,7 +29,7 @@
max-height: 15px; max-height: 15px;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 50%; border-radius: var(--ov-buttons-radius);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
View File

@ -1,7 +1,7 @@
#chat-container { #chat-container {
margin: 20px; margin: 20px;
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
border-radius: 5px; border-radius: var(--ov-panel-radius);
height: -webkit-fill-available; height: -webkit-fill-available;
height: -moz-available; height: -moz-available;
} }
@ -19,6 +19,7 @@
.header-container button { .header-container button {
margin-left: auto; margin-left: auto;
border-radius: var(--ov-buttons-radius);
} }
.text-container{ .text-container{
@ -43,7 +44,7 @@
background-color: var(--ov-light-dark-color); background-color: var(--ov-light-dark-color);
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: var(--ov-panel-radius);
} }
.input-container textarea { .input-container textarea {
@ -89,14 +90,17 @@
.msg-content { .msg-content {
position: relative; position: relative;
border-radius: 5px; border-radius: var(--ov-panel-radius);
padding: 8px; padding: 8px;
color: #000000; color: #000000;
width: auto; width: auto;
max-width: 95%; max-width: 95%;
font-size: 13px; font-size: 13px;
word-break: break-all; word-break: break-all;
}
#send-btn {
border-radius: var(--ov-buttons-radius);
} }

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
View File

@ -53,9 +53,11 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
} }
sendMessage(): void { sendMessage(): void {
if(!!this.message) {
this.chatService.sendMessage(this.message); this.chatService.sendMessage(this.message);
this.message = ''; this.message = '';
} }
}
scrollToBottom(): void { scrollToBottom(): void {
setTimeout(() => { setTimeout(() => {

3
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
View File

@ -1,7 +1,7 @@
.participants-container { .participants-container {
margin: 20px; margin: 20px;
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
border-radius: 5px; border-radius: var(--ov-panel-radius);
height: -webkit-fill-available; height: -webkit-fill-available;
height: -moz-available; height: -moz-available;
} }
@ -19,6 +19,7 @@
.header-container button { .header-container button {
margin-left: auto; margin-left: auto;
border-radius: var(--ov-buttons-radius);
} }
.local-participant-container, .remote-participants-container { .local-participant-container, .remote-participants-container {

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
View File

@ -9,7 +9,7 @@
padding: 0px; padding: 0px;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
border-radius: 5px; border-radius: var(--ov-panel-radius);
color: #ffffff; color: #ffffff;
font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
} }
@ -18,12 +18,12 @@
padding: 5px; padding: 5px;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
border-radius: 2px; border-radius: var(--ov-panel-radius);
} }
#dialogNickname { #dialogNickname {
background-color: #0000005e; background-color: #0000005e;
border-radius: 3px; border-radius: var(--ov-panel-radius);
} }
#closeButton { #closeButton {
@ -81,6 +81,7 @@
width: 26px; width: 26px;
height: 26px; height: 26px;
margin: 5px; margin: 5px;
border-radius: var(--ov-buttons-radius);
} }
.status-icons button { .status-icons button {
@ -110,7 +111,7 @@
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
background-color: #000000; background-color: #000000;
border-radius: 5px; border-radius: var(--ov-video-radius);
} }
mat-error, mat-error,

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
View File

@ -27,8 +27,6 @@
</mat-form-field> </mat-form-field>
</form> </form>
</div> </div>
<!-- Custom network quality element -->
<ng-content select="[network-quality]"></ng-content>
</div> </div>
<div id="audio-wave-container" *ngIf="showAudioDetection && _stream.type === 'CAMERA'"> <div id="audio-wave-container" *ngIf="showAudioDetection && _stream.type === 'CAMERA'">

1
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -10,7 +10,6 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { LayoutService } from '../../services/layout/layout.service'; import { LayoutService } from '../../services/layout/layout.service';
import { StorageService } from '../../services/storage/storage.service'; import { StorageService } from '../../services/storage/storage.service';
import { Signal } from '../../models/signal.model'; import { Signal } from '../../models/signal.model';
import { LayoutClass } from '../../models/layout.model';
import { PublisherProperties } from 'openvidu-browser'; import { PublisherProperties } from 'openvidu-browser';
import { StreamModel } from '../../models/participant.model'; import { StreamModel } from '../../models/participant.model';
import { ParticipantService } from '../../services/participant/participant.service'; import { ParticipantService } from '../../services/participant/participant.service';

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

@ -34,13 +34,17 @@
font-size: 24px; font-size: 24px;
} }
#company-logo { #media-buttons-container button, #menu-buttons-container button {
border-radius: var(--ov-buttons-radius);
}
#branding-logo {
background-color: var(--ov-dark-color); background-color: var(--ov-dark-color);
border-radius: 5px; border-radius: var(--ov-panel-radius);
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;
padding: 10px; padding: 10px;
} }
#session-title { #session-title {
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
@ -56,7 +60,7 @@
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 33px; right: 33px;
border-radius: 50%; border-radius: var(--ov-buttons-radius);
background-color: #ffa600; background-color: #ffa600;
border: 1px solid #000; border: 1px solid #000;
z-index: 99999; z-index: 99999;
@ -64,7 +68,7 @@
#leave-btn { #leave-btn {
background-color: var(--ov-warn-color) !important; background-color: var(--ov-warn-color) !important;
border-radius: 10px !important; border-radius: var(--ov-leave-button-radius) !important;
width: 60px !important; width: 60px !important;
} }
@ -92,7 +96,7 @@
} }
@media (max-width: 850px) { @media (max-width: 850px) {
#company-logo { #branding-logo {
display: none; display: none;
} }
} }

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

@ -1,7 +1,7 @@
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px"> <mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<div fxFlex="20%" fxLayoutAlign="start center"> <div fxFlex="20%" fxLayoutAlign="start center">
<div id="img-container"> <div id="img-container">
<img id="company-logo" alt="OpenVidu Logo" [src]="logoUrl" /> <img id="branding-logo" src='assets/images/openvidu_globe.png'/>
<span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span> <span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span>
</div> </div>
</div> </div>

1
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -54,7 +54,6 @@ export class ToolbarComponent implements OnInit, OnDestroy {
isFullscreenActive: boolean = false; isFullscreenActive: boolean = false;
isChatOpened: boolean = false; isChatOpened: boolean = false;
isParticipantsOpened: boolean = false; isParticipantsOpened: boolean = false;
logoUrl = 'assets/images/openvidu_globe.png';
protected log: ILogger; protected log: ILogger;
protected menuTogglingSubscription: Subscription; protected menuTogglingSubscription: Subscription;

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
View File

@ -1,6 +1,6 @@
.card-header { .card-header {
background-color: var(--ov-primary-color); background-color: var(--ov-primary-color);
border-radius: 10px 10px 0px 0px; border-radius: var(--ov-panel-radius) var(--ov-panel-radius) 0px 0px;
text-align: center; text-align: center;
height: 50px; height: 50px;
} }
@ -67,6 +67,7 @@
} }
.deviceButton { .deviceButton {
box-shadow: none; box-shadow: none;
border-radius: var(--ov-buttons-radius);
background-color: var(--ov-secondary-color) !important; background-color: var(--ov-secondary-color) !important;
color: var(--ov-light-color) !important; color: var(--ov-light-color) !important;
} }
@ -965,7 +966,7 @@
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #999999; border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 10px; border-radius: var(--ov-panel-radius);
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
outline: 0; outline: 0;

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css
View File

@ -8,11 +8,11 @@ video {
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
border-radius: 5px; border-radius: var(--ov-video-radius);
background-color: #000000; background-color: #000000;
} }
.poster_img { .poster {
position: absolute; position: absolute;
z-index: 888; z-index: 888;
max-width: 60%; max-width: 60%;

5
openvidu-components-angular/src/styles.scss
View File

@ -50,6 +50,11 @@ $openvidu-components-theme: mat.define-light-theme((
--ov-light-color: #ffffff; --ov-light-color: #ffffff;
--ov-light-dark-color: #f1f1f1; --ov-light-dark-color: #f1f1f1;
--ov-buttons-radius: 50%; // border-radius property
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
} }