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;
&.better-shadow {
box-shadow: none;
filter: drop-shadow(var(--avatarStatusShadowFilter))
box-shadow: var(--avatarStatusShadowInset);
filter: var(--avatarStatusShadowFilter)
}
&.animated::before {

View file

@ -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 {

View file

@ -282,12 +282,15 @@
<i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
<code>filter: drop-shadow()</code>
</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>spread-radius</code>
<code>inset</code>
</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>
</div>
</div>

View file

@ -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 {

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.",
"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",

View file

@ -94,12 +94,14 @@ 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) => [
return input
.filter(_ => usesDropShadow ? _.inset : _)
.map((shad) => [
shad.x,
shad.y,
shad.blur,
@ -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: {