logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

user_reporting_modal.vue (3656B)

    

  1. <template>
  2.   <Modal
  3.     v-if="isOpen"
  4.     @backdropClicked="closeModal"
  5.   >
  6.     <div class="user-reporting-panel panel">
  7.       <div class="panel-heading">
  8.         <i18n-t
  9.           tag="div"
  10.           keypath="user_reporting.title"
  11.           class="title"
  12.         >
  13.           <UserLink :user="user" />
  14.         </i18n-t>
  15.       </div>
  16.       <div class="panel-body">
  17.         <div class="user-reporting-panel-left">
  18.           <div>
  19.             <p>{{ $t('user_reporting.add_comment_description') }}</p>
  20.             <textarea
  21.               v-model="comment"
  22.               class="input form-control"
  23.               :placeholder="$t('user_reporting.additional_comments')"
  24.               rows="1"
  25.               @input="resize"
  26.             />
  27.           </div>
  28.           <div v-if="!user.is_local">
  29.             <p>{{ $t('user_reporting.forward_description') }}</p>
  30.             <Checkbox v-model="forward">
  31.               {{ $t('user_reporting.forward_to', [remoteInstance]) }}
  32.             </Checkbox>
  33.           </div>
  34.           <div>
  35.             <button
  36.               class="btn button-default"
  37.               :disabled="processing"
  38.               @click="reportUser"
  39.             >
  40.               {{ $t('user_reporting.submit') }}
  41.             </button>
  42.             <div
  43.               v-if="error"
  44.               class="alert error"
  45.             >
  46.               {{ $t('user_reporting.generic_error') }}
  47.             </div>
  48.           </div>
  49.         </div>
  50.         <div class="user-reporting-panel-right">
  51.           <List :items="statuses">
  52.             <template #item="{item}">
  53.               <div class="status-fadein user-reporting-panel-sitem">
  54.                 <Status
  55.                   :in-conversation="false"
  56.                   :focused="false"
  57.                   :statusoid="item"
  58.                 />
  59.                 <Checkbox
  60.                   :model-value="isChecked(item.id)"
  61.                   @update:model-value="checked => toggleStatus(checked, item.id)"
  62.                 />
  63.               </div>
  64.             </template>
  65.           </List>
  66.         </div>
  67.       </div>
  68.     </div>
  69.   </Modal>
  70. </template>
  72. <script src="./user_reporting_modal.js"></script>
  74. <style lang="scss">
  75. .user-reporting-panel {
  76.   width: 90vw;
  77.   max-width: 700px;
  78.   min-height: 20vh;
  79.   max-height: 80vh;
  81.   .panel-body {
  82.     display: flex;
  83.     flex-direction: column-reverse;
  84.     border-top: 1px solid;
  85.     border-color: var(--border);
  86.     overflow: hidden;
  87.   }
  89.   &-left {
  90.     padding: 1.1em 0.7em 0.7em;
  91.     line-height: var(--post-line-height);
  92.     box-sizing: border-box;
  94.     > div {
  95.       margin-bottom: 1em;
  97.       &:last-child {
  98.         margin-bottom: 0;
  99.       }
  100.     }
  102.     p {
  103.       margin-top: 0;
  104.     }
  106.     textarea.form-control {
  107.       line-height: 16px;
  108.       resize: none;
  109.       overflow: hidden;
  110.       transition: min-height 200ms 100ms;
  111.       min-height: 44px;
  112.       width: 100%;
  113.     }
  115.     .btn {
  116.       min-width: 10em;
  117.       padding: 0 2em;
  118.     }
  120.     .alert {
  121.       margin: 1em 0 0;
  122.       line-height: 1.3em;
  123.     }
  124.   }
  126.   &-right {
  127.     display: flex;
  128.     flex-direction: column;
  129.     overflow-y: auto;
  130.   }
  132.   &-sitem {
  133.     display: flex;
  134.     justify-content: space-between;
  136.     /* TODO cleanup this */
  137.     > .Status {
  138.       flex: 1;
  139.     }
  141.     > .checkbox {
  142.       margin: 0.75em;
  143.     }
  144.   }
  146.   @media all and (min-width: 801px) {
  147.     .panel-body {
  148.       flex-direction: row;
  149.     }
  151.     &-left {
  152.       width: 50%;
  153.       max-width: 320px;
  154.       border-right: 1px solid;
  155.       border-color: var(--border);
  156.       padding: 1.1em;
  158.       > div {
  159.         margin-bottom: 2em;
  160.       }
  161.     }
  163.     &-right {
  164.       width: 50%;
  165.       flex: 1 1 auto;
  166.       margin-bottom: 12px;
  167.     }
  168.   }
  169. }
  170. </style>