aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue6
-rw-r--r--src/components/conversation/conversation.vue2
-rw-r--r--src/components/login_form/login_form.vue4
-rw-r--r--src/components/notifications/notifications.vue4
-rw-r--r--src/components/post_status_form/post_status_form.vue6
-rw-r--r--src/components/registration/registration.vue4
-rw-r--r--src/components/settings/settings.js46
-rw-r--r--src/components/settings/settings.vue60
-rw-r--r--src/components/timeline/timeline.vue14
-rw-r--r--src/components/user_settings/user_settings.vue10
-rw-r--r--src/modules/config.js5
-rw-r--r--src/services/style_setter/style_setter.js57
12 files changed, 187 insertions, 31 deletions
diff --git a/src/App.vue b/src/App.vue
index 0d004665..74a18dc7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
<template>
<div id="app" v-bind:style="style" class="base02-background">
- <nav class='container base01-background base04' @click="scrollToTop()" id="nav">
+ <nav class='container base02-background base05' @click="scrollToTop()" id="nav">
<div class='inner-nav' :style="logoStyle">
<div class='item'>
<router-link :to="{ name: 'root'}">{{sitename}}</router-link>
@@ -14,8 +14,8 @@
</nav>
<div class="container" id="content">
<div class="panel-switcher">
- <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
- <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
+ <button @click="activatePanel('sidebar')" class="base02-background base05">Sidebar</button>
+ <button @click="activatePanel('timeline')" class="base02-background base05">Timeline</button>
</div>
<div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
<div class="sidebar-bounds">
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 201afcd5..60d43fff 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -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>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c05488ec..c293d611 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -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'>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 1e5f6975..64624873 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -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}'>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 33614637..4b9072a4 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -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 }}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 755489d7..adc751a3 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -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">
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b88937bb..235ccfbb 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -10,7 +10,11 @@ const settings = {
muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming,
- hoverPreviewLocal: this.$store.state.config.hoverPreview
+ hoverPreviewLocal: this.$store.state.config.hoverPreview,
+ bgColorLocal: '',
+ fgColorLocal: '',
+ textColorLocal: '',
+ linkColorLocal: ''
}
},
components: {
@@ -21,6 +25,46 @@ 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) {
+ // reset to picked themes
+ }
+ const rgb = (hex) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+ 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
+ }})
+ }
+ }
+ },
watch: {
hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 6a311d55..8d9c3360 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -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">
@@ -9,6 +9,42 @@
<style-switcher></style-switcher>
</div>
<div class="setting-item">
+ <h3>Custom theme</h3>
+ <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+ <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>
<p>{{$t('settings.filtering_explanation')}}</p>
<textarea id="muteWords" v-model="muteWordsString"></textarea>
@@ -78,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>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 18e27c71..ad741e3b 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -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>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 003ee3bd..74b0ff2a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -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>
diff --git a/src/modules/config.js b/src/modules/config.js
index ac17747e..1811faa8 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -32,7 +32,10 @@ const config = {
break
case 'theme':
const fullPath = `/static/css/${value}`
- StyleSetter.setStyle(fullPath, commit)
+ StyleSetter.setStyle(fullPath, null, commit)
+ break
+ case 'customTheme':
+ StyleSetter.setStyle(null, value, commit)
}
}
}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 59d5a7de..1633c433 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
-import { times } from 'lodash'
+import { times, map } from 'lodash'
-const setStyle = (href, commit) => {
+const setStyle = (href, col, commit) => {
/***
What's going on here?
I want to make it easy for admins to style this application. To have
@@ -48,7 +48,58 @@ const setStyle = (href, commit) => {
styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
body.style.display = 'initial'
}
- cssEl.addEventListener('load', setDynamic)
+
+ const rgb2hex = (r, g, b) => {
+ [r, g, b] = map([r, g, b], (val) => {
+ val = val < 0 ? 0 : val
+ val = val > 255 ? 255 : val
+ return val
+ })
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+ }
+
+ const setColors = () => {
+ const styleEl = document.createElement('style')
+ head.appendChild(styleEl)
+ const styleSheet = styleEl.sheet
+
+ const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
+ let colors = {}
+
+ let mod = 10
+ if (isDark) {
+ mod = mod * -1
+ }
+ colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
+ colors['base01'] = rgb2hex(col.bg.r - mod, col.bg.g - mod, col.bg.b - mod) // hilighted bg
+ colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
+ colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
+ colors['base04'] = rgb2hex(col.text.r + mod, col.text.g + mod, col.text.b + mod) // faint text
+ colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text
+ colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+ colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
+ colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
+
+ times(9, (n) => {
+ const color = colors[`base0${n}`]
+ styleSheet.insertRule(`.base0${n} { color: ${color}`, 'index-max')
+ styleSheet.insertRule(`.base0${n}-background { background-color: ${color}`, 'index-max')
+ })
+
+ commit('setOption', { name: 'colors', value: colors })
+
+ styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
+ styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
+ styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
+ styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
+ console.log(styleSheet)
+ body.style.display = 'initial'
+ }
+ if (col) {
+ setColors()
+ } else {
+ cssEl.addEventListener('load', setDynamic)
+ }
}
const StyleSetter = {
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 12:40:58 +0000