From d5f3111093e4cd460838d50e2eac1841c0d258fd Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Wed, 28 Aug 2024 22:24:18 +0530 Subject: [PATCH 01/10] Add a new background color "blur" --- frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue | 2 +- frontend/src/styles/tailwind.css | 4 ++++ frontend/tailwind.config.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue index b7709abc7f8..2559bdaa93b 100644 --- a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue +++ b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue @@ -93,7 +93,7 @@ const radius = (i: number, j: number) => {
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index cff065fbed5..cfd696e6fdd 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -9,6 +9,7 @@ :root { --color-black: #000; + --color-black-72: #000000b8; --color-white: #fff; --color-yellow-3: #fde034; --color-pink-8: #ad1f85; @@ -69,6 +70,7 @@ --color-gray-12-80: #232323cc; --color-gray-12-90: #232323e5; --color-gray-13-0: #0d0d0d00; + --color-white-88: #ffffffe0; --color-white-0: #fff0; --color-info-1: #f5f7fb; --color-info-2: #e6edfc; @@ -144,6 +146,7 @@ --color-bg-error: var(--color-error-2); --color-bg-disabled: var(--color-gray-5); --color-bg-zero: var(--color-white-0); + --color-bg-blur: var(--color-white-88); --color-border: var(--color-gray-3); --color-border-hover: var(--color-gray-12); --color-border-secondary: var(--color-gray-12-20); @@ -187,6 +190,7 @@ --color-bg-error: var(--color-error-11); --color-bg-disabled: var(--color-gray-8); --color-bg-zero: var(--color-gray-13-0); + --color-bg-blur: var(--color-black-72); --color-border: var(--color-gray-11); --color-border-hover: var(--color-gray-1); --color-border-secondary: var(--color-gray-1-20); diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index bac0136c937..d22dbdb9fec 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -340,6 +340,7 @@ export default { error: "var(--color-bg-error)", disabled: "var(--color-bg-disabled)", zero: "var(--color-bg-zero)", + blur: "var(--color-bg-blur)", }, borderColor: { default: "var(--color-border)", From fbefb40947aa385f96b4e772b15c1bd16fc939ca Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Wed, 28 Aug 2024 22:35:01 +0530 Subject: [PATCH 02/10] Replace image blur effect with blur overlay --- .../src/components/VImageCell/VImageCell.vue | 16 +++++++++++----- .../unit/specs/components/v-image-cell.spec.js | 6 +++--- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index ec73347718f..9643a394a7f 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -12,6 +12,7 @@ import { IMAGE } from "~/constants/media" import { useSearchStore } from "~/stores/search" +import VIcon from "~/components/VIcon/VIcon.vue" import VLicense from "~/components/VLicense/VLicense.vue" import VLink from "~/components/VLink.vue" @@ -156,11 +157,8 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image) > +
{ it("is blurred when the image is sensitive", async () => { options.props.image.isSensitive = true - const { getByAltText } = await render(VImageCell, options) - const img = getByAltText("This image may contain sensitive content.") - expect(img).toHaveClass("blur-image") + const { getByTestId } = await render(VImageCell, options) + const overlay = getByTestId("blur-overlay") + expect(overlay).toBeVisible() }) it("is does not contain title anywhere when the image is sensitive", async () => { From 3e8b3c148a032fd08eba79f415111c7741cf32af Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Wed, 28 Aug 2024 22:58:51 +0530 Subject: [PATCH 03/10] Switch between license info and "Sensitive content" --- frontend/src/components/VImageCell/VImageCell.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index 9643a394a7f..628c8bb7e7c 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -190,11 +190,14 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image) shouldBlur ? `${$t("sensitiveContent.title.image")}` : image.title }} - +
+ + +
From d4026101cd55f9a45eba3551449096e54c57e751 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Wed, 28 Aug 2024 23:18:39 +0530 Subject: [PATCH 04/10] Handle style differences between licenses and "Sensitive content" note --- frontend/src/components/VImageCell/VImageCell.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index 628c8bb7e7c..fa65bc5c3fa 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -178,12 +178,14 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image)

{{ From 86c73128f376bef3d48480350808e2ae9095e94e Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 29 Aug 2024 10:25:08 +0530 Subject: [PATCH 05/10] Fix eye icons to use `currentColor` instead of a hardcoded value --- frontend/src/assets/svg/raw/eye-closed.svg | 2 +- frontend/src/assets/svg/raw/eye-open.svg | 2 +- frontend/src/assets/svg/sprite/icons.svg | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/assets/svg/raw/eye-closed.svg b/frontend/src/assets/svg/raw/eye-closed.svg index 5531fde5f56..469a1f5ccf7 100644 --- a/frontend/src/assets/svg/raw/eye-closed.svg +++ b/frontend/src/assets/svg/raw/eye-closed.svg @@ -1,5 +1,5 @@ + fill="currentColor" /> diff --git a/frontend/src/assets/svg/raw/eye-open.svg b/frontend/src/assets/svg/raw/eye-open.svg index 843bd90a13b..8270e1551f4 100644 --- a/frontend/src/assets/svg/raw/eye-open.svg +++ b/frontend/src/assets/svg/raw/eye-open.svg @@ -1,5 +1,5 @@ + fill="currentColor" /> diff --git a/frontend/src/assets/svg/sprite/icons.svg b/frontend/src/assets/svg/sprite/icons.svg index 54d9127acc8..8612295a7ba 100644 --- a/frontend/src/assets/svg/sprite/icons.svg +++ b/frontend/src/assets/svg/sprite/icons.svg @@ -11,8 +11,8 @@ - - + + From c986e1a67b830a000699a112e3a60779c20e12bb Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 29 Aug 2024 10:29:07 +0530 Subject: [PATCH 06/10] Remove underline when hovering on the link --- frontend/src/components/VImageCell/VImageCell.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index fa65bc5c3fa..61f0390db46 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -144,7 +144,7 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image) itemprop="contentUrl" :title="contextSensitiveTitle" :href="imageLink" - class="group relative block w-full overflow-hidden rounded-sm text-gray-2 focus-visible:outline-3 focus-visible:outline-offset-4" + class="group relative block w-full overflow-hidden rounded-sm text-gray-2 hover:no-underline focus-visible:outline-3 focus-visible:outline-offset-4" :aria-label="contextSensitiveTitle" @mousedown="sendSelectSearchResultEvent" > From 3e057ba7fbdb2725a1cb2672d3d08b94539bb103 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 29 Aug 2024 10:34:35 +0530 Subject: [PATCH 07/10] Replace `div` with `span` --- frontend/src/components/VImageCell/VImageCell.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index 61f0390db46..8f5ff2f7670 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -169,14 +169,14 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image) @load="getImgDimension" @error="onImageLoadError($event)" /> - +