hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'themes-accent' into shigusegubu

Browse source 
* themes-accent:
  update headers in switcher to better separate the subsections
  paper theme, updated todo, lol
  improve the display of disabled buttons
  attempt to fix some bugs with shadows control
  fix #774
  revert emoji reaction style
This commit is contained in:
Henry Jameson 2020-02-18 00:24:31 +02:00
commit c7ae982115
10 changed files with 227 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.scss
View file

@ -104,7 +104,11 @@ button {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg)
background-color: var(--btnPressed, $fallback--fg);
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
}
&:disabled {
@ -112,7 +116,11 @@ button {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg)
background-color: var(--btnDisabled, $fallback--fg);
i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
}
&.toggled {
@ -122,6 +130,10 @@ button {
background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow);
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
}
&.danger {

8
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -35,7 +35,7 @@
</div>
<button
class="emoji-reaction btn btn-default"
:class="{ 'toggled': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()"
>
@ -127,4 +127,10 @@
}
}
.picked-reaction {
border: 1px solid var(--accent, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px);
}
</style>

47
src/components/shadow_control/shadow_control.js
View file

@ -3,6 +3,17 @@ import OpacityInput from '../opacity_input/opacity_input.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
const toModel = (object = {}) => ({
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1,
...object
})
export default {
// 'Value' and 'Fallback' can be undefined, but if they are
// initially vue won't detect it when they become something else
@ -15,7 +26,7 @@ export default {
return {
selectedId: 0,
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
cValue: this.value || this.fallback || []
cValue: (this.value || this.fallback || []).map(toModel)
}
},
components: {
@ -24,12 +35,12 @@ export default {
},
methods: {
add () {
this.cValue.push(Object.assign({}, this.selected))
this.cValue.push(toModel(this.selected))
this.selectedId = this.cValue.length - 1
},
del () {
this.cValue.splice(this.selectedId, 1)
this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
},
moveUp () {
const movable = this.cValue.splice(this.selectedId, 1)[0]
@ -46,34 +57,24 @@ export default {
this.cValue = this.value || this.fallback
},
computed: {
anyShadows () {
return this.cValue.length > 0
},
anyShadowsFallback () {
return this.fallback.length > 0
},
selected () {
if (this.ready && this.cValue.length > 0) {
if (this.ready && this.anyShadows) {
return this.cValue[this.selectedId]
} else {
return {
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1
}
return toModel({})
}
},
currentFallback () {
if (this.ready && this.fallback.length > 0) {
if (this.ready && this.anyShadowsFallback) {
return this.fallback[this.selectedId]
} else {
return {
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1
}
return toModel({})
}
},
moveUpValid () {

2
src/components/style_switcher/preview.vue
View file

@ -21,7 +21,7 @@
</div>
<div class="panel-body theme-preview-content">
<div class="post">
<div class="avatar">
<div class="avatar still-image">
( ͡° ͜ʖ ͡°)
</div>
<div class="content">

6
src/components/style_switcher/style_switcher.vue
View file

@ -443,7 +443,7 @@
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<ContrastRatio :contrast="previewContrast.btnTopBarText" />
<h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
<h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
<ColorInput
v-model="btnPressedColorLocal"
name="btnPressedColor"
@ -471,7 +471,7 @@
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
<h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
<h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
<ColorInput
v-model="btnDisabledColorLocal"
name="btnDisabledColor"
@ -496,7 +496,7 @@
:fallback="previewTheme.colors.btnDisabledTopBarText"
:label="$t('settings.style.advanced_colors.top_bar')"
/>
<h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
<ColorInput
v-model="btnToggledColorLocal"
name="btnToggledColor"

2
src/services/style_setter/style_setter.js
View file

@ -270,7 +270,7 @@ export const generateShadows = (input, colors) => {
rules: {
shadows: Object
.entries(shadows)
// TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
// TODO for v2.2: 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)}`,

8
src/services/theme_data/pleromafe.js
View file

@ -509,25 +509,25 @@ export const SLOT_INHERITANCE = {
// Buttons: disabled
btnDisabled: {
depends: ['btn', 'bg'],
color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
},
btnDisabledText: {
depends: ['btnText', 'btnDisabled'],
layer: 'btn',
variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
},
btnDisabledPanelText: {
depends: ['btnPanelText', 'btnDisabled'],
layer: 'btnPanel',
variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
},
btnDisabledTopBarText: {
depends: ['btnTopBarText', 'btnDisabled'],
layer: 'btnTopBar',
variant: 'btnDisabled',
color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
},
// Input fields

2
static/styles.json
View file

@ -15,5 +15,5 @@
"breezy-dark": "/static/themes/breezy-dark.json",
"breezy-light": "/static/themes/breezy-light.json",
"mammal": "/static/themes/mammal.json",
"kenomo": "/static/themes/kenomo.json"
"paper": "/static/themes/paper.json"
}

71
static/themes/kenomo.json
View file

@ -1,71 +0,0 @@
{
"_pleroma_theme_version": 2,
"name": "Kenomo",
"source": {
"themeEngineVersion": 3,
"fonts": {},
"shadows": {
"panel": [],
"topBar": [],
"button": [
{
"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
}
],
"input": [
{
"x": 0,
"y": "0",
"blur": 0,
"spread": "1",
"color": "#576574",
"alpha": "1",
"inset": true
}
]
},
"opacity": {
"underlay": "1",
"border": "0"
},
"colors": {
"bg": "#ffffff",
"fg": "#f6f6f6",
"text": "#494949",
"underlay": "#ffffff",
"link": "#818181",
"accent": "#818181",
"cBlue": "#2e86de",
"cRed": "#c96248",
"cGreen": "#0fa00f",
"cOrange": "#aa7623",
"postLink": "#2e86de",
"border": "#ffffff",
"icon": "#8a8a8a",
"panel": "transparent",
"topBarText": "#4b4b4b",
"tab": "--btn,-30",
"btn": "#576574"
},
"radii": {
"panel": "0",
"avatar": "6",
"avatarAlt": "6"
}
}
}

172
static/themes/paper.json Normal file
View file

@ -0,0 +1,172 @@
{
"_pleroma_theme_version": 2,
"name": "Paper",
"source": {
"themeEngineVersion": 3,
"fonts": {},
"shadows": {
"panel": [
{
"x": "0",
"y": "2",
"blur": "9",
"spread": 0,
"inset": false,
"color": "#668bb2",
"alpha": "0.1"
},
{
"x": "0",
"y": "1",
"blur": "2",
"spread": "-1",
"inset": false,
"color": "#668bb2",
"alpha": "0.1"
}
],
"topBar": [
{
"x": 0,
"y": "3",
"blur": "8",
"spread": 0,
"inset": false,
"color": "#3e618e",
"alpha": "0.1"
},
{
"x": 0,
"y": "1",
"blur": "4",
"spread": 0,
"inset": false,
"color": "#3e618e",
"alpha": "0.1"
}
],
"button": [
{
"x": 0,
"y": "2",
"blur": "5",
"spread": 0,
"color": "#463f78",
"alpha": "0.1",
"inset": false
}
],
"input": [
{
"x": 0,
"y": "1",
"blur": "2",
"spread": 0,
"inset": true,
"color": "#6277b7",
"alpha": "0.1"
}
],
"buttonHover": [
{
"x": 0,
"y": "2",
"blur": "5",
"spread": 0,
"color": "#494949",
"alpha": "0.1"
},
{
"x": 0,
"y": "2",
"blur": "0",
"spread": "20",
"color": "#ffffff",
"alpha": "1",
"inset": true
}
],
"buttonPressed": [
{
"x": 0,
"y": 0,
"blur": "4",
"spread": "0",
"color": "#494949",
"alpha": "0.8",
"inset": false
}
],
"avatarStatus": [
{
"x": "0",
"y": "2",
"blur": "4",
"spread": "0",
"inset": false,
"color": "#3e618e",
"alpha": "0.1"
}
],
"avatar": [
{
"x": 0,
"y": "2",
"blur": "5",
"spread": "0",
"color": "#3e618e",
"alpha": "0.9"
}
],
"popup": [
{
"x": "0",
"y": "3",
"blur": "11",
"spread": 0,
"color": "#668bb2",
"alpha": "0.2"
},
{
"x": "0",
"y": "2",
"blur": "3",
"spread": "-1",
"color": "#668bb2",
"alpha": "0.2"
}
]
},
"opacity": {
"underlay": "1",
"border": "0"
},
"colors": {
"bg": "#ffffff",
"fg": "#f6f6f6",
"text": "#494949",
"underlay": "#ffffff",
"link": "#788ca1",
"accent": "#97a0aa",
"cBlue": "#788ca1",
"cRed": "#eed7ce",
"cGreen": "#788ca1",
"cOrange": "#788ca1",
"postLink": "#788ca1",
"border": "#ffffff",
"icon": "#b6c9c4",
"panel": "#ffffff",
"topBarText": "#4b4b4b"
},
"radii": {
"btn": "0",
"input": "0",
"checkbox": "0",
"panel": "0",
"avatar": "2",
"avatarAlt": "2",
"tooltip": "0",
"attachment": "0"
}
}
}