after nine years of development, hopefully, it has been worth the weight

This commit is contained in:
Henry Jameson 2018-03-12 02:31:33 +03:00
parent 5efd8a4aa6
commit 0c4dc26808
11 changed files with 72 additions and 17 deletions

View file

@ -1,4 +1,5 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import StillImage from '../still-image/still-image.vue'
import { sortBy, take, filter } from 'lodash' import { sortBy, take, filter } from 'lodash'
@ -31,7 +32,7 @@ const Notifications = {
} }
}, },
components: { components: {
Status Status, StillImage
}, },
watch: { watch: {
unseenCount (count) { unseenCount (count) {

View file

@ -88,10 +88,26 @@
} }
.avatar { .avatar {
padding-top: 0.3em; margin-top: 0.3em;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
overflow: hidden;
line-height: 0;
&.animated::before {
display: none;
}
}
&:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
} }
&:last-child { &:last-child {

View file

@ -10,7 +10,7 @@
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'> <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
<div> <div>
<a :href="notification.action.user.statusnet_profile_url" target="_blank"> <a :href="notification.action.user.statusnet_profile_url" target="_blank">
<img class='avatar' :src="notification.action.user.profile_image_url_original"> <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
</a> </a>
</div> </div>
<div class='text' style="width: 100%;"> <div class='text' style="width: 100%;">

View file

@ -10,7 +10,8 @@ const settings = {
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming, streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview hoverPreviewLocal: this.$store.state.config.hoverPreview,
stopGifs: this.$store.state.config.stopGifs
} }
}, },
components: { components: {
@ -43,6 +44,9 @@ const settings = {
muteWordsString (value) { muteWordsString (value) {
value = filter(value.split('\n'), (word) => trim(word).length > 0) value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value }) this.$store.dispatch('setOption', { name: 'muteWords', value })
},
stopGifs (value) {
this.$store.dispatch('setOption', { name: 'stopGifs', value })
} }
} }
} }

View file

@ -29,8 +29,8 @@
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label> <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
</li> </li>
<li> <li>
<input type="checkbox" id="autoLoad" v-model="autoLoadLocal"> <input type="checkbox" id="autoload" v-model="autoloadlocal">
<label for="autoLoad">{{$t('settings.autoload')}}</label> <label for="autoload">{{$t('settings.autoload')}}</label>
</li> </li>
<li> <li>
<input type="checkbox" id="streaming" v-model="streamingLocal"> <input type="checkbox" id="streaming" v-model="streamingLocal">
@ -40,6 +40,10 @@
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal"> <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label> <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
</li> </li>
<li>
<input type="checkbox" id="stopGifs" v-model="stopGifs">
<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
</li>
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -35,7 +35,7 @@
<div class="media-left"> <div class="media-left">
<a :href="status.user.statusnet_profile_url"> <a :href="status.user.statusnet_profile_url">
<StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/> <StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/>
<img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img> <StillImage v-if="retweet" class='avatar avatar-retweeter' :src="statusoid.user.profile_image_url_original"/>
</a> </a>
</div> </div>
<div class="media-body"> <div class="media-body">
@ -265,7 +265,7 @@
.media-left { .media-left {
margin: 0.2em 0.3em 0 0; margin: 0.2em 0.3em 0 0;
img { .avatar {
float: right; float: right;
} }
} }
@ -359,7 +359,7 @@
} }
} }
.status img.avatar-retweeter { .status .avatar-retweeter {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute; position: absolute;
@ -433,7 +433,7 @@
} }
} }
.status img.avatar-retweeter { .status .avatar-retweeter {
width: 22px; width: 22px;
height: 22px; height: 22px;
position: absolute; position: absolute;

View file

@ -4,9 +4,14 @@ const StillImage = {
'referrerpolicy', 'referrerpolicy',
'mimetype' 'mimetype'
], ],
data () {
return {
stopGifs: this.$store.state.config.stopGifs
}
},
computed: { computed: {
animated () { animated () {
return this.mimetype === 'image/gif' || this.src.endsWith('.gif') return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
} }
}, },
methods: { methods: {

View file

@ -12,15 +12,21 @@
.still-image { .still-image {
position: relative; position: relative;
line-height: 0; line-height: 0;
overflow: hidden;
&:hover canvas { &:hover canvas {
display: none; display: none;
} }
img {
width: 100%;
height: 100%
}
&.animated { &.animated {
&:hover::before, &:hover::before,
img { img {
visibility: hidden visibility: hidden;
} }
&:hover img { &:hover img {

View file

@ -1,3 +1,4 @@
import StillImage from '../still-image/still-image.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default { export default {
@ -35,6 +36,9 @@ export default {
return Math.round(this.user.statuses_count / days) return Math.round(this.user.statuses_count / days)
} }
}, },
components: {
StillImage
},
methods: { methods: {
followUser () { followUser () {
const store = this.$store const store = this.$store

View file

@ -7,7 +7,7 @@
</router-link> </router-link>
<div class='container'> <div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }"> <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<img :src="user.profile_image_url_original"> <StillImage class="avatar" :src="user.profile_image_url_original"/>
</router-link> </router-link>
<span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-user"></span>
<div class="name-and-screen-name"> <div class="name-and-screen-name">
@ -135,13 +135,26 @@
overflow: hidden; overflow: hidden;
} }
img { .avatar {
border-radius: 5px; border-radius: 5px;
flex: 1 0 100%; flex: 1 0 100%;
width: 56px; width: 56px;
height: 56px; height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75); box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
object-fit: cover; object-fit: cover;
&.animated::before {
display: none;
}
}
&:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
} }
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0); text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);

View file

@ -245,6 +245,7 @@ const en = {
hide_attachments_in_tl: 'Hide attachments in timeline', hide_attachments_in_tl: 'Hide attachments in timeline',
hide_attachments_in_convo: 'Hide attachments in conversations', hide_attachments_in_convo: 'Hide attachments in conversations',
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
stop_gifs: 'Play-on-hover GIFs',
autoload: 'Enable automatic loading when scrolled to the bottom', autoload: 'Enable automatic loading when scrolled to the bottom',
streaming: 'Enable automatic streaming of new posts when scrolled to the top', streaming: 'Enable automatic streaming of new posts when scrolled to the top',
reply_link_preview: 'Enable reply-link preview on mouse hover', reply_link_preview: 'Enable reply-link preview on mouse hover',
@ -1096,6 +1097,7 @@ const ru = {
attachments: 'Вложения', attachments: 'Вложения',
hide_attachments_in_tl: 'Прятать вложения в ленте', hide_attachments_in_tl: 'Прятать вложения в ленте',
hide_attachments_in_convo: 'Прятать вложения в разговорах', hide_attachments_in_convo: 'Прятать вложения в разговорах',
stop_gifs: 'Проигрывать GIF анимации только при наведении',
nsfw_clickthrough: 'Включить скрытие NSFW вложений', nsfw_clickthrough: 'Включить скрытие NSFW вложений',
autoload: 'Включить автоматическую загрузку при прокрутке вниз', autoload: 'Включить автоматическую загрузку при прокрутке вниз',
streaming: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх', streaming: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх',