From 75f0c191dd8ad029561901ce0dab8e10226b95f7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 14 Nov 2018 21:53:51 +0300 Subject: some initial work for user highlight v2 --- src/components/user_card_content/user_card_content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 76a5577e..eae436a9 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,7 +5,7 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const color = this.$store.state.config.colors.bg + const color = this.$store.state.config.customTheme.colors.bg if (color) { const rgb = hex2rgb(color) const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` -- cgit v1.2.3-70-g09d2 From aa93664fd68e3fc27821fc1b03af25b6a6e6ae87 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 03:51:57 +0300 Subject: fix coldboot --- src/components/user_card_content/user_card_content.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index eae436a9..4c7b6a68 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,9 +5,8 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors.bg - if (color) { - const rgb = hex2rgb(color) + const rgb = this.$store.state.config.customTheme.colors.bg + if (rgb) { const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, -- cgit v1.2.3-70-g09d2 From 50562eb6b700cee84f70210fd1adc8df3b18b92b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 04:26:45 +0300 Subject: fix lint, for shadows, it's now possible to refer css variables as colors --- .../user_card_content/user_card_content.js | 1 - src/services/style_setter/style_setter.js | 20 +++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 4c7b6a68..e8073021 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -1,5 +1,4 @@ import StillImage from '../still-image/still-image.vue' -import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 45e950f0..1b7ec7f2 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -101,11 +101,29 @@ const getCssShadow = (input) => { shad.blur, shad.spread ].map(_ => _ + 'px').concat([ - rgb2rgba({...(hex2rgb(shad.color)), a: shad.alpha}), + getCssColor(shad.color, shad.alpha), shad.inset ? 'inset' : '' ]).join(' ')).join(', ') } +const getCssColor = (input, a) => { + console.log(input) + let rgb = {} + if (typeof input === 'object') { + rgb = input + } else if (typeof input === 'string') { + if (input.startsWith('#')) { + rgb = hex2rgb(input) + } else if (input.startsWith('--')) { + return `var(${input})` + } else { + return input + } + } + console.log(rgb2rgba({ ...rgb, a })) + return rgb2rgba({ ...rgb, a }) +} + const generateColors = (input) => { const colors = {} const opacity = Object.assign({ -- cgit v1.2.3-70-g09d2 From dc3df7bc4e91abf4a911e4c5ecc0c627d00dcfb1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 18:22:05 +0300 Subject: fixes --- src/components/notifications/notifications.scss | 1 + src/components/post_status_form/post_status_form.vue | 4 ++-- src/components/timeline/timeline.vue | 2 +- src/components/user_card_content/user_card_content.js | 6 ++++-- src/services/style_setter/style_setter.js | 3 +++ 5 files changed, 11 insertions(+), 5 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 26455ffb..3f22b690 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -35,6 +35,7 @@ right: 0; left: 0; bottom: 0; + pointer-events: none; } &.unseen { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 4514e79f..751b048a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -154,7 +154,7 @@ margin-left: $fallback--attachmentRadius; margin-left: var(--attachmentRadius, $fallback--attachmentRadius); background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--btn, $fallback--fg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -292,7 +292,7 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--lightBg, $fallback--fg); } } } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c2d5b9e6..39f1b5bc 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -75,6 +75,6 @@ padding: 10px; z-index: 1; background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--panel, $fallback--fg); } diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e8073021..6f9ed9fe 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -1,11 +1,13 @@ import StillImage from '../still-image/still-image.vue' +import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const rgb = this.$store.state.config.customTheme.colors.bg - if (rgb) { + const color = this.$store.state.config.customTheme.colors.bg + if (color) { + const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1b7ec7f2..57bd2841 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -202,6 +202,9 @@ const generateColors = (input) => { colors[k + 'Link'].a = v colors['panelFaint'].a = v } + if (k === 'bg') { + colors['lightBg'].a = v + } if (colors[k]) { colors[k].a = v } else { -- cgit v1.2.3-70-g09d2 From f039b79e5ac7da33c3664241e0d20d3c6964872f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 20:25:14 +0300 Subject: unbreak user profiles --- src/components/user_card_content/user_card_content.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 064c984d..e7ca21c7 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -12,7 +12,10 @@ export default { }, computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors.bg + const color = this.$store.state.config.customTheme.colors ? + this.$store.state.config.customTheme.colors.bg : // v2 + this.$store.state.config.colors.bg // v1 + if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` -- cgit v1.2.3-70-g09d2 From f8e17cbdc58651b17a4f5639d3719a7e533b0d8b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 21:22:44 +0300 Subject: lint fix --- src/components/user_card_content/user_card_content.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e7ca21c7..254d1666 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -12,9 +12,9 @@ export default { }, computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors ? - this.$store.state.config.customTheme.colors.bg : // v2 - this.$store.state.config.colors.bg // v1 + const color = this.$store.state.config.customTheme.colors + ? this.$store.state.config.customTheme.colors.bg // v2 + : this.$store.state.config.colors.bg // v1 if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color -- cgit v1.2.3-70-g09d2 From 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 30 Nov 2018 16:39:07 +0300 Subject: avatars shadows, also allows drop-shadow use --- src/components/notification/notification.js | 3 ++- src/components/notification/notification.vue | 2 +- src/components/notifications/notifications.scss | 6 +++++ src/components/status/status.js | 3 ++- src/components/status/status.vue | 13 +++++++++- src/components/style_switcher/style_switcher.vue | 12 ++++++++++ .../user_card_content/user_card_content.js | 3 ++- .../user_card_content/user_card_content.vue | 7 +++++- src/i18n/en.json | 7 ++++++ src/modules/interface.js | 6 +++++ src/services/style_setter/style_setter.js | 28 ++++++++++++++++++++-- 11 files changed, 82 insertions(+), 8 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index c786f2cc..4dea63bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -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: [ diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 72c1ca69..f98afbe0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 87c89f6a..d17ae25d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -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; } diff --git a/src/components/status/status.js b/src/components/status/status.js index 10716583..725bc3f8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -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: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4541c560..26be335c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -21,7 +21,7 @@
- +
@@ -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%; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fa173b98..66fe0f6b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -278,6 +278,18 @@
+
+ + filter: drop-shadow() + + + drop-shadow + spread-radius + inset + +

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

+

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

+
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 254d1666..97cd4983 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -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: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5529948e..cca418ff 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -10,7 +10,7 @@
- +
@@ -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; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 8847b11e..7f5a2a4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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", diff --git a/src/modules/interface.js b/src/modules/interface.js index 07489685..132fb08d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -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)') + ) } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 7c375206..cff81c40 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -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 } -- cgit v1.2.3-70-g09d2