Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

both bugs fixed. it's reactive and no more conflicting cards

Browse Source
This commit is contained in:
Henry Jameson 2018-06-19 16:17:50 +03:00
parent fa8c221f3a
commit 8ccebbe156
7 changed files with 41 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/notification/notification.js
View File

@ -22,11 +22,14 @@ const Notification = {
},
computed: {
userClass () {
return highlightClass(this.notification.action.user, this.$store)
return highlightClass(this.notification.action.user)
},
userStyle () {
return highlightStyle(this.notification.action.user, this.$store)
},
const highlight = this.$store.state.config.highlight
const user = this.notification.action.user
const color = highlight[user.screen_name]
return highlightStyle(color)
}
}
}

12
src/components/status/status.js
View File

@ -38,19 +38,23 @@ const Status = {
},
repeaterClass () {
const user = this.statusoid.user
return highlightClass(user, this.$store)
return highlightClass(user)
},
userClass () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return highlightClass(user, this.$store)
return highlightClass(user)
},
repeaterStyle () {
const user = this.statusoid.user
return highlightStyle(user, this.$store)
const highlight = this.$store.state.config.highlight
const color = highlight[user.screen_name]
return highlightStyle(color)
},
userStyle () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return highlightStyle(user, this.$store)
const highlight = this.$store.state.config.highlight
const color = highlight[user.screen_name]
return highlightStyle(color)
},
hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) ||

33
src/components/user_card_content/user_card_content.js
View File

@ -3,16 +3,6 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ],
data() {
return {
userHighlightLocal: ''
}
},
mounted () {
const config = this.$store.state.config
config.highlight = config.highlight || {}
this.userHighlightLocal = config.highlight[this.user.screen_name]
},
computed: {
headingStyle () {
const color = this.$store.state.config.colors.bg
@ -45,29 +35,22 @@ export default {
},
userHighlightEnabled: {
get () {
return this.userHighlightLocal
return this.$store.state.config.highlight[this.user.screen_name]
},
set (value) {
const config = this.$store.state.config
config.highlight = config.highlight || {}
if (value) {
this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
set (enabled) {
if (enabled) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
} else {
this.userHighlightLocal = undefined
delete config.highlight[this.user.screen_name]
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
}
}
},
userHighlightColor: {
get () {
const config = this.$store.state.config
config.highlight = config.highlight || {}
return config.highlight[this.user.screen_name]
return this.$store.state.config.highlight[this.user.screen_name]
},
set (value) {
const config = this.$store.state.config
config.highlight = config.highlight || {}
config.highlight[this.user.screen_name] = value
set (color) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
}
}
},

7
src/components/user_card_content/user_card_content.vue
View File

@ -9,9 +9,10 @@
<i class="icon-link-ext usersettings"></i>
</a>
<div class="floater" v-if="switcher || isOtherUser">
<input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
<label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
<input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
<input type="checkbox" class="button" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
<label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"></label>
</div>
<div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">

15
src/modules/config.js
View File

@ -1,4 +1,4 @@
import { set } from 'vue'
import { set, delete as del } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = {
@ -10,7 +10,8 @@ const defaultState = {
autoLoad: true,
streaming: false,
hoverPreview: true,
muteWords: []
muteWords: [],
highlight: {}
}
const config = {
@ -18,12 +19,22 @@ const config = {
mutations: {
setOption (state, { name, value }) {
set(state, name, value)
},
setHighlight (state, { user, color }) {
if (color) {
set(state.highlight, user, color)
} else {
del(state.highlight, user)
}
}
},
actions: {
setPageTitle ({state}, option = '') {
document.title = `${option} ${state.name}`
},
setHighlight ({ commit, dispatch }, { user, color }) {
commit('setHighlight', {user, color})
},
setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value})
switch (name) {

4
src/modules/users.js
View File

@ -43,10 +43,6 @@ export const mutations = {
setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id]
},
setHighlighted (state, { user: {id}, color }) {
const user = state.usersObject[id]
set(user, 'color', color)
},
setColor (state, { user: {id}, highlighted }) {
const user = state.usersObject[id]
set(user, 'highlight', highlighted)

5
src/services/user_highlighter/user_highlighter.js
View File

@ -1,7 +1,6 @@
import { hex2rgb } from '../color_convert/color_convert.js'
const highlightStyle = (user, store) => {
const color = store.state.config.highlight[user.screen_name]
if (!color) return
const highlightStyle = (color) => {
if (typeof color !== 'string') return
const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`