add user reporting modal

src/components/user_reporting_modal/user_reporting_modal.js

@@ -0,0 +1,81 @@
+
+import Status from '../status/status.vue'
+import Checkbox from '../checkbox/checkbox.js'
+
+const UserReportingModal = {
+  components: {
+    Status,
+    Checkbox
+  },
+  data () {
+    return {
+      comment: '',
+      forward: false,
+      statusIdsToReport: []
+    }
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    isOpen () {
+      return this.isLoggedIn && this.$store.state.reports.modalActivated
+    },
+    userId () {
+      return this.$store.state.reports.userId
+    },
+    user () {
+      return this.$store.getters.findUser(this.userId)
+    },
+    remoteInstance () {
+      return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
+    },
+    statuses () {
+      return this.$store.state.reports.statuses
+    }
+  },
+  watch: {
+    userId (value) {
+      this.statusIdsToReport = []
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeUserReportingModal')
+    },
+    reportUser () {
+      const payload = {
+        comment: this.comment,
+        forward: this.forward,
+        statusIdsToReport: this.statusIdsToReport
+      }
+      this.$store.dispatch('reportUser', payload)
+    },
+    isChecked (statusId) {
+      return this.statusIdsToReport.indexOf(statusId) !== -1
+    },
+    toggleStatus (checked, statusId) {
+      if (checked === this.isChecked(statusId)) {
+        return
+      }
+
+      if (checked) {
+        this.statusIdsToReport.push(statusId)
+      } else {
+        this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1)
+      }
+    },
+    resize (e) {
+      const target = e.target || e
+      if (!(target instanceof window.Element)) { return }
+      // Auto is needed to make textbox shrink when removing lines
+      target.style.height = 'auto'
+      target.style.height = `${target.scrollHeight}px`
+      if (target.value === '') {
+        target.style.height = null
+      }
+    }
+  }
+}
+
+export default UserReportingModal

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -0,0 +1,111 @@
+<template>
+<div class="modal-view" @click="closeModal" v-if="isOpen">
+  <div class="user-reporting-panel panel" @click.stop="">
+    <div class="panel-heading">Reporting {{user.screen_name}}</div>
+    <div class="panel-body">
+      <div class="user-reporting-panel-left">
+        <div>
+          <p>The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:</p>
+          <textarea
+            v-model="comment"
+            class="form-control"
+            placeholder="Additional comments"
+            rows="1"
+            @input="resize"
+          />
+        </div>
+        <div v-if="!user.is_local">
+          <p>The account is from another server. Send an anonymized copy of the report there as well?</p>
+          <Checkbox v-model="forward">Forward to {{remoteInstance}}</Checkbox>
+        </div>
+        <div>
+          <button class="btn btn-default" @click="reportUser">Submit</button>
+        </div>
+      </div>
+      <div class="user-reporting-panel-right">
+        <div v-for="status in statuses" :key="status.id" class="status-fadein">
+          <Status :inConversation="false" :focused="false" :statusoid="status" />
+          <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script src="./user_reporting_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.user-reporting-panel {
+  width: 90vw;
+  max-width: 700px;
+
+  .panel-body {
+    display: flex;
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  &-left {
+    width: 50%;
+    padding: 1.1em;
+    border-right: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    max-width: 320px;
+    line-height: 1.4em;
+    box-sizing: border-box;
+
+    > div {
+      margin-bottom: 2em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      margin-top: 0;
+    }
+
+    textarea.form-control {
+      line-height: 16px;
+      resize: none;
+      overflow: hidden;
+      transition: min-height 200ms 100ms;
+      min-height: 44px;
+      width: 100%;
+    }
+
+    .btn {
+      min-width: 10em;
+      padding: 0 2em;
+    }
+  }
+
+  &-right {
+    width: 50%;
+    flex: 1 1 auto;
+    min-height: 20vh;
+    max-height: 80vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    > div {
+      display: flex;
+      justify-content: space-between;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-color: $fallback--border;
+      border-color: var(--border, $fallback--border);
+
+      .checkbox {
+        margin: 0.75em;
+      }
+    }
+  }
+}
+</style>