therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some themeing is working!!

Browse source
This commit is contained in:
Henry Jameson 2018-10-07 19:59:22 +03:00
parent 5441766c3c
commit 96804d42f0
15 changed files with 346 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/chat_panel/chat_panel.vue
View file

@ -55,8 +55,8 @@
.chat-heading {
cursor: pointer;
.icon-comment-empty {
color: $fallback--fg;
color: var(--fg, $fallback--fg);
color: $fallback--text;
color: var(--text, $fallback--text);
}
}

84
src/components/color_input/color_input.vue Normal file
View file

@ -0,0 +1,84 @@
<template>
<div class="color-control" :class="{ disabled: !present }">
<label :for="name" class="label">
{{label}}
</label>
<input
v-if="typeof fallback !== 'undefined'"
class="opt"
:id="name + '-o'"
type="checkbox"
:checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
>
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<input
:id="name"
class="color-input"
type="color"
:value="value || fallback"
:disabled="!present"
@input="$emit('input', $event.target.value)"
>
<input
:id="name + '-t'"
class="text-input"
type="text"
:value="value || fallback"
:disabled="!present"
@input="$emit('input', $event.target.value)"
>
</div>
</template>
<script>
export default {
props: [
'name', 'label', 'value', 'fallback'
],
computed: {
present () {
return typeof this.value !== 'undefined'
}
}
}
</script>
<style lang="scss">
.color-control {
display: flex;
&.disabled *:not(.opt-l){
opacity: .5
}
.label {
flex: 2;
min-width: 7em;
}
.opt-l {
align-self: center;
flex: 0;
&::before {
width: 14px;
height: 14px;
}
}
.text-input {
max-width: 7em;
flex: 1;
}
.color-input {
flex: 0;
padding: 1px;
cursor: pointer;
height: 100%;
max-height: 29px;
min-width: 2em;
border: none;
}
}
</style>

7
src/components/notifications/notifications.scss
View file

@ -22,8 +22,8 @@
}
.loadmore-error {
color: $fallback--fg;
color: var(--fg, $fallback--fg);
color: $fallback--text;
color: var(--text, $fallback--text);
}
.unseen {
@ -90,6 +90,9 @@
padding: 0.25em 0;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
a {
color: var(--faintLink);
}
}
padding: 0;
.media-body {

75
src/components/opacity_input/opacity_input.vue Normal file
View file

@ -0,0 +1,75 @@
<template>
<div class="opacity-control" :class="{ disabled: !present }">
<label :for="name" class="label">
{{$t('settings.opacity')}}
</label>
<input
v-if="typeof fallback !== 'undefined'"
class="opt"
:id="name + '-o'"
type="checkbox"
:checked="present"
@input="$emit('input', !present ? fallback : undefined)"
>
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<input
:id="name"
class="input-range"
type="range"
:value="value || fallback"
:disabled="!present"
@input="$emit('input', $event.target.value)"
max="1"
min="0"
step=".05">
</div>
</template>
<script>
export default {
props: [
'name', 'value', 'fallback'
],
computed: {
present () {
return typeof this.value !== 'undefined'
}
}
}
</script>
<style lang="scss">
.opacity-control {
display: flex;
&.disabled *:not(.opt-l) {
opacity: .5
}
.opt-l {
align-self: center;
line-height: 0;
&::before {
width: 14px;
height: 14px;
}
}
.label {
flex: 2;
min-width: 7em;
}
.input-range {
align-self: center;
background: none;
border: none;
padding: 0;
margin: 0;
height: auto;
box-shadow: none;
min-width: 9em;
flex: 1;
}
}
</style>

12
src/components/post_status_form/post_status_form.vue
View file

@ -153,8 +153,8 @@
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@ -261,8 +261,8 @@
min-width: 75%;
background: $fallback--bg;
background: var(--bg, $fallback--bg);
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
.autocomplete {
@ -291,8 +291,8 @@
}
&.highlighted {
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
}
}
}

2
src/components/settings/settings.vue
View file

@ -159,7 +159,7 @@
@import '../../_variables.scss';
.setting-item {
border-bottom: 2px solid var(--btn, $fallback--btn);
border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;

4
src/components/status/status.vue
View file

@ -284,8 +284,8 @@
margin-left: 0.2em;
}
a:hover i {
color: $fallback--fg;
color: var(--fg, $fallback--fg);
color: $fallback--text;
color: var(--text, $fallback--text);
}
}

113
src/components/style_switcher/style_switcher.js
View file

@ -31,6 +31,7 @@ export default {
panelColorLocal: undefined,
panelTextColorLocal: undefined,
panelFaintColorLocal: undefined,
panelOpacityLocal: undefined,
topBarColorLocal: undefined,
@ -40,10 +41,17 @@ export default {
alertOpacityLocal: undefined,
redColorLocal: '',
blueColorLocal: '',
greenColorLocal: '',
orangeColorLocal: '',
borderColorLocal: undefined,
borderOpacityLocal: undefined,
faintColorLocal: undefined,
faintOpacityLocal: undefined,
faintLinkColorLocal: undefined,
cRedColorLocal: '',
cBlueColorLocal: '',
cGreenColorLocal: '',
cOrangeColorLocal: '',
btnRadiusLocal: '',
inputRadiusLocal: '',
@ -74,16 +82,35 @@ export default {
return {
colors: {
bg: this.bgColorLocal,
fg: this.fgColorLocal,
text: this.textColorLocal,
panel: this.panelColorLocal,
topBar: this.topBarColorLocal,
btn: this.btnColorLocal,
link: this.linkColorLocal,
cRed: this.redColorLocal,
cBlue: this.blueColorLocal,
cGreen: this.greenColorLocal,
cOrange: this.orangeColorLocal
fg: this.fgColorLocal,
fgText: this.fgTextColorLocal,
fgLink: this.fgLinkColorLocal,
panel: this.panelColorLocal,
panelText: this.panelTextColorLocal,
panelFaint: this.panelFaintColorLocal,
input: this.inputColorLocal,
inputText: this.inputTextColorLocal,
topBar: this.topBarColorLocal,
topBarText: this.topBarTextColorLocal,
topBarLink: this.topBarLinkColorLocal,
btn: this.btnColorLocal,
btnText: this.btnTextColorLocal,
faint: this.faintColorLocal,
faintLink: this.faintLinkColorLocal,
border: this.borderColorLocal,
cRed: this.cRedColorLocal,
cBlue: this.cBlueColorLocal,
cGreen: this.cGreenColorLocal,
cOrange: this.cOrangeColorLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
@ -197,12 +224,12 @@ export default {
},
clearV1 () {
this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined
this.panelColorLocal = undefined
this.topBarColorLocal = undefined
this.btnColorLocal = undefined
this.btnTextColorLocal = undefined
this.btnOpacityLocal = undefined
@ -216,7 +243,17 @@ export default {
this.topBarColorLocal = undefined
this.topBarTextColorLocal = undefined
this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = undefined
this.alertOpacityLocal = undefined
this.borderColorLocal = undefined
this.borderOpacityLocal = undefined
this.faintColorLocal = undefined
this.faintOpacityLocal = undefined
this.faintLinkColorLocal = undefined
},
/**
@ -228,22 +265,42 @@ export default {
const colors = input.colors || input
const radii = input.radii || input
this.bgColorLocal = rgb2hex(colors.bg)
this.fgColorLocal = rgb2hex(colors.fg)
this.textColorLocal = rgb2hex(colors.text)
this.linkColorLocal = rgb2hex(colors.link)
if (version === 1) {
this.clearV1()
if (version === 0) {
if (input.version) version = input.version
// Old v1 naming: fg is text, btn is foreground
if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
version = 1
}
// New v2 naming: text is text, fg is foreground
if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
version = 2
}
}
this.panelColorLocal = rgb2hex(colors.panel)
this.topBarColorLocal = rgb2hex(colors.topBar)
console.log('BENIS')
console.log(version)
// Stuff that differs between V1 and V2
if (version === 1) {
console.log(colors)
this.fgColorLocal = rgb2hex(colors.btn)
this.textColorLocal = rgb2hex(colors.fg)
}
this.redColorLocal = rgb2hex(colors.cRed)
this.blueColorLocal = rgb2hex(colors.cBlue)
this.greenColorLocal = rgb2hex(colors.cGreen)
this.orangeColorLocal = rgb2hex(colors.cOrange)
const keys = new Set(version !== 1 ? Object.keys(colors) : [])
if (version === 1) {
// V1 ignores the rest
this.clearV1()
keys
.add('bg')
.add('link')
.add('cRed')
.add('cBlue')
.add('cGreen')
.add('cOrange')
}
keys.forEach(key => {
this[key + 'ColorLocal'] = rgb2hex(colors[key])
})
this.btnRadiusLocal = radii.btnRadius || 4
this.inputRadiusLocal = radii.inputRadius || 4
@ -259,7 +316,7 @@ export default {
if (this.selectedVersion === 1) {
this.clearV1()
this.bgColorLocal = this.selected[1]
this.btnColorLocal = this.selected[2]
this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5]

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

@ -58,16 +58,16 @@
<div class="color-item">
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
</div>
<div class="color-item">
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
<ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
<ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
</div>
<div class="color-item">
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
</div>
<div class="color-item wide">
<h4>Alert opacity</h4>
@ -79,38 +79,40 @@
<div>
<div class="color-item">
<h4>Panel header</h4>
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
</div>
<div class="color-item">
<h4>Top bar</h4>
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<h4>Inputs</h4>
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Buttons</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Borders</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
<ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
</div>
<div class="color-item">
<h4>Faint text</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
<ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
<ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
</div>
</div>
</div>

8
src/components/tab_switcher/tab_switcher.scss
View file

@ -17,8 +17,8 @@
.tab, &::after, &::before {
border-bottom: 1px solid;
border-bottom-color: $fallback--btn;
border-bottom-color: var(--btn, $fallback--btn);
border-bottom-color: $fallback--fg;
border-bottom-color: var(--fg, $fallback--fg);
}
.tab {
@ -28,8 +28,8 @@
&:not(.active) {
border-bottom: 1px solid;
border-bottom-color: $fallback--btn;
border-bottom-color: var(--btn, $fallback--btn);
border-bottom-color: $fallback--fg;
border-bottom-color: var(--fg, $fallback--fg);
z-index: 4;
}

10
src/components/timeline/timeline.vue
View file

@ -61,12 +61,12 @@
opacity: 0.8;
background-color: transparent;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
color: var(--panelFaint, $fallback--faint);
}
.loadmore-error {
color: $fallback--fg;
color: var(--fg, $fallback--fg);
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
@ -79,7 +79,7 @@
border-color: var(--border, $fallback--border);
padding: 10px;
z-index: 1;
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
}
</style>

16
src/components/user_card_content/user_card_content.vue
View file

@ -138,8 +138,8 @@
}
.user-info {
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
padding: 0 16px;
.container {
@ -173,8 +173,8 @@
}
.usersettings {
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
opacity: .8;
}
@ -193,8 +193,8 @@
}
.user-screen-name {
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
display: inline-block;
font-weight: light;
font-size: 15px;
@ -269,8 +269,8 @@
padding: .5em 1.5em 0em 1.5em;
text-align: center;
justify-content: space-between;
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
&.clickable {
.user-count {