diff --git a/src/components/mod_modal/mod_modal.scss b/src/components/mod_modal/mod_modal.scss index d80205c9..4821df74 100644 --- a/src/components/mod_modal/mod_modal.scss +++ b/src/components/mod_modal/mod_modal.scss @@ -2,18 +2,6 @@ .mod-modal { overflow: hidden; - .setting-list, - .option-list { - list-style-type: none; - padding-left: 2em; - li { - margin-bottom: 0.5em; - } - .suboptions { - margin-top: 0.3em - } - } - &.peek { .mod-modal-panel { /* Explanation: @@ -49,15 +37,8 @@ height: 100%; } - >.panel-body { - height: 100%; - overflow-y: hidden; - - .btn { - min-height: 2em; - min-width: 10em; - padding: 0 2em; - } + .panel-body { + height: inherit; } } } diff --git a/src/components/mod_modal/mod_modal_content.js b/src/components/mod_modal/mod_modal_content.js index 6330f162..e0ba6259 100644 --- a/src/components/mod_modal/mod_modal_content.js +++ b/src/components/mod_modal/mod_modal_content.js @@ -1,8 +1,8 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' -import ReportsTab from './tabs/reports_tab.vue' -import StatusesTab from './tabs/statuses_tab.vue' -import UsersTab from './tabs/users_tab.vue' +import ReportsTab from './tabs/reports_tab/reports_tab.vue' +// import StatusesTab from './tabs/statuses_tab.vue' +// import UsersTab from './tabs/users_tab.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -21,9 +21,9 @@ const ModModalContent = { components: { TabSwitcher, - ReportsTab, - StatusesTab, - UsersTab + ReportsTab + // StatusesTab, + // UsersTab }, computed: { open () { diff --git a/src/components/mod_modal/mod_modal_content.scss b/src/components/mod_modal/mod_modal_content.scss index 99fc2d2a..b1aeba38 100644 --- a/src/components/mod_modal/mod_modal_content.scss +++ b/src/components/mod_modal/mod_modal_content.scss @@ -2,53 +2,20 @@ .mod_tab-switcher { height: 100%; - .setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); + .content { margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - > div, - > label { - display: block; + > div { margin-bottom: .5em; &:last-child { margin-bottom: 0; } } - .select-multiple { - display: flex; - - .option-list { - margin: 0; - padding-left: .5em; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - textarea { width: 100%; max-width: 100%; height: 100px; } - - .unavailable, - .unavailable svg { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .number-input { - max-width: 6em; - } } } diff --git a/src/components/mod_modal/mod_modal_content.vue b/src/components/mod_modal/mod_modal_content.vue index bb31bc19..1c11cb33 100644 --- a/src/components/mod_modal/mod_modal_content.vue +++ b/src/components/mod_modal/mod_modal_content.vue @@ -7,26 +7,26 @@ :body-scroll-lock="bodyLock" >
-
- -
-
- -
+ + + + + + + + + + + + + + diff --git a/src/components/mod_modal/tabs/reports_tab/report_card.js b/src/components/mod_modal/tabs/reports_tab/report_card.js new file mode 100644 index 00000000..6e6bfdae --- /dev/null +++ b/src/components/mod_modal/tabs/reports_tab/report_card.js @@ -0,0 +1,124 @@ +import Popover from 'src/components/popover/popover.vue' +import Status from 'src/components/status/status.vue' +import UserAvatar from 'src/components/user_avatar/user_avatar.vue' +import ReportNote from './report_note.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faChevronDown, + faChevronUp +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faChevronDown, + faChevronUp +) + +const FORCE_NSFW = 'mrf_tag:media-force-nsfw' +const STRIP_MEDIA = 'mrf_tag:media-strip' +const FORCE_UNLISTED = 'mrf_tag:force-unlisted' +const SANDBOX = 'mrf_tag:sandbox' + +const ReportCard = { + data () { + return { + hidden: true, + statusesHidden: true, + notesHidden: true, + note: null, + tags: { + FORCE_NSFW, + STRIP_MEDIA, + FORCE_UNLISTED, + SANDBOX + } + } + }, + props: [ + 'account', + 'actor', + 'content', + 'id', + 'notes', + 'state', + 'statuses' + ], + components: { + ReportNote, + Popover, + Status, + UserAvatar + }, + created () { + this.$store.dispatch('fetchUser', this.account.id) + }, + computed: { + isOpen () { + return this.state === 'open' + }, + tagPolicyEnabled () { + return this.$store.state.instance.federationPolicy.mrf_policies.includes('TagPolicy') + }, + user () { + return this.$store.getters.findUser(this.account.id) + } + }, + methods: { + toggleHidden () { + this.hidden = !this.hidden + }, + decode (content) { + content = content.replaceAll('
', '\n') + const textarea = document.createElement('textarea') + textarea.innerHTML = content + return textarea.value + }, + updateReportState (state) { + this.$store.dispatch('updateReportStates', { reports: [{ id: this.id, state }] }) + }, + toggleNotes () { + this.notesHidden = !this.notesHidden + }, + addNoteToReport () { + if (this.note.length > 0) { + this.$store.dispatch('addNoteToReport', { id: this.id, note: this.note }) + this.note = null + } + }, + toggleStatuses () { + this.statusesHidden = !this.statusesHidden + }, + hasTag (tag) { + return this.user.tags.includes(tag) + }, + toggleTag (tag) { + if (this.hasTag(tag)) { + this.$store.state.api.backendInteractor.untagUser({ user: this.user, tag }).then(response => { + if (!response.ok) { return } + this.$store.commit('untagUser', { user: this.user, tag }) + }) + } else { + this.$store.state.api.backendInteractor.tagUser({ user: this.user, tag }).then(response => { + if (!response.ok) { return } + this.$store.commit('tagUser', { user: this.user, tag }) + }) + } + }, + toggleActivationStatus () { + this.$store.dispatch('toggleActivationStatus', { user: this.user }) + }, + deleteUser () { + this.$store.state.backendInteractor.deleteUser({ user: this.user }) + .then(e => { + this.$store.dispatch('markStatusesAsDeleted', status => this.user.id === status.user.id) + const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile' + const isTargetUser = this.$route.params.name === this.user.name || this.$route.params.id === this.user.id + if (isProfile && isTargetUser) { + window.history.back() + } + }) + } + } +} + +export default ReportCard diff --git a/src/components/mod_modal/tabs/reports_tab/report_card.vue b/src/components/mod_modal/tabs/reports_tab/report_card.vue new file mode 100644 index 00000000..6cc034b1 --- /dev/null +++ b/src/components/mod_modal/tabs/reports_tab/report_card.vue @@ -0,0 +1,202 @@ +