making inset shadows work on avatars again

This commit is contained in:
Henry Jameson 2018-12-02 08:47:55 +03:00
parent 77ac42d919
commit bee738c815
6 changed files with 36 additions and 25 deletions

View file

@ -56,8 +56,8 @@
line-height: 0; line-height: 0;
&.better-shadow { &.better-shadow {
box-shadow: none; box-shadow: var(--avatarStatusShadowInset);
filter: drop-shadow(var(--avatarStatusShadowFilter)) filter: var(--avatarStatusShadowFilter)
} }
&.animated::before { &.animated::before {

View file

@ -469,8 +469,8 @@
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.better-shadow { &.better-shadow {
box-shadow: none; box-shadow: var(--avatarStatusShadowInset);
filter: drop-shadow(var(--avatarStatusShadowFilter)) filter: var(--avatarStatusShadowFilter)
} }
} }
@ -484,8 +484,8 @@
position: relative; position: relative;
&.better-shadow { &.better-shadow {
box-shadow: none; box-shadow: var(--avatarStatusShadowInset);
filter: drop-shadow(var(--avatarStatusShadowFilter)) filter: var(--avatarStatusShadowFilter)
} }
img { img {

View file

@ -282,12 +282,15 @@
<i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p"> <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
<code>filter: drop-shadow()</code> <code>filter: drop-shadow()</code>
</i18n> </i18n>
<i18n path="settings.style.shadows.filter_hint.text" tag="p"> <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
<i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
<code>drop-shadow</code> <code>drop-shadow</code>
<code>spread-radius</code> <code>spread-radius</code>
<code>inset</code> <code>inset</code>
</i18n> </i18n>
<p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p> <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
<code>box-shadow</code>
</i18n>
<p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p> <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
</div> </div>
</div> </div>

View file

@ -160,8 +160,8 @@
object-fit: cover; object-fit: cover;
&.better-shadow { &.better-shadow {
box-shadow: none; box-shadow: var(--avatarShadowInset);
filter: drop-shadow(var(--avatarStatusShadowFilter)) filter: var(--avatarShadowFilter)
} }
&.animated::before { &.animated::before {

View file

@ -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.", "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": { "filter_hint": {
"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", "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", "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
"inset_ignored": "Inset shadows using will be ignored", "inset_classic": "Inset shadows will be using {0}"
"inset_substituted": "Inset shadows will be substituted with {1} equivalent"
}, },
"components": { "components": {
"panel": "Panel", "panel": "Panel",

View file

@ -94,20 +94,22 @@ const setColors = (input, commit) => {
commit('setOption', { name: 'colors', value: theme.colors }) commit('setOption', { name: 'colors', value: theme.colors })
} }
const getCssShadow = (input) => { const getCssShadow = (input, usesDropShadow) => {
if (input.length === 0) { if (input.length === 0) {
return 'none' return 'none'
} }
return input.map((shad) => [ return input
shad.x, .filter(_ => usesDropShadow ? _.inset : _)
shad.y, .map((shad) => [
shad.blur, shad.x,
shad.spread shad.y,
].map(_ => _ + 'px').concat([ shad.blur,
getCssColor(shad.color, shad.alpha), shad.spread
shad.inset ? 'inset' : '' ].map(_ => _ + 'px').concat([
]).join(' ')).join(', ') getCssColor(shad.color, shad.alpha),
shad.inset ? 'inset' : ''
]).join(' ')).join(', ')
} }
const getCssShadowFilter = (input) => { const getCssShadowFilter = (input) => {
@ -125,7 +127,9 @@ const getCssShadowFilter = (input) => {
shad.blur / 2 shad.blur / 2
].map(_ => _ + 'px').concat([ ].map(_ => _ + 'px').concat([
getCssColor(shad.color, shad.alpha) getCssColor(shad.color, shad.alpha)
]).join(' ')).join(', ') ]).join(' '))
.map(_ => `drop-shadow(${_})`)
.join(' ')
} }
const getCssColor = (input, a) => { const getCssColor = (input, a) => {
@ -406,7 +410,11 @@ const generateShadows = (input) => {
.entries(shadows) .entries(shadows)
// TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally // 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 // 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(';') .join(';')
}, },
theme: { theme: {