Skip to content

Commit

Permalink
Revert "Feature-9082 Enhance language dropdown button (#9105)"
Browse files Browse the repository at this point in the history 
This reverts commit 28b3a36.
  • Loading branch information
@norbusan
norbusan committed Mar 21, 2024
1 parent 0d76e7a commit 12b957b
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 157 deletions.
46 changes: 22 additions & 24 deletions app/components/public/stream/side-panel.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,40 +60,38 @@
<div>
<div class="ui inverted vertical fluid menu borderless stream-side-menu">
{{#each this.streams as |stream|}}
<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) }} >
<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) }}>

<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>
<span class="ml-2">{{stream.name}}</span>
{{#if (gt stream.translations.length 1)}}
<div class="block-side-panel">
<div class="translation-dropdown-button translation-dropdown-container">
<div style="display:inline-block;margin-left:auto">
<div class="translation-dropdown-button translation-dropdown-container ">
<UiDropdown class="btn btn-secondary dropdown-toggle"
@selected={{this.selectingLanguage.getName}}
@onChange={{ action "switchLanguage"}} as |execute mapper|
{{action 'switchRoom' stream}} >
<div class="{{if (and this.selectingLanguage.getName (eq @currentRoom.id stream.id)) 'translate-hidden'}} translation-dropdown-wrapper">
<div class="translation-dropdown-component">
<i class="language icon"></i>
</div>
<div class="translation-dropdown-component translation-length">
{{stream.translations.length}} {{t}}
</div>
<div class="translation-dropdown-component">
<i class="dropdown icon translation-dropdown-icon"> </i>
</div>
</div>
{{#if (and (eq @currentRoom.id stream.id) this.selectingLanguage.getName)}}
<div class="text">{{this.selectingLanguage.getName}}</div>
{{/if}}
<div class="ui translation menu custom-menu">
{{#each stream.translations as |channel|}}
<div class="item custom-item" data-value="{{map-value mapper channel}}">{{channel.name}}</div>
{{/each}}
@onChange={{ action "switchLanguage"}}>
<div class="translation-dropdown-wrapper">
<div class="translation-dropdown-component">
<i style="font-size:1.1em" class="language icon"></i>
</div>
<div class="translation-dropdown-component">
{{stream.translations.length}} {{t 'languages'}}
</div>
<div class="translation-dropdown-component">
<i style="margin-left: 0 !important;text-align: right;"
class="dropdown icon"> </i>
</div>
</div>
<div class="ui translation menu">
{{#each-in stream.translations as |key channel|}}
<div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
{{/each-in}}
</div>
</UiDropdown>
</div>
</div>
{{/if}}
</a>

{{/each}}
</div>
</div>
Expand Down
13 changes: 2 additions & 11 deletions app/components/public/stream/side-panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,18 +109,9 @@ export default class PublicStreamSidePanel extends Component<Args> {
}

@action
switchLanguage(channel: any): void {
this.selectingLanguage.setLanguage(channel.url);
switchLanguage(url: string): void {
this.selectingLanguage.setLanguage(url);
this.selectingLanguage.updateTranslationYTId();
this.selectingLanguage.setName(channel.name);
}

@action
switchRoom(stream: any) {
if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
this.selectingLanguage.setName(null);
}
this.selectingLanguage.setTranslationRoomId(stream.id)
}

@action
Expand Down
10 changes: 3 additions & 7 deletions app/components/public/stream/video-stream.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
@service
l10n: any;

@service
selectingLanguage: any;

@service
confirm: any;

Expand Down Expand Up @@ -60,6 +57,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
@tracked
provider = '';

@service
selectingLanguage: any;

@tracked
languageUrl = '';

Expand Down Expand Up @@ -166,10 +166,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
async setupRoomChat(stream:any) {
this.currentRoom = stream;
this.shown = false;
if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
this.selectingLanguage.setName(null);
}
this.selectingLanguage.setTranslationRoomId(stream.id)
this.eventCheckIn(this.args.event.identifier, stream.microlocationId)
}

Expand Down
27 changes: 0 additions & 27 deletions app/services/selecting-language.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { computed } from '@ember/object';

export default class SelectingLanguageService extends Service {
@tracked
selectingLanguage = null;

@tracked
name = null;

@tracked
translationRoomId = null;

@tracked
isStreamYardVisible = true;

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

setName(name) {
this.name = name;
}

setTranslationRoomId(roomId) {
this.translationRoomId = roomId;
}

setStreamYardVisibility(isVisible) {
this.isStreamYardVisible = isVisible;
}
Expand All @@ -47,16 +32,4 @@ export default class SelectingLanguageService extends Service {
getLanguage() {
return this.selectingLanguage;
}

getTranslationRoomId() {
return this.translationRoomId;
}

@computed('name')
get getName() {
if (this.name === 'Original') {
return null;
}
return this.name;
}
}
155 changes: 67 additions & 88 deletions app/styles/components/translation-dropdown.scss
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,80 @@
.translation.menu {
left: -6px !important;
width: 9.6rem !important;
.translation-dropdown-container {
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.language.icon {
font-size: 1.8em;
color: #808080;
.translation-dropdown-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}

.translation-dropdown {
padding: 2px;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%;
background-color: #d3d3d3;
}

.block-side-panel {
.translation-dropdown-component {
display: inline-block;
margin-left: auto;

.translation-dropdown-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 95px !important;
height: 33px !important;
margin-left: 10px !important;

.menu.transition.visible {
font-size: small !important;
width: 115px !important;
}

.text {
font-size: small !important;
color: #808080 !important;
}
}

.translation-dropdown-button {
border-radius: .28571429rem;
border-top-left-radius: .285714rem;
border-top-right-radius: .285714rem;
border-bottom-right-radius: .285714rem;
border-bottom-left-radius: .285714rem;
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-shadow: none;
display: flex;
justify-content: space-evenly;
flex-direction: column;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
background-color: buttonface;
padding: 1px 6px;
border-image: initial;
}

.dropdown-toggle {
width: 100%;

.translation-dropdown-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}

.translation-dropdown-component {
display: inline-block;
.translation-dropdown .ui.dropdown {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
}

.translation-dropdown-icon {
margin-left: 0 !important;
text-align: right;
color: #808080;
}
}
.translation-dropdown .ui.dropdown .menu {
background-color: #f9f9f9;
}

.translation-length {
font-size: .8em;
margin-left: 5px;
background-color: #808080;
border-radius: 100%;
color: #fff;
padding: 2px 5px;
margin-top: 1px;
}
}
.translation-dropdown .ui.dropdown .item {
color: #333;
}

.translate-hidden {
display: none !important;
}
}
.translation-dropdown .ui.dropdown i.dropdown.icon {
color: #333;
}

.translation-dropdown-container .ui.dropdown .menu > .custom-item {
padding: 16px 4px !important;
}
.translation-dropdown-button {
width: 9.6rem;
border-radius: .28571429rem;
border-top-left-radius: .285714rem;
border-top-right-radius: .285714rem;
border-bottom-right-radius: .285714rem;
border-bottom-left-radius: .285714rem;
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-shadow: none;
display: flex;
justify-content: space-evenly;
flex-direction: column;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
background-color: buttonface;
padding: 1px 6px;
border-image: initial;
}

.translation.menu {
left: -6px !important;
margin-top: 10px !important;
width: 9.6rem !important;
}

0 comments on commit 12b957b

Please sign in to comment.