From 12b957b69d1b08cef490cd8e3a9d74b0d1ea5c3e Mon Sep 17 00:00:00 2001 From: Norbert Preining Date: Fri, 22 Mar 2024 00:05:53 +0900 Subject: [PATCH] Revert "Feature-9082 Enhance language dropdown button (#9105)" This reverts commit 28b3a3610c8f742af056082f8c44a8b6720018de. --- app/components/public/stream/side-panel.hbs | 46 +++--- app/components/public/stream/side-panel.ts | 13 +- app/components/public/stream/video-stream.ts | 10 +- app/services/selecting-language.js | 27 --- .../components/translation-dropdown.scss | 155 ++++++++---------- 5 files changed, 94 insertions(+), 157 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 4f69d01352e..670ecba4882 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -60,40 +60,38 @@
{{#each this.streams as |stream|}} - + + {{truncate (uppercase stream.name) 1 false}} {{stream.name}} {{#if (gt stream.translations.length 1)}} -
-
+
diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts index 6c593fb1681..227baf29b08 100644 --- a/app/components/public/stream/side-panel.ts +++ b/app/components/public/stream/side-panel.ts @@ -109,18 +109,9 @@ export default class PublicStreamSidePanel extends Component { } @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 diff --git a/app/components/public/stream/video-stream.ts b/app/components/public/stream/video-stream.ts index aac9ec505bb..4553e7aca4d 100644 --- a/app/components/public/stream/video-stream.ts +++ b/app/components/public/stream/video-stream.ts @@ -25,9 +25,6 @@ export default class PublicStreamVideoStream extends Component { @service l10n: any; - @service - selectingLanguage: any; - @service confirm: any; @@ -60,6 +57,9 @@ export default class PublicStreamVideoStream extends Component { @tracked provider = ''; + @service + selectingLanguage: any; + @tracked languageUrl = ''; @@ -166,10 +166,6 @@ export default class PublicStreamVideoStream extends Component { 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) } diff --git a/app/services/selecting-language.js b/app/services/selecting-language.js index 478f8862e2a..62224ff29e0 100644 --- a/app/services/selecting-language.js +++ b/app/services/selecting-language.js @@ -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; @@ -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; } @@ -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; - } } diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 2a89293df2a..7c0d4715a44 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -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; +}