Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor buttons and improve auto scroll on pagination events #119

Merged
merged 7 commits into from
Aug 19, 2023
Merged

Refactor buttons and improve auto scroll on pagination events #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c969210
add new packages button component
514sid Aug 19, 2023
c37a2ad
replace new packages button to component
514sid Aug 19, 2023
e626bac
refactor auto scroll on page change
514sid Aug 19, 2023
3f25285
rename property
514sid Aug 19, 2023
e431933
formatting
514sid Aug 19, 2023
dea6c11
refactor official package toggle
514sid Aug 19, 2023
98e82c2
Fix formatting
HassanZahirnia Aug 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 11 additions & 78 deletions components/package/list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,9 @@ watch(
results.value = newPackagesSinceLastVisit.value

// if newPage is changed, scroll to #scroll-to-reference element
if (newPage !== oldPage) {
if (newPage !== oldPage && oldPage !== undefined) {
nextTick(() => {
// If device width is less than 640px (mobile), scroll to #scroll-to-reference element
if (process.client && window.innerWidth < 640)
if (process.client)
document.querySelector('#scroll-to-reference')?.scrollIntoView({ behavior: 'smooth' })
})
}
Expand Down Expand Up @@ -365,43 +364,12 @@ const categoriesForSelectboxWithAll = [
</div>
</transition>
<!-- New Since Last Visit Button -->
<ui-tooltip
<ui-new-packages-button
v-if="newPackagesSinceLastVisit.length"
:content="newPackagesSinceLastVisit.length + ' New packages were added since your last visit !'"
theme="emerald"
@click.stop.prevent="showNewPackagesSinceLastVisit = !showNewPackagesSinceLastVisit"
>
<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': !showNewPackagesSinceLastVisit,
'bg-teal-200/70 text-teal-600 dark:text-teal-500 dark:bg-teal-500/20': showNewPackagesSinceLastVisit,
}"
>
<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': !showNewPackagesSinceLastVisit,
'opacity-0': showNewPackagesSinceLastVisit,
}"
/>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-teal-500" />
</span>
<div class="">
{{ newPackagesSinceLastVisit.length }}
<span class="inline">New Item</span>
<span class="inline">{{ newPackagesSinceLastVisit.length > 1 ? 's' : '' }}</span>
</div>
</div>
</ui-tooltip>
:new-packages-count="newPackagesSinceLastVisit.length"
:is-active="showNewPackagesSinceLastVisit"
@toggle="showNewPackagesSinceLastVisit = !showNewPackagesSinceLastVisit"
/>
</div>
<div
class="xl:flex-1
Expand All @@ -413,45 +381,10 @@ const categoriesForSelectboxWithAll = [
"
>
<!-- Crown/Official package toggle -->
<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': showOfficialPackages !== '1',
'lg:w-40 bg-white hover:bg-white/80 dark:bg-indigo-500/20 dark:hover:bg-indigo-500/10': showOfficialPackages === '1',
}"
@click="showOfficialPackages = showOfficialPackages === '1' ? '0' : '1'"
>
<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': showOfficialPackages === '1',
}"
>
Official Packages
</div>
</div>
</div>
<ui-official-package-toggle
:is-active="showOfficialPackages"
@toggle="showOfficialPackages = showOfficialPackages === '1' ? '0' : '1'"
/>
<!-- Search bar -->
<ui-search-input />
<!-- Sort -->
Expand Down
48 changes: 48 additions & 0 deletions components/ui/new-packages-button.vue
View file
Open in desktop
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>
51 changes: 51 additions & 0 deletions components/ui/official-package-toggle.vue
View file
Open in desktop
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>