Skip to content

Commit 12b957b

Browse files
norbusannorbusan
committed
Revert "Feature-9082 Enhance language dropdown button (#9105)"
This reverts commit 28b3a36.
1 parent 0d76e7a commit 12b957b

File tree

5 files changed

+94
-157
lines changed

5 files changed

+94
-157
lines changed

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

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -60,40 +60,38 @@
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) }} >
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+
6465
<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>
6566
<span class="ml-2">{{stream.name}}</span>
6667
{{#if (gt stream.translations.length 1)}}
67-
<div class="block-side-panel">
68-
<div class="translation-dropdown-button translation-dropdown-container">
68+
<div style="display:inline-block;margin-left:auto">
69+
<div class="translation-dropdown-button translation-dropdown-container ">
6970
<UiDropdown class="btn btn-secondary dropdown-toggle"
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}}
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}}
9188
</div>
9289
</UiDropdown>
9390
</div>
9491
</div>
9592
{{/if}}
9693
</a>
94+
9795
{{/each}}
9896
</div>
9997
</div>

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

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

111111
@action
112-
switchLanguage(channel: any): void {
113-
this.selectingLanguage.setLanguage(channel.url);
112+
switchLanguage(url: string): void {
113+
this.selectingLanguage.setLanguage(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)
124115
}
125116

126117
@action

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

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

28-
@service
29-
selectingLanguage: any;
30-
3128
@service
3229
confirm: any;
3330

@@ -60,6 +57,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
6057
@tracked
6158
provider = '';
6259

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

@@ -166,10 +166,6 @@ 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)
173169
this.eventCheckIn(this.args.event.identifier, stream.microlocationId)
174170
}
175171

‎app/services/selecting-language.js‎

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

54
export default class SelectingLanguageService extends Service {
65
@tracked
76
selectingLanguage = null;
87

9-
@tracked
10-
name = null;
11-
12-
@tracked
13-
translationRoomId = null;
14-
158
@tracked
169
isStreamYardVisible = true;
1710

@@ -23,14 +16,6 @@ export default class SelectingLanguageService extends Service {
2316
this.isStreamYardVisible = true;
2417
}
2518

26-
setName(name) {
27-
this.name = name;
28-
}
29-
30-
setTranslationRoomId(roomId) {
31-
this.translationRoomId = roomId;
32-
}
33-
3419
setStreamYardVisibility(isVisible) {
3520
this.isStreamYardVisible = isVisible;
3621
}
@@ -47,16 +32,4 @@ export default class SelectingLanguageService extends Service {
4732
getLanguage() {
4833
return this.selectingLanguage;
4934
}
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-
}
6235
}

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

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

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

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+
}
1124

12-
.block-side-panel {
25+
.translation-dropdown-component {
1326
display: inline-block;
14-
margin-left: auto;
15-
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;
23-
24-
.menu.transition.visible {
25-
font-size: small !important;
26-
width: 115px !important;
27-
}
28-
29-
.text {
30-
font-size: small !important;
31-
color: #808080 !important;
32-
}
33-
}
34-
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-
}
61-
62-
.dropdown-toggle {
63-
width: 100%;
64-
65-
.translation-dropdown-wrapper {
66-
display: flex;
67-
justify-content: space-between;
68-
align-items: center;
69-
flex: 1;
27+
}
7028

71-
.translation-dropdown-component {
72-
display: inline-block;
29+
.translation-dropdown .ui.dropdown {
30+
background-color: #f9f9f9;
31+
border: 1px solid #ccc;
32+
border-radius: 4px;
33+
padding: 8px;
34+
}
7335

74-
.translation-dropdown-icon {
75-
margin-left: 0 !important;
76-
text-align: right;
77-
color: #808080;
78-
}
79-
}
36+
.translation-dropdown .ui.dropdown .menu {
37+
background-color: #f9f9f9;
38+
}
8039

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-
}
40+
.translation-dropdown .ui.dropdown .item {
41+
color: #333;
42+
}
9143

92-
.translate-hidden {
93-
display: none !important;
94-
}
95-
}
44+
.translation-dropdown .ui.dropdown i.dropdown.icon {
45+
color: #333;
46+
}
9647

97-
.translation-dropdown-container .ui.dropdown .menu > .custom-item {
98-
padding: 16px 4px !important;
99-
}
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;
10074
}
10175

76+
.translation.menu {
77+
left: -6px !important;
78+
margin-top: 10px !important;
79+
width: 9.6rem !important;
80+
}

0 commit comments

Comments
 (0)