From 44dea9f3646a5c27083dfe6cd6b1522e11c7dc69 Mon Sep 17 00:00:00 2001 From: xenofem Date: Sun, 9 Feb 2020 17:25:24 -0500 Subject: [PATCH 001/156] Allow emoji suggestions based on a match anywhere in the emoji name, but improve sorting --- src/components/emoji_input/suggestor.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index aec5c39d..9e437ccc 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -29,17 +29,21 @@ export default data => input => { export const suggestEmoji = emojis => input => { const noPrefix = input.toLowerCase().substr(1) return emojis - .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix)) + .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix)) .sort((a, b) => { let aScore = 0 let bScore = 0 - // Make custom emojis a priority - aScore += a.imageUrl ? 10 : 0 - bScore += b.imageUrl ? 10 : 0 + // Prioritize emoji that start with the input string + aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0 + bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0 - // Sort alphabetically - const alphabetically = a.displayText > b.displayText ? 1 : -1 + // Sort by length + aScore -= a.displayText.length + bScore -= b.displayText.length + + // Break ties alphabetically + const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5 return bScore - aScore + alphabetically }) From 02864bc07b2ab2f08232ba1c4c27079454dc87ef Mon Sep 17 00:00:00 2001 From: xenofem Date: Mon, 10 Feb 2020 09:32:07 -0500 Subject: [PATCH 002/156] Prioritize custom emoji a lot and boost exact matches to the top --- src/components/emoji_input/suggestor.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 9e437ccc..15a71eff 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -34,7 +34,15 @@ export const suggestEmoji = emojis => input => { let aScore = 0 let bScore = 0 - // Prioritize emoji that start with the input string + // An exact match always wins + aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0 + bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0 + + // Prioritize custom emoji a lot + aScore += a.imageUrl ? 100 : 0 + bScore += b.imageUrl ? 100 : 0 + + // Prioritize prefix matches somewhat aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0 bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0 From d19c64314ff08391a2649681e6b64d052e600059 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 20 Feb 2020 18:13:40 +0200 Subject: [PATCH 003/156] stop using customTheme in user card, instead use color slots. fix for opacity inheritance polluting inheritors --- src/components/user_card/user_card.js | 21 +++++-------------- src/components/user_card/user_card.vue | 1 + src/services/theme_data/pleromafe.js | 16 ++++++++++++++ src/services/theme_data/theme_data.service.js | 3 ++- 4 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 2f649910..1cdbd3fa 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -4,7 +4,6 @@ import ProgressButton from '../progress_button/progress_button.vue' import FollowButton from '../follow_button/follow_button.vue' import ModerationTools from '../moderation_tools/moderation_tools.vue' import AccountActions from '../account_actions/account_actions.vue' -import { hex2rgb } from '../../services/color_convert/color_convert.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import { mapGetters } from 'vuex' @@ -30,21 +29,11 @@ export default { }] }, style () { - const color = this.$store.getters.mergedConfig.customTheme.colors - ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2 - : this.$store.getters.mergedConfig.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)` - - return { - backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, - backgroundImage: [ - `linear-gradient(to bottom, ${tintColor}, ${tintColor})`, - `url(${this.user.cover_photo})` - ].join(', ') - } + return { + backgroundImage: [ + `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`, + `url(${this.user.cover_photo})` + ].join(', ') } }, isOtherUser () { diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 3988ff1c..4ee040e8 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -286,6 +286,7 @@ mask-size: 100% 60%; border-top-left-radius: calc(var(--panelRadius) - 1px); border-top-right-radius: calc(var(--panelRadius) - 1px); + background-color: var(--profileBg); &.hide-bio { mask-size: 100% 40px; diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 33a2ed57..0c1fe543 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -8,6 +8,7 @@ export const LAYERS = { undelay: null, // root topBar: null, // no transparency support badge: null, // no transparency support + profileTint: null, // doesn't matter fg: null, bg: 'underlay', highlight: 'bg', @@ -29,6 +30,7 @@ export const LAYERS = { * this allows redefining it to something else */ export const DEFAULT_OPACITY = { + profileTint: 0.5, alert: 0.5, input: 0.5, faint: 0.5, @@ -119,6 +121,20 @@ export const SLOT_INHERITANCE = { cGreen: '#00FF00', cOrange: '#E3FF00', + profileBg: { + depends: ['bg'], + color: (mod, bg) => ({ + r: Math.floor(bg.r * 0.53), + g: Math.floor(bg.g * 0.56), + b: Math.floor(bg.b * 0.59) + }) + }, + profileTint: { + depends: ['bg'], + layer: 'profileTint', + opacity: 'profileTint' + }, + highlight: { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 75768795..e6ff82e6 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -351,7 +351,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ throw new Error('Couldn\'t generate color for ' + key) } const opacitySlot = getOpacitySlot(key) - if (opacitySlot && outputColor.a === undefined) { + const ownOpacitySlot = value.opacity + if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) { const dependencySlot = deps[0] if (dependencySlot && colors[dependencySlot] === 'transparent') { outputColor.a = 0 From 8bb5d775b4ce24193f8372a9b541e1ce270e839f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 20 Feb 2020 20:47:24 +0200 Subject: [PATCH 004/156] update pleroma-dark and pleroma-light --- static/styles.json | 4 +- static/themes/pleroma-dark.json | 543 +++++++++++++++++++++++++++++ static/themes/pleroma-light.json | 570 +++++++++++++++++++++++++++++++ 3 files changed, 1115 insertions(+), 2 deletions(-) create mode 100644 static/themes/pleroma-dark.json create mode 100644 static/themes/pleroma-light.json diff --git a/static/styles.json b/static/styles.json index 3349a837..23f57c65 100644 --- a/static/styles.json +++ b/static/styles.json @@ -1,6 +1,6 @@ { - "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], - "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], + "pleroma-dark": "/static/themes/pleroma-dark.json", + "pleroma-light": "/static/themes/pleroma-light.json", "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"], "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ], "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"], diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json new file mode 100644 index 00000000..2de001da --- /dev/null +++ b/static/themes/pleroma-dark.json @@ -0,0 +1,543 @@ +{ + "_pleroma_theme_version": 2, + "name": "Pleroma Dark", + "theme": { + "themeEngineVersion": 3, + "shadows": { + "panel": [ + { + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "topBar": [ + { + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "popup": [ + { + "x": 2, + "y": 2, + "blur": 3, + "spread": 0, + "color": "#000000", + "alpha": 0.5 + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.2" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": 1 + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "color": "#b9b9ba", + "alpha": "0.4", + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": 1 + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": 2, + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": 1 + } + ] + }, + "colors": { + "underlay": "#090e14", + "bg": "#0f161e", + "fg": "#151e2b", + "cRed": "#d31014", + "cOrange": "#ffc459", + "cGreen": "#5dc94a", + "cBlue": "#81beea", + "accent": "#e2b188", + "link": "#e2b188", + "text": "#b9b9ba", + "badgeNotification": "#e15932", + "badgeNotificationText": "#ffffff", + "panel": "#151e2b", + "panelText": "#b9b9ba", + "alertNeutral": "#b9b9ba", + "alertNeutralPanelText": "#ffffff", + "alertNeutralText": "#ffffff", + "alertWarning": "#ffc459", + "alertWarningPanelText": "#ffffff", + "alertWarningText": "#ffffff", + "alertError": "#d31014", + "alertErrorPanelText": "#b9b9ba", + "alertErrorText": "#f0f0f0", + "fgText": "#b9b9ba", + "topBar": "#151e2b", + "topBarText": "#a0a5aa", + "input": "#151e2b", + "inputTopbarText": "#a0a5aa", + "inputPanelText": "#b9b9ba", + "inputText": "#b9b9ba", + "btn": "#151e2b", + "btnText": "#b9b9ba", + "btnTopBarText": "#b9b9ba", + "btnDisabled": "#111822", + "btnDisabledTopBarText": "#3b4148", + "btnPanelText": "#b9b9ba", + "btnDisabledPanelText": "#3b4148", + "btnDisabledText": "#3b4148", + "btnToggled": "#c08f60", + "btnToggledTopBarText": "#000000", + "btnToggledPanelText": "#000000", + "btnToggledText": "#000000", + "btnPressed": "#151e2b", + "btnPressedTopBarText": "#b9b9ba", + "btnPressedTopBar": "#151e2b", + "btnPressedPanelText": "#b9b9ba", + "btnPressedPanel": "#151e2b", + "btnPressedText": "#b9b9ba", + "tabActiveText": "#b9b9ba", + "tabText": "#b9b9ba", + "tab": "#151e2b", + "fgLink": "#e2b188", + "topBarLink": "#a0a5aa", + "panelLink": "#e2b188", + "panelFaint": "#b9b9ba", + "icon": "#64686c", + "poll": "#645449", + "pollText": "#ffffff", + "border": "#1b232d", + "postLink": "#e2b188", + "lightText": "#ededed", + "popover": "#0f161e", + "selectedMenuPopover": "#18232f", + "highlight": "#18232f", + "highlightText": "#b9b9ba", + "selectedMenu": "#18232f", + "selectedMenuText": "#b9b9ba", + "selectedMenuPopoverIcon": "#696e75", + "highlightLink": "#e2b188", + "selectedMenuLink": "#e2b188", + "selectedMenuPopoverLink": "#e2b188", + "selectedMenuPopoverText": "#b9b9ba", + "faintLink": "#e2b188", + "highlightFaintLink": "#e2b188", + "selectedMenuFaintLink": "#e2b188", + "selectedMenuPopoverFaintLink": "#e2b188", + "faint": "#b9b9ba", + "highlightFaintText": "#b9b9ba", + "selectedMenuFaintText": "#b9b9ba", + "selectedMenuPopoverFaintText": "#b9b9ba", + "highlightLightText": "#ededed", + "selectedMenuLightText": "#ededed", + "selectedMenuPopoverLightText": "#ededed", + "selectedMenuIcon": "#696e75", + "selectedPost": "#18232f", + "selectedPostText": "#b9b9ba", + "selectedPostIcon": "#696e75", + "selectedPostLink": "#e2b188", + "selectedPostFaintLink": "#e2b188", + "highlightPostLink": "#e2b188", + "selectedPostPostLink": "#e2b188", + "selectedPostLightText": "#ededed", + "selectedPostFaintText": "#b9b9ba", + "popoverText": "#b9b9ba", + "popoverIcon": "#64686c", + "popoverLink": "#e2b188", + "postFaintLink": "#e2b188", + "popoverPostFaintLink": "#e2b188", + "popoverFaintLink": "#e2b188", + "popoverFaintText": "#b9b9ba", + "popoverPostLink": "#e2b188", + "popoverLightText": "#ededed", + "highlightIcon": "#696e75", + "highlightPostFaintLink": "#e2b188", + "profileTint": "#0f161e", + "profileBg": "#070c11" + }, + "opacity": { + "underlay": 0.6, + "bg": 1, + "panel": 1, + "alert": 0.5, + "input": 0.5, + "btn": 1, + "faint": 0.5, + "border": 1, + "popover": 1, + "profileTint": 0.5 + }, + "radii": { + "btn": "3", + "input": "3", + "checkbox": 2, + "panel": "3", + "avatar": "3", + "avatarAlt": 50, + "tooltip": 2, + "attachment": "3" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "color": "#b9b9ba", + "alpha": "0.4", + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 1, + "inset": true + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": 1 + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.2" + } + ], + "panel": [ + { + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": 1 + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "topBar": [ + { + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ] + }, + "opacity": { + "underlay": "0.6" + }, + "colors": { + "bg": "#0f161e", + "fg": "#151e2b", + "text": "#b9b9ba", + "underlay": "#090e14", + "accent": "#e2b188", + "cBlue": "#81beea", + "cRed": "#d31014", + "cGreen": "#5dc94a", + "cOrange": "#ffc459", + "border": "#1b232d", + "topBarText": "#a0a5aa", + "topBarLink": "#A0A5AA", + "btnToggled": "#c08f60", + "alertErrorText": "#f0f0f0", + "badgeNotification": "#e15932", + "badgeNotificationText": "#ffffff" + }, + "radii": { + "btn": "3", + "input": "3", + "panel": "3", + "avatar": "3", + "attachment": "3" + } + } +} diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json new file mode 100644 index 00000000..f8cefc9b --- /dev/null +++ b/static/themes/pleroma-light.json @@ -0,0 +1,570 @@ +{ + "_pleroma_theme_version": 2, + "name": "Pleroma Light", + "theme": { + "themeEngineVersion": 3, + "shadows": { + "panel": [ + { + "x": "0", + "y": 1, + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "3", + "blur": "6", + "spread": "1", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "topBar": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 0.6 + } + ], + "popup": [ + { + "x": "1", + "y": "2", + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": "1", + "y": "3", + "blur": "7", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [ + { + "x": 0, + "y": "1", + "blur": "4", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": 0, + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.5" + }, + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": "0.5", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": "0", + "blur": "1", + "spread": "2", + "color": "#ffc39f", + "alpha": "1", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": "1", + "spread": "2", + "color": "#000000", + "alpha": "0.3", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": "0.15" + } + ] + }, + "colors": { + "underlay": "#5d6086", + "bg": "#f2f6f9", + "fg": "#d6dfed", + "cRed": "#d31014", + "cOrange": "#ffa500", + "cGreen": "#0fa00f", + "cBlue": "#0095ff", + "accent": "#f55b1b", + "link": "#f55b1b", + "text": "#304055", + "badgeNotification": "#e83802", + "badgeNotificationText": "#ffffff", + "panel": "#d6dfed", + "panelText": "#304055", + "alertNeutral": "#304055", + "alertNeutralPanelText": "#000000", + "alertNeutralText": "#000000", + "alertWarning": "#ffa500", + "alertWarningPanelText": "#304055", + "alertWarningText": "#304055", + "alertError": "#d31014", + "alertErrorPanelText": "#000000", + "alertErrorText": "#000000", + "fgText": "#304055", + "topBar": "#d6dfed", + "topBarText": "#304055", + "input": "#dee3ed", + "inputTopbarText": "#304055", + "inputPanelText": "#304055", + "inputText": "#304055", + "btn": "#d6dfed", + "btnText": "#304055", + "btnTopBarText": "#304055", + "btnDisabled": "#ebf1f6", + "btnDisabledTopBarText": "#bdc5ce", + "btnPanelText": "#304055", + "btnDisabledPanelText": "#bdc5ce", + "btnDisabledText": "#bdc5ce", + "btnToggled": "#db9d77", + "btnToggledTopBarText": "#304055", + "btnToggledPanelText": "#304055", + "btnToggledText": "#304055", + "btnPressed": "#d6dfed", + "btnPressedTopBarText": "#304055", + "btnPressedTopBar": "#d6dfed", + "btnPressedPanelText": "#304055", + "btnPressedPanel": "#d6dfed", + "btnPressedText": "#304055", + "tabActiveText": "#304055", + "tabText": "#304055", + "tab": "#d6dfed", + "fgLink": "#e44a0a", + "topBarLink": "#304055", + "panelLink": "#f55b1b", + "panelFaint": "#304055", + "icon": "#919ba7", + "poll": "#f4b8a1", + "pollText": "#304055", + "border": "#d8e6f9", + "postLink": "#e44a0a", + "lightText": "#0c0f14", + "popover": "#f2f6f9", + "selectedMenuPopover": "#e1eaf1", + "highlight": "#e1eaf1", + "highlightText": "#304055", + "selectedMenu": "#e1eaf1", + "selectedMenuText": "#304055", + "selectedMenuPopoverIcon": "#8995a3", + "highlightLink": "#e44a0a", + "selectedMenuLink": "#f55b1b", + "selectedMenuPopoverLink": "#e44a0a", + "selectedMenuPopoverText": "#304055", + "faintLink": "#f55b1b", + "highlightFaintLink": "#e44a0a", + "selectedMenuFaintLink": "#f55b1b", + "selectedMenuPopoverFaintLink": "#e44a0a", + "faint": "#304055", + "highlightFaintText": "#304055", + "selectedMenuFaintText": "#304055", + "selectedMenuPopoverFaintText": "#304055", + "highlightLightText": "#0c0f14", + "selectedMenuLightText": "#0c0f14", + "selectedMenuPopoverLightText": "#0c0f14", + "selectedMenuIcon": "#8995a3", + "selectedPost": "#e1eaf1", + "selectedPostText": "#304055", + "selectedPostIcon": "#8995a3", + "selectedPostLink": "#f55b1b", + "selectedPostFaintLink": "#f55b1b", + "highlightPostLink": "#f55b1b", + "selectedPostPostLink": "#e44a0a", + "selectedPostLightText": "#0c0f14", + "selectedPostFaintText": "#304055", + "popoverText": "#304055", + "popoverIcon": "#919ba7", + "popoverLink": "#e44a0a", + "postFaintLink": "#e44a0a", + "popoverPostFaintLink": "#f55b1b", + "popoverFaintLink": "#e44a0a", + "popoverFaintText": "#304055", + "popoverPostLink": "#f55b1b", + "popoverLightText": "#0c0f14", + "highlightIcon": "#8995a3", + "highlightPostFaintLink": "#f55b1b", + "profileTint": "#f2f6f9", + "profileBg": "#808992" + }, + "opacity": { + "underlay": 0.4, + "bg": 1, + "panel": 1, + "alert": 0.5, + "input": 0.5, + "btn": 1, + "faint": 0.5, + "border": 1, + "popover": 1, + "profileTint": 0.5 + }, + "radii": { + "btn": "3", + "input": "3", + "checkbox": 2, + "panel": "3", + "avatar": "3", + "avatarAlt": 50, + "tooltip": 2, + "attachment": "3" + }, + "fonts": { + "interface": { + "family": "sans-serif" + }, + "input": { + "family": "inherit" + }, + "post": { + "family": "inherit" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": {}, + "shadows": { + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": "0.5", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": "0", + "blur": "1", + "spread": "2", + "color": "#ffc39f", + "alpha": "1", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + }, + { + "x": 0, + "y": 0, + "blur": "2", + "inset": true, + "spread": 0, + "color": "#000000", + "alpha": "0.15" + } + ], + "panel": [ + { + "x": "0", + "y": 1, + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "3", + "blur": "6", + "spread": "1", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": 0, + "spread": 0, + "inset": true, + "color": "#ffffff", + "alpha": "0.5" + }, + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": 0, + "y": 1, + "blur": "1", + "spread": "2", + "color": "#000000", + "alpha": "0.3", + "inset": true + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": true + } + ], + "popup": [ + { + "x": "1", + "y": "2", + "blur": "2", + "spread": 0, + "color": "#000000", + "alpha": "0.2" + }, + { + "x": "1", + "y": "3", + "blur": "7", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ], + "avatarStatus": [ + { + "x": 0, + "y": "1", + "blur": "4", + "spread": "0", + "inset": false, + "color": "#000000", + "alpha": "0.2" + } + ] + }, + "opacity": { + "underlay": "0.4" + }, + "colors": { + "bg": "#f2f6f9", + "fg": "#d6dfed", + "text": "#304055", + "underlay": "#5d6086", + "accent": "#f55b1b", + "cBlue": "#0095ff", + "cRed": "#d31014", + "cGreen": "#0fa00f", + "cOrange": "#ffa500", + "border": "#d8e6f9", + "topBarText": "#304055", + "topBarLink": "#304055", + "btnToggled": "#db9d77", + "input": "#dee3ed", + "badgeNotification": "#e83802" + }, + "radii": { + "btn": "3", + "input": "3", + "panel": "3", + "avatar": "3", + "attachment": "3" + } + } +} From 64a6ba219ac9a1614e87d3ac979454e6d016cd5e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 20 Feb 2020 21:14:42 +0200 Subject: [PATCH 005/156] make panel header highlight less harsh --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 2de001da..c2ee9d1c 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -80,7 +80,7 @@ "spread": 0, "inset": true, "color": "#ffffff", - "alpha": "0.2" + "alpha": "0.1" } ], "button": [ From e342dbcb10ad5da4a897ce683246b1aa2cd72b00 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:21 +0000 Subject: [PATCH 006/156] Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index c2ee9d1c..aee4a4fe 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -528,7 +528,7 @@ "topBarText": "#a0a5aa", "topBarLink": "#A0A5AA", "btnToggled": "#c08f60", - "alertErrorText": "#f0f0f0", + "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", "badgeNotificationText": "#ffffff" }, From 19cc739598034b796956a1fadc91d83ec6074723 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:25 +0000 Subject: [PATCH 007/156] Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index aee4a4fe..a1b9a468 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -525,8 +525,8 @@ "cGreen": "#5dc94a", "cOrange": "#ffc459", "border": "#1b232d", - "topBarText": "#a0a5aa", - "topBarLink": "#A0A5AA", + "topBarText": "--text,-9.75", + "topBarLink": "--topBarText", "btnToggled": "#c08f60", "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", From c9935362de1effd03b06730cde1d6ebd81e5b777 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:29 +0000 Subject: [PATCH 008/156] Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index a1b9a468..9120f55f 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -527,7 +527,7 @@ "border": "#1b232d", "topBarText": "--text,-9.75", "topBarLink": "--topBarText", - "btnToggled": "#c08f60", + "btnToggled": "--accent,-24.2", "alertErrorText": "--text,21.2", "badgeNotification": "#e15932", "badgeNotificationText": "#ffffff" From 8c454b94568218399b7805c1aa72cab0d5a18df7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 21 Feb 2020 14:09:31 +0000 Subject: [PATCH 009/156] Apply suggestion to static/themes/pleroma-dark.json --- static/themes/pleroma-dark.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 9120f55f..48e28c74 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -524,7 +524,7 @@ "cRed": "#d31014", "cGreen": "#5dc94a", "cOrange": "#ffc459", - "border": "#1b232d", + "border": "--fg,3", "topBarText": "--text,-9.75", "topBarLink": "--topBarText", "btnToggled": "--accent,-24.2", From b5c6b77ca80b635c907cd5f755ccdd7327396475 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sat, 22 Feb 2020 10:03:16 +0200 Subject: [PATCH 010/156] update using variables --- static/themes/pleroma-light.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json index f8cefc9b..55cbe28a 100644 --- a/static/themes/pleroma-light.json +++ b/static/themes/pleroma-light.json @@ -554,8 +554,8 @@ "cOrange": "#ffa500", "border": "#d8e6f9", "topBarText": "#304055", - "topBarLink": "#304055", - "btnToggled": "#db9d77", + "topBarLink": "--topBarText", + "btnToggled": "--accent,-24.2", "input": "#dee3ed", "badgeNotification": "#e83802" }, From 1fb91b17955219fcf17320806a0d4bf61bf81f5b Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sat, 22 Feb 2020 10:34:54 +0200 Subject: [PATCH 011/156] remove bloat from themes --- static/themes/pleroma-dark.json | 352 ------------------------------- static/themes/pleroma-light.json | 351 ------------------------------ 2 files changed, 703 deletions(-) diff --git a/static/themes/pleroma-dark.json b/static/themes/pleroma-dark.json index 48e28c74..2703fba1 100644 --- a/static/themes/pleroma-dark.json +++ b/static/themes/pleroma-dark.json @@ -1,358 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Pleroma Dark", - "theme": { - "themeEngineVersion": 3, - "shadows": { - "panel": [ - { - "x": "0", - "y": "0", - "blur": "3", - "spread": 0, - "color": "#000000", - "alpha": "0.5" - }, - { - "x": "0", - "y": "4", - "blur": "6", - "spread": "3", - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "topBar": [ - { - "x": 0, - "y": "1", - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": "0.4" - }, - { - "x": 0, - "y": "2", - "blur": "7", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "popup": [ - { - "x": 2, - "y": 2, - "blur": 3, - "spread": 0, - "color": "#000000", - "alpha": 0.5 - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [], - "panelHeader": [ - { - "x": 0, - "y": "1", - "blur": "3", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.4" - }, - { - "x": "0", - "y": "1", - "blur": "0", - "spread": 0, - "inset": true, - "color": "#ffffff", - "alpha": "0.1" - } - ], - "button": [ - { - "x": 0, - "y": 0, - "blur": 2, - "spread": 0, - "color": "#000000", - "alpha": 1 - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonHover": [ - { - "x": 0, - "y": 0, - "blur": "1", - "spread": "2", - "color": "#b9b9ba", - "alpha": "0.4", - "inset": true - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 1, - "inset": true - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": "2", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": 1 - } - ], - "input": [ - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": 2, - "inset": true, - "spread": 0, - "color": "#000000", - "alpha": 1 - } - ] - }, - "colors": { - "underlay": "#090e14", - "bg": "#0f161e", - "fg": "#151e2b", - "cRed": "#d31014", - "cOrange": "#ffc459", - "cGreen": "#5dc94a", - "cBlue": "#81beea", - "accent": "#e2b188", - "link": "#e2b188", - "text": "#b9b9ba", - "badgeNotification": "#e15932", - "badgeNotificationText": "#ffffff", - "panel": "#151e2b", - "panelText": "#b9b9ba", - "alertNeutral": "#b9b9ba", - "alertNeutralPanelText": "#ffffff", - "alertNeutralText": "#ffffff", - "alertWarning": "#ffc459", - "alertWarningPanelText": "#ffffff", - "alertWarningText": "#ffffff", - "alertError": "#d31014", - "alertErrorPanelText": "#b9b9ba", - "alertErrorText": "#f0f0f0", - "fgText": "#b9b9ba", - "topBar": "#151e2b", - "topBarText": "#a0a5aa", - "input": "#151e2b", - "inputTopbarText": "#a0a5aa", - "inputPanelText": "#b9b9ba", - "inputText": "#b9b9ba", - "btn": "#151e2b", - "btnText": "#b9b9ba", - "btnTopBarText": "#b9b9ba", - "btnDisabled": "#111822", - "btnDisabledTopBarText": "#3b4148", - "btnPanelText": "#b9b9ba", - "btnDisabledPanelText": "#3b4148", - "btnDisabledText": "#3b4148", - "btnToggled": "#c08f60", - "btnToggledTopBarText": "#000000", - "btnToggledPanelText": "#000000", - "btnToggledText": "#000000", - "btnPressed": "#151e2b", - "btnPressedTopBarText": "#b9b9ba", - "btnPressedTopBar": "#151e2b", - "btnPressedPanelText": "#b9b9ba", - "btnPressedPanel": "#151e2b", - "btnPressedText": "#b9b9ba", - "tabActiveText": "#b9b9ba", - "tabText": "#b9b9ba", - "tab": "#151e2b", - "fgLink": "#e2b188", - "topBarLink": "#a0a5aa", - "panelLink": "#e2b188", - "panelFaint": "#b9b9ba", - "icon": "#64686c", - "poll": "#645449", - "pollText": "#ffffff", - "border": "#1b232d", - "postLink": "#e2b188", - "lightText": "#ededed", - "popover": "#0f161e", - "selectedMenuPopover": "#18232f", - "highlight": "#18232f", - "highlightText": "#b9b9ba", - "selectedMenu": "#18232f", - "selectedMenuText": "#b9b9ba", - "selectedMenuPopoverIcon": "#696e75", - "highlightLink": "#e2b188", - "selectedMenuLink": "#e2b188", - "selectedMenuPopoverLink": "#e2b188", - "selectedMenuPopoverText": "#b9b9ba", - "faintLink": "#e2b188", - "highlightFaintLink": "#e2b188", - "selectedMenuFaintLink": "#e2b188", - "selectedMenuPopoverFaintLink": "#e2b188", - "faint": "#b9b9ba", - "highlightFaintText": "#b9b9ba", - "selectedMenuFaintText": "#b9b9ba", - "selectedMenuPopoverFaintText": "#b9b9ba", - "highlightLightText": "#ededed", - "selectedMenuLightText": "#ededed", - "selectedMenuPopoverLightText": "#ededed", - "selectedMenuIcon": "#696e75", - "selectedPost": "#18232f", - "selectedPostText": "#b9b9ba", - "selectedPostIcon": "#696e75", - "selectedPostLink": "#e2b188", - "selectedPostFaintLink": "#e2b188", - "highlightPostLink": "#e2b188", - "selectedPostPostLink": "#e2b188", - "selectedPostLightText": "#ededed", - "selectedPostFaintText": "#b9b9ba", - "popoverText": "#b9b9ba", - "popoverIcon": "#64686c", - "popoverLink": "#e2b188", - "postFaintLink": "#e2b188", - "popoverPostFaintLink": "#e2b188", - "popoverFaintLink": "#e2b188", - "popoverFaintText": "#b9b9ba", - "popoverPostLink": "#e2b188", - "popoverLightText": "#ededed", - "highlightIcon": "#696e75", - "highlightPostFaintLink": "#e2b188", - "profileTint": "#0f161e", - "profileBg": "#070c11" - }, - "opacity": { - "underlay": 0.6, - "bg": 1, - "panel": 1, - "alert": 0.5, - "input": 0.5, - "btn": 1, - "faint": 0.5, - "border": 1, - "popover": 1, - "profileTint": 0.5 - }, - "radii": { - "btn": "3", - "input": "3", - "checkbox": 2, - "panel": "3", - "avatar": "3", - "avatarAlt": 50, - "tooltip": 2, - "attachment": "3" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, diff --git a/static/themes/pleroma-light.json b/static/themes/pleroma-light.json index 55cbe28a..05fc300a 100644 --- a/static/themes/pleroma-light.json +++ b/static/themes/pleroma-light.json @@ -1,357 +1,6 @@ { "_pleroma_theme_version": 2, "name": "Pleroma Light", - "theme": { - "themeEngineVersion": 3, - "shadows": { - "panel": [ - { - "x": "0", - "y": 1, - "blur": "3", - "spread": 0, - "color": "#000000", - "alpha": "0.5" - }, - { - "x": "0", - "y": "3", - "blur": "6", - "spread": "1", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "topBar": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": 0.6 - } - ], - "popup": [ - { - "x": "1", - "y": "2", - "blur": "2", - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": "1", - "y": "3", - "blur": "7", - "spread": "0", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "avatar": [ - { - "x": 0, - "y": 1, - "blur": 8, - "spread": 0, - "color": "#000000", - "alpha": 0.7 - } - ], - "avatarStatus": [ - { - "x": 0, - "y": "1", - "blur": "4", - "spread": "0", - "inset": false, - "color": "#000000", - "alpha": "0.2" - } - ], - "panelHeader": [ - { - "x": 0, - "y": "1", - "blur": 0, - "spread": 0, - "inset": true, - "color": "#ffffff", - "alpha": "0.5" - }, - { - "x": 0, - "y": "1", - "blur": "3", - "spread": 0, - "inset": false, - "color": "#000000", - "alpha": "0.3" - } - ], - "button": [ - { - "x": 0, - "y": 0, - "blur": 2, - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": "0.5", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonHover": [ - { - "x": 0, - "y": 0, - "blur": "2", - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": "0", - "blur": "1", - "spread": "2", - "color": "#ffc39f", - "alpha": "1", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - } - ], - "buttonPressed": [ - { - "x": 0, - "y": 0, - "blur": 4, - "spread": 0, - "color": "#000000", - "alpha": "0.2" - }, - { - "x": 0, - "y": 1, - "blur": "1", - "spread": "2", - "color": "#000000", - "alpha": "0.3", - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - } - ], - "input": [ - { - "x": 0, - "y": 1, - "blur": 0, - "spread": 0, - "color": "#000000", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": -1, - "blur": 0, - "spread": 0, - "color": "#FFFFFF", - "alpha": 0.2, - "inset": true - }, - { - "x": 0, - "y": 0, - "blur": "2", - "inset": true, - "spread": 0, - "color": "#000000", - "alpha": "0.15" - } - ] - }, - "colors": { - "underlay": "#5d6086", - "bg": "#f2f6f9", - "fg": "#d6dfed", - "cRed": "#d31014", - "cOrange": "#ffa500", - "cGreen": "#0fa00f", - "cBlue": "#0095ff", - "accent": "#f55b1b", - "link": "#f55b1b", - "text": "#304055", - "badgeNotification": "#e83802", - "badgeNotificationText": "#ffffff", - "panel": "#d6dfed", - "panelText": "#304055", - "alertNeutral": "#304055", - "alertNeutralPanelText": "#000000", - "alertNeutralText": "#000000", - "alertWarning": "#ffa500", - "alertWarningPanelText": "#304055", - "alertWarningText": "#304055", - "alertError": "#d31014", - "alertErrorPanelText": "#000000", - "alertErrorText": "#000000", - "fgText": "#304055", - "topBar": "#d6dfed", - "topBarText": "#304055", - "input": "#dee3ed", - "inputTopbarText": "#304055", - "inputPanelText": "#304055", - "inputText": "#304055", - "btn": "#d6dfed", - "btnText": "#304055", - "btnTopBarText": "#304055", - "btnDisabled": "#ebf1f6", - "btnDisabledTopBarText": "#bdc5ce", - "btnPanelText": "#304055", - "btnDisabledPanelText": "#bdc5ce", - "btnDisabledText": "#bdc5ce", - "btnToggled": "#db9d77", - "btnToggledTopBarText": "#304055", - "btnToggledPanelText": "#304055", - "btnToggledText": "#304055", - "btnPressed": "#d6dfed", - "btnPressedTopBarText": "#304055", - "btnPressedTopBar": "#d6dfed", - "btnPressedPanelText": "#304055", - "btnPressedPanel": "#d6dfed", - "btnPressedText": "#304055", - "tabActiveText": "#304055", - "tabText": "#304055", - "tab": "#d6dfed", - "fgLink": "#e44a0a", - "topBarLink": "#304055", - "panelLink": "#f55b1b", - "panelFaint": "#304055", - "icon": "#919ba7", - "poll": "#f4b8a1", - "pollText": "#304055", - "border": "#d8e6f9", - "postLink": "#e44a0a", - "lightText": "#0c0f14", - "popover": "#f2f6f9", - "selectedMenuPopover": "#e1eaf1", - "highlight": "#e1eaf1", - "highlightText": "#304055", - "selectedMenu": "#e1eaf1", - "selectedMenuText": "#304055", - "selectedMenuPopoverIcon": "#8995a3", - "highlightLink": "#e44a0a", - "selectedMenuLink": "#f55b1b", - "selectedMenuPopoverLink": "#e44a0a", - "selectedMenuPopoverText": "#304055", - "faintLink": "#f55b1b", - "highlightFaintLink": "#e44a0a", - "selectedMenuFaintLink": "#f55b1b", - "selectedMenuPopoverFaintLink": "#e44a0a", - "faint": "#304055", - "highlightFaintText": "#304055", - "selectedMenuFaintText": "#304055", - "selectedMenuPopoverFaintText": "#304055", - "highlightLightText": "#0c0f14", - "selectedMenuLightText": "#0c0f14", - "selectedMenuPopoverLightText": "#0c0f14", - "selectedMenuIcon": "#8995a3", - "selectedPost": "#e1eaf1", - "selectedPostText": "#304055", - "selectedPostIcon": "#8995a3", - "selectedPostLink": "#f55b1b", - "selectedPostFaintLink": "#f55b1b", - "highlightPostLink": "#f55b1b", - "selectedPostPostLink": "#e44a0a", - "selectedPostLightText": "#0c0f14", - "selectedPostFaintText": "#304055", - "popoverText": "#304055", - "popoverIcon": "#919ba7", - "popoverLink": "#e44a0a", - "postFaintLink": "#e44a0a", - "popoverPostFaintLink": "#f55b1b", - "popoverFaintLink": "#e44a0a", - "popoverFaintText": "#304055", - "popoverPostLink": "#f55b1b", - "popoverLightText": "#0c0f14", - "highlightIcon": "#8995a3", - "highlightPostFaintLink": "#f55b1b", - "profileTint": "#f2f6f9", - "profileBg": "#808992" - }, - "opacity": { - "underlay": 0.4, - "bg": 1, - "panel": 1, - "alert": 0.5, - "input": 0.5, - "btn": 1, - "faint": 0.5, - "border": 1, - "popover": 1, - "profileTint": 0.5 - }, - "radii": { - "btn": "3", - "input": "3", - "checkbox": 2, - "panel": "3", - "avatar": "3", - "avatarAlt": 50, - "tooltip": 2, - "attachment": "3" - }, - "fonts": { - "interface": { - "family": "sans-serif" - }, - "input": { - "family": "inherit" - }, - "post": { - "family": "inherit" - }, - "postCode": { - "family": "monospace" - } - } - }, "source": { "themeEngineVersion": 3, "fonts": {}, From 5b7acca0bab12e88ad5b2c80b120859e440133de Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sat, 22 Feb 2020 10:57:08 +0200 Subject: [PATCH 012/156] make theme loading work with source-only presets --- src/modules/instance.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/modules/instance.js b/src/modules/instance.js index 8781646d..f96337e4 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -1,5 +1,6 @@ import { set } from 'vue' import { getPreset, applyTheme } from '../services/style_setter/style_setter.js' +import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { instanceDefaultProperties } from './config.js' const defaultState = { @@ -159,7 +160,14 @@ const instance = { // No need to apply theme if there's user theme already const { customTheme } = rootState.config if (customTheme) return - applyTheme(themeData.theme) + + // New theme presets don't have 'theme' property, they use 'source' + const themeSource = themeData.source + if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) { + applyTheme(themeSource) + } else { + applyTheme(themeData.theme) + } }) }, fetchEmoji ({ dispatch, state }) { From 23e0ce59e610a1f3f49f3f53e0a1015530110120 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Sat, 22 Feb 2020 09:42:22 -0600 Subject: [PATCH 013/156] Fix captcha input and disable ALL the helpers --- src/components/registration/registration.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index fdbda007..a83ca1e5 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -187,6 +187,9 @@ class="form-control" type="text" autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" > From 86561592d002b08d6b2cd9549e8057a4ffd091cb Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Mon, 24 Feb 2020 11:19:00 -0600 Subject: [PATCH 014/156] First attempt at not requiring email address for registration --- src/boot/after_store.js | 3 +++ src/components/registration/registration.js | 9 +++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/boot/after_store.js b/src/boot/after_store.js index d70e1058..9fb9a853 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -241,6 +241,9 @@ const getNodeInfo = async ({ store }) => { : federation.enabled }) + const accountActivationRequired = metadata.accountActivationRequired + store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired }) + const accounts = metadata.staffAccounts resolveStaffAccounts({ store, accounts }) } else { diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index ace8cc7c..fd2942a5 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,5 +1,5 @@ import { validationMixin } from 'vuelidate' -import { required, sameAs } from 'vuelidate/lib/validators' +import { required, requiredIf, sameAs } from 'vuelidate/lib/validators' import { mapActions, mapState } from 'vuex' const registration = { @@ -16,7 +16,7 @@ const registration = { }), validations: { user: { - email: { required }, + email: requiredIf('accountActivationRequired'), username: { required }, fullname: { required }, password: { required }, @@ -24,6 +24,11 @@ const registration = { required, sameAsPassword: sameAs('password') } + }, + nested: { + required: requiredIf(function (nestedModel) { + return this.accountActivationRequired + }) } }, created () { From 39e3917118293912b2af09f509457d718f0207c9 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Mon, 24 Feb 2020 11:23:16 -0600 Subject: [PATCH 015/156] Remove unneccessary nested --- src/components/registration/registration.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index fd2942a5..1d8109e4 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -24,11 +24,6 @@ const registration = { required, sameAsPassword: sameAs('password') } - }, - nested: { - required: requiredIf(function (nestedModel) { - return this.accountActivationRequired - }) } }, created () { From 7fa5eb07ddeb6d8c2b572e869d82a27bdd7a7fbf Mon Sep 17 00:00:00 2001 From: xenofem Date: Mon, 24 Feb 2020 18:10:15 -0500 Subject: [PATCH 016/156] Refactor status showing/hiding code for better handling of edge cases and easier comprehension --- src/components/status/status.js | 35 ++++++++++++++------------------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/components/status/status.js b/src/components/status/status.js index fc5956ec..61d66301 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -188,23 +188,22 @@ const Status = { } return this.status.attentions.length > 0 }, + + // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. + mightHideBecauseSubject () { + return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault) + }, + mightHideBecauseTall () { + return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault) + }, hideSubjectStatus () { - if (this.tallStatus && !this.localCollapseSubjectDefault) { - return false - } - return !this.expandingSubject && this.status.summary + return this.mightHideBecauseSubject && !this.expandingSubject }, hideTallStatus () { - if (this.status.summary && this.localCollapseSubjectDefault) { - return false - } - if (this.showingTall) { - return false - } - return this.tallStatus + return this.mightHideBecauseTall && !this.showingTall }, showingMore () { - return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject) + return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject) }, nsfwClickthrough () { if (!this.status.nsfw) { @@ -408,14 +407,10 @@ const Status = { this.userExpanded = !this.userExpanded }, toggleShowMore () { - if (this.showingTall) { - this.showingTall = false - } else if (this.expandingSubject && this.status.summary) { - this.expandingSubject = false - } else if (this.hideTallStatus) { - this.showingTall = true - } else if (this.hideSubjectStatus && this.status.summary) { - this.expandingSubject = true + if (this.mightHideBecauseTall) { + this.showingTall = !this.showingTall + } else if (this.mightHideBecauseSubject) { + this.expandingSubject = !this.expandingSubject } }, generateUserProfileLink (id, name) { From 31225f5d142b51d52bed305f25a37288c9188062 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Fri, 28 Feb 2020 16:39:47 +0000 Subject: [PATCH 017/156] Fix/popover performance --- CHANGELOG.md | 1 + package.json | 1 - .../account_actions/account_actions.js | 4 +- .../account_actions/account_actions.vue | 21 ++- .../emoji_reactions/emoji_reactions.js | 11 +- .../emoji_reactions/emoji_reactions.vue | 33 ++-- src/components/extra_buttons/extra_buttons.js | 3 + .../extra_buttons/extra_buttons.vue | 14 +- .../moderation_tools/moderation_tools.js | 11 +- .../moderation_tools/moderation_tools.vue | 17 +- src/components/popover/popover.js | 156 +++++++++++++++++ src/components/popover/popover.vue | 118 +++++++++++++ src/components/popper/popper.scss | 164 ------------------ src/components/react_button/react_button.js | 23 +-- src/components/react_button/react_button.vue | 32 ++-- src/components/status/status.vue | 11 +- .../status_popover/status_popover.js | 12 +- .../status_popover/status_popover.vue | 64 +++---- src/main.js | 8 - yarn.lock | 19 -- 20 files changed, 393 insertions(+), 330 deletions(-) create mode 100644 src/components/popover/popover.js create mode 100644 src/components/popover/popover.vue delete mode 100644 src/components/popper/popper.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cdd604b..e77334b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Registration fixed - Deactivation of remote accounts from frontend - Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying +- Improved performance of anything that uses popovers (most notably statuses) ## [1.1.7 and earlier] - 2019-12-14 ### Added diff --git a/package.json b/package.json index 5c7fa31e..542086b4 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "portal-vue": "^2.1.4", "sanitize-html": "^1.13.0", "v-click-outside": "^2.1.1", - "v-tooltip": "^2.0.2", "vue": "^2.5.13", "vue-chat-scroll": "^1.2.1", "vue-i18n": "^7.3.2", diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js index d2153680..5d7ecf7e 100644 --- a/src/components/account_actions/account_actions.js +++ b/src/components/account_actions/account_actions.js @@ -1,4 +1,5 @@ import ProgressButton from '../progress_button/progress_button.vue' +import Popover from '../popover/popover.vue' const AccountActions = { props: [ @@ -8,7 +9,8 @@ const AccountActions = { return { } }, components: { - ProgressButton + ProgressButton, + Popover }, methods: { showRepeats () { diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index d3235be1..483783cf 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -1,13 +1,13 @@ -