mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Updated panel settings
Added text description in captions section and other minors styles improvementspull/748/head
Carlos Santos
parent
bae861e2ce
commit
0e55ac35bc
|
|
@ -6,12 +6,13 @@
|
|||
.item-menu {
|
||||
padding-right: 5px;
|
||||
border-right: 1px solid var(--ov-secondary-color);
|
||||
width: 200px;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding: 16px;
|
||||
flex-grow: 1;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.option {
|
||||
|
|
@ -22,7 +23,9 @@
|
|||
}
|
||||
|
||||
mat-list-option[aria-selected='true'] {
|
||||
background: var(--ov-light-color);
|
||||
background: var(--ov-tertiary-color);
|
||||
font-weight: bold !important;
|
||||
color: var(--ov-panel-background);
|
||||
}
|
||||
::ng-deep .mat-list-item-content {
|
||||
padding: 5px !important;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<mat-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>language</mat-icon>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:</div>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
|
||||
<ov-lang-selector></ov-lang-selector>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
#lang-section {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--ov-panel-text-color);
|
||||
font-size: 12px;
|
||||
padding: 0px 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lang-button {
|
||||
background-color: var(--ov-logo-background-color);
|
||||
color: var(--ov-text-color);
|
||||
}
|
||||
|
||||
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
|
||||
background-color: var(--ov-tertiary-color);
|
||||
}
|
||||
|
||||
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
|
||||
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
|
||||
background-color: var(--ov-light-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,31 @@
|
|||
<mat-list>
|
||||
<mat-list-item>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
|
||||
<mat-slide-toggle id="captions-toggle-slide" (change)="toggleCaptions()" [checked]="captionsEnabled" [disableRipple]="true"></mat-slide-toggle>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:</div>
|
||||
<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
|
||||
<span>{{ langSelected }}</span>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button *ngFor="let lang of languagesAvailable" mat-menu-item [id]="lang.ISO" (click)="onLangSelected(lang)">
|
||||
<span>{{ lang.name }}</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<div>
|
||||
<mat-list>
|
||||
<div>
|
||||
<mat-list-item>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
|
||||
<mat-slide-toggle
|
||||
id="captions-toggle-slide"
|
||||
(change)="toggleCaptions()"
|
||||
[checked]="captionsEnabled"
|
||||
[disableRipple]="true"
|
||||
></mat-slide-toggle>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
<div id="lang-section">
|
||||
<mat-list-item>
|
||||
<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
|
||||
<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
|
||||
<span>{{ langSelected }}</span>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button *ngFor="let lang of languagesAvailable" mat-menu-item [id]="lang.ISO" (click)="onLangSelected(lang)">
|
||||
<span>{{ lang.name }}</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-list-item>
|
||||
<span class="section-description">{{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }}</span>
|
||||
</div>
|
||||
</mat-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "视频",
|
||||
"AUDIO": "声音的",
|
||||
"LANGUAGE": "语",
|
||||
"CAPTIONS": "字幕"
|
||||
"CAPTIONS": "字幕",
|
||||
"CAPTIONS_LANG_TEXT": "选择会话参与者将使用的语言。字幕将以该语言显示。"
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "背景效果",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Video",
|
||||
"AUDIO": "Audio",
|
||||
"LANGUAGE": "Sprache",
|
||||
"CAPTIONS": "Untertitel"
|
||||
"CAPTIONS": "Untertitel",
|
||||
"CAPTIONS_LANG_TEXT": "Wählen Sie die Sprache, die die Teilnehmer der Sitzung verwenden. Die Untertitel werden in dieser Sprache angezeigt."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Hintergrund-Effekte",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Video",
|
||||
"AUDIO": "Audio",
|
||||
"LANGUAGE": "Language",
|
||||
"CAPTIONS": "Captions"
|
||||
"CAPTIONS": "Captions",
|
||||
"CAPTIONS_LANG_TEXT": "Select the language that the participants of the session will use. The captions will appear in that language."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Background effects",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Video",
|
||||
"AUDIO": "Audio",
|
||||
"LANGUAGE": "Idioma",
|
||||
"CAPTIONS": "Subtítulos"
|
||||
"CAPTIONS": "Subtítulos",
|
||||
"CAPTIONS_LANG_TEXT": "Selecciona el idioma que usarán los participantes de la sesión. Los subtítulos aparecerán en ese idioma."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Efectos de fondo",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Vidéo",
|
||||
"AUDIO": "l'audio",
|
||||
"LANGUAGE": "Langue",
|
||||
"CAPTIONS": "Les sous-titres"
|
||||
"CAPTIONS": "Les sous-titres",
|
||||
"CAPTIONS_LANG_TEXT": "Sélectionnez la langue que les participants de la session utiliseront. Les sous-titres apparaîtront dans cette langue."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Effets de fond",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "वीडियो",
|
||||
"AUDIO": "ऑडियो",
|
||||
"LANGUAGE": "भाषा",
|
||||
"CAPTIONS": "उपशीर्षक"
|
||||
"CAPTIONS": "उपशीर्षक",
|
||||
"CAPTIONS_LANG_TEXT": "उस भाषा का चयन करें जिसका उपयोग सत्र के प्रतिभागी करेंगे। उपशीर्षक उस भाषा में दिखाई देंगे।"
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "पृष्ठभूमि प्रभाव",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "video",
|
||||
"AUDIO": "Audio",
|
||||
"LANGUAGE": "Lingua",
|
||||
"CAPTIONS": "Sottotitoli"
|
||||
"CAPTIONS": "Sottotitoli",
|
||||
"CAPTIONS_LANG_TEXT": "Seleziona la lingua che i partecipanti della sessione useranno. I sottotitoli appariranno in quella lingua."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Effetti di sfondo",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "ビデオ",
|
||||
"AUDIO": "オーディオ",
|
||||
"LANGUAGE": "言語",
|
||||
"CAPTIONS": "字幕"
|
||||
"CAPTIONS": "字幕",
|
||||
"CAPTIONS_LANG_TEXT": "セッションの参加者が使用する言語を選択します。キャプションはその言語で表示されます。"
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "背景効果",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Video",
|
||||
"AUDIO": "Audio",
|
||||
"LANGUAGE": "Taal",
|
||||
"CAPTIONS": "Ondertitels"
|
||||
"CAPTIONS": "Ondertitels",
|
||||
"CAPTIONS_LANG_TEXT": "Selecteer de taal die de deelnemers van de sessie zullen gebruiken. De ondertiteling zal in die taal verschijnen."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Achtergrondeffecten",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
"VIDEO": "Vídeo",
|
||||
"AUDIO": "Áudio",
|
||||
"LANGUAGE": "Linguagem",
|
||||
"CAPTIONS": "Legendas"
|
||||
"CAPTIONS": "Legendas",
|
||||
"CAPTIONS_LANG_TEXT": "Selecione o idioma que os participantes da sessão utilizarão. Os legendas aparecerão nesse idioma."
|
||||
},
|
||||
"BACKGROUND": {
|
||||
"TITLE": "Efeitos de fundo",
|
||||
|
|
|
|||
Loading…
Reference in New Issue