From 0c4dc26808c3bb7508bf9005f3c3430f1c7e2039 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Mar 2018 02:31:33 +0300 Subject: [PATCH] after nine years of development, hopefully, it has been worth the weight --- src/components/notifications/notifications.js | 3 ++- .../notifications/notifications.scss | 18 +++++++++++++++++- src/components/notifications/notifications.vue | 2 +- src/components/settings/settings.js | 6 +++++- src/components/settings/settings.vue | 8 ++++++-- src/components/status/status.vue | 8 ++++---- src/components/still-image/still-image.js | 7 ++++++- src/components/still-image/still-image.vue | 14 ++++++++++---- .../user_card_content/user_card_content.js | 4 ++++ .../user_card_content/user_card_content.vue | 17 +++++++++++++++-- src/i18n/messages.js | 2 ++ 11 files changed, 72 insertions(+), 17 deletions(-) diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 5f0d7f26..e9b83bf0 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -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) { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 4fda255b..3c500b36 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -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 { diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index b341fcef..8e6f12b2 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -10,7 +10,7 @@
- +
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index b88937bb..a26111d6 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -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 }) } } } diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 8fdd09de..5aa7596a 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -29,8 +29,8 @@
  • - - + +
  • @@ -40,6 +40,10 @@
    • +
  • + + +
    • diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 999adb21..d451b67c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -35,7 +35,7 @@
    - +
    @@ -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; diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index f0b25265..0839aca5 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -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: { diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 91d7f77a..5695c554 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -12,17 +12,23 @@ .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 { visibility: visible } diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 32d62ebb..8c9ccda1 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -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 diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index ef000c94..71a879df 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -7,7 +7,7 @@
    - +
    @@ -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); diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c4a62128..48708539 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -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: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх',