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

added ability to pick the style of highlighting

Browse source
This commit is contained in:
Henry Jameson 2018-08-05 05:18:04 +03:00
parent d886ab752c
commit 6a81aa2745
6 changed files with 79 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/notification/notification.js
View file

@ -27,8 +27,7 @@ const Notification = {
userStyle () {
const highlight = this.$store.state.config.highlight
const user = this.notification.action.user
const color = highlight[user.screen_name]
return highlightStyle(color)
return highlightStyle(highlight[user.screen_name])
}
}
}

6
src/components/status/status.js
View file

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

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

@ -33,13 +33,15 @@ export default {
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
return Math.round(this.user.statuses_count / days)
},
userHighlightEnabled: {
userHighlightType: {
get () {
return this.$store.state.config.highlight[this.user.screen_name]
const data = this.$store.state.config.highlight[this.user.screen_name]
return data && data.type || 'disabled'
},
set (enabled) {
if (enabled) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
set (type) {
const data = this.$store.state.config.highlight[this.user.screen_name]
if (type !== 'disabled') {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
} else {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
}
@ -47,7 +49,8 @@ export default {
},
userHighlightColor: {
get () {
return this.$store.state.config.highlight[this.user.screen_name]
const data = this.$store.state.config.highlight[this.user.screen_name]
return data && data.color
},
set (color) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })

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

@ -26,10 +26,16 @@
</div>
<div class="floater" v-if="switcher || isOtherUser">
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
<input type="checkbox" class="userHighlightChk" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
<label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id">
<i class="icon-brush"></i>
<input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<label for="style-switcher" class='userHighlightSel select'>
<select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
<option value="disabled">No highlight</option>
<option value="solid">Solid bg</option>
<option value="striped">Striped bg</option>
<option value="side">Side stripe</option>
</select>
<i class="icon-down-open"/>
</label>
</div>
</div>
@ -307,12 +313,25 @@
.userHighlightCl {
padding: 2px 10px;
height: 22px;
vertical-align: top;
margin-right: 0
}
.userHighlightSel,
.userHighlightSel.select {
padding-top: 0;
padding-bottom: 0;
}
.userHighlightSel.select i {
line-height: 22px;
}
.userHighlightChk + label::before {
.userHighlightText {
width: 70px;
}
.userHighlightCl,
.userHighlightText,
.userHighlightSel,
.userHighlightSel.select {
height: 22px;
vertical-align: top;
margin-right: 0
}