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

31
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 {
display: block !important;
overflow-y: auto;
@ -40,7 +15,6 @@
margin: auto;
}
.activity-subtitle {
font-style: italic;
font-size: 11px !important;
@ -49,7 +23,7 @@
font-weight: bold !important;
}
.activity-action-buttons{
.activity-action-buttons {
align-self: flex-start;
margin-top: 15px;
font-weight: 600;
@ -63,7 +37,8 @@
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;
}

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="header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Activities</h3>
<button mat-icon-button matTooltip="Close" (click)="close()">
<div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3 class="panel-title">Activities</h3>
<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon>
</button>
</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({
selector: 'ov-activities-panel',
templateUrl: './activities-panel.component.html',
styleUrls: ['./activities-panel.component.css']
styleUrls: ['../panel.component.css','./activities-panel.component.css']
})
export class ActivitiesPanelComponent implements OnInit {
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 {
display: block !important;
overflow-y: auto;
@ -70,21 +45,3 @@
::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
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="header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Background effects</h3>
<button mat-icon-button matTooltip="Close" (click)="close()">
<div class="panel-container" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none">
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3 class="panel-title">Background effects</h3>
<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon>
</button>
</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({
selector: 'ov-background-effects-panel',
templateUrl: './background-effects-panel.component.html',
styleUrls: ['./background-effects-panel.component.css'],
styleUrls: ['../panel.component.css','./background-effects-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BackgroundEffectsPanelComponent implements OnInit {

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

@ -1,28 +1,4 @@
#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; */
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color);
@ -33,7 +9,6 @@
.text-info {
margin: 3px;
}
.messages-container {
@ -65,35 +40,34 @@
resize: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
}
.message {
.message {
position: relative;
padding: 3px 0;
}
}
.msg-detail {
.msg-detail {
width: 95%;
display: inline-block;
}
}
.msg-detail p {
.msg-detail p {
margin: 0;
font-size: 14px;
}
}
.nickname-container p {
.nickname-container p {
font-size: 13px;
font-weight: bold;
color: var(--ov-panel-text-color);
}
}
.msg-content {
.msg-content {
position: relative;
border-radius: var(--ov-panel-radius);
padding: 8px;
@ -102,12 +76,11 @@
max-width: 95%;
font-size: 13px;
word-break: break-all;
}
}
#send-btn {
#send-btn {
border-radius: var(--ov-buttons-radius);
}
}
/* Start message from other user */
@ -119,30 +92,18 @@
float: left;
}
/* End message from other user */
/* End message from other user */
/* Start my messages */
/* Start my messages */
.message.right .msg-detail .nickname-container {
.message.right .msg-detail .nickname-container {
text-align: right;
}
}
.message.right .msg-detail .msg-content {
.message.right .msg-detail .msg-content {
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;
}
}

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="header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3>Chat</h3>
<button mat-icon-button matTooltip="Close" (click)="close()">
<div class="panel-container" id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" >
<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
<h3 class="panel-title">Chat</h3>
<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon>
</button>
</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({
selector: 'ov-chat-panel',
templateUrl: './chat-panel.component.html',
styleUrls: ['./chat-panel.component.css'],
styleUrls: ['../panel.component.css','./chat-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
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;
}

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

@ -1,29 +1,6 @@
.participants-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);
}
.local-participant-container, .remote-participants-container {
margin: 5px 10px;
.local-participant-container,
.remote-participants-container {
margin: 5px 10px;
}
.scrollable {
@ -32,7 +9,7 @@
overflow: auto;
}
.message-container{
.message-container {
padding: 5px;
background-color: var(--ov-light-color);
color: var(--ov-panel-text-color);
@ -41,7 +18,6 @@
font-size: 12px;
}
.message-container p{
.message-container p {
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="header-container">
<h3>Participants</h3>
<button mat-icon-button matTooltip="Close" (click)="close()">
<div class="panel-container" id="participants-container">
<div class="panel-header-container">
<h3 class="panel-title">Participants</h3>
<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
<mat-icon>close</mat-icon>
</button>
</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({
selector: 'ov-participants-panel',
templateUrl: './participants-panel.component.html',
styleUrls: ['./participants-panel.component.css'],
styleUrls: ['../../panel.component.css','./participants-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {