From 40ca0b394ea066dea95c672eb0a42a35c9e65317 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sun, 6 Sep 2020 15:28:09 +0300 Subject: add basic deletes support that works with masto WS --- src/components/status/status.js | 2 +- src/components/status/status.scss | 11 +++++++++++ src/components/status/status.vue | 26 ++++++++++++++++++++++++++ src/components/user_avatar/user_avatar.vue | 11 +++++++++++ 4 files changed, 49 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/status/status.js b/src/components/status/status.js index d263da68..5a6110c1 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -157,7 +157,7 @@ const Status = { return this.mergedConfig.hideFilteredStatuses }, hideStatus () { - return this.deleted || (this.muted && this.hideFilteredStatuses) + return (this.muted && this.hideFilteredStatuses) }, isFocused () { // retweet or root of an expanded conversation diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 8d292d3f..02ce3ffa 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -25,6 +25,17 @@ $status-margin: 0.75em; --icon: var(--selectedPostIcon, $fallback--icon); } + .deleted { + padding: $status-margin; + color: $fallback--faint; + color: var(--faint, $fallback--faint); + display: flex; + .deleted-text { + margin: 0.5em 0; + align-items: center; + } + } + .status-container { display: flex; padding: $status-margin; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 282ad37d..d7dfc0ab 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -95,6 +95,7 @@
+
+
+ +
+
+
+ {{ $t('status.status_deleted') }} +
+
+ +
+
+
+
@@ -42,5 +48,10 @@ border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } + + &.-placeholder { + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); + } } -- cgit v1.2.3-70-g09d2 From f9ac23b9a94dd35ba623814a59f4df83895acb42 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 7 Sep 2020 10:35:49 +0300 Subject: separate reply button to its own component, add changelog entry --- CHANGELOG.md | 3 +++ src/components/reply_button/reply_button.js | 12 +++++++++ src/components/reply_button/reply_button.vue | 21 ++++++++++++++++ src/components/status/status.js | 2 ++ src/components/status/status.vue | 37 ++++++++-------------------- 5 files changed, 48 insertions(+), 27 deletions(-) create mode 100644 src/components/reply_button/reply_button.js create mode 100644 src/components/reply_button/reply_button.vue (limited to 'src/components') diff --git a/CHANGELOG.md b/CHANGELOG.md index 18dafa8e..f07856df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] ## [Unreleased patch] +### Added +- Proper handling of deletes when using websocket streaming + ### Changed - Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed. diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js new file mode 100644 index 00000000..22957650 --- /dev/null +++ b/src/components/reply_button/reply_button.js @@ -0,0 +1,12 @@ + +const ReplyButton = { + name: 'ReplyButton', + props: ['status', 'replying'], + computed: { + loggedIn () { + return !!this.$store.state.users.currentUser + } + } +} + +export default ReplyButton diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue new file mode 100644 index 00000000..b2904b5c --- /dev/null +++ b/src/components/reply_button/reply_button.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/components/status/status.js b/src/components/status/status.js index 5a6110c1..cb39fd6e 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,3 +1,4 @@ +import ReplyButton from '../reply_button/reply_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import ReactButton from '../react_button/react_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' @@ -20,6 +21,7 @@ import { mapGetters, mapState } from 'vuex' const Status = { name: 'Status', components: { + ReplyButton, FavoriteButton, ReactButton, RetweetButton, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d7dfc0ab..cb81b14e 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -321,21 +321,11 @@ v-if="!noHeading && !isPreview" class="status-actions" > -
- - - {{ status.replies_count }} -
+ {{ $t('status.status_deleted') }}
-
- -
+
Date: Tue, 8 Sep 2020 06:31:02 +0000 Subject: Apply 1 suggestion(s) to 1 file(s) --- src/components/status/status.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components') diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 02ce3ffa..2717c0ba 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -30,6 +30,7 @@ $status-margin: 0.75em; color: $fallback--faint; color: var(--faint, $fallback--faint); display: flex; + .deleted-text { margin: 0.5em 0; align-items: center; -- cgit v1.2.3-70-g09d2 From fa9176651952468ee996abe0e67d62d9a72d5a69 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 8 Sep 2020 09:32:43 +0300 Subject: rename to gravestone --- src/components/status/status.scss | 2 +- src/components/status/status.vue | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 2717c0ba..bd23157f 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -25,7 +25,7 @@ $status-margin: 0.75em; --icon: var(--selectedPostIcon, $fallback--icon); } - .deleted { + .gravestone { padding: $status-margin; color: $fallback--faint; color: var(--faint, $fallback--faint); diff --git a/src/components/status/status.vue b/src/components/status/status.vue index cb81b14e..75142250 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -349,7 +349,7 @@
@@ -359,6 +359,7 @@ {{ $t('status.status_deleted') }}
Date: Mon, 21 Sep 2020 17:29:36 +0200 Subject: feat/reorder-emojis-by-position-of-keyword --- src/components/emoji_picker/emoji_picker.js | 13 ++++++++++--- src/components/react_button/react_button.js | 11 ++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) (limited to 'src/components') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 5c09f6ca..713ecd8b 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -8,10 +8,17 @@ const LOAD_EMOJI_BY = 60 const LOAD_EMOJI_MARGIN = 64 const filterByKeyword = (list, keyword = '') => { + if (keyword === '') return list + const keywordLowercase = keyword.toLowerCase() - return list.filter(emoji => - emoji.displayText.toLowerCase().includes(keywordLowercase) - ) + const orderedEmojiList = [] + for (const emoji of list) { + const indexOfKeyword = emoji.displayText.toLowerCase().indexOf( keywordLowercase ) + if ( indexOfKeyword > -1 ) { + orderedEmojiList.splice(indexOfKeyword, 0, emoji) + } + } + return orderedEmojiList } const EmojiPicker = { diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index abcf0455..473a2506 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -29,9 +29,14 @@ const ReactButton = { emojis () { if (this.filterWord !== '') { const filterWordLowercase = this.filterWord.toLowerCase() - return this.$store.state.instance.emoji.filter(emoji => - emoji.displayText.toLowerCase().includes(filterWordLowercase) - ) + const orderedEmojiList = [] + for (const emoji of this.$store.state.instance.emoji) { + const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf( filterWordLowercase ) + if ( indexOfFilterWord > -1 ) { + orderedEmojiList.splice(indexOfFilterWord, 0, emoji) + } + } + return orderedEmojiList } return this.$store.state.instance.emoji || [] }, -- cgit v1.2.3-70-g09d2 From f1e1f20a8d89abf7920997c12d5c7b48cdb2d628 Mon Sep 17 00:00:00 2001 From: Dym Sohin Date: Mon, 21 Sep 2020 17:42:17 +0200 Subject: fix 8x spaces inside this paren --- src/components/emoji_picker/emoji_picker.js | 4 ++-- src/components/react_button/react_button.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 713ecd8b..28ab0376 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -13,8 +13,8 @@ const filterByKeyword = (list, keyword = '') => { const keywordLowercase = keyword.toLowerCase() const orderedEmojiList = [] for (const emoji of list) { - const indexOfKeyword = emoji.displayText.toLowerCase().indexOf( keywordLowercase ) - if ( indexOfKeyword > -1 ) { + const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase) + if (indexOfKeyword > -1) { orderedEmojiList.splice(indexOfKeyword, 0, emoji) } } diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 473a2506..28ce884a 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -31,8 +31,8 @@ const ReactButton = { const filterWordLowercase = this.filterWord.toLowerCase() const orderedEmojiList = [] for (const emoji of this.$store.state.instance.emoji) { - const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf( filterWordLowercase ) - if ( indexOfFilterWord > -1 ) { + const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) + if (indexOfFilterWord > -1) { orderedEmojiList.splice(indexOfFilterWord, 0, emoji) } } -- cgit v1.2.3-70-g09d2 From cff202241b6eff8f6b381866e00a0392080d05a2 Mon Sep 17 00:00:00 2001 From: Dym Sohin Date: Mon, 21 Sep 2020 18:10:55 +0200 Subject: improved algorithm, possibly speed too --- src/components/emoji_picker/emoji_picker.js | 9 ++++++--- src/components/react_button/react_button.js | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) (limited to 'src/components') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 28ab0376..29c559df 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -11,14 +11,17 @@ const filterByKeyword = (list, keyword = '') => { if (keyword === '') return list const keywordLowercase = keyword.toLowerCase() - const orderedEmojiList = [] + let orderedEmojiList = [] for (const emoji of list) { const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase) if (indexOfKeyword > -1) { - orderedEmojiList.splice(indexOfKeyword, 0, emoji) + if (!Array.isArray(orderedEmojiList[keywordLowercase])) { + orderedEmojiList[keywordLowercase] = [] + } + orderedEmojiList[keywordLowercase].push(emoji) } } - return orderedEmojiList + return orderedEmojiList.flat() } const EmojiPicker = { diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 28ce884a..16014405 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -29,14 +29,17 @@ const ReactButton = { emojis () { if (this.filterWord !== '') { const filterWordLowercase = this.filterWord.toLowerCase() - const orderedEmojiList = [] + let orderedEmojiList = [] for (const emoji of this.$store.state.instance.emoji) { const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) if (indexOfFilterWord > -1) { - orderedEmojiList.splice(indexOfFilterWord, 0, emoji) + if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) { + orderedEmojiList[indexOfFilterWord] = [] + } + orderedEmojiList[indexOfFilterWord].push(emoji) } } - return orderedEmojiList + return orderedEmojiList.flat() } return this.$store.state.instance.emoji || [] }, -- cgit v1.2.3-70-g09d2 From bb59b8ee56f8c5c89720c9a42037a730caba4d11 Mon Sep 17 00:00:00 2001 From: Dym Sohin Date: Mon, 21 Sep 2020 18:13:31 +0200 Subject: fixed copy-pasting leftovers --- src/components/emoji_picker/emoji_picker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 29c559df..3ad80df3 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -15,10 +15,10 @@ const filterByKeyword = (list, keyword = '') => { for (const emoji of list) { const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase) if (indexOfKeyword > -1) { - if (!Array.isArray(orderedEmojiList[keywordLowercase])) { - orderedEmojiList[keywordLowercase] = [] + if (!Array.isArray(orderedEmojiList[indexOfKeyword])) { + orderedEmojiList[indexOfKeyword] = [] } - orderedEmojiList[keywordLowercase].push(emoji) + orderedEmojiList[indexOfKeyword].push(emoji) } } return orderedEmojiList.flat() -- cgit v1.2.3-70-g09d2 From 414558665f8370390cf4c6dc3c79745217d8d522 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 1 Oct 2020 16:01:57 +0300 Subject: lint fix --- src/components/status/status.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/status/status.scss b/src/components/status/status.scss index ecca288f..66a91c1e 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; + } + .gravestone { padding: $status-margin; color: $fallback--faint; @@ -36,11 +41,6 @@ $status-margin: 0.75em; align-items: center; } } - - &.-conversation { - border-left-width: 4px; - border-left-style: solid; - } .status-container { display: flex; -- cgit v1.2.3-70-g09d2