From 3257991f4196cb6c2c77b3f81ec9f1850e243211 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 3 Feb 2018 19:55:45 +0300 Subject: unfinished fetch() version that doesn't work --- src/components/status/status.vue | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 28272b0b..999adb21 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -34,7 +34,7 @@
- +
@@ -84,7 +84,7 @@
- +

{{ preview.user.name }} @@ -146,6 +146,7 @@ box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); margin-top: 0.5em; margin-left: 1em; + z-index: 50; .avatar { flex-shrink: 0; @@ -266,7 +267,6 @@ margin: 0.2em 0.3em 0 0; img { float: right; - border-radius: 5px; } } @@ -330,6 +330,17 @@ .status .avatar { width: 48px; height: 48px; + border-radius: 5px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + } + + &.animated::before { + display: none; + } &.retweeted { width: 40px; @@ -339,6 +350,15 @@ } } + .status:hover .animated.avatar { + canvas { + display: none; + } + img { + visibility: visible; + } + } + .status img.avatar-retweeter { width: 24px; height: 24px; -- cgit v1.2.3-70-g09d2 From 0c4dc26808c3bb7508bf9005f3c3430f1c7e2039 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Mar 2018 02:31:33 +0300 Subject: after nine years of development, hopefully, it has been worth the weight --- src/components/notifications/notifications.js | 3 ++- src/components/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 ++++++++++---- src/components/user_card_content/user_card_content.js | 4 ++++ src/components/user_card_content/user_card_content.vue | 17 +++++++++++++++-- src/i18n/messages.js | 2 ++ 11 files changed, 72 insertions(+), 17 deletions(-) (limited to 'src/components/status/status.vue') 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: 'Включить автоматическую загрузку новых сообщений при прокрутке вверх', -- cgit v1.2.3-70-g09d2 From aa0564406a95824cc45c815571292716b65806a1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 31 Mar 2018 21:14:36 +0300 Subject: getting rid of baseXX, some small fixes. Seems to be usable. --- src/App.scss | 79 ++++- src/App.vue | 8 +- src/_variables.scss | 7 +- src/components/attachment/attachment.vue | 200 +++++++------ src/components/chat_panel/chat_panel.vue | 4 +- src/components/conversation/conversation.vue | 2 +- src/components/delete_button/delete_button.vue | 5 +- src/components/favorite_button/favorite_button.vue | 6 +- .../instance_specific_panel.vue | 2 +- src/components/login_form/login_form.vue | 62 ++-- src/components/media_upload/media_upload.vue | 4 +- src/components/nav_panel/nav_panel.vue | 81 +++--- src/components/notifications/notifications.js | 2 +- src/components/notifications/notifications.scss | 27 +- src/components/notifications/notifications.vue | 8 +- .../post_status_form/post_status_form.vue | 295 +++++++++---------- src/components/registration/registration.vue | 104 ++++--- src/components/retweet_button/retweet_button.vue | 10 +- src/components/settings/settings.vue | 4 +- src/components/status/status.js | 5 - src/components/status/status.vue | 319 +++++++++++---------- src/components/style_switcher/style_switcher.js | 8 +- src/components/style_switcher/style_switcher.vue | 14 +- src/components/timeline/timeline.vue | 28 +- src/components/user_card/user_card.vue | 34 +-- .../user_card_content/user_card_content.js | 4 +- .../user_card_content/user_card_content.vue | 28 +- src/components/user_finder/user_finder.vue | 8 +- src/components/user_panel/user_panel.vue | 10 +- src/components/user_profile/user_profile.vue | 5 +- src/components/user_settings/user_settings.vue | 36 +-- src/services/style_setter/style_setter.js | 48 ++-- 32 files changed, 791 insertions(+), 666 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/App.scss b/src/App.scss index 95a653ce..6e0378db 100644 --- a/src/App.scss +++ b/src/App.scss @@ -33,14 +33,18 @@ body { font-family: sans-serif; font-size: 14px; margin: 0; + color: var(--fg); } a { text-decoration: none; + color: var(--link); } button{ user-select: none; + color: var(--faint); + background-color: var(--btn); border: none; border-radius: 5px; cursor: pointer; @@ -50,6 +54,8 @@ button{ font-size: 14px; font-family: sans-serif; + + &:hover { box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); } @@ -58,8 +64,72 @@ button{ cursor: not-allowed; opacity: 0.5; } + + &.pressed { + color: var(--faint); + background-color: var(--bg) + } +} + + +input, textarea, select { + border: none; + border-radius: 5px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + border-top: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 2px black inset; + background-color: var(--lightBg); + color: var(--lightFg); + font-family: sans-serif; + font-size: 14px; + padding: 5px; + + // TODO: Restyle