Skip to content

Commit 28b3a36

Browse files
nnhathungkhangonntthitrinh
authored
Feature-9082 Enhance language dropdown button (#9105)
* feature-9082: Enhance language dropdown button * feature-9082: Enhance language dropdown button * fix css * fix UI * fix missing header * fix missing header * fix missing header * fix missing header * fix missing header * fix missing header * avoid using css inline * feature-9082: Fix css dropdown side panel * feature-9082: Fix css dropdown side panel * feature-9082: Fix css dropdown side panel --------- Co-authored-by: Khang On - TMA <[email protected]> Co-authored-by: ntthitrinh <[email protected]>
1 parent d776537 commit 28b3a36

File tree

5 files changed

+157
-94
lines changed

5 files changed

+157
-94
lines changed

‎app/components/public/stream/side-panel.hbs

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -60,38 +60,40 @@
6060
<div>
6161
<div class="ui inverted vertical fluid menu borderless stream-side-menu">
6262
{{#each this.streams as |stream|}}
63-
<a href={{href-to 'public.stream.view' @event stream.slugName stream.id }} class="{{if (eq @currentRoom.microlocationId stream.microlocationId) 'video-active'}} item stream-item d-flex items-center" {{on "click" (fn @setupRoomChat stream) }}>
64-
63+
<a href={{href-to 'public.stream.view' @event stream.slugName stream.id }} class="{{if (eq @currentRoom.microlocationId stream.microlocationId) 'video-active'}} item stream-item d-flex items-center" {{on "click" (fn @setupRoomChat stream) }} >
6564
<span class="stream-preview-letter" style={{css background-color=(object-at (abs (mod stream.hash this.colors.length)) this.colors)}}>{{truncate (uppercase stream.name) 1 false}}</span>
6665
<span class="ml-2">{{stream.name}}</span>
6766
{{#if (gt stream.translations.length 1)}}
68-
<div style="display:inline-block;margin-left:auto">
69-
<div class="translation-dropdown-button translation-dropdown-container ">
67+
<div class="block-side-panel">
68+
<div class="translation-dropdown-button translation-dropdown-container">
7069
<UiDropdown class="btn btn-secondary dropdown-toggle"
71-
@onChange={{ action "switchLanguage"}}>
72-
<div class="translation-dropdown-wrapper">
73-
<div class="translation-dropdown-component">
74-
<i style="font-size:1.1em" class="language icon"></i>
75-
</div>
76-
<div class="translation-dropdown-component">
77-
{{stream.translations.length}} {{t 'languages'}}
78-
</div>
79-
<div class="translation-dropdown-component">
80-
<i style="margin-left: 0 !important;text-align: right;"
81-
class="dropdown icon"> </i>
82-
</div>
83-
</div>
84-
<div class="ui translation menu">
85-
{{#each-in stream.translations as |key channel|}}
86-
<div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
87-
{{/each-in}}
70+
@selected={{this.selectingLanguage.getName}}
71+
@onChange={{ action "switchLanguage"}} as |execute mapper|
72+
{{action 'switchRoom' stream}} >
73+
<div class="{{if (and this.selectingLanguage.getName (eq @currentRoom.id stream.id)) 'translate-hidden'}} translation-dropdown-wrapper">
74+
<div class="translation-dropdown-component">
75+
<i class="language icon"></i>
76+
</div>
77+
<div class="translation-dropdown-component translation-length">
78+
{{stream.translations.length}} {{t}}
79+
</div>
80+
<div class="translation-dropdown-component">
81+
<i class="dropdown icon translation-dropdown-icon"> </i>
82+
</div>
83+
</div>
84+
{{#if (and (eq @currentRoom.id stream.id) this.selectingLanguage.getName)}}
85+
<div class="text">{{this.selectingLanguage.getName}}</div>
86+
{{/if}}
87+
<div class="ui translation menu custom-menu">
88+
{{#each stream.translations as |channel|}}
89+
<div class="item custom-item" data-value="{{map-value mapper channel}}">{{channel.name}}</div>
90+
{{/each}}
8891
</div>
8992
</UiDropdown>
9093
</div>
9194
</div>
9295
{{/if}}
9396
</a>
94-
9597
{{/each}}
9698
</div>
9799
</div>

‎app/components/public/stream/side-panel.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,18 @@ export default class PublicStreamSidePanel extends Component<Args> {
109109
}
110110

111111
@action
112-
switchLanguage(url: string): void {
113-
this.selectingLanguage.setLanguage(url);
112+
switchLanguage(channel: any): void {
113+
this.selectingLanguage.setLanguage(channel.url);
114114
this.selectingLanguage.updateTranslationYTId();
115+
this.selectingLanguage.setName(channel.name);
116+
}
117+
118+
@action
119+
switchRoom(stream: any) {
120+
if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
121+
this.selectingLanguage.setName(null);
122+
}
123+
this.selectingLanguage.setTranslationRoomId(stream.id)
115124
}
116125

117126
@action

‎app/components/public/stream/video-stream.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
2525
@service
2626
l10n: any;
2727

28+
@service
29+
selectingLanguage: any;
30+
2831
@service
2932
confirm: any;
3033

@@ -57,9 +60,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
5760
@tracked
5861
provider = '';
5962

60-
@service
61-
selectingLanguage: any;
62-
6363
@tracked
6464
languageUrl = '';
6565

@@ -166,6 +166,10 @@ export default class PublicStreamVideoStream extends Component<Args> {
166166
async setupRoomChat(stream:any) {
167167
this.currentRoom = stream;
168168
this.shown = false;
169+
if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
170+
this.selectingLanguage.setName(null);
171+
}
172+
this.selectingLanguage.setTranslationRoomId(stream.id)
169173
}
170174

171175
@action

‎app/services/selecting-language.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import Service from '@ember/service';
22
import { tracked } from '@glimmer/tracking';
3+
import { computed } from '@ember/object';
34

45
export default class SelectingLanguageService extends Service {
56
@tracked
67
selectingLanguage = null;
78

9+
@tracked
10+
name = null;
11+
12+
@tracked
13+
translationRoomId = null;
14+
815
@tracked
916
isStreamYardVisible = true;
1017

@@ -16,6 +23,14 @@ export default class SelectingLanguageService extends Service {
1623
this.isStreamYardVisible = true;
1724
}
1825

26+
setName(name) {
27+
this.name = name;
28+
}
29+
30+
setTranslationRoomId(roomId) {
31+
this.translationRoomId = roomId;
32+
}
33+
1934
setStreamYardVisibility(isVisible) {
2035
this.isStreamYardVisible = isVisible;
2136
}
@@ -32,4 +47,16 @@ export default class SelectingLanguageService extends Service {
3247
getLanguage() {
3348
return this.selectingLanguage;
3449
}
50+
51+
getTranslationRoomId() {
52+
return this.translationRoomId;
53+
}
54+
55+
@computed('name')
56+
get getName() {
57+
if (this.name === 'Original') {
58+
return null;
59+
}
60+
return this.name;
61+
}
3562
}

‎app/styles/components/translation-dropdown.scss

Lines changed: 88 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,101 @@
1-
.translation-dropdown-container {
2-
height: 3rem;
3-
display: flex;
4-
justify-content: space-between;
5-
align-items: center;
1+
.translation.menu {
2+
left: -6px !important;
3+
width: 9.6rem !important;
64
}
75

8-
.translation-dropdown-wrapper {
9-
display: flex;
10-
justify-content: space-between;
11-
align-items: center;
12-
flex: 1;
6+
.language.icon {
7+
font-size: 1.8em;
8+
color: #808080;
139
}
1410

15-
.translation-dropdown {
16-
padding: 2px;
17-
display: flex;
18-
justify-content: space-between;
19-
flex-direction: row;
20-
align-items: center;
21-
width: 100%;
22-
background-color: #d3d3d3;
23-
}
2411

25-
.translation-dropdown-component {
12+
.block-side-panel {
2613
display: inline-block;
27-
}
14+
margin-left: auto;
2815

29-
.translation-dropdown .ui.dropdown {
30-
background-color: #f9f9f9;
31-
border: 1px solid #ccc;
32-
border-radius: 4px;
33-
padding: 8px;
34-
}
16+
.translation-dropdown-container {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
width: 95px !important;
21+
height: 33px !important;
22+
margin-left: 10px !important;
3523

36-
.translation-dropdown .ui.dropdown .menu {
37-
background-color: #f9f9f9;
38-
}
24+
.menu.transition.visible {
25+
font-size: small !important;
26+
width: 115px !important;
27+
}
3928

40-
.translation-dropdown .ui.dropdown .item {
41-
color: #333;
42-
}
29+
.text {
30+
font-size: small !important;
31+
color: #808080 !important;
32+
}
33+
}
4334

44-
.translation-dropdown .ui.dropdown i.dropdown.icon {
45-
color: #333;
46-
}
35+
.translation-dropdown-button {
36+
border-radius: .28571429rem;
37+
border-top-left-radius: .285714rem;
38+
border-top-right-radius: .285714rem;
39+
border-bottom-right-radius: .285714rem;
40+
border-bottom-left-radius: .285714rem;
41+
font-family: sans-serif;
42+
font-size: 100%;
43+
line-height: 1.15;
44+
text-rendering: auto;
45+
color: buttontext;
46+
letter-spacing: normal;
47+
word-spacing: normal;
48+
text-transform: none;
49+
text-shadow: none;
50+
display: flex;
51+
justify-content: space-evenly;
52+
flex-direction: column;
53+
text-align: center;
54+
align-items: flex-start;
55+
cursor: default;
56+
box-sizing: border-box;
57+
background-color: buttonface;
58+
padding: 1px 6px;
59+
border-image: initial;
60+
}
4761

48-
.translation-dropdown-button {
49-
width: 9.6rem;
50-
border-radius: .28571429rem;
51-
border-top-left-radius: .285714rem;
52-
border-top-right-radius: .285714rem;
53-
border-bottom-right-radius: .285714rem;
54-
border-bottom-left-radius: .285714rem;
55-
font-family: sans-serif;
56-
font-size: 100%;
57-
line-height: 1.15;
58-
text-rendering: auto;
59-
color: buttontext;
60-
letter-spacing: normal;
61-
word-spacing: normal;
62-
text-transform: none;
63-
text-shadow: none;
64-
display: flex;
65-
justify-content: space-evenly;
66-
flex-direction: column;
67-
text-align: center;
68-
align-items: flex-start;
69-
cursor: default;
70-
box-sizing: border-box;
71-
background-color: buttonface;
72-
padding: 1px 6px;
73-
border-image: initial;
74-
}
62+
.dropdown-toggle {
63+
width: 100%;
7564

76-
.translation.menu {
77-
left: -6px !important;
78-
margin-top: 10px !important;
79-
width: 9.6rem !important;
65+
.translation-dropdown-wrapper {
66+
display: flex;
67+
justify-content: space-between;
68+
align-items: center;
69+
flex: 1;
70+
71+
.translation-dropdown-component {
72+
display: inline-block;
73+
74+
.translation-dropdown-icon {
75+
margin-left: 0 !important;
76+
text-align: right;
77+
color: #808080;
78+
}
79+
}
80+
81+
.translation-length {
82+
font-size: .8em;
83+
margin-left: 5px;
84+
background-color: #808080;
85+
border-radius: 100%;
86+
color: #fff;
87+
padding: 2px 5px;
88+
margin-top: 1px;
89+
}
90+
}
91+
92+
.translate-hidden {
93+
display: none !important;
94+
}
95+
}
96+
97+
.translation-dropdown-container .ui.dropdown .menu > .custom-item {
98+
padding: 16px 4px !important;
99+
}
80100
}
101+

0 commit comments

Comments
 (0)