Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small button refactor, overflow and popout menus

Browse Source
This commit is contained in:
Prospector 2023-10-11 08:04:50 -07:00
parent c70ebb6cce
commit a708cf7f69
No known key found for this signature in database
13 changed files with 556 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.js
View File

@ -30,6 +30,8 @@ export default {
{ text: 'Modal', link: '/components/modal' },
{ text: 'Dropdown Select', link: '/components/dropdown-select' },
{ text: 'Dropdown Button', link: '/components/dropdown-button' },
{ text: 'Popout Menu', link: '/components/popout-menu' },
{ text: 'Overflow Menu', link: '/components/overflow-menu' },
{ text: 'Project Card', link: '/components/project-card' },
{ text: 'Environment Indicator', link: '/components/environment-indicator' },
{ text: 'Categories', link: '/components/categories' },

100
docs/components/button.md
View File

@ -1,35 +1,77 @@
# Button
# Buttons
## Standard
<DemoContainer>
<Button>Standard</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="highlight">Highlight</Button>
<Button color="raised">Raised</Button>
<Button color="danger">Danger</Button>
<Button><CheckIcon /> With Icon</Button>
<Button iconOnly><XIcon /></Button>
<Button large>Large button</Button>
<Button color="primary" large>Discover mods</Button>
<Button color="danger" large outline>Be warned</Button>
<Button large outline>Sign up</Button>
<Button><HeartIcon /> Follow project</Button>
<Button outline color="danger"><TrashIcon /> Delete project</Button>
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button>Standard</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="highlight">Highlight</Button>
<Button color="raised">Raised</Button>
<Button color="danger">Danger</Button>
<Button><CheckIcon /> With Icon</Button>
<Button iconOnly><XIcon /></Button>
<Button large>Large button</Button>
<Button color="primary" large>Discover mods</Button>
<Button color="danger" large outline>Be warned</Button>
<Button large outline>Sign up</Button>
<Button><HeartIcon /> Follow project</Button>
<Button outline color="danger"><TrashIcon /> Delete project</Button>
<Button><HeartIcon /> Like</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><EditIcon /> Edit</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
```
## Large
<DemoContainer>
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
</DemoContainer>
```vue
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
```
## Outline
<DemoContainer>
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
</DemoContainer>
```vue
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
```
## Transparent
<DemoContainer>
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
</DemoContainer>
```vue
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
```
## Icon-only
<DemoContainer>
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
</DemoContainer>
```vue
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
```

43
docs/components/overflow-menu.md Normal file
View File

@ -0,0 +1,43 @@
<script setup>
const options = [
{
'id': 'like',
'color': 'primary',
'action': () => {}
},
{
'id': 'report',
'action': () => {}
},
{
'id': 'delete',
'color': 'danger',
'action': () => {}
}
]
</script>
# Popout Menu
<DemoContainer>
<OverflowMenu :options="options" class="btn">
More options...
<template #like>
<HeartIcon /> Like
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>
</DemoContainer>
```vue
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
</template>
</PopoutMenu>
```

76
docs/components/popout-menu.md Normal file
View File

@ -0,0 +1,76 @@
# Popout Menu
<DemoContainer>
<PopoutMenu class="btn" position="bottom" direction="left">
Bottom going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="left">
Top going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="right">
Top going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="up">
Left going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="down">
Left going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="up">
Right going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="down">
Right going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
</DemoContainer>
```vue
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
</template>
</PopoutMenu>
```

1
lib/assets/icons/bookmark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bookmark"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

1
lib/assets/icons/more-horizontal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

1
lib/assets/icons/more-vertical.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

73
lib/assets/styles/classes.scss
View File

@ -321,19 +321,30 @@ a,
.btn {
@extend .button-base;
--text-color: var(--color-contrast);
--text-color: var(--color-base);
--background-color: var(--color-button-bg);
--shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
&.btn-outline {
--background-color: var(--color-contrast);
&.btn-outline,
&.btn-transparent {
--background-color: var(--color-base);
--text-color: var(--color-raised-bg);
box-sizing: border-box;
background-color: transparent;
border: 2px solid var(--background-color);
color: var(--background-color);
transition: background-color 0.2s ease-in-out;
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
background-color: var(--color-button-bg);
filter: none;
}
}
&.btn-outline {
--background-color: var(--color-contrast);
border: 2px solid var(--background-color);
padding-block: calc(var(--gap-sm) - 2px);
}
@ -353,6 +364,7 @@ a,
}
&.btn-secondary {
--text-color: var(--color-contrast);
--background-color: var(--color-brand-highlight);
}
@ -361,6 +373,36 @@ a,
--background-color: var(--color-orange);
}
&.btn-red {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
}
&.btn-orange {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
}
&.btn-green {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-green);
}
&.btn-blue {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-blue);
}
&.btn-purple {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-purple);
}
&.btn-gray {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-gray);
}
&.btn-large {
font-weight: 700;
min-height: 2.5rem;
@ -373,20 +415,21 @@ a,
box-shadow: var(--shadow);
border-radius: var(--radius-md);
padding-inline: var(--gap-lg);
padding-block: var(--gap-sm);
padding: var(--gap-sm) var(--gap-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: fit-content;
height: fit-content;
text-decoration: none;
gap: 0.5rem;
line-height: 1.25rem;
svg {
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5rem;
width: 1.25rem;
height: 1.25rem;
}
:deep(.external-icon) {
@ -398,17 +441,7 @@ a,
}
&.icon-only {
padding: 0;
height: 2.25rem;
width: 2.25rem;
svg {
min-width: 1.25rem;
max-width: 1.25rem;
min-height: 1.25rem;
max-height: 1.25rem;
margin: auto;
}
padding: var(--gap-sm);
}
&.transparent {

2
lib/assets/styles/variables.scss
View File

@ -25,6 +25,7 @@ html {
--color-button-bg: hsl(220, 13%, 91%);
--color-base: hsl(221, 39%, 11%);
--color-secondary: #6b7280;
--color-contrast: #1a202c;
--color-accent-contrast: #ffffff;
@ -67,6 +68,7 @@ html {
--color-button-bg: hsl(222, 13%, 30%);
--color-base: var(--dark-color-base);
--color-secondary: #96a2b0;
--color-contrast: var(--dark-color-contrast);
--color-accent-contrast: #000000;

36
lib/components/base/Button.vue
View File

@ -32,9 +32,15 @@ const props = defineProps({
type: Boolean,
default: false,
},
transparent: {
type: Boolean,
default: false,
},
})
const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
const accentedButton = computed(() =>
['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color)
)
</script>
<template>
@ -42,14 +48,20 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
v-if="link"
class="btn"
:class="{
'icon-only': props.iconOnly,
'btn-large': props.large,
'btn-raised': color === 'raised',
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-outline': props.outline,
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
:to="link"
@ -63,14 +75,20 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
v-else
class="btn"
:class="{
'icon-only': props.iconOnly,
'btn-large': props.large,
'btn-raised': color === 'raised',
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-outline': props.outline,
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
@click="action"

78
lib/components/base/OverflowMenu.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<PopoutMenu
ref="dropdown"
v-bind="$attrs"
:disabled="disabled"
:position="position"
:direction="direction"
>
<slot></slot>
<template #menu>
<Button
v-for="option in options"
:key="`option-${option.id}`"
:color="option.color ? option.color : 'default'"
transparent
:action="
() => {
option.action()
close()
}
"
>
<template v-if="!$slots[option.id]">{{ option.id }}</template>
<slot :name="option.id"></slot>
</Button>
</template>
</PopoutMenu>
</template>
<script setup>
import { ref } from 'vue'
import PopoutMenu from '@/components/base/PopoutMenu.vue'
import Button from '@/components/base/Button.vue'
defineProps({
options: {
type: Array,
required: true,
},
disabled: {
type: Boolean,
default: false,
},
position: {
type: String,
default: 'bottom',
},
direction: {
type: String,
default: 'left',
},
})
defineOptions({
inheritAttrs: false,
})
const dropdown = ref(null)
const close = () => {
console.log('closing!')
dropdown.value.hide()
}
</script>
<style lang="scss" scoped>
.btn {
white-space: nowrap;
width: 100%;
box-shadow: none;
--text-color: var(--color-base);
--background-color: transparent;
justify-content: flex-start;
&:not(:last-child) {
margin-bottom: var(--gap-xs);
}
}
</style>

195
lib/components/base/PopoutMenu.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
<button v-bind="$attrs" ref="dropdownButton" @click="toggleDropdown">
<slot></slot>
</button>
<div
class="popup-menu"
:class="`position-${position}-${direction} ${dropdownVisible ? 'visible' : ''}`"
>
<slot name="menu"> </slot>
</div>
</div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
const props = defineProps({
disabled: {
type: Boolean,
default: false,
},
position: {
type: String,
default: 'bottom',
},
direction: {
type: String,
default: 'left',
},
})
defineOptions({
inheritAttrs: false,
})
const dropdownVisible = ref(false)
const dropdown = ref(null)
const dropdownButton = ref(null)
const toggleDropdown = () => {
if (!props.disabled) {
dropdownVisible.value = !dropdownVisible.value
if (!dropdownVisible.value) {
dropdownButton.value.focus()
}
}
}
const hide = () => {
dropdownVisible.value = false
dropdownButton.value.focus()
}
const show = () => {
dropdownVisible.value = true
}
defineExpose({
show,
hide,
})
const handleClickOutside = (event) => {
const elements = document.elementsFromPoint(event.clientX, event.clientY)
if (
dropdown.value.$el !== event.target &&
!elements.includes(dropdown.value.$el) &&
!dropdown.value.contains(event.target)
) {
dropdownVisible.value = false
}
}
onMounted(() => {
window.addEventListener('click', handleClickOutside)
})
onBeforeUnmount(() => {
window.removeEventListener('click', handleClickOutside)
})
</script>
<style lang="scss" scoped>
.popup-container {
position: relative;
.popup-menu {
--_animation-offset: -1rem;
position: absolute;
scale: 0.75;
border: 1px solid var(--color-button-bg);
padding: var(--gap-md);
width: fit-content;
border-radius: var(--radius-md);
background-color: var(--color-raised-bg);
box-shadow: var(--shadow-floating);
z-index: 10;
opacity: 0;
pointer-events: none;
transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
&.position-bottom-left {
top: calc(100% + var(--gap-sm) - 1rem);
right: -1rem;
}
&.position-bottom-right {
top: calc(100% + var(--gap-sm) - 1rem);
left: -1rem;
}
&.position-top-left {
bottom: calc(100% + var(--gap-sm) - 1rem);
right: -1rem;
}
&.position-top-right {
bottom: calc(100% + var(--gap-sm) - 1rem);
left: -1rem;
}
&.position-left-up {
bottom: -1rem;
right: calc(100% + var(--gap-sm) - 1rem);
}
&.position-left-down {
top: -1rem;
right: calc(100% + var(--gap-sm) - 1rem);
}
&.position-right-up {
bottom: -1rem;
left: calc(100% + var(--gap-sm) - 1rem);
}
&.position-right-down {
top: -1rem;
left: calc(100% + var(--gap-sm) - 1rem);
}
&.visible,
&:focus-within {
opacity: 1;
pointer-events: unset;
scale: 1;
&.position-bottom-left {
top: calc(100% + var(--gap-sm));
right: 0;
}
&.position-bottom-right {
top: calc(100% + var(--gap-sm));
left: 0;
}
&.position-top-left {
bottom: calc(100% + var(--gap-sm));
right: 0;
}
&.position-top-right {
bottom: calc(100% + var(--gap-sm));
left: 0;
}
&.position-left-up {
bottom: 0rem;
right: calc(100% + var(--gap-sm));
}
&.position-left-down {
top: 0rem;
right: calc(100% + var(--gap-sm));
}
&.position-right-up {
bottom: 0rem;
left: calc(100% + var(--gap-sm));
}
&.position-right-down {
top: 0rem;
left: calc(100% + var(--gap-sm));
}
}
.btn {
white-space: nowrap;
}
}
}
</style>

6
lib/components/index.js
View File

@ -36,12 +36,16 @@ export { default as NavItem } from './nav/NavItem.vue'
export { default as NavRow } from './nav/NavRow.vue'
export { default as NavStack } from './nav/NavStack.vue'
export { default as PopoutMenu } from './base/PopoutMenu.vue'
export { default as OverflowMenu } from './base/OverflowMenu.vue'
export { default as AlignLeftIcon } from '@/assets/icons/align-left.svg'
export { default as ArchiveIcon } from '@/assets/icons/archive.svg'
export { default as AsteriskIcon } from '@/assets/icons/asterisk.svg'
export { default as BellIcon } from '@/assets/icons/bell.svg'
export { default as BellRingIcon } from '@/assets/icons/bell-ring.svg'
export { default as BookIcon } from '@/assets/icons/book.svg'
export { default as BookmarkIcon } from '@/assets/icons/bookmark.svg'
export { default as BoxIcon } from '@/assets/icons/box.svg'
export { default as CalendarIcon } from '@/assets/icons/calendar.svg'
export { default as ChartIcon } from '@/assets/icons/chart.svg'
@ -94,6 +98,8 @@ export { default as LockIcon } from '@/assets/icons/lock.svg'
export { default as LogInIcon } from '@/assets/icons/log-in.svg'
export { default as LogOutIcon } from '@/assets/icons/log-out.svg'
export { default as MoonIcon } from '@/assets/icons/moon.svg'
export { default as MoreHorizontalIcon } from '@/assets/icons/more-horizontal.svg'
export { default as MoreVerticalIcon } from '@/assets/icons/more-vertical.svg'
export { default as OmorphiaIcon } from '@/assets/icons/omorphia.svg'
export { default as PaintBrushIcon } from '@/assets/icons/paintbrush.svg'
export { default as PlayIcon } from '@/assets/icons/play.svg'