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

Update theme editor to have 4 colors, rewrite the color setter, change a LOT of base16 assignments for better consistency.

Browse source
This commit is contained in:
shpuld 2017-11-17 02:17:36 +02:00
parent ed84c6acc0
commit 44073e72fd
11 changed files with 122 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04 base03-border conversation-heading">
<div class="panel-heading base02-background base04 base03-border conversation-heading">
{{ $t('timeline.conversation') }}
<span v-if="collapsable" style="float:right;">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>

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

@ -1,7 +1,7 @@
<template>
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('login.login')}}
</div>
<div class="panel-body">
@ -17,7 +17,7 @@
<div class='form-group'>
<div class='login-bottom'>
<div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
<button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>{{$t('login.login')}}</button>
<button :disabled="loggingIn" type='submit' class='btn btn-default base04 base02-background'>{{$t('login.login')}}</button>
</div>
</div>
<div v-if="authError" class='form-group'>

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

@ -1,10 +1,10 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
{{$t('notifications.notifications')}}
<button @click.prevent="markAsSeen" class="base05 base01-background read-button">{{$t('notifications.read')}}</button>
<button @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
</div>
<div class="panel-body base03-border">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>

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

@ -6,7 +6,7 @@
</div>
<div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel base05-background">
<div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base01">
<div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base02">
<img :src="candidate.img"></img>
<span>
{{candidate.screen_name}}
@ -17,8 +17,8 @@
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
<button v-if="posting" disabled class="btn btn-default base05 base01-background">{{$t('post_status.posting')}}</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">{{$t('general.submit')}}</button>
<button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
</div>
<div class='error' v-if="error">
Error: {{ error }}

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

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('registration.registration')}}
</div>
<div class="panel-body">
@ -39,7 +39,7 @@
</div>
-->
<div class='form-group'>
<button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>{{$t('general.submit')}}</button>
<button :disabled="registering" type='submit' class='btn btn-default base05 base02-background'>{{$t('general.submit')}}</button>
</div>
</div>
<div class='terms-of-service' v-html="termsofservice">

15
src/components/settings/settings.js
View file

@ -13,6 +13,7 @@ const settings = {
hoverPreviewLocal: this.$store.state.config.hoverPreview,
bgColorLocal: '',
fgColorLocal: '',
textColorLocal: '',
linkColorLocal: ''
}
},
@ -24,6 +25,18 @@ const settings = {
return this.$store.state.users.currentUser
}
},
mounted() {
const rgbstr2hex = (rgb) => {
if (rgb[0] === '#')
return rgb
rgb = rgb.match(/\d+/g)
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
}
this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
},
methods: {
setCustomTheme () {
if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
@ -39,12 +52,14 @@ const settings = {
}
const bgRgb = rgb(this.bgColorLocal)
const fgRgb = rgb(this.fgColorLocal)
const textRgb = rgb(this.textColorLocal)
const linkRgb = rgb(this.linkColorLocal)
if (bgRgb && fgRgb && linkRgb) {
console.log('all colors ok')
this.$store.dispatch('setOption', { name: 'customTheme', value: {
fg: fgRgb,
bg: bgRgb,
text: textRgb,
link: linkRgb
}})
}

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

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('settings.settings')}}
</div>
<div class="panel-body">
@ -11,10 +11,38 @@
<div class="setting-item">
<h3>Custom theme</h3>
<p>Enter hex color codes (#aabbcc) into the text fields.</p>
<input type="text" placeholder="Background" v-model="bgColorLocal">
<input type="text" placeholder="Foreground" v-model="fgColorLocal">
<input type="text" placeholder="Highlight" v-model="linkColorLocal">
<button @click="setCustomTheme">Submit</button>
<div class="color-container">
<div class="color-item">
<label for="bgcolor" class="base04">Background</label>
<input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
</div>
<div class="color-item">
<label for="fgcolor" class="base04">Foreground</label>
<input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
</div>
<div class="color-item">
<label for="textcolor" class="base04">Text</label>
<input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
</div>
<div class="color-item">
<label for="linkcolor" class="base04">Links</label>
<input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
</div>
</div>
<div>
<div class="panel">
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
<h4>Content</h4>
<br>
A bunch of more content and
<a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
<br>
<button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
</div>
</div>
</div>
<button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
</div>
<div class="setting-item">
<h2>{{$t('settings.filtering')}}</h2>
@ -86,4 +114,26 @@
.setting-list {
list-style-type: none;
}
.color-container {
display: flex;
}
.color-item {
max-width: 7em;
display:flex;
flex-wrap:wrap;
}
.theme-color-in {
max-width: 6em;
border-radius: 2px;
border: 0;
padding: 5px;
margin: 5px 0 5px 0;
}
.theme-preview-content {
padding: 20px;
}
</style>

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

@ -1,16 +1,16 @@
<template>
<div class="timeline panel panel-default" v-if="viewing == 'statuses'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{title}}
</div>
<button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
<button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
</button>
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
{{$t('timeline.error_fetching')}}
</div>
<div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
<div @click.prevent class="base04 base02-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.up_to_date')}}
</div>
</div>
@ -18,14 +18,14 @@
<div class="timeline">
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="base01-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
<div class="base02-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
</a>
<div class="base01-background base03-border new-status-notification text-center" v-else>...</div>
<div class="base02-background base03-border new-status-notification text-center" v-else>...</div>
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{$t('user_card.followers')}}
</div>
@ -37,7 +37,7 @@
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{$t('user_card.followees')}}
</div>

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

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('settings.user_settings')}}
</div>
<div class="panel-body profile-edit">
@ -10,7 +10,7 @@
<input class='name-changer base03-border' id='username' v-model="newname" :value="user.screen_name"></input>
<p>{{$t('settings.bio')}}</p>
<textarea class="bio base03-border" v-model="newbio"></textarea>
<button :disabled='newname.length <= 0' class="btn btn-default base05 base01-background" @click="updateProfile">{{$t('general.submit')}}</button>
<button :disabled='newname.length <= 0' class="btn btn-default base05 base02-background" @click="updateProfile">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.avatar')}}</h3>
@ -23,7 +23,7 @@
<input type="file" @change="uploadFile(0, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.profile_banner')}}</h3>
@ -36,7 +36,7 @@
<input type="file" @change="uploadFile(1, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.profile_background')}}</h3>
@ -47,7 +47,7 @@
<input type="file" @change="uploadFile(2, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
</div>
</div>
</div>