pleroma-fe

commit: 1d42d05c1fd462af26b7d340b95343ca80879737
parent c9e4b6e7a10b614bcf0cc0b91b7540b7b4fdcca2
Author: Ilja <ilja@ilja.space>
Date:   Sun, 20 Mar 2022 09:31:36 +0100

Use Select component

After merging develop, the dropdown didn't format properly any more because selects have been made into a component. Here I turn the select into a component as well.

Diffstat:
M
src/components/report/report.js
2
++
M
src/components/report/report.vue
31
+++++++++++--------------------

2 files changed, 13 insertions(+), 20 deletions(-)
diff --git a/src/components/report/report.js b/src/components/report/report.js
@@ -1,3 +1,4 @@
+import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -7,6 +8,7 @@ const Report = {
     'reportId'
   ],
   components: {
+    Select,
     StatusContent,
     Timeago
   },
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
@@ -14,28 +14,19 @@
     </div>
     <div class="report-state">
       <span>{{ $t('report.state') }}</span>
-      <label
-        for="report-state"
-        class="select"
+      <Select
+        :id="report-state"
+        v-model="state"
+        class="form-control"
       >
-        <select
-          id="report-state"
-          v-model="state"
-          class="form-control"
+        <option
+          v-for="state in ['open', 'closed', 'resolved']"
+          :key="state"
+          :value="state"
         >
-          <option
-            v-for="state in ['open', 'closed', 'resolved']"
-            :key="state"
-            :value="state"
-          >
-            {{ $t('report.state_' + state) }}
-          </option>
-        </select>
-        <FAIcon
-          class="select-down-icon"
-          icon="chevron-down"
-        />
-      </label>
+          {{ $t('report.state_' + state) }}
+        </option>
+      </Select>
     </div>
     <!-- eslint-disable vue/no-v-html -->
     <div