From 0bb0a02fdec89285293115a4765a72ab2504b600 Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Thu, 1 Aug 2024 16:00:21 +0700 Subject: [PATCH 1/7] Only show audio translation option if available --- webapp/src/views/rooms/item.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue index 5c18dbf2..561cf234 100644 --- a/webapp/src/views/rooms/item.vue +++ b/webapp/src/views/rooms/item.vue @@ -8,7 +8,7 @@ reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'") //- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") // Added dropdown menu for audio translations near the reactions bar - AudioTranslationDropdown(:languages="languages", @languageChanged="handleLanguageChange") + AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange") media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']") roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room") landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']") From bebea7fd2c925d05477db83e8d45dd378461cb85 Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Wed, 7 Aug 2024 16:07:31 +0700 Subject: [PATCH 2/7] shrink reaction bar --- webapp/src/components/AudioTranslationDropdown.vue | 7 +------ webapp/src/components/ReactionsBar.vue | 7 +++++-- webapp/src/views/rooms/item.vue | 4 ++-- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue index 7e0f1143..7b4b28e5 100644 --- a/webapp/src/components/AudioTranslationDropdown.vue +++ b/webapp/src/components/AudioTranslationDropdown.vue @@ -1,6 +1,5 @@ <template lang="pug"> div.c-audio-translation - h4 Audio Translation bunt-select( name="audio-translation", v-model="selectedLanguage", @@ -43,11 +42,7 @@ export default { <style scoped> .c-audio-translation { - margin-bottom: 3em; -} - -.c-audio-translation h4 { - margin-bottom: 0.5em; + height: 65px; } .bunt-select { diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index b8f25329..60fd7329 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -39,7 +39,7 @@ export default { <style lang="stylus"> .c-reactions-bar position: relative - width: 64px + margin-left: 10px height: 56px .actions position: absolute @@ -61,12 +61,15 @@ export default { width: @height display: inline-block &:not(.expanded) + width: 50px + margin-left: 10px .actions:hover cursor: pointer background-color: $clr-grey-100 .bunt-icon-button pointer-events: none &.expanded + width: 230px .actions - transform: translateX(calc(64px - 100% - 16px)) + transform: translateX(calc(64px - 21% - 16px)); </style> diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue index c1f36bec..201eaa16 100644 --- a/webapp/src/views/rooms/item.vue +++ b/webapp/src/views/rooms/item.vue @@ -5,10 +5,10 @@ reactions-overlay(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']") .stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null") .stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']") - reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'") - //- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") + //- reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'") // Added dropdown menu for audio translations near the reactions bar AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange") + reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']") roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room") landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']") From c677a684cca708d71f3a878a27b12c7eec2cab92 Mon Sep 17 00:00:00 2001 From: Tri Truong <tmtri@tma.com.vn> Date: Wed, 7 Aug 2024 16:22:33 +0700 Subject: [PATCH 3/7] update css for reaction bar --- webapp/src/components/ReactionsBar.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index 60fd7329..4fd16e9d 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -54,14 +54,16 @@ export default { transition: transform .3s ease .bunt-icon-button icon-button-style() + height: 30px !important + width: 30px !important &:not(:first-child) margin-left: 8px .emoji - height: 28px + height: 30px width: @height display: inline-block &:not(.expanded) - width: 50px + width: 40px margin-left: 10px .actions:hover cursor: pointer From 7ec51f376e26ed02b749914eb5e77f71756d2a43 Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Wed, 7 Aug 2024 17:23:18 +0700 Subject: [PATCH 4/7] shrink emoji bar --- webapp/src/components/AudioTranslationDropdown.vue | 1 + webapp/src/components/ReactionsBar.vue | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue index 7b4b28e5..fd00f6f4 100644 --- a/webapp/src/components/AudioTranslationDropdown.vue +++ b/webapp/src/components/AudioTranslationDropdown.vue @@ -43,6 +43,7 @@ export default { <style scoped> .c-audio-translation { height: 65px; + padding-top: 3px; } .bunt-select { diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index 4fd16e9d..2a897771 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -52,6 +52,7 @@ export default { border-radius: 24px padding: 4px transition: transform .3s ease + z-index: 9000 .bunt-icon-button icon-button-style() height: 30px !important @@ -71,7 +72,7 @@ export default { .bunt-icon-button pointer-events: none &.expanded - width: 230px + width: 205px .actions transform: translateX(calc(64px - 21% - 16px)); </style> From e4538542018859a109215586faa0c3edeed530d3 Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Wed, 7 Aug 2024 20:14:54 +0700 Subject: [PATCH 5/7] move reaction bar to left side --- webapp/src/components/AudioTranslationDropdown.vue | 8 ++++++++ webapp/src/components/ReactionsBar.vue | 14 +++++++++----- webapp/src/views/rooms/item.vue | 5 +++-- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue index fd00f6f4..ba03660c 100644 --- a/webapp/src/components/AudioTranslationDropdown.vue +++ b/webapp/src/components/AudioTranslationDropdown.vue @@ -44,6 +44,14 @@ export default { .c-audio-translation { height: 65px; padding-top: 3px; + margin-right: 5px; +} + +@media (max-width: 992px) { + .c-audio-translation { + width: 50%; + margin-right: 5px; + } } .bunt-select { diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index 2a897771..f4bb892a 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -41,6 +41,8 @@ export default { position: relative margin-left: 10px height: 56px + +above('m') + right: 160px .actions position: absolute bottom: 5px @@ -55,8 +57,8 @@ export default { z-index: 9000 .bunt-icon-button icon-button-style() - height: 30px !important - width: 30px !important + height: 27px !important + width: 27px !important &:not(:first-child) margin-left: 8px .emoji @@ -65,14 +67,16 @@ export default { display: inline-block &:not(.expanded) width: 40px - margin-left: 10px + +below('m') + left: -150px .actions:hover cursor: pointer background-color: $clr-grey-100 .bunt-icon-button pointer-events: none &.expanded - width: 205px .actions - transform: translateX(calc(64px - 21% - 16px)); + transform: translateX(calc(50px - 21% - 15px)); + +above('m') + transform: translateX(calc(50px - 21% - 50px)); </style> diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue index 201eaa16..2956de95 100644 --- a/webapp/src/views/rooms/item.vue +++ b/webapp/src/views/rooms/item.vue @@ -5,10 +5,9 @@ reactions-overlay(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']") .stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null") .stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']") - //- reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'") // Added dropdown menu for audio translations near the reactions bar + reactions-bar(:expanded="$mq.above['m'] ? true : activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange") - reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']") roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room") landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']") @@ -173,6 +172,8 @@ export default { height: 2px width: calc(100% - 16px) background-color: var(--clr-primary) + +below('m') + justify-content: space-between .stage-tool-blocker position: fixed top: 0 From bf4d36c421bffdf75931cc8e7deaa48dcd5f42bd Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Fri, 9 Aug 2024 17:55:53 +0700 Subject: [PATCH 6/7] update size for emoji icon --- webapp/src/components/ReactionsBar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index f4bb892a..b70004e1 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -62,7 +62,7 @@ export default { &:not(:first-child) margin-left: 8px .emoji - height: 30px + height: 26px width: @height display: inline-block &:not(.expanded) From 9f8bf7b08787e8c2bdb99f939751dd374d172d77 Mon Sep 17 00:00:00 2001 From: odkhang <odkhang@tma.com.vn> Date: Fri, 9 Aug 2024 18:05:03 +0700 Subject: [PATCH 7/7] disable expand action for reation bar --- webapp/src/components/ReactionsBar.vue | 1 - webapp/src/views/rooms/item.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue index b70004e1..00742534 100644 --- a/webapp/src/components/ReactionsBar.vue +++ b/webapp/src/components/ReactionsBar.vue @@ -54,7 +54,6 @@ export default { border-radius: 24px padding: 4px transition: transform .3s ease - z-index: 9000 .bunt-icon-button icon-button-style() height: 27px !important diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue index 2956de95..fcf0bf7d 100644 --- a/webapp/src/views/rooms/item.vue +++ b/webapp/src/views/rooms/item.vue @@ -6,7 +6,7 @@ .stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null") .stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']") // Added dropdown menu for audio translations near the reactions bar - reactions-bar(:expanded="$mq.above['m'] ? true : activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'") + reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'") AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange") media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']") roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")