From 4e08a849723568c6ee2173a45b5d33955ecd73e6 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Thu, 26 Oct 2023 11:46:27 +0300 Subject: [PATCH 01/12] Update global audio component --- .../components/VAudioTrack/VAudioControl.vue | 2 +- .../VAudioTrack/VGlobalAudioTrack.vue | 8 +++-- .../VAudioTrack/layouts/VGlobalLayout.vue | 25 +++++++------- frontend/src/components/VButton.vue | 3 ++ .../VGlobalAudioSection.vue | 33 +++++++++++-------- frontend/src/layouts/content-layout.vue | 10 +++--- frontend/src/layouts/default.vue | 6 +--- frontend/src/layouts/search-layout.vue | 7 ++-- frontend/src/types/button.ts | 8 ++++- 9 files changed, 58 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue index 5820c8cf295..f6adc5d451f 100644 --- a/frontend/src/components/VAudioTrack/VAudioControl.vue +++ b/frontend/src/components/VAudioTrack/VAudioControl.vue @@ -54,7 +54,7 @@ const statusIconMap = { const layoutConnectionsMap: Record = { row: "end", - global: "all", + global: "top-end", box: "none", full: "none", } as const diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue index 1f1bc9fac41..89c60a60075 100644 --- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue +++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue @@ -15,9 +15,11 @@ @@ -40,7 +42,7 @@ import type { AudioInteraction } from "~/types/analytics" import type { AudioDetail } from "~/types/media" import type { AudioStatus } from "~/constants/audio" -import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue" +import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue" import VWaveform from "~/components/VAudioTrack/VWaveform.vue" import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue" @@ -51,7 +53,7 @@ import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue" export default defineComponent({ name: "VGlobalAudioTrack", components: { - VPlayPause, + VAudioControl, VWaveform, VGlobalLayout, }, diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue index 29166876cd4..ea5a5243ae0 100644 --- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue +++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue @@ -2,19 +2,20 @@
- +
-
- - {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }} - - - +
+
+ + {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }} + +
+
@@ -54,7 +55,7 @@ export default defineComponent({ diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue index a144a62b787..ccb21012581 100644 --- a/frontend/src/layouts/content-layout.vue +++ b/frontend/src/layouts/content-layout.vue @@ -2,7 +2,7 @@
@@ -23,10 +23,10 @@ mode="internal" class="border-t border-dark-charcoal-20 bg-white" /> +
- -
+
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue index 0d89db8bbff..5e7a9ce5f6e 100644 --- a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue +++ b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue @@ -31,7 +31,7 @@ import type { TranslateResult } from "vue-i18n" /** * The buttons placed inside the mobile search bar in the header. - * They are based on the VOldIconButton, look like they have a smallish focus area + * They are based on the VButton, look like they have a smallish focus area * (32x32px), but actually have a larger tappable area of 48x48px to comply with * accessibility requirements. */ diff --git a/frontend/src/components/meta/VCloseButton.stories.mdx b/frontend/src/components/meta/VCloseButton.stories.mdx deleted file mode 100644 index 5a86dc935da..00000000000 --- a/frontend/src/components/meta/VCloseButton.stories.mdx +++ /dev/null @@ -1,111 +0,0 @@ -import { - ArgsTable, - Canvas, - Description, - Meta, - Story, -} from "@storybook/addon-docs" -import VCloseButton from "~/components/VCloseButton.vue" - - - -export const buttonVariants = [ - "filled-white", - "filled-white-light", - "filled-dark", - "black", -] - -export const Template = (args) => ({ - template: ` -
- -
- `, - components: { VCloseButton }, - setup() { - return { args } - }, -}) - -# VCloseButton - - - - - - {Template.bind({})} - - - - - -## VCloseButton variants - -export const VariantsTemplate = (args) => ({ - template: ` -
- -
- `, - components: { VCloseButton }, - setup() { - return { args } - }, - data: () => ({ - buttonVariants, - }), -}) - - - - {VariantsTemplate.bind({})} - - From 71494a6f834134e0b68ef940710ac9feac5a7e4e Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Mon, 30 Oct 2023 19:39:14 +0300 Subject: [PATCH 03/12] Add changes from code review Set border to dark-charcoal opacity-20, corner radius to 4px Signed-off-by: Olga Bulat --- .../components/VGlobalAudioSection/VGlobalAudioSection.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue index dfe0a095461..586c51505f7 100644 --- a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue +++ b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue @@ -1,7 +1,9 @@