-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor buttons and improve auto scroll on pagination events (#119)
* add new packages button component * replace new packages button to component * refactor auto scroll on page change * rename property * formatting * refactor official package toggle * Fix formatting --------- Co-authored-by: HassanZahirnia <m.hassan.zahirnia@gmail.com>
- Loading branch information
1 parent
b2adb19
commit eaadb1d
Showing
3 changed files
with
110 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ | ||
| newPackagesCount: number, | ||
| isActive: boolean | ||
| }>() | ||
| const $emit = defineEmits<{ | ||
| (e: 'toggle'): void | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <ui-tooltip | ||
| :content="newPackagesCount + ' New packages were added since your last visit !'" | ||
| theme="emerald" | ||
| @click.stop.prevent="$emit('toggle')" | ||
| > | ||
| <div | ||
| class="py-1.5 px-4 select-none | ||
| rounded-full cursor-pointer | ||
| transition-all duration-300 | ||
| flex gap-2 items-center | ||
| font-medium | ||
| hover:brightness-105 | ||
| " | ||
| :class="{ | ||
| 'bg-slate-300/50 dark:bg-slate-700/50 text-slate-600 dark:text-slate-400': !isActive, | ||
| 'bg-teal-200/70 text-teal-600 dark:text-teal-500 dark:bg-teal-500/20': isActive, | ||
| }" | ||
| > | ||
| <span class="relative flex h-2.5 w-2.5"> | ||
| <span | ||
| class="animate-ping absolute inline-flex h-full w-full rounded-full bg-teal-400" | ||
| :class="{ | ||
| 'opacity-75': !isActive, | ||
| 'opacity-0': isActive, | ||
| }" | ||
| /> | ||
| <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-teal-500" /> | ||
| </span> | ||
| <div class=""> | ||
| {{ newPackagesCount }} | ||
| <span class="inline">New Item</span> | ||
| <span class="inline">{{ newPackagesCount > 1 ? 's' : '' }}</span> | ||
| </div> | ||
| </div> | ||
| </ui-tooltip> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ | ||
| isActive: '0' | '1' | '' | ||
| }>() | ||
| const $emit = defineEmits<{ | ||
| (e: 'toggle'): void | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex-1 flex justify-start min-[920px]:justify-end w-40"> | ||
| <div | ||
| class="relative rounded-xl cursor-pointer group select-none | ||
| transition-all duration-300 ease-out | ||
| delay-100 | ||
| overflow-hidden | ||
| w-[12.5rem] sm:w-40 lg:w-11 h-11 | ||
| flex gap-2 items-center | ||
| lg:hover:w-40 | ||
| " | ||
| :class="{ | ||
| 'bg-white/50 dark:bg-[#362B59]/30 dark:hover:bg-[#362B59]/40': isActive !== '1', | ||
| 'lg:w-40 bg-white hover:bg-white/80 dark:bg-indigo-500/20 dark:hover:bg-indigo-500/10': isActive === '1', | ||
| }" | ||
| @click="$emit('toggle')" | ||
| > | ||
| <div | ||
| class="i-fluent-emoji-crown text-2xl | ||
| shrink-0 | ||
| mb-1 ml-2.5 | ||
| " | ||
| /> | ||
| <div | ||
| class="truncate | ||
| leading-5 | ||
| sm:text-xs | ||
| transition duration-300 | ||
| delay-100 | ||
| lg:opacity-0 | ||
| lg:group-hover:opacity-100 | ||
| " | ||
| :class="{ | ||
| 'lg:opacity-100': isActive === '1', | ||
| }" | ||
| > | ||
| Official Packages | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |