Skip to content

Commit 3b3e93c

Browse files
dvcoldvcol
committed
feat(search): create navbar search component
1 parent 5a7d2bf commit 3b3e93c

17 files changed

+573
-20
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPag
4848

4949
<template>
5050
<NTooltip
51+
class="page-size-tooltip"
5152
:disabled="open"
5253
:show-arrow="false"
5354
placement="bottom"
@@ -77,3 +78,9 @@ const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPag
7778
flex: 0 0 5rem;
7879
}
7980
</style>
81+
82+
<style lang="scss">
83+
.page-size-tooltip.page-size-tooltip {
84+
margin-top: 12px;
85+
}
86+
</style>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
139139
:to="parentElement"
140140
placement="bottom"
141141
size="small"
142-
class="dropdown"
142+
class="settings-dropdown"
143143
@select="onSelect"
144144
>
145145
<NFlex justify="space-around" align="center" :wrap="false">
@@ -175,7 +175,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
175175
</template>
176176

177177
<style lang="scss">
178-
.dropdown {
178+
.settings-dropdown {
179179
min-width: max(calc(100vw / 6), 8rem);
180180
max-width: 20rem;
181181
margin-top: 0.75rem;

‎src/components/container/ContainerComponent.ce.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,11 @@ const root = ref<HTMLElement>();
115115
}
116116
117117
.n-tooltip.n-tooltip {
118-
background: var(--bg-color);
118+
background: var(--bg-color-60);
119119
backdrop-filter: blur(var(--bg-blur));
120120
121121
&:hover {
122-
background: var(--bg-color-hover);
122+
background: var(--bg-black-90);
123123
}
124124
125125
@media (prefers-color-scheme: light) {

‎src/components/icons/IconChevronUpSmall.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) translate(24 0) scale(-1 1)">
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/IconMovie.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
3+
<g fill="currentColor">
4+
<path
5+
class="sphere-left"
6+
opacity="0"
7+
d="M90.734,210.977c22.547,0.016,43.172-9.203,57.922-24c14.781-14.734,24-35.359,24-57.906
8+
s-9.219-43.188-24-57.938c-14.75-14.781-35.375-24-57.922-23.984c-22.547-0.016-43.172,9.203-57.922,24
9+
c-14.781,14.734-24,35.375-23.984,57.922c-0.016,22.547,9.203,43.156,23.984,57.906C47.563,201.773,68.188,210.992,90.734,210.977z
10+
M66.109,104.43c6.375-6.344,14.938-10.188,24.625-10.203c9.703,0.016,18.25,3.859,24.641,10.203
11+
c6.328,6.375,10.188,14.938,10.188,24.641c0,9.688-3.859,18.234-10.188,24.625c-6.391,6.328-14.938,10.188-24.641,10.203
12+
c-9.688-0.016-18.25-3.875-24.625-10.203c-6.344-6.391-10.188-14.938-10.203-24.625C55.922,119.367,59.766,110.805,66.109,104.43z"
13+
>
14+
<animate
15+
fill="freeze"
16+
attributeName="opacity"
17+
begin="0.1s"
18+
dur="0.5s"
19+
values="0;1"
20+
/>
21+
</path>
22+
<path
23+
class="sphere-right"
24+
opacity="0"
25+
d="M270.219,210.977c22.547,0.016,43.172-9.203,57.922-24c14.781-14.75,24-35.359,23.984-57.906
26+
c0.016-22.547-9.203-43.188-23.984-57.922c-14.75-14.797-35.375-24.016-57.922-24c-22.531-0.016-43.172,9.203-57.922,23.984
27+
c-14.797,14.75-24,35.391-23.984,57.938c-0.016,22.547,9.203,43.172,23.984,57.906
28+
C227.047,201.773,247.688,210.992,270.219,210.977z M245.594,104.43c6.375-6.344,14.938-10.188,24.625-10.203
29+
c9.688,0.016,18.25,3.859,24.625,10.203c6.344,6.375,10.188,14.938,10.203,24.641c-0.016,9.688-3.859,18.234-10.203,24.625
30+
c-6.375,6.328-14.938,10.188-24.625,10.203c-9.688-0.016-18.25-3.875-24.625-10.203c-6.344-6.391-10.188-14.938-10.203-24.625
31+
C235.406,119.367,239.25,110.805,245.594,104.43z"
32+
>
33+
<animate
34+
fill="freeze"
35+
attributeName="opacity"
36+
begin="0.2s"
37+
dur="0.5s"
38+
values="0;1"
39+
/>
40+
</path>
41+
<path
42+
class="body"
43+
opacity="0"
44+
d="M313.047,224.195H45.953c-12.625-0.016-24.234,5.172-32.5,13.453C5.172,245.914,0,257.523,0,270.148v148.75
45+
c0,12.625,5.172,24.25,13.453,32.5c8.266,8.281,19.875,13.469,32.5,13.453h267.094c12.609,0.016,24.234-5.172,32.484-13.453
46+
c8.297-8.25,13.484-19.875,13.469-32.5v-148.75c0.016-12.625-5.172-24.234-13.469-32.5
47+
C337.281,229.367,325.656,224.18,313.047,224.195z M317.813,418.898c-0.031,1.391-0.516,2.453-1.406,3.375
48+
c-0.922,0.891-1.984,1.375-3.359,1.391H45.953c-1.391-0.016-2.438-0.5-3.359-1.391c-0.891-0.922-1.375-1.984-1.406-3.375v-148.75
49+
c0.031-1.375,0.516-2.438,1.406-3.375c0.922-0.875,1.969-1.375,3.359-1.391h267.094c1.375,0.016,2.438,0.516,3.359,1.391
50+
c0.891,0.938,1.375,2,1.406,3.375V418.898z"
51+
>
52+
<animate
53+
fill="freeze"
54+
attributeName="opacity"
55+
begin="0.4s"
56+
dur="0.5s"
57+
values="0;1"
58+
/>
59+
</path>
60+
<path
61+
class="lens"
62+
opacity="0"
63+
d="M493.875,236.414c-5.828-3.516-12.531-5.359-19.125-5.359c-6.063,0-12.063,1.484-17.609,4.422l-73.734,39.313
64+
v46.719l87.406-46.594v139.297l-87.406-46.672v46.734l73.734,39.297c5.547,2.953,11.547,4.422,17.609,4.422
65+
c6.594,0,13.297-1.766,19.188-5.297C505.125,445.93,512,433.805,512,420.68V268.367C512,255.242,505.125,243.117,493.875,236.414z"
66+
>
67+
<animate
68+
fill="freeze"
69+
attributeName="opacity"
70+
begin="0.6s"
71+
dur="0.5s"
72+
values="0;1"
73+
/>
74+
</path>
75+
</g>
76+
</svg>
77+
</template>

‎src/components/icons/IconScreen.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 stroke-dasharray="6" stroke-dashoffset="6" d="M12 21H17M12 21H7">
11+
<animate
12+
fill="freeze"
13+
attributeName="stroke-dashoffset"
14+
dur="0.3s"
15+
values="6;0"
16+
/>
17+
</path>
18+
<path stroke-dasharray="6" stroke-dashoffset="6" d="M12 21V17">
19+
<animate
20+
fill="freeze"
21+
attributeName="stroke-dashoffset"
22+
dur="0.2s"
23+
values="6;0"
24+
/>
25+
</path>
26+
<path stroke-dasharray="64" stroke-dashoffset="64" d="M12 17H3V5H21V17Z">
27+
<animate
28+
fill="freeze"
29+
attributeName="stroke-dashoffset"
30+
begin="0.3s"
31+
dur="0.6s"
32+
values="64;0"
33+
/>
34+
</path>
35+
</g>
36+
</svg>
37+
</template>

‎src/components/icons/IconYoutube.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<path
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-dasharray="60"
7+
stroke-dashoffset="60"
8+
stroke-linecap="round"
9+
stroke-width="2.5"
10+
d="M12 5C21 5 21 5 21 12C21 19 21 19 12 19C3 19 3 19 3 12C3 5 3 5 12 5z"
11+
>
12+
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="60;0" />
13+
</path>
14+
<path fill="currentColor" fill-opacity="0" d="M10 8.5L16 12L10 15.5z">
15+
<set attributeName="fill-opacity" begin="0.7s" to="1" />
16+
<animate
17+
fill="freeze"
18+
attributeName="d"
19+
begin="0.7s"
20+
dur="0.2s"
21+
values="M12 11L12 12L12 13z;M10 8.5L16 12L10 15.5z"
22+
/>
23+
</path>
24+
</svg>
25+
</template>

‎src/components/views/calendar/CalendarNavbar.vue

+5
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const open = ref(false);
5757
</template>
5858
</NDatePicker>
5959
<NTooltip
60+
class="calendar-tooltip"
6061
:show-arrow="false"
6162
placement="bottom"
6263
:delay="100"
@@ -97,6 +98,10 @@ const open = ref(false);
9798
</style>
9899

99100
<style lang="scss">
101+
.calendar-tooltip.calendar-tooltip {
102+
margin-top: 12px;
103+
}
104+
100105
.n-date-panel {
101106
margin-top: 12px;
102107
margin-left: -16px;

0 commit comments

Comments
 (0)