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

feat: APPS-3045 refactor mobile drawer, datefilter mobile #654

Merged
merged 10 commits into from
Nov 26, 2024
Merged

feat: APPS-3045 refactor mobile drawer, datefilter mobile #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f4d291d
feat: mobile drawer
Nov 14, 2024
a22fc99
chore: refactor buttondropdown
Nov 14, 2024
45971fc
fix: cleanup commented out code, import vonclickoutside
Nov 15, 2024
830be7b
feat: add mobileDrawer to DateFilter
Nov 19, 2024
452f1f3
fix: today btn error on mobile
Nov 19, 2024
315c38f
chore: lint
Nov 19, 2024
c2d54a5
chore: update button styles
Nov 21, 2024
556f1e6
Merge branch 'main' into APPS-3045_mobile_datefilter
farosFreed Nov 21, 2024
93388f5
Merge branch 'main' into APPS-3045_mobile_datefilter
farosFreed Nov 21, 2024
8330d32
Merge branch 'main' into APPS-3045_mobile_datefilter
pghorpade Nov 22, 2024
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
156 changes: 50 additions & 106 deletions src/lib-components/ButtonDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<script setup>
import { computed, ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'
import { useRoute } from 'vue-router'
import 'add-to-calendar-button'
import format from 'date-fns/format'

import SvgIconFtvaDropTriangle from 'ucla-library-design-tokens/assets/svgs/icon-ftva-drop-triangle.svg'
import SvgIconFtvaShare from 'ucla-library-design-tokens/assets/svgs/icon-ftva-share.svg'
import SvgIconFtvaSocialConfirm from 'ucla-library-design-tokens/assets/svgs/icon-ftva-social_confirm.svg'
import SvgGlyphClose from 'ucla-library-design-tokens/assets/svgs/icon-close.svg'

import IconWithLink from './IconWithLink.vue'
import MobileDrawer from './MobileDrawer.vue'
import removeTags from '@/utils/removeTags'

import { useGlobalStore } from '@/stores/GlobalStore'
import { useTheme } from '@/composables/useTheme'

// DATA
Expand Down Expand Up @@ -63,27 +60,14 @@ const { title, eventDescription, startDateWithTime, endTime, location, isEvent,
},
})

const globalStore = useGlobalStore()

const route = useRoute()

const isDropdownExpanded = ref(false)

const isLinkCopied = ref(false)

// COMPUTED
const isMobile = computed(() => {
return globalStore.winWidth <= 750
})

const isLinkCopiedClass = computed(() => [
{ 'is-link-copied': isLinkCopied.value },
])

const isDropdownExpandedClass = computed(() => [
{ 'is-expanded': isDropdownExpanded.value },
])

// Event data computations
const parsedLocation = computed(() => {
const evtUrl = location[0]?.publicUrl
Expand Down Expand Up @@ -116,19 +100,6 @@ const parsedEventDescription = computed(() => {
return ''
})

// METHODS
function handleDropdownExpansion() {
return (isDropdownExpanded.value = !isDropdownExpanded.value)
}

function closeDropdownOnClickOutside() {
isDropdownExpanded.value = false
}

function removeOverlay() {
isDropdownExpanded.value = false
}

/* Inject styles into ATCB ShadowDOM on button dropdown:
- Remove border bottom radii on button
- Rotate FTVA dropdown triangle
Expand Down Expand Up @@ -166,7 +137,7 @@ function formatEndTime(str) {
const theme = useTheme()

const parsedClasses = computed(() => {
return ['button-dropdown', theme?.value || '', { 'is-expanded': isDropdownExpanded.value }]
return ['button-dropdown', theme?.value || '']
})
</script>

Expand Down Expand Up @@ -200,96 +171,69 @@ const parsedClasses = computed(() => {
hideIconButton="true"
listStyle="dropdown-static"
:debug="debugModeEnabled"
@click="handleActbExpandedStyle"
></add-to-calendar-button>
@click="handleActbExpandedStyle"></add-to-calendar-button>
<!-- eslint-enable -->
</div>

<!-- Generic Button -->
<div v-else v-on-click-outside="closeDropdownOnClickOutside">
<div class="dropdown-overlay" :class="isDropdownExpandedClass" />
<button
class="button"
:class="isDropdownExpandedClass"
@click="handleDropdownExpansion"
>
<MobileDrawer v-else>
<template #buttonLabel>
<!-- Optional Button Icon -->
<span class="button-inner-wrapper">
<span v-if="hasIcon">
<component :is="SvgIconFtvaShare" class="button-svg" aria-hidden="true" />
</span>

<span class="button-text">{{ buttonTitle }}</span>
<span v-if="hasIcon" class="icon-svg">
<component :is="SvgIconFtvaShare" class="button-svg" aria-hidden="true" />
</span>

<span
:class="isDropdownExpandedClass"
class="toggle-triangle-icon"
>
<SvgIconFtvaDropTriangle />
</span>
</button>

<!-- Dropdown Modal -->
<div v-if="isDropdownExpanded" class="button-dropdown-modal">
<SvgGlyphClose
v-if="isMobile"
class="svg-glyph-close"
@click="removeOverlay"
/>
<span class="button-text">{{ buttonTitle }}</span>
</template>
<template #dropdownItems>
<div
class="button-dropdown-modal-wrapper"
:class="isDropdownExpandedClass"
v-for="item in dropdownList"
:key="item.dropdownItemTitle"
class="dropdown-modal-item"
>
<!-- Dropdown Items -->
<div
v-for="item in dropdownList"
:key="item.dropdownItemTitle"
class="dropdown-modal-item"
<!-- "Send to Email" -->
<span v-if="item.dropdownItemTitle === 'Email'"><a
:href="`mailto:?&body=${route.fullPath}`"
class="email-icon"
>
<!-- "Send to Email" -->
<span v-if="item.dropdownItemTitle === 'Email'"><a
:href="`mailto:?&body=${route.fullPath}`"
class="email-icon"
>
<IconWithLink
:text="item.dropdownItemTitle"
:icon-name="item.iconName"
class="not-smart-link"
/></a></span>

<!-- "Copy URL/Link" -->
<span
v-else-if="item.dropdownItemTitle === 'Copy Link'"
>
<!-- Swap on click -->
<IconWithLink
v-if="!isLinkCopied"
:text="item.dropdownItemTitle"
:icon-name="item.iconName"
class="not-smart-link"
@click="handleCopiedLink(route.fullPath)"
/>

<IconWithLink
v-else
text="Link Copied!"
:class="isLinkCopiedClass"
:icon-name="SvgIconFtvaSocialConfirm"
/>
</span>

<!-- Generic Dropdown Items -->
<IconWithLink
v-else
:text="item.dropdownItemTitle"
:icon-name="item.iconName"
:to="`${item.dropdownItemUrl}${route.fullPath}`"
class="not-smart-link"
/>
</a></span>

<!-- "Copy URL/Link" -->
<span
v-else-if="item.dropdownItemTitle === 'Copy Link'"
>
<!-- Swap on click -->
<IconWithLink
v-if="!isLinkCopied"
:text="item.dropdownItemTitle"
:icon-name="item.iconName"
class="not-smart-link"
@click="handleCopiedLink(route.fullPath)"
/>
</div>

<IconWithLink
v-else
text="Link Copied!"
:class="isLinkCopiedClass"
:icon-name="SvgIconFtvaSocialConfirm"
/>
</span>

<!-- Generic Dropdown Items -->
<IconWithLink
v-else
:text="item.dropdownItemTitle"
:icon-name="item.iconName"
:to="`${item.dropdownItemUrl}${route.fullPath}`"
/>
</div>
</div>
</div>
</template>
</MobileDrawer>
</div>
</template>

Expand Down
Loading
Loading