forked from AkkomaGang/akkoma-fe
after nine years of development, hopefully, it has been worth the weight
This commit is contained in:
Henry Jameson
parent
5efd8a4aa6
commit
0c4dc26808
11 changed files with 72 additions and 17 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import Status from '../status/status.vue'
|
||||
import StillImage from '../still-image/still-image.vue'
|
||||
|
||||
import { sortBy, take, filter } from 'lodash'
|
||||
|
||||
|
|
@ -31,7 +32,7 @@ const Notifications = {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
Status
|
||||
Status, StillImage
|
||||
},
|
||||
watch: {
|
||||
unseenCount (count) {
|
||||
|
|
|
|||
|
|
@ -88,10 +88,26 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
padding-top: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
|
||||
&.animated::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover .animated.avatar {
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class='text' style="width: 100%;">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ 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,
|
||||
stopGifs: this.$store.state.config.stopGifs
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -43,6 +44,9 @@ const settings = {
|
|||
muteWordsString (value) {
|
||||
value = filter(value.split('\n'), (word) => trim(word).length > 0)
|
||||
this.$store.dispatch('setOption', { name: 'muteWords', value })
|
||||
},
|
||||
stopGifs (value) {
|
||||
this.$store.dispatch('setOption', { name: 'stopGifs', value })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
|
||||
<label for="autoLoad">{{$t('settings.autoload')}}</label>
|
||||
<input type="checkbox" id="autoload" v-model="autoloadlocal">
|
||||
<label for="autoload">{{$t('settings.autoload')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
||||
|
|
@ -40,6 +40,10 @@
|
|||
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
|
||||
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="stopGifs" v-model="stopGifs">
|
||||
<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="media-left">
|
||||
<a :href="status.user.statusnet_profile_url">
|
||||
<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>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
|
|
@ -265,7 +265,7 @@
|
|||
|
||||
.media-left {
|
||||
margin: 0.2em 0.3em 0 0;
|
||||
img {
|
||||
.avatar {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -359,7 +359,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status img.avatar-retweeter {
|
||||
.status .avatar-retweeter {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
|
|
@ -433,7 +433,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status img.avatar-retweeter {
|
||||
.status .avatar-retweeter {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,14 @@ const StillImage = {
|
|||
'referrerpolicy',
|
||||
'mimetype'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
stopGifs: this.$store.state.config.stopGifs
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
animated () {
|
||||
return this.mimetype === 'image/gif' || this.src.endsWith('.gif')
|
||||
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,21 @@
|
|||
.still-image {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
&.animated {
|
||||
&:hover::before,
|
||||
img {
|
||||
visibility: hidden
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import StillImage from '../still-image/still-image.vue'
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
|
||||
export default {
|
||||
|
|
@ -35,6 +36,9 @@ export default {
|
|||
return Math.round(this.user.statuses_count / days)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StillImage
|
||||
},
|
||||
methods: {
|
||||
followUser () {
|
||||
const store = this.$store
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</router-link>
|
||||
<div class='container'>
|
||||
<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>
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
<div class="name-and-screen-name">
|
||||
|
|
@ -135,13 +135,26 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
.avatar {
|
||||
border-radius: 5px;
|
||||
flex: 1 0 100%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -245,6 +245,7 @@ const en = {
|
|||
hide_attachments_in_tl: 'Hide attachments in timeline',
|
||||
hide_attachments_in_convo: 'Hide attachments in conversations',
|
||||
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
|
||||
stop_gifs: 'Play-on-hover GIFs',
|
||||
autoload: 'Enable automatic loading when scrolled to the bottom',
|
||||
streaming: 'Enable automatic streaming of new posts when scrolled to the top',
|
||||
reply_link_preview: 'Enable reply-link preview on mouse hover',
|
||||
|
|
@ -1096,6 +1097,7 @@ const ru = {
|
|||
attachments: 'Вложения',
|
||||
hide_attachments_in_tl: 'Прятать вложения в ленте',
|
||||
hide_attachments_in_convo: 'Прятать вложения в разговорах',
|
||||
stop_gifs: 'Проигрывать GIF анимации только при наведении',
|
||||
nsfw_clickthrough: 'Включить скрытие NSFW вложений',
|
||||
autoload: 'Включить автоматическую загрузку при прокрутке вниз',
|
||||
streaming: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх',
|
||||
|
|
|
|||
Loading…
Reference in a new issue