moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

avatars shadows, also allows drop-shadow use

This commit is contained in:
Henry Jameson 2018-11-30 16:39:07 +03:00
parent b45fc6c652
commit 406df4399b
11 changed files with 82 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/notification/notification.js
View File

@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
const Notification = {
data () {
return {
userExpanded: false
userExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
props: [

2
src/components/notification/notification.vue
View File

@ -2,7 +2,7 @@
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
<div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
<a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
<StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
</a>
<div class='notification-right'>
<div class="usercard notification-usercard" v-if="userExpanded">

6
src/components/notifications/notifications.scss
View File

@ -49,11 +49,17 @@
.avatar-compact {
width: 32px;
height: 32px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
overflow: hidden;
line-height: 0;
&.better-shadow {
box-shadow: none;
filter: drop-shadow(var(--avatarStatusShadowFilter))
}
&.animated::before {
display: none;
}

3
src/components/status/status.js
View File

@ -33,7 +33,8 @@ const Status = {
showingTall: false,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
computed: {

13
src/components/status/status.vue
View File

@ -21,7 +21,7 @@
<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
<div v-if="!noHeading" class="media-left">
<a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
<StillImage class='avatar' :class="{'avatar-compact': compact}" :src="status.user.profile_image_url_original"/>
<StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/>
</a>
</div>
<div class="status-body">
@ -464,8 +464,14 @@
.status .avatar-compact {
width: 32px;
height: 32px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.better-shadow {
box-shadow: none;
filter: drop-shadow(var(--avatarStatusShadowFilter))
}
}
.avatar {
@ -477,6 +483,11 @@
overflow: hidden;
position: relative;
&.better-shadow {
box-shadow: none;
filter: drop-shadow(var(--avatarStatusShadowFilter))
}
img {
width: 100%;
height: 100%;

12
src/components/style_switcher/style_switcher.vue
View File

@ -278,6 +278,18 @@
<button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
</div>
<shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
<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">
<code>drop-shadow</code>
<code>spread-radius</code>
<code>inset</code>
</i18n>
<p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
<p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
</div>
</div>
<div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
<div class="tab-header">

3
src/components/user_card_content/user_card_content.js
View File

@ -7,7 +7,8 @@ export default {
return {
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
? this.$store.state.instance.hideUserStats
: this.$store.state.config.hideUserStats
: this.$store.state.config.hideUserStats,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
computed: {

7
src/components/user_card_content/user_card_content.vue
View File

@ -10,7 +10,7 @@
</a>
<div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<StillImage class="avatar" :src="user.profile_image_url_original"/>
<StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
</router-link>
<div class="name-and-screen-name">
<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
@ -159,6 +159,11 @@
box-shadow: var(--avatarShadow);
object-fit: cover;
&.better-shadow {
box-shadow: none;
filter: drop-shadow(var(--avatarStatusShadowFilter))
}
&.animated::before {
display: none;
}

7
src/i18n/en.json
View File

@ -236,6 +236,13 @@
"spread": "Spread",
"inset": "Inset",
"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.",
"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"
},
"components": {
"panel": "Panel",
"panelHeader": "Panel header",

6
src/modules/interface.js
View File

@ -4,6 +4,12 @@ const defaultState = {
settings: {
currentSaveStateNotice: null,
noticeClearTimeout: null
},
browserSupport: {
cssFilter: window.CSS && window.CSS.supports && (
window.CSS.supports('filter', 'drop-shadow(0 0)') ||
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
}
}

28
src/services/style_setter/style_setter.js
View File

@ -110,6 +110,24 @@ const getCssShadow = (input) => {
]).join(' ')).join(', ')
}
const getCssShadowFilter = (input) => {
if (input.length === 0) {
return 'none'
}
return input
// drop-shadow doesn't support inset or spread
.filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0)
.map((shad) => [
shad.x,
shad.y,
// drop-shadow's blur is twice as strong compared to box-shadow
shad.blur / 2
].map(_ => _ + 'px').concat([
getCssColor(shad.color, shad.alpha)
]).join(' ')).join(', ')
}
const getCssColor = (input, a) => {
let rgb = {}
if (typeof input === 'object') {
@ -384,7 +402,12 @@ const generateShadows = (input) => {
return {
rules: {
shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
shadows: Object
.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)}`)
.join(';')
},
theme: {
shadows
@ -467,5 +490,6 @@ export {
generateFonts,
generatePreset,
composePreset,
getCssShadow
getCssShadow,
getCssShadowFilter
}