From bee738c815f287c4605eafd52c5565cdb07d5721 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 2 Dec 2018 08:47:55 +0300 Subject: [PATCH] making inset shadows work on avatars again --- .../notifications/notifications.scss | 4 +-- src/components/status/status.vue | 8 ++--- .../style_switcher/style_switcher.vue | 7 ++-- .../user_card_content/user_card_content.vue | 4 +-- src/i18n/en.json | 6 ++-- src/services/style_setter/style_setter.js | 32 ++++++++++++------- 6 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index d17ae25d..a6468e01 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -56,8 +56,8 @@ line-height: 0; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } &.animated::before { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6597d56b..428383e3 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -469,8 +469,8 @@ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } } @@ -484,8 +484,8 @@ position: relative; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) } img { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 66fe0f6b..c0a7da69 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -282,12 +282,15 @@ filter: drop-shadow() - +

{{$t('settings.style.shadows.filter_hint.avatar_inset')}}

+ drop-shadow spread-radius inset -

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+ + box-shadow +

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index cca418ff..e8b0ebf9 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -160,8 +160,8 @@ object-fit: cover; &.better-shadow { - box-shadow: none; - filter: drop-shadow(var(--avatarStatusShadowFilter)) + box-shadow: var(--avatarShadowInset); + filter: var(--avatarShadowFilter) } &.animated::before { diff --git a/src/i18n/en.json b/src/i18n/en.json index 7f5a2a4f..39da04d8 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -238,10 +238,10 @@ "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", "filter_hint": { "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", - "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.", + "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.", "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", - "inset_ignored": "Inset shadows using will be ignored", - "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + "inset_classic": "Inset shadows will be using {0}" }, "components": { "panel": "Panel", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index cff81c40..44a36c88 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -94,20 +94,22 @@ const setColors = (input, commit) => { commit('setOption', { name: 'colors', value: theme.colors }) } -const getCssShadow = (input) => { +const getCssShadow = (input, usesDropShadow) => { if (input.length === 0) { return 'none' } - return input.map((shad) => [ - shad.x, - shad.y, - shad.blur, - shad.spread - ].map(_ => _ + 'px').concat([ - getCssColor(shad.color, shad.alpha), - shad.inset ? 'inset' : '' - ]).join(' ')).join(', ') + return input + .filter(_ => usesDropShadow ? _.inset : _) + .map((shad) => [ + shad.x, + shad.y, + shad.blur, + shad.spread + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha), + shad.inset ? 'inset' : '' + ]).join(' ')).join(', ') } const getCssShadowFilter = (input) => { @@ -125,7 +127,9 @@ const getCssShadowFilter = (input) => { shad.blur / 2 ].map(_ => _ + 'px').concat([ getCssColor(shad.color, shad.alpha) - ]).join(' ')).join(', ') + ]).join(' ')) + .map(_ => `drop-shadow(${_})`) + .join(' ') } const getCssColor = (input, a) => { @@ -406,7 +410,11 @@ const generateShadows = (input) => { .entries(shadows) // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally // convert all non-inset shadows into filter: drop-shadow() to boost performance - .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .map(([k, v]) => [ + `--${k}Shadow: ${getCssShadow(v)}`, + `--${k}ShadowFilter: ${getCssShadowFilter(v)}`, + `--${k}ShadowInset: ${getCssShadow(v, true)}` + ].join(';')) .join(';') }, theme: {