Skip to content

Commit df05845

Browse files
dvcoldvcol
committed
feat(icons): added nice icons for navbar
1 parent b96676e commit df05845

File tree

8 files changed

+306
-7
lines changed

8 files changed

+306
-7
lines changed

‎src/components/common/navbar/NavbarPageSizeSelect.vue

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<script setup lang="ts">
2-
import { NSelect, NTooltip, type SelectOption } from 'naive-ui';
2+
import { NIcon, NSelect, NTooltip, type SelectOption } from 'naive-ui';
33
4-
import { onMounted, ref, toRefs, watch } from 'vue';
4+
import { computed, onMounted, ref, toRefs, watch } from 'vue';
5+
6+
import IconChevron from '~/components/icons/IconChevron.vue';
7+
import IconPage from '~/components/icons/IconPage.vue';
8+
import IconPageDouble from '~/components/icons/IconPageDouble.vue';
59
610
import { useI18n } from '~/utils';
711
@@ -36,6 +40,10 @@ const innerValue = ref(pageSize.value);
3640
onMounted(() => {
3741
watch(innerValue, () => emit('update:pageSize', innerValue.value));
3842
});
43+
44+
const open = ref(false);
45+
46+
const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPage));
3947
</script>
4048

4149
<template>
@@ -50,10 +58,15 @@ onMounted(() => {
5058
<template #trigger>
5159
<NSelect
5260
v-model:value="innerValue"
61+
v-model:show="open"
5362
class="page-select"
5463
:options="pageSizeOptions"
5564
:to="parentElement"
56-
/>
65+
>
66+
<template #arrow>
67+
<NIcon :component="open ? IconChevron : pageIcon" />
68+
</template>
69+
</NSelect>
5770
</template>
5871
</NTooltip>
5972
</template>

‎src/components/icons/IconCalendar.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-linecap="round"
7+
stroke-linejoin="round"
8+
stroke-width="2"
9+
>
10+
<rect
11+
width="16"
12+
height="16"
13+
x="4"
14+
y="4"
15+
stroke-dasharray="64"
16+
stroke-dashoffset="64"
17+
rx="1"
18+
>
19+
<animate
20+
fill="freeze"
21+
attributeName="stroke-dashoffset"
22+
dur="0.5s"
23+
values="64;0"
24+
/>
25+
</rect>
26+
<path stroke-dasharray="6" stroke-dashoffset="6" d="M7 4V2M17 4V2">
27+
<animate
28+
fill="freeze"
29+
attributeName="stroke-dashoffset"
30+
begin="0.5s"
31+
dur="0.2s"
32+
values="6;0"
33+
/>
34+
</path>
35+
<path stroke-dasharray="12" stroke-dashoffset="12" d="M7 11H17">
36+
<animate
37+
fill="freeze"
38+
attributeName="stroke-dashoffset"
39+
begin="0.8s"
40+
dur="0.2s"
41+
values="12;0"
42+
/>
43+
</path>
44+
<path stroke-dasharray="9" stroke-dashoffset="9" d="M7 15H14">
45+
<animate
46+
fill="freeze"
47+
attributeName="stroke-dashoffset"
48+
begin="1s"
49+
dur="0.2s"
50+
values="9;0"
51+
/>
52+
</path>
53+
</g>
54+
<rect width="14" height="0" x="5" y="5" fill="currentColor">
55+
<animate
56+
fill="freeze"
57+
attributeName="height"
58+
begin="0.5s"
59+
dur="0.2s"
60+
values="0;3"
61+
/>
62+
</rect>
63+
</svg>
64+
</template>

‎src/components/icons/IconChevron.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g transform="rotate(-90 12 12)">
4+
<path
5+
stroke="currentColor"
6+
stroke-dasharray="8"
7+
stroke-dashoffset="8"
8+
stroke-linecap="round"
9+
stroke-width="2"
10+
d="M9 12L14 7M9 12L14 17"
11+
fill="currentColor"
12+
>
13+
<animate
14+
fill="freeze"
15+
attributeName="stroke-dashoffset"
16+
dur="0.3s"
17+
values="8;0"
18+
/>
19+
</path>
20+
</g>
21+
</svg>
22+
</template>

‎src/components/icons/IconList.vue

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g fill="none" stroke="currentColor" stroke-linecap="round">
4+
<g stroke-dasharray="10" stroke-dashoffset="10">
5+
<circle cx="5" cy="5" r="1.5">
6+
<animate
7+
fill="freeze"
8+
attributeName="stroke-dashoffset"
9+
dur="0.1s"
10+
values="10;0"
11+
/>
12+
</circle>
13+
<circle cx="5" cy="12" r="1.5">
14+
<animate
15+
fill="freeze"
16+
attributeName="stroke-dashoffset"
17+
begin="0.35s"
18+
dur="0.1s"
19+
values="10;0"
20+
/>
21+
</circle>
22+
<circle cx="5" cy="19" r="1.5">
23+
<animate
24+
fill="freeze"
25+
attributeName="stroke-dashoffset"
26+
begin="0.7s"
27+
dur="0.1s"
28+
values="10;0"
29+
/>
30+
</circle>
31+
</g>
32+
<g stroke-dasharray="28" stroke-dashoffset="28">
33+
<rect width="11" height="3" x="9.5" y="3.5" rx="1.5">
34+
<animate
35+
fill="freeze"
36+
attributeName="stroke-dashoffset"
37+
begin="0.05s"
38+
dur="0.25s"
39+
values="28;0"
40+
/>
41+
</rect>
42+
<rect width="11" height="3" x="9.5" y="10.5" rx="1.5">
43+
<animate
44+
fill="freeze"
45+
attributeName="stroke-dashoffset"
46+
begin="0.4s"
47+
dur="0.25s"
48+
values="28;0"
49+
/>
50+
</rect>
51+
<rect width="11" height="3" x="9.5" y="17.5" rx="1.5">
52+
<animate
53+
fill="freeze"
54+
attributeName="stroke-dashoffset"
55+
begin="0.75s"
56+
dur="0.25s"
57+
values="28;0"
58+
/>
59+
</rect>
60+
</g>
61+
</g>
62+
</svg>
63+
</template>

‎src/components/icons/IconPage.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-linecap="round"
7+
stroke-linejoin="round"
8+
stroke-width="2"
9+
>
10+
<path
11+
stroke-dasharray="62"
12+
stroke-dashoffset="62"
13+
d="M20 6V5C20 4.45 19.55 4 19 4H5C4.45 4 4 4.45 4 5V19C4 19.55 4.45 20 5 20H19C19.55 20 20 19.55 20 19z"
14+
>
15+
<animate
16+
fill="freeze"
17+
attributeName="stroke-dashoffset"
18+
dur="0.6s"
19+
values="62;124"
20+
/>
21+
</path>
22+
<g stroke-dasharray="10" stroke-dashoffset="10">
23+
<path d="M8 8h8">
24+
<animate
25+
fill="freeze"
26+
attributeName="stroke-dashoffset"
27+
begin="0.7s"
28+
dur="0.2s"
29+
values="10;0"
30+
/>
31+
</path>
32+
<path d="M8 12h8">
33+
<animate
34+
fill="freeze"
35+
attributeName="stroke-dashoffset"
36+
begin="0.9s"
37+
dur="0.2s"
38+
values="10;0"
39+
/>
40+
</path>
41+
</g>
42+
<path stroke-dasharray="7" stroke-dashoffset="7" d="M8 16h5">
43+
<animate
44+
fill="freeze"
45+
attributeName="stroke-dashoffset"
46+
begin="1.1s"
47+
dur="0.2s"
48+
values="7;0"
49+
/>
50+
</path>
51+
</g>
52+
</svg>
53+
</template>

‎src/components/icons/IconPageDouble.vue

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-linecap="round"
7+
stroke-linejoin="round"
8+
stroke-width="2"
9+
>
10+
<path
11+
stroke-dasharray="62"
12+
stroke-dashoffset="62"
13+
d="M22 4V3C22 2.45 21.55 2 21 2H7C6.45 2 6 2.45 6 3V17C6 17.55 6.45 18 7 18H21C21.55 18 22 17.55 22 17z"
14+
>
15+
<animate
16+
fill="freeze"
17+
attributeName="stroke-dashoffset"
18+
dur="0.6s"
19+
values="62;124"
20+
/>
21+
</path>
22+
<g stroke-dasharray="10" stroke-dashoffset="10">
23+
<path d="M10 6h8">
24+
<animate
25+
fill="freeze"
26+
attributeName="stroke-dashoffset"
27+
begin="0.7s"
28+
dur="0.2s"
29+
values="10;0"
30+
/>
31+
</path>
32+
<path d="M10 10h8">
33+
<animate
34+
fill="freeze"
35+
attributeName="stroke-dashoffset"
36+
begin="0.9s"
37+
dur="0.2s"
38+
values="10;0"
39+
/>
40+
</path>
41+
</g>
42+
<path stroke-dasharray="7" stroke-dashoffset="7" d="M10 14h5">
43+
<animate
44+
fill="freeze"
45+
attributeName="stroke-dashoffset"
46+
begin="1.1s"
47+
dur="0.2s"
48+
values="7;0"
49+
/>
50+
</path>
51+
<path
52+
stroke-dasharray="34"
53+
stroke-dashoffset="34"
54+
d="M2 6V21C2 21.55 2.45 22 3 22H18"
55+
>
56+
<animate
57+
fill="freeze"
58+
attributeName="stroke-dashoffset"
59+
begin="1.4s"
60+
dur="0.4s"
61+
values="34;68"
62+
/>
63+
</path>
64+
</g>
65+
</svg>
66+
</template>

‎src/components/views/history/HistoryNavbar.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script setup lang="ts">
22
import { NDatePicker, NFlex, NIcon, NInput } from 'naive-ui';
33
4-
import { computed, defineProps } from 'vue';
4+
import { computed, defineProps, ref } from 'vue';
55
66
import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
7+
import IconCalendar from '~/components/icons/IconCalendar.vue';
8+
import IconChevron from '~/components/icons/IconChevron.vue';
79
import IconLoop from '~/components/icons/IconLoop.vue';
810
911
import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
@@ -35,11 +37,14 @@ const onDateChange = debounce((values?: [number, number]) => {
3537
const [start, end] = values;
3638
setHistoryRange({ start: new Date(start), end: new Date(end) });
3739
}, 350);
40+
41+
const open = ref(false);
3842
</script>
3943

4044
<template>
4145
<NFlex class="row" align="center" justify="space-evenly" :vertical="false">
4246
<NDatePicker
47+
v-model:show="open"
4348
class="date-picker"
4449
type="daterange"
4550
:to="parentElement"
@@ -51,7 +56,11 @@ const onDateChange = debounce((values?: [number, number]) => {
5156
:value="pickerValues"
5257
:on-clear="onDateChange"
5358
:on-confirm="onDateChange"
54-
/>
59+
>
60+
<template #date-icon>
61+
<NIcon :component="open ? IconChevron : IconCalendar" />
62+
</template>
63+
</NDatePicker>
5564
<NInput
5665
v-model:value="debouncedSearch"
5766
class="search-input"

‎src/components/views/watchlist/WatchlistNavbar.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<script setup lang="ts">
22
import { NFlex, NIcon, NInput, NSelect } from 'naive-ui';
33
4-
import { computed, defineProps } from 'vue';
4+
import { computed, defineProps, ref } from 'vue';
55
66
import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
7+
import IconList from '~/components/icons/IconList.vue';
78
import IconLoop from '~/components/icons/IconLoop.vue';
9+
810
import {
911
useListsStore,
1012
useListsStoreRefs,
@@ -44,18 +46,25 @@ defineProps({
4446
});
4547
4648
watchUserChange(fetchLists, clearState);
49+
50+
const open = ref(false);
4751
</script>
4852

4953
<template>
5054
<NFlex class="row" align="center" justify="center" :vertical="false">
5155
<NSelect
5256
v-model:value="selectValue"
57+
v-model:show="open"
5358
class="list-select"
5459
:options="listOptions"
5560
:to="parentElement"
5661
:loading="loading"
5762
filterable
58-
/>
63+
>
64+
<template #arrow>
65+
<NIcon :component="open ? IconLoop : IconList" />
66+
</template>
67+
</NSelect>
5968
<NInput
6069
v-model:value="debouncedSearch"
6170
class="search-input"

0 commit comments

Comments
 (0)