diff --git a/src/components/mod_modal/mod_modal_content.js b/src/components/mod_modal/mod_modal_content.js index e0ba6259..f1637e73 100644 --- a/src/components/mod_modal/mod_modal_content.js +++ b/src/components/mod_modal/mod_modal_content.js @@ -2,7 +2,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import ReportsTab from './tabs/reports_tab/reports_tab.vue' // import StatusesTab from './tabs/statuses_tab.vue' -// import UsersTab from './tabs/users_tab.vue' +import UsersTab from './tabs/users_tab/users_tab.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -21,9 +21,9 @@ const ModModalContent = { components: { TabSwitcher, - ReportsTab + ReportsTab, // StatusesTab, - // UsersTab + UsersTab }, computed: { open () { diff --git a/src/components/mod_modal/mod_modal_content.vue b/src/components/mod_modal/mod_modal_content.vue index 6fa32be1..c4b964b9 100644 --- a/src/components/mod_modal/mod_modal_content.vue +++ b/src/components/mod_modal/mod_modal_content.vue @@ -13,6 +13,13 @@ > +
+ +
diff --git a/src/components/mod_modal/tabs/users_tab/users_tab.js b/src/components/mod_modal/tabs/users_tab/users_tab.js new file mode 100644 index 00000000..025334e2 --- /dev/null +++ b/src/components/mod_modal/tabs/users_tab/users_tab.js @@ -0,0 +1,70 @@ +import Popover from 'src/components/popover/popover.vue' + +import { forEach } from 'lodash' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faFilter, + faSearch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faFilter, + faSearch +) + +const UsersTab = { + data () { + return { + accountType: { + local: true, + external: false, + all: false + }, + status: { + active: true, + deactivated: false, + pending: false, + unconfirmed: false, + all: false + }, + actorType: { + person: true, + bot: true, + application: true, + all: true + } + } + }, + components: { + Popover + }, + methods: { + setAccountType (type) { + if (type === 'all') { + forEach(this.accountType, (k, v) => { this.accountType[v] = true }) + } else { + forEach(this.accountType, (k, v) => { this.accountType[v] = false }) + this.accountType[type] = true + } + }, + setStatus (status) { + if (status === 'all') { + forEach(this.status, (k, v) => { this.status[v] = true }) + } else { + forEach(this.status, (k, v) => { this.status[v] = false }) + this.status[status] = true + } + }, + setActorType (type) { + if (type === 'all') { + forEach(this.actorType, (k, v) => { this.actorType[v] = true }) + } else { + forEach(this.actorType, (k, v) => { this.actorType[v] = false }) + this.actorType[type] = true + } + } + } +} + +export default UsersTab diff --git a/src/components/mod_modal/tabs/users_tab/users_tab.scss b/src/components/mod_modal/tabs/users_tab/users_tab.scss new file mode 100644 index 00000000..09a323ee --- /dev/null +++ b/src/components/mod_modal/tabs/users_tab/users_tab.scss @@ -0,0 +1,25 @@ +@import '../../../../_variables.scss'; + +.reports-header .right-side { + display: flex; + align-items: center; + + .search-input-container { + padding: 0.8rem; + display: flex; + justify-content: center; + align-items: center; + + .search-input { + width: 100%; + line-height: 1.125rem; + font-size: 1rem; + padding: 0.5rem; + box-sizing: border-box; + } + + .search-icon { + margin-right: 0.3em; + } + } +} diff --git a/src/components/mod_modal/tabs/users_tab/users_tab.vue b/src/components/mod_modal/tabs/users_tab/users_tab.vue new file mode 100644 index 00000000..b540fb00 --- /dev/null +++ b/src/components/mod_modal/tabs/users_tab/users_tab.vue @@ -0,0 +1,170 @@ + + + + diff --git a/src/i18n/en.json b/src/i18n/en.json index 534f1c1c..fb4cf9e3 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -294,7 +294,20 @@ "tags": "Set post restrictions" }, "statuses": "Posts", - "users": "Users" + "users": { + "users": "Users", + "filter": { + "active": "Active", + "all": "All accounts", + "application": "Application", + "bot": "Bot", + "deactivated": "Deactivated", + "external": "External", + "local": "Local", + "pending": "Pending Approval", + "person": "Person", + "unconfirmed": "Unconfirmed" + } }, "nav": { "about": "About",