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

More button options and dividers in overflow menus

Browse Source
This commit is contained in:
Prospector 2023-10-11 14:57:23 -07:00
parent ffc46d6a48
commit f9a9ece320
No known key found for this signature in database
8 changed files with 201 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/button.md
View File

@ -58,6 +58,38 @@
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
```
## Hover-filled
<DemoContainer>
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
```
## Hover-filled-only
<DemoContainer>
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
```
## Icon-only
<DemoContainer>

71
docs/components/overflow-menu.md
View File

@ -1,32 +1,47 @@
<script setup>
const options = [
# Overflow Menu
<DemoContainer>
<OverflowMenu :options="[
{
'id': 'like',
'id': 'play',
'color': 'primary',
'action': () => {},
'hoverFilledOnly': true
},
{ divider: true },
{
'id': 'duplicate',
'action': () => {}
},
{
'id': 'report',
'action': () => {}
},
{
'id': 'remain',
'action': () => {},
'remainOnClick': true,
},
{ divider: true },
{
'id': 'delete',
'color': 'danger',
'action': () => {}
'action': () => {},
'hoverFilled': true,
}
]
</script>
# Overflow Menu
<DemoContainer>
<OverflowMenu :options="options" class="btn">
]" class="btn">
More options...
<template #like>
<HeartIcon /> Like
<template #play>
<PlayIcon /> Play
</template>
<template #duplicate>
<CopyIcon /> Duplicate
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #remain>
<ClearIcon /> I shall remain
</template>
<template #delete>
<TrashIcon /> Delete
</template>
@ -34,7 +49,37 @@ const options = [
</DemoContainer>
```vue
<OverflowMenu :options="options" class="btn">
<OverflowMenu
class="btn"
:options="[
{
'id': 'play',
'color': 'primary',
'action': () => {},
'hoverFilledOnly': true
},
{ divider: true },
{
'id': 'duplicate',
'action': () => {}
},
{
'id': 'report',
'action': () => {}
},
{
'id': 'remain',
'action': () => {},
'remainOnClick': true,
},
{ divider: true },
{
'id': 'delete',
'color': 'danger',
'action': () => {},
'hoverFilled': true,
}
]">
More options...
<template #like>
<HeartIcon /> Like

1
lib/assets/icons/copy.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-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

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

@ -266,10 +266,13 @@ a,
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
cursor: pointer;
filter: brightness(0.85);
&:not(.btn-outline.btn-hover-filled, .btn-transparent) {
filter: brightness(0.85);
}
}
&:active:not(&:disabled) {
&:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
filter: brightness(0.8);
}
@ -321,86 +324,118 @@ a,
.btn {
@extend .button-base;
--text-color: var(--color-base);
--background-color: var(--color-button-bg);
--shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
--_text-color: var(--color-base);
--_background-color: var(--color-button-bg);
--_accent-color: var(--color-base);
--_shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
&.btn-outline,
&.btn-transparent {
--background-color: var(--color-base);
--text-color: var(--color-raised-bg);
box-sizing: border-box;
background-color: transparent;
color: var(--background-color);
transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out , color 0.2s ease-in-out;
box-shadow: none;
}
&.btn-transparent {
--_accent-color: var(--color-base);
color: var(--_accent-color);
&.btn-hover-filled-only {
color: var(--color-base);
}
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
background-color: var(--color-button-bg);
filter: none;
&.btn-hover-filled, &.btn-hover-filled-only {
color: var(--_text-color);
background-color: var(--_background-color);
}
}
}
&.btn-outline {
--background-color: var(--color-contrast);
border: 2px solid var(--background-color);
--_accent-color: var(--color-contrast);
border: 2px solid var(--_accent-color);
padding-block: calc(var(--gap-sm) - 2px);
}
color: var(--_background-color);
&.btn-raised {
--shadow: var(--shadow-inset-sm), var(--shadow-raised);
--background-color: var(--color-raised-bg);
&.btn-hover-filled-only {
color: var(--color-contrast);
border-color: var(--color-contrast);
}
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
&.btn-hover-filled, &.btn-hover-filled-only {
border-color: var(--_accent-color);
color: var(--_text-color);
background-color: var(--_background-color);
}
}
}
&.btn-danger {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-red);
--_accent-color: var(--color-red);
}
&.btn-primary {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-brand);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-brand);
--_accent-color: var(--color-brand);
}
&.btn-secondary {
--text-color: var(--color-contrast);
--background-color: var(--color-brand-highlight);
--_text-color: var(--color-contrast);
--_background-color: var(--color-brand-highlight);
--_accent-color: var(--color-brand-highlight);
}
&.btn-highlight {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-orange);
--_accent-color: var(--color-orange);
}
&.btn-red {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-red);
--_accent-color: var(--color-red);
}
&.btn-orange {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-orange);
--_accent-color: var(--color-orange);
}
&.btn-green {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-green);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-green);
--_accent-color: var(--color-green);
}
&.btn-blue {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-blue);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-blue);
--_accent-color: var(--color-blue);
}
&.btn-purple {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-purple);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-purple);
--_accent-color: var(--color-purple);
}
&.btn-gray {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-gray);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-gray);
--_accent-color: var(--color-gray);
}
&.btn-large {
@ -410,9 +445,9 @@ a,
box-sizing: border-box;
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
color: var(--_text-color);
background-color: var(--_background-color);
box-shadow: var(--_shadow);
border-radius: var(--radius-md);
padding: var(--gap-sm) var(--gap-lg);

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

@ -36,6 +36,14 @@ const props = defineProps({
type: Boolean,
default: false,
},
hoverFilled: {
type: Boolean,
default: false,
},
hoverFilledOnly: {
type: Boolean,
default: false,
},
})
const accentedButton = computed(() =>
@ -61,6 +69,8 @@ const accentedButton = computed(() =>
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-hover-filled': hoverFilled,
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
@ -88,6 +98,8 @@ const accentedButton = computed(() =>
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-hover-filled': hoverFilled,
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"

37
lib/components/base/OverflowMenu.vue
View File

@ -8,21 +8,28 @@
>
<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 v-for="(option, index) in options">
<div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
<Button
v-else
:key="`option-${option.id}`"
:color="option.color ? option.color : 'default'"
:hover-filled="option.hoverFilled"
:hover-filled-only="option.hoverFilledOnly"
transparent
:action="
() => {
option.action()
if (!option.remainOnClick) {
close()
}
}
"
>
<template v-if="!$slots[option.id]">{{ option.id }}</template>
<slot :name="option.id"></slot>
</Button>
</template>
</template>
</PopoutMenu>
</template>

2
lib/components/base/PopoutMenu.vue
View File

@ -89,7 +89,7 @@ onBeforeUnmount(() => {
position: absolute;
scale: 0.75;
border: 1px solid var(--color-button-bg);
padding: var(--gap-md);
padding: var(--gap-sm);
width: fit-content;
border-radius: var(--radius-md);
background-color: var(--color-raised-bg);

1
lib/components/index.js
View File

@ -59,6 +59,7 @@ export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
export { default as CodeIcon } from '@/assets/icons/code.svg'
export { default as CoinsIcon } from '@/assets/icons/coins.svg'
export { default as ContractIcon } from '@/assets/icons/contract.svg'
export { default as CopyIcon } from '@/assets/icons/copy.svg'
export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'