Skip to content

Commit dcfa34f

Browse files
IMB11IMB11
committed
fix: icons + sizing
1 parent 44d0e35 commit dcfa34f

File tree

5 files changed

+108
-71
lines changed

5 files changed

+108
-71
lines changed

‎apps/frontend/src/pages/moderation/index.vue‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -24,42 +24,49 @@
2424

2525
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
2626
<div class="flex flex-col gap-2 sm:flex-row">
27-
<DropdownSelect
28-
v-slot="{ selected }"
27+
<Combobox
2928
v-model="currentFilterType"
3029
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
31-
:name="formatMessage(messages.filterBy)"
32-
:options="filterTypes as unknown[]"
33-
@change="goToPage(1)"
30+
:options="filterTypes"
31+
:placeholder="formatMessage(messages.filterBy)"
32+
@select="goToPage(1)"
3433
>
35-
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
36-
<FilterIcon class="size-4 flex-shrink-0" />
37-
<span class="truncate">{{ selected }} ({{ filteredProjects.length }})</span>
38-
</span>
39-
</DropdownSelect>
40-
41-
<DropdownSelect
42-
v-slot="{ selected }"
34+
<template #selected>
35+
<span class="flex flex-row gap-2 align-middle font-semibold">
36+
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
37+
<span class="truncate text-contrast"
38+
>{{ currentFilterType }} ({{ filteredProjects.length }})</span
39+
>
40+
</span>
41+
</template>
42+
</Combobox>
43+
44+
<Combobox
4345
v-model="currentSortType"
4446
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
45-
:name="formatMessage(messages.sortBy)"
46-
:options="sortTypes as unknown[]"
47-
@change="goToPage(1)"
47+
:options="sortTypes"
48+
:placeholder="formatMessage(messages.sortBy)"
49+
@select="goToPage(1)"
4850
>
49-
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
50-
<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
51-
<SortDescIcon v-else class="size-4 flex-shrink-0" />
52-
<span class="truncate">{{ selected }}</span>
53-
</span>
54-
</DropdownSelect>
51+
<template #selected>
52+
<span class="flex flex-row gap-2 align-middle font-semibold">
53+
<SortAscIcon
54+
v-if="currentSortType === 'Oldest'"
55+
class="size-5 flex-shrink-0 text-secondary"
56+
/>
57+
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
58+
<span class="truncate text-contrast">{{ currentSortType }}</span>
59+
</span>
60+
</template>
61+
</Combobox>
5562
</div>
5663

5764
<ButtonStyled color="orange" class="w-full sm:w-auto">
5865
<button
5966
class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
6067
@click="moderateAllInFilter()"
6168
>
62-
<ScaleIcon class="size-4 flex-shrink-0" />
69+
<ScaleIcon class="flex-shrink-0" />
6370
<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
6471
<span class="sm:hidden">Moderate</span>
6572
</button>
@@ -91,14 +98,14 @@
9198
</template>
9299
<script setup lang="ts">
93100
import {
94-
FilterIcon,
101+
ListFilterIcon,
95102
ScaleIcon,
96103
SearchIcon,
97104
SortAscIcon,
98105
SortDescIcon,
99106
XIcon,
100107
} from '@modrinth/assets'
101-
import { Button, ButtonStyled, DropdownSelect, Pagination } from '@modrinth/ui'
108+
import { Button, ButtonStyled, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
102109
import { defineMessages, useVIntl } from '@vintl/vintl'
103110
import Fuse from 'fuse.js'
104111
import ConfettiExplosion from 'vue-confetti-explosion'
@@ -215,18 +222,21 @@ watch(
215222
)
216223
217224
const currentFilterType = ref('All projects')
218-
const filterTypes: readonly string[] = readonly([
219-
'All projects',
220-
'Modpacks',
221-
'Mods',
222-
'Resource Packs',
223-
'Data Packs',
224-
'Plugins',
225-
'Shaders',
226-
])
225+
const filterTypes: ComboboxOption<string>[] = [
226+
{ value: 'All projects', label: 'All projects' },
227+
{ value: 'Modpacks', label: 'Modpacks' },
228+
{ value: 'Mods', label: 'Mods' },
229+
{ value: 'Resource Packs', label: 'Resource Packs' },
230+
{ value: 'Data Packs', label: 'Data Packs' },
231+
{ value: 'Plugins', label: 'Plugins' },
232+
{ value: 'Shaders', label: 'Shaders' },
233+
]
227234
228235
const currentSortType = ref('Oldest')
229-
const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
236+
const sortTypes: ComboboxOption<string>[] = [
237+
{ value: 'Oldest', label: 'Oldest' },
238+
{ value: 'Newest', label: 'Newest' },
239+
]
230240
231241
const currentPage = ref(1)
232242
const itemsPerPage = 15

‎apps/frontend/src/pages/moderation/reports/index.vue‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,41 @@
2222
</div>
2323

2424
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
25-
<DropdownSelect
26-
v-slot="{ selected }"
25+
<Combobox
2726
v-model="currentFilterType"
2827
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
29-
:name="formatMessage(messages.filterBy)"
30-
:options="filterTypes as unknown[]"
31-
@change="goToPage(1)"
28+
:options="filterTypes"
29+
:placeholder="formatMessage(messages.filterBy)"
30+
@select="goToPage(1)"
3231
>
33-
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
34-
<FilterIcon class="size-4 flex-shrink-0" />
35-
<span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
36-
</span>
37-
</DropdownSelect>
38-
39-
<DropdownSelect
40-
v-slot="{ selected }"
32+
<template #selected>
33+
<span class="flex flex-row gap-2 align-middle font-semibold">
34+
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
35+
<span class="truncate text-contrast"
36+
>{{ currentFilterType }} ({{ filteredReports.length }})</span
37+
>
38+
</span>
39+
</template>
40+
</Combobox>
41+
42+
<Combobox
4143
v-model="currentSortType"
4244
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
43-
:name="formatMessage(messages.sortBy)"
44-
:options="sortTypes as unknown[]"
45-
@change="goToPage(1)"
45+
:options="sortTypes"
46+
:placeholder="formatMessage(messages.sortBy)"
47+
@select="goToPage(1)"
4648
>
47-
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
48-
<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
49-
<SortDescIcon v-else class="size-4 flex-shrink-0" />
50-
<span class="truncate">{{ selected }}</span>
51-
</span>
52-
</DropdownSelect>
49+
<template #selected>
50+
<span class="flex flex-row gap-2 align-middle font-semibold">
51+
<SortAscIcon
52+
v-if="currentSortType === 'Oldest'"
53+
class="size-5 flex-shrink-0 text-secondary"
54+
/>
55+
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
56+
<span class="truncate text-contrast">{{ currentSortType }}</span>
57+
</span>
58+
</template>
59+
</Combobox>
5360
</div>
5461
</div>
5562

@@ -69,9 +76,9 @@
6976
</template>
7077

7178
<script setup lang="ts">
72-
import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
79+
import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
7380
import type { ExtendedReport } from '@modrinth/moderation'
74-
import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
81+
import { Button, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
7582
import type { Report } from '@modrinth/utils'
7683
import { defineMessages, useVIntl } from '@vintl/vintl'
7784
import Fuse from 'fuse.js'
@@ -169,10 +176,17 @@ watch(
169176
)
170177
171178
const currentFilterType = ref('All')
172-
const filterTypes: readonly string[] = readonly(['All', 'Unread', 'Read'])
179+
const filterTypes: ComboboxOption<string>[] = [
180+
{ value: 'All', label: 'All' },
181+
{ value: 'Unread', label: 'Unread' },
182+
{ value: 'Read', label: 'Read' },
183+
]
173184
174185
const currentSortType = ref('Oldest')
175-
const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
186+
const sortTypes: ComboboxOption<string>[] = [
187+
{ value: 'Oldest', label: 'Oldest' },
188+
{ value: 'Newest', label: 'Newest' },
189+
]
176190
177191
const currentPage = ref(1)
178192
const itemsPerPage = 15

‎apps/frontend/src/pages/moderation/technical-review.vue‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { Labrinth } from '@modrinth/api-client'
3-
import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
3+
import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
44
import {
55
Button,
66
Combobox,
@@ -225,7 +225,7 @@ const currentSortType = ref('Oldest')
225225
const sortTypes: ComboboxOption<string>[] = [
226226
{ value: 'Oldest', label: 'Oldest' },
227227
{ value: 'Newest', label: 'Newest' },
228-
{ value: 'Pending first', label: 'Pending first' },
228+
{ value: 'Pending', label: 'Pending' },
229229
{ value: 'Severity ↑', label: 'Severity ↑' },
230230
{ value: 'Severity ↓', label: 'Severity ↓' },
231231
]
@@ -299,7 +299,7 @@ const filteredItems = computed(() => {
299299
case 'Newest':
300300
filtered.sort((a, b) => getEarliestDate(b) - getEarliestDate(a))
301301
break
302-
case 'Pending first': {
302+
case 'Pending': {
303303
filtered.sort((a, b) => {
304304
const aPending = hasPendingIssues(a) ? 0 : 1
305305
const bPending = hasPendingIssues(b) ? 0 : 1
@@ -485,9 +485,11 @@ watch(currentSortType, () => {
485485
@select="goToPage(1)"
486486
>
487487
<template #selected>
488-
<span class="flex flex-row gap-2 align-middle font-semibold text-primary">
489-
<FilterIcon class="size-4 flex-shrink-0" />
490-
<span class="truncate">{{ currentFilterType }} ({{ filteredIssuesCount }})</span>
488+
<span class="flex flex-row gap-2 align-middle font-semibold">
489+
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
490+
<span class="truncate text-contrast"
491+
>{{ currentFilterType }} ({{ filteredIssuesCount }})</span
492+
>
491493
</span>
492494
</template>
493495
</Combobox>
@@ -500,10 +502,13 @@ watch(currentSortType, () => {
500502
@select="goToPage(1)"
501503
>
502504
<template #selected>
503-
<span class="flex flex-row gap-2 align-middle font-semibold text-primary">
504-
<SortAscIcon v-if="currentSortType === 'Oldest'" class="size-4 flex-shrink-0" />
505-
<SortDescIcon v-else class="size-4 flex-shrink-0" />
506-
<span class="truncate">{{ currentSortType }}</span>
505+
<span class="flex flex-row gap-2 align-middle font-semibold">
506+
<SortAscIcon
507+
v-if="currentSortType === 'Oldest'"
508+
class="size-5 flex-shrink-0 text-secondary"
509+
/>
510+
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
511+
<span class="truncate text-contrast">{{ currentSortType }}</span>
507512
</span>
508513
</template>
509514
</Combobox>

‎packages/assets/generated-icons.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ import _LinkIcon from './icons/link.svg?component'
115115
import _ListIcon from './icons/list.svg?component'
116116
import _ListBulletedIcon from './icons/list-bulleted.svg?component'
117117
import _ListEndIcon from './icons/list-end.svg?component'
118+
import _ListFilterIcon from './icons/list-filter.svg?component'
118119
import _ListOrderedIcon from './icons/list-ordered.svg?component'
119120
import _LoaderIcon from './icons/loader.svg?component'
120121
import _LoaderCircleIcon from './icons/loader-circle.svg?component'
@@ -334,6 +335,7 @@ export const LightBulbIcon = _LightBulbIcon
334335
export const LinkIcon = _LinkIcon
335336
export const ListBulletedIcon = _ListBulletedIcon
336337
export const ListEndIcon = _ListEndIcon
338+
export const ListFilterIcon = _ListFilterIcon
337339
export const ListOrderedIcon = _ListOrderedIcon
338340
export const ListIcon = _ListIcon
339341
export const LoaderCircleIcon = _LoaderCircleIcon

‎packages/assets/icons/list-filter.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)