From 6b6878bde06b375b1e715a3557f153acc73a8af0 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 18 Feb 2019 17:49:32 +0300 Subject: Added moderation menu --- .../moderation_tools/moderation_tools.js | 106 ++++++++++++++ .../moderation_tools/moderation_tools.vue | 158 +++++++++++++++++++++ 2 files changed, 264 insertions(+) create mode 100644 src/components/moderation_tools/moderation_tools.js create mode 100644 src/components/moderation_tools/moderation_tools.vue (limited to 'src/components/moderation_tools') diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js new file mode 100644 index 00000000..3eedeaa1 --- /dev/null +++ b/src/components/moderation_tools/moderation_tools.js @@ -0,0 +1,106 @@ +import DialogModal from '../dialog_modal/dialog_modal.vue' +import Popper from 'vue-popperjs/src/component/popper.js.vue' + +const FORCE_NSFW = 'mrf_tag:media-force-nsfw' +const STRIP_MEDIA = 'mrf_tag:media-strip' +const FORCE_UNLISTED = 'mrf_tag:force-unlisted' +const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription' +const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription' +const SANDBOX = 'mrf_tag:sandbox' +const QUARANTINE = 'mrf_tag:quarantine' + +const ModerationTools = { + props: [ + 'user' + ], + data () { + return { + showDropDown: false, + tags: { + FORCE_NSFW, + STRIP_MEDIA, + FORCE_UNLISTED, + DISABLE_REMOTE_SUBSCRIPTION, + DISABLE_ANY_SUBSCRIPTION, + SANDBOX, + QUARANTINE + }, + showDeleteUserDialog: false + } + }, + components: { + DialogModal, + Popper + }, + computed: { + tagsSet () { + return new Set(this.user.tags) + }, + hasTagPolicy () { + return this.$store.state.instance.tagPolicyAvailable + } + }, + methods: { + toggleMenu () { + this.showDropDown = !this.showDropDown + }, + hasTag (tagName) { + return this.tagsSet.has(tagName) + }, + toggleTag (tag) { + const store = this.$store + if (this.tagsSet.has(tag)) { + store.state.api.backendInteractor.untagUser(this.user, tag).then(response => { + if (!response.ok) { return } + store.commit('untagUser', {user: this.user, tag}) + }) + } else { + store.state.api.backendInteractor.tagUser(this.user, tag).then(response => { + if (!response.ok) { return } + store.commit('tagUser', {user: this.user, tag}) + }) + } + }, + toggleRight (right) { + const store = this.$store + if (this.user.rights[right]) { + store.state.api.backendInteractor.deleteRight(this.user, right).then(response => { + if (!response.ok) { return } + store.commit('updateRight', {user: this.user, right: right, value: false}) + }) + } else { + store.state.api.backendInteractor.addRight(this.user, right).then(response => { + if (!response.ok) { return } + store.commit('updateRight', {user: this.user, right: right, value: true}) + }) + } + }, + toggleActivationStatus () { + const store = this.$store + const status = !!this.user.deactivated + store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => { + if (!response.ok) { return } + store.commit('updateActivationStatus', {user: this.user, status: status}) + }) + }, + deleteUserDialog (show) { + this.showDeleteUserDialog = show + }, + deleteUser () { + const store = this.$store + const user = this.user + const {id, name} = user + store.state.api.backendInteractor.deleteUser(user) + .then(e => { + this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id) + const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile' + const isTargetUser = this.$route.params.name === name || this.$route.params.id === id + if (isProfile && isTargetUser) { + window.history.back() + } + }) + } + } +} + +export default ModerationTools diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue new file mode 100644 index 00000000..c24a2280 --- /dev/null +++ b/src/components/moderation_tools/moderation_tools.vue @@ -0,0 +1,158 @@ + + + + + -- cgit v1.2.3-70-g09d2 From 9fc997500e33d561a1aa5d26c8ed8f4446a0248e Mon Sep 17 00:00:00 2001 From: dave Date: Fri, 12 Apr 2019 15:35:29 -0400 Subject: #468 - add extra buttons for status actions --- src/components/delete_button/delete_button.js | 21 --------- src/components/delete_button/delete_button.vue | 21 --------- src/components/extra_buttons/extra_buttons.js | 51 ++++++++++++++++++++++ src/components/extra_buttons/extra_buttons.vue | 46 +++++++++++++++++++ .../moderation_tools/moderation_tools.vue | 8 ++++ src/components/status/status.js | 27 ++++-------- src/components/status/status.vue | 8 +--- src/i18n/en.json | 4 ++ 8 files changed, 118 insertions(+), 68 deletions(-) delete mode 100644 src/components/delete_button/delete_button.js delete mode 100644 src/components/delete_button/delete_button.vue create mode 100644 src/components/extra_buttons/extra_buttons.js create mode 100644 src/components/extra_buttons/extra_buttons.vue (limited to 'src/components/moderation_tools') diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js deleted file mode 100644 index 22f24625..00000000 --- a/src/components/delete_button/delete_button.js +++ /dev/null @@ -1,21 +0,0 @@ -const DeleteButton = { - props: [ 'status' ], - methods: { - deleteStatus () { - const confirmed = window.confirm('Do you really want to delete this status?') - if (confirmed) { - this.$store.dispatch('deleteStatus', { id: this.status.id }) - } - } - }, - computed: { - currentUser () { return this.$store.state.users.currentUser }, - canDelete () { - if (!this.currentUser) { return } - const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin - return superuser || this.status.user.id === this.currentUser.id - } - } -} - -export default DeleteButton diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue deleted file mode 100644 index f4c91cfd..00000000 --- a/src/components/delete_button/delete_button.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - - - diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js new file mode 100644 index 00000000..40bab2ab --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.js @@ -0,0 +1,51 @@ +import Popper from 'vue-popperjs/src/component/popper.js.vue' + +const ExtraButtons = { + props: [ 'status' ], + components: { + Popper + }, + data () { + return { + showDropDown: false + } + }, + methods: { + deleteStatus () { + const confirmed = window.confirm(this.$t('status.delete_confirm')) + if (confirmed) { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + } + }, + toggleMenu () { + this.showDropDown = !this.showDropDown + }, + pinStatus () { + this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { + if (status.error) { + this.$emit('onError', status.error) + } else { + this.$store.dispatch('updatePinned', status) + } + }) + }, + unpinStatus () { + this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { + this.$store.dispatch('updatePinned', status) + }) + } + }, + computed: { + currentUser () { return this.$store.state.users.currentUser }, + canDelete () { + if (!this.currentUser) { return } + const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin + return superuser || this.status.user.id === this.currentUser.id + }, + ownStatus () { + return this.status.user.id === this.currentUser.id + } + } +} + +export default ExtraButtons diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue new file mode 100644 index 00000000..13f8587b --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index c24a2280..c9e3fc78 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -127,6 +127,14 @@ width: 100%; height: 100%; + &-icon { + padding-left: 0.5rem; + + i { + margin-right: 0.25rem; + } + } + &:hover { // TODO: improve the look on breeze themes background-color: $fallback--fg; diff --git a/src/components/status/status.js b/src/components/status/status.js index 85159fc4..fa4b426c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,7 +1,7 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' -import DeleteButton from '../delete_button/delete_button.vue' +import ExtraButtons from '../extra_buttons/extra_buttons.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' @@ -280,7 +280,7 @@ const Status = { Attachment, FavoriteButton, RetweetButton, - DeleteButton, + ExtraButtons, PostStatusForm, UserCard, UserAvatar, @@ -301,6 +301,12 @@ const Status = { return 'icon-globe' } }, + showError (error) { + this.error = error + setTimeout(() => { + this.error = null + }, 5000) + }, linkClicked (event) { let { target } = event if (target.tagName === 'SPAN') { @@ -358,23 +364,6 @@ const Status = { this.expandingSubject = true } }, - pinStatus () { - this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { - if (status.error) { - this.error = status.error - setTimeout(() => { - this.error = null - }, 5000) - } else { - this.$store.dispatch('updatePinned', status) - } - }) - }, - unpinStatus () { - this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { - this.$store.dispatch('updatePinned', status) - }) - }, replyEnter (id, event) { this.showPreview = true const targetId = id diff --git a/src/components/status/status.vue b/src/components/status/status.vue index bc7ff43c..1644f6b0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -16,9 +16,6 @@
Pinned -
- -
@@ -60,9 +57,6 @@ -
- -
@@ -175,7 +169,7 @@
- + diff --git a/src/i18n/en.json b/src/i18n/en.json index b4f0deb2..8429367c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -402,6 +402,10 @@ "status": { "favorites": "Favorites", "repeats": "Repeats", + "delete": "Delete status", + "pin": "Pin on profile", + "unpin": "Unpin form profile", + "delete_confirm": "Do you really want to delete this status?", "reply_to": "Reply to", "replies_list": "Replies:" }, -- cgit v1.2.3-70-g09d2 From 6c7eeb93fef28789a4d560be7feaeccc19d6ed20 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 May 2019 00:13:08 +0300 Subject: move drowdown menu to popper --- src/components/extra_buttons/extra_buttons.vue | 3 +- .../moderation_tools/moderation_tools.vue | 58 ---------------------- src/components/popper/popper.scss | 57 +++++++++++++++++++++ 3 files changed, 59 insertions(+), 59 deletions(-) (limited to 'src/components/moderation_tools') diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index ef11138d..a761d313 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -13,7 +13,7 @@ }" >
-
+
@@ -35,6 +35,7 @@ diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index eedb67b5..2f2f9e5f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -47,7 +47,7 @@
- -
+
- + {{ $t('user_card.subscribe') }} - + {{ $t('user_card.subscribed') }}
+
- - - - - - + +
+
- - - - - - + +
-
- - - + +
+
+
@@ -366,25 +361,23 @@ justify-content: space-between; margin-right: -.75em; - > div { + > * { flex: 1 0 0; - margin-right: .75em; - margin-bottom: .6em; + margin: 0 .75em .6em 0; white-space: nowrap; - } - button { - width: 100%; - height: 100%; - margin: 0; + > button { + margin: 0; + width: 100%; + } } .remote-button { - height: 28px !important; - width: 92%; + height: 28px; + margin: 0; } - .pressed { + button.pressed { border-bottom-color: rgba(255, 255, 255, 0.2); border-top-color: rgba(0, 0, 0, 0.2); } diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 7eb4ed3a..39b99dac 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,7 +3,6 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' -import ModerationTools from '../moderation_tools/moderation_tools.vue' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' @@ -132,7 +131,6 @@ const UserProfile = { Timeline, FollowerList, FriendList, - ModerationTools, FollowCard, Conversation } -- cgit v1.2.3-70-g09d2 From 2ab00387fe8c335fe554249cd354eadfdb79d57b Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 26 Apr 2019 03:33:25 -0400 Subject: clean up + add btn-group css class --- src/App.scss | 25 +++++++++++++++++++ .../moderation_tools/moderation_tools.vue | 9 +------ src/components/user_card/user_card.vue | 29 ++++++++-------------- 3 files changed, 36 insertions(+), 27 deletions(-) (limited to 'src/components/moderation_tools') diff --git a/src/App.scss b/src/App.scss index e4c764bf..1299e05d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -283,6 +283,31 @@ i[class*=icon-] { color: var(--icon, $fallback--icon) } +.btn-block { + display: block; + width: 100%; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; + + button { + position: relative; + flex: 1 1 auto; + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} .container { display: flex; diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 785fe7ba..80f6858e 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -61,7 +61,7 @@
- @@ -107,11 +107,4 @@ } } -.moderation-toggle-btn { - &#{&} { - margin: 0; - width: 100%; - } -} - diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 2f2f9e5f..2d3cf28f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -46,7 +46,7 @@
-
+
-
- -
{{ $t('user_card.subscribe') }} @@ -78,19 +75,19 @@
- -
- -
@@ -365,21 +362,15 @@ flex: 1 0 0; margin: 0 .75em .6em 0; white-space: nowrap; - - > button { - margin: 0; - width: 100%; - } } - .remote-button { - height: 28px; + button { margin: 0; - } - button.pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + &.pressed { + border-bottom-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); + } } } } -- cgit v1.2.3-70-g09d2 From b2dbf01a728592758b72966550410171ea9ac74e Mon Sep 17 00:00:00 2001 From: taehoon Date: Wed, 10 Jul 2019 20:59:10 -0400 Subject: eslint —fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../moderation_tools/moderation_tools.vue | 235 ++++++++----- src/components/progress_button/progress_button.vue | 5 +- src/components/user_card/user_card.vue | 376 ++++++++++++++------- 3 files changed, 424 insertions(+), 192 deletions(-) (limited to 'src/components/moderation_tools') diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 80f6858e..f1ab67a6 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -1,85 +1,166 @@ diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue index 53481b0d..283a51af 100644 --- a/src/components/progress_button/progress_button.vue +++ b/src/components/progress_button/progress_button.vue @@ -1,5 +1,8 @@