From 947d7cd6f285c7c683b92f79d9d2c08dd2131f5d Mon Sep 17 00:00:00 2001 From: Maksim Pechnikov Date: Mon, 7 Sep 2020 14:27:37 +0300 Subject: added import/export mutes --- .../settings_modal/tabs/data_import_export_tab.js | 28 ++++++++++++++++------ .../settings_modal/tabs/data_import_export_tab.vue | 17 +++++++++++++ 2 files changed, 38 insertions(+), 7 deletions(-) (limited to 'src/components/settings_modal') diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js index 168f89e1..f4b736d2 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.js +++ b/src/components/settings_modal/tabs/data_import_export_tab.js @@ -1,6 +1,7 @@ import Importer from 'src/components/importer/importer.vue' import Exporter from 'src/components/exporter/exporter.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' +import { mapState } from 'vuex' const DataImportExportTab = { data () { @@ -18,21 +19,26 @@ const DataImportExportTab = { Checkbox }, computed: { - user () { - return this.$store.state.users.currentUser - } + ...mapState({ + backendInteractor: (state) => state.api.backendInteractor, + user: (state) => state.users.currentUser + }) }, methods: { getFollowsContent () { - return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id }) + return this.backendInteractor.exportFriends({ id: this.user.id }) .then(this.generateExportableUsersContent) }, getBlocksContent () { - return this.$store.state.api.backendInteractor.fetchBlocks() + return this.backendInteractor.fetchBlocks() + .then(this.generateExportableUsersContent) + }, + getMutesContent () { + return this.backendInteractor.fetchMutes() .then(this.generateExportableUsersContent) }, importFollows (file) { - return this.$store.state.api.backendInteractor.importFollows({ file }) + return this.backendInteractor.importFollows({ file }) .then((status) => { if (!status) { throw new Error('failed') @@ -40,7 +46,15 @@ const DataImportExportTab = { }) }, importBlocks (file) { - return this.$store.state.api.backendInteractor.importBlocks({ file }) + return this.backendInteractor.importBlocks({ file }) + .then((status) => { + if (!status) { + throw new Error('failed') + } + }) + }, + importMutes (file) { + return this.backendInteractor.importMutes({ file }) .then((status) => { if (!status) { throw new Error('failed') diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue index b5d0f5ed..a406077d 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.vue +++ b/src/components/settings_modal/tabs/data_import_export_tab.vue @@ -36,6 +36,23 @@ :export-button-label="$t('settings.block_export_button')" /> +
+

{{ $t('settings.mute_import') }}

+

{{ $t('settings.import_mutes_from_a_csv_file') }}

+ +
+
+

{{ $t('settings.mute_export') }}

+ +
-- cgit v1.2.3-70-g09d2 From f174f289a93e6bef1182a2face00bb809da49d18 Mon Sep 17 00:00:00 2001 From: Shpuld Shpludson Date: Tue, 29 Sep 2020 10:18:37 +0000 Subject: Timeline virtual scrolling --- CHANGELOG.md | 3 + src/components/attachment/attachment.vue | 4 ++ src/components/conversation/conversation.js | 20 ++++++- src/components/conversation/conversation.vue | 11 +++- src/components/react_button/react_button.js | 5 +- src/components/retweet_button/retweet_button.js | 5 +- src/components/settings_modal/tabs/general_tab.vue | 5 ++ src/components/status/status.js | 31 ++++++++--- src/components/status/status.scss | 5 ++ src/components/status/status.vue | 7 ++- src/components/status_content/status_content.vue | 2 + src/components/still-image/still-image.js | 10 ++-- src/components/timeline/timeline.js | 64 +++++++++++++++++++++- src/components/timeline/timeline.vue | 6 +- .../video_attachment/video_attachment.js | 47 +++++++++++----- .../video_attachment/video_attachment.vue | 3 +- src/i18n/en.json | 1 + src/modules/config.js | 3 +- src/modules/instance.js | 1 + src/modules/statuses.js | 6 ++ src/services/api/api.service.js | 2 + 21 files changed, 203 insertions(+), 38 deletions(-) (limited to 'src/components/settings_modal') diff --git a/CHANGELOG.md b/CHANGELOG.md index 18dafa8e..eebc7115 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Added +- New option to optimize timeline rendering to make the site more responsive (enabled by default) + ## [Unreleased patch] ### Changed diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 63e0ceba..7fabc963 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -80,6 +80,8 @@ class="video" :attachment="attachment" :controls="allowPlay" + @play="$emit('play')" + @pause="$emit('pause')" />
@@ -18,6 +20,7 @@
+
@@ -53,8 +60,8 @@ .conversation-status { border-color: $fallback--border; border-color: var(--border, $fallback--border); - border-left: 4px solid $fallback--cRed; - border-left: 4px solid var(--cRed, $fallback--cRed); + border-left-color: $fallback--cRed; + border-left-color: var(--cRed, $fallback--cRed); } .conversation-status:last-child { diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index abcf0455..11627e9c 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -1,5 +1,4 @@ import Popover from '../popover/popover.vue' -import { mapGetters } from 'vuex' const ReactButton = { props: ['status'], @@ -35,7 +34,9 @@ const ReactButton = { } return this.$store.state.instance.emoji || [] }, - ...mapGetters(['mergedConfig']) + mergedConfig () { + return this.$store.getters.mergedConfig + } } } diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index d9a0f92e..5a41f22d 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -1,4 +1,3 @@ -import { mapGetters } from 'vuex' const RetweetButton = { props: ['status', 'loggedIn', 'visibility'], @@ -28,7 +27,9 @@ const RetweetButton = { 'animate-spin': this.animated } }, - ...mapGetters(['mergedConfig']) + mergedConfig () { + return this.$store.getters.mergedConfig + } } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 7f06d0bd..13482de7 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -58,6 +58,11 @@ {{ $t('settings.emoji_reactions_on_timeline') }} +
  • + + {{ $t('settings.virtual_scrolling') }} + +
    • diff --git a/src/components/status/status.js b/src/components/status/status.js index d263da68..cd6e2f72 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -15,7 +15,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { muteWordHits } from '../../services/status_parser/status_parser.js' import { unescape, uniqBy } from 'lodash' -import { mapGetters, mapState } from 'vuex' const Status = { name: 'Status', @@ -54,6 +53,8 @@ const Status = { replying: false, unmuted: false, userExpanded: false, + mediaPlaying: [], + suspendable: true, error: null } }, @@ -157,7 +158,7 @@ const Status = { return this.mergedConfig.hideFilteredStatuses }, hideStatus () { - return this.deleted || (this.muted && this.hideFilteredStatuses) + return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden }, isFocused () { // retweet or root of an expanded conversation @@ -207,11 +208,18 @@ const Status = { hidePostStats () { return this.mergedConfig.hidePostStats }, - ...mapGetters(['mergedConfig']), - ...mapState({ - betterShadow: state => state.interface.browserSupport.cssFilter, - currentUser: state => state.users.currentUser - }) + currentUser () { + return this.$store.state.users.currentUser + }, + betterShadow () { + return this.$store.state.interface.browserSupport.cssFilter + }, + mergedConfig () { + return this.$store.getters.mergedConfig + }, + isSuspendable () { + return !this.replying && this.mediaPlaying.length === 0 + } }, methods: { visibilityIcon (visibility) { @@ -251,6 +259,12 @@ const Status = { }, generateUserProfileLink (id, name) { return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames) + }, + addMediaPlaying (id) { + this.mediaPlaying.push(id) + }, + removeMediaPlaying (id) { + this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id) } }, watch: { @@ -280,6 +294,9 @@ const Status = { if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) { this.$store.dispatch('fetchFavs', this.status.id) } + }, + 'isSuspendable': function (val) { + this.suspendable = val } }, filters: { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 8d292d3f..c92d870b 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -25,6 +25,11 @@ $status-margin: 0.75em; --icon: var(--selectedPostIcon, $fallback--icon); } + &.-conversation { + border-left-width: 4px; + border-left-style: solid; + } + .status-container { display: flex; padding: $status-margin; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 282ad37d..aa67e433 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -16,7 +16,7 @@ />
    diff --git a/src/i18n/en.json b/src/i18n/en.json index 8540f551..8d831e3d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -430,6 +430,7 @@ "false": "no", "true": "yes" }, + "virtual_scrolling": "Optimize timeline rendering", "fun": "Fun", "greentext": "Meme arrows", "notifications": "Notifications", diff --git a/src/modules/config.js b/src/modules/config.js index 409d77a4..444b8ec7 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -65,7 +65,8 @@ export const defaultState = { useContainFit: false, greentext: undefined, // instance default hidePostStats: undefined, // instance default - hideUserStats: undefined // instance default + hideUserStats: undefined, // instance default + virtualScrolling: undefined // instance default } // caching the instance default properties diff --git a/src/modules/instance.js b/src/modules/instance.js index 3fe3bbf3..b3cbffc6 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -41,6 +41,7 @@ const defaultState = { sidebarRight: false, subjectLineBehavior: 'email', theme: 'pleroma-dark', + virtualScrolling: true, // Nasty stuff customEmoji: [], diff --git a/src/modules/statuses.js b/src/modules/statuses.js index e108b2a7..155cc4b9 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -568,6 +568,9 @@ export const mutations = { updateStatusWithPoll (state, { id, poll }) { const status = state.allStatusesObject[id] status.poll = poll + }, + setVirtualHeight (state, { statusId, height }) { + state.allStatusesObject[statusId].virtualHeight = height } } @@ -753,6 +756,9 @@ const statuses = { store.commit('addNewStatuses', { statuses: data.statuses }) return data }) + }, + setVirtualHeight ({ commit }, { statusId, height }) { + commit('setVirtualHeight', { statusId, height }) } }, mutations diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index da519001..d1842e17 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -539,8 +539,10 @@ const fetchTimeline = ({ const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') url += `?${queryString}` + let status = '' let statusText = '' + let pagination = {} return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { -- cgit v1.2.3-70-g09d2 From e8650d3409aa34a0195629d2077bad68bcade439 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Oct 2020 21:03:46 +0300 Subject: chevrons-downs, settings --- src/components/chat/chat.js | 8 +++++++ src/components/chat/chat.vue | 5 +++-- src/components/contrast_ratio/contrast_ratio.vue | 26 +++++++++++++++++----- src/components/font_control/font_control.js | 8 +++++++ src/components/font_control/font_control.vue | 2 +- .../interface_language_switcher.vue | 10 ++++++++- .../settings_modal/tabs/filtering_tab.js | 8 +++++++ .../settings_modal/tabs/filtering_tab.vue | 2 +- src/components/settings_modal/tabs/general_tab.js | 8 +++++++ src/components/settings_modal/tabs/general_tab.vue | 4 ++-- .../settings_modal/tabs/theme_tab/theme_tab.js | 8 +++++++ .../settings_modal/tabs/theme_tab/theme_tab.vue | 4 ++-- src/components/shadow_control/shadow_control.js | 14 ++++++++++++ src/components/shadow_control/shadow_control.vue | 10 ++++----- 14 files changed, 97 insertions(+), 20 deletions(-) (limited to 'src/components/settings_modal') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 34e723d0..1630ba80 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue' import chatService from '../../services/chat_service/chat_service.js' import { promiseInterval } from '../../services/promise_interval/promise_interval.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faChevronDown +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faChevronDown +) const BOTTOMED_OUT_OFFSET = 10 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 2e4538c8..0d44c920 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -58,14 +58,15 @@ :class="{ 'visible': jumpToBottomButtonVisible }" @click="scrollDown({ behavior: 'smooth' })" > - + +
    {{ newMessageCount }}
    -     + - + - + - + - + - + - + + diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 1630ba80..083f850f 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' import { library } from '@fortawesome/fontawesome-svg-core' import { - faChevronDown + faChevronDown, + faChevronLeft } from '@fortawesome/free-solid-svg-icons' library.add( - faChevronDown + faChevronDown, + faChevronLeft ) const BOTTOMED_OUT_OFFSET = 10 diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 012a1b1d..b7b0d377 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -58,12 +58,8 @@ .go-back-button { cursor: pointer; - margin-right: 1.4em; - - i { - display: flex; - align-items: center; - } + margin-right: 1.7em; + margin-left: 0.3em; } .jump-to-bottom-button { diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 0d44c920..0670f1ac 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -14,7 +14,7 @@ class="go-back-button" @click="goBack" > - +
    diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js index d023efc0..71585995 100644 --- a/src/components/chat_new/chat_new.js +++ b/src/components/chat_new/chat_new.js @@ -1,6 +1,16 @@ import { mapState, mapGetters } from 'vuex' import BasicUserCard from '../basic_user_card/basic_user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSearch, + faChevronLeft +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSearch, + faChevronLeft +) const chatNew = { components: { diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss index 11305444..716172b0 100644 --- a/src/components/chat_new/chat_new.scss +++ b/src/components/chat_new/chat_new.scss @@ -8,9 +8,7 @@ } } - .icon-search { - font-size: 1.5em; - float: right; + .search-icon { margin-right: 0.3em; } @@ -25,5 +23,7 @@ .go-back-button { cursor: pointer; + margin-right: 1.7em; + margin-left: 0.3em; } } diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index 3333dbf9..95eebe6b 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -11,12 +11,12 @@ class="go-back-button" @click="goBack" > - +
    - +
    - + diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js index bd32b266..9e736cfb 100644 --- a/src/components/mobile_nav/mobile_nav.js +++ b/src/components/mobile_nav/mobile_nav.js @@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service' import { mapGetters } from 'vuex' import { library } from '@fortawesome/fontawesome-svg-core' import { - faTimes + faTimes, + faBell, + faBars } from '@fortawesome/free-solid-svg-icons' library.add( - faTimes + faTimes, + faBell, + faBars ) const MobileNav = { diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index e5664dc5..4d91af77 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -15,7 +15,7 @@ class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()" > - +
    - +
    - +
    - +
    @@ -39,7 +39,7 @@ transform: translateY(150%); } - i { + svg { font-size: 1.5em; color: $fallback--text; color: var(--text, $fallback--text); diff --git a/src/components/search/search.js b/src/components/search/search.js index 3eb92fc1..b62bc2c5 100644 --- a/src/components/search/search.js +++ b/src/components/search/search.js @@ -3,10 +3,14 @@ import Conversation from '../conversation/conversation.vue' import Status from '../status/status.vue' import map from 'lodash/map' import { library } from '@fortawesome/fontawesome-svg-core' -import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' +import { + faCircleNotch, + faSearch +} from '@fortawesome/free-solid-svg-icons' library.add( - faCircleNotch + faCircleNotch, + faSearch ) const Search = { diff --git a/src/components/search/search.vue b/src/components/search/search.vue index a6677e4b..d32f48d9 100644 --- a/src/components/search/search.vue +++ b/src/components/search/search.vue @@ -17,7 +17,7 @@ class="btn search-button" @click="newQuery(searchTerm)" > - +
    - + - ! {{ $t('settings.limited_availability') }} + ! {{ $t('settings.limited_availability') }}
    diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index 37e829bb..22037218 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { - faTimes + faTimes, + faPlus } from '@fortawesome/free-solid-svg-icons' library.add( - faTimes + faTimes, + faPlus ) const ProfileTab = { diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index df54551c..7013b65d 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -139,7 +139,7 @@ class="add-field faint" @click="addField" > - + {{ $t("settings.profile_fields.add_field") }}
    diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 281052e5..fe736168 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex' import UserCard from '../user_card/user_card.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' import GestureService from '../../services/gesture_service/gesture_service' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +) const SideDrawer = { props: [ 'logout' ], diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index eda5a68c..fbdb2441 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -36,7 +36,7 @@ @click="toggleDrawer" > -