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

openvidu-components: Unified common panel styles

pull/721/head
csantosm 2022-05-12 11:32:36 +02:00
parent d3a755b48e
commit 140449948a
13 changed files with 94 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
View File

@ -1,28 +1,3 @@
#activities-container {
margin: 20px;
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
}
.header-container {
padding: 10px;
display: flex;
}
.header-container h3 {
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
font-weight: bold;
}
.header-container button {
margin-left: auto;
border-radius: var(--ov-buttons-radius);
}
.activities-body-container { .activities-body-container {
display: block !important; display: block !important;
overflow-y: auto; overflow-y: auto;
@ -40,7 +15,6 @@
margin: auto; margin: auto;
} }
.activity-subtitle { .activity-subtitle {
font-style: italic; font-style: italic;
font-size: 11px !important; font-size: 11px !important;
@ -63,7 +37,8 @@
padding: 0px 10px !important; padding: 0px 10px !important;
} }
::ng-deep .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content { ::ng-deep .mat-list-base .mat-list-item .mat-list-item-content,
.mat-list-base .mat-list-option .mat-list-item-content {
padding: 0px !important; padding: 0px !important;
} }

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
View File

@ -1,7 +1,7 @@
<div class="panel" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none"> <div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
<div class="header-container" fxFlex="55px" fxLayoutAlign="start center"> <div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Activities</h3> <h3 class="panel-title">Activities</h3>
<button mat-icon-button matTooltip="Close" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>

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

@ -5,7 +5,7 @@ import { PanelService } from '../../../services/panel/panel.service';
@Component({ @Component({
selector: 'ov-activities-panel', selector: 'ov-activities-panel',
templateUrl: './activities-panel.component.html', templateUrl: './activities-panel.component.html',
styleUrls: ['./activities-panel.component.css'] styleUrls: ['../panel.component.css','./activities-panel.component.css']
}) })
export class ActivitiesPanelComponent implements OnInit { export class ActivitiesPanelComponent implements OnInit {
constructor(private panelService: PanelService) {} constructor(private panelService: PanelService) {}

43
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
View File

@ -1,28 +1,3 @@
#background-effects-container {
margin: 20px;
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
}
.header-container {
padding: 10px;
display: flex;
}
.header-container h3 {
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
font-weight: bold;
}
.header-container button {
margin-left: auto;
border-radius: var(--ov-buttons-radius);
}
.effects-container { .effects-container {
display: block !important; display: block !important;
overflow-y: auto; overflow-y: auto;
@ -70,21 +45,3 @@
::ng-deep .mat-slider-vertical .mat-slider-track-wrapper { ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
width: 10px !important; width: 10px !important;
} }
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #a7a7a7;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7c7c7c;
}
::-webkit-scrollbar-track {
background: var(--ov-light-color);
border-radius: 4px;
}

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
View File

@ -1,7 +1,7 @@
<div class="panel" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none"> <div class="panel-container" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none">
<div class="header-container" fxFlex="55px" fxLayoutAlign="start center"> <div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Background effects</h3> <h3 class="panel-title">Background effects</h3>
<button mat-icon-button matTooltip="Close" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>

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

@ -8,7 +8,7 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
@Component({ @Component({
selector: 'ov-background-effects-panel', selector: 'ov-background-effects-panel',
templateUrl: './background-effects-panel.component.html', templateUrl: './background-effects-panel.component.html',
styleUrls: ['./background-effects-panel.component.css'], styleUrls: ['../panel.component.css','./background-effects-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class BackgroundEffectsPanelComponent implements OnInit { export class BackgroundEffectsPanelComponent implements OnInit {

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

@ -1,27 +1,3 @@
#chat-container {
margin: 20px;
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
}
.header-container {
padding: 10px;
display: flex;
}
.header-container h3 {
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
}
.header-container button {
margin-left: auto;
border-radius: var(--ov-buttons-radius);
}
.text-container { .text-container {
/* padding: 5px; */ /* padding: 5px; */
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
@ -33,7 +9,6 @@
.text-info { .text-info {
margin: 3px; margin: 3px;
} }
.messages-container { .messages-container {
@ -71,7 +46,6 @@
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif; font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
} }
.message { .message {
position: relative; position: relative;
padding: 3px 0; padding: 3px 0;
@ -108,7 +82,6 @@
border-radius: var(--ov-buttons-radius); border-radius: var(--ov-buttons-radius);
} }
/* Start message from other user */ /* Start message from other user */
.message.left .msg-detail .nickname-container { .message.left .msg-detail .nickname-container {
@ -119,7 +92,6 @@
float: left; float: left;
} }
/* End message from other user */ /* End message from other user */
/* Start my messages */ /* Start my messages */
@ -132,17 +104,6 @@
float: right; float: right;
} }
/* End my messages */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #6b6b6b;
}
::ng-deep a:-webkit-any-link { ::ng-deep a:-webkit-any-link {
color: #1a73e8; color: #1a73e8;
} }

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
View File

@ -1,7 +1,7 @@
<div id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" > <div class="panel-container" id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" >
<div class="header-container" fxFlex="55px" fxLayoutAlign="start center"> <div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Chat</h3> <h3 class="panel-title">Chat</h3>
<button mat-icon-button matTooltip="Close" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>

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

@ -41,7 +41,7 @@ import { PanelService } from '../../../services/panel/panel.service';
@Component({ @Component({
selector: 'ov-chat-panel', selector: 'ov-chat-panel',
templateUrl: './chat-panel.component.html', templateUrl: './chat-panel.component.html',
styleUrls: ['./chat-panel.component.css'], styleUrls: ['../panel.component.css','./chat-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ChatPanelComponent implements OnInit, AfterViewInit { export class ChatPanelComponent implements OnInit, AfterViewInit {

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

@ -0,0 +1,41 @@
.panel-container {
margin: 20px;
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
}
.panel-header-container {
padding: 10px;
display: flex;
}
.panel-title {
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
}
.panel-close-button {
margin-left: auto;
border-radius: var(--ov-buttons-radius);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #a7a7a7;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7c7c7c;
}
::-webkit-scrollbar-track {
background: var(--ov-light-color);
border-radius: 4px;
}

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

@ -1,28 +1,5 @@
.participants-container { .local-participant-container,
margin: 20px; .remote-participants-container {
background-color: var(--ov-panel-background);
border-radius: var(--ov-panel-radius);
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
}
.header-container {
padding: 10px;
display: flex;
}
.header-container h3 {
margin-left: 5px;
margin-top: auto;
margin-bottom: auto;
}
.header-container button {
margin-left: auto;
border-radius: var(--ov-buttons-radius);
}
.local-participant-container, .remote-participants-container {
margin: 5px 10px; margin: 5px 10px;
} }
@ -43,5 +20,4 @@
.message-container p { .message-container p {
margin: 0; margin: 0;
} }

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
View File

@ -1,7 +1,7 @@
<div class="participants-container" id="participants-container"> <div class="panel-container" id="participants-container">
<div class="header-container"> <div class="panel-header-container">
<h3>Participants</h3> <h3 class="panel-title">Participants</h3>
<button mat-icon-button matTooltip="Close" (click)="close()"> <button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>

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

@ -41,7 +41,7 @@ import { Subscription } from 'rxjs';
@Component({ @Component({
selector: 'ov-participants-panel', selector: 'ov-participants-panel',
templateUrl: './participants-panel.component.html', templateUrl: './participants-panel.component.html',
styleUrls: ['./participants-panel.component.css'], styleUrls: ['../../panel.component.css','./participants-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit { export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {