Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ca2d65d

Browse files
improvement: popup menu button sizing and templating
1 parent b2bff27 commit ca2d65d

File tree

3 files changed

+22
-9
lines changed

3 files changed

+22
-9
lines changed

‎resources/js/components/PopupMenuButton.vue‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<{
1010
buttonLabel?: string,
1111
buttonSeverity?: 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast' | undefined,
1212
buttonVariant?: 'default' | 'outlined' | 'text' | 'link' | undefined,
13+
buttonSize?: 'small' | 'large' | undefined,
1314
fixedPosition?: 'left' | 'right',
1415
}>(), {
1516
buttonSeverity: 'secondary',
@@ -32,14 +33,14 @@ const menuPositionClasses = computed(() => {
3233
let classes = ''
3334
if (props?.fixedPosition) {
3435
switch (props?.fixedPosition) {
35-
case 'left':
36-
classes = 'left-auto! top-0! left-0'
37-
break
38-
case 'right':
39-
classes = 'left-auto! top-0! right-0'
40-
break
41-
default:
42-
break
36+
case 'left':
37+
classes = 'left-auto! top-0! left-0'
38+
break
39+
case 'right':
40+
classes = 'left-auto! top-0! right-0'
41+
break
42+
default:
43+
break
4344
}
4445
}
4546
@@ -55,9 +56,19 @@ const menuPositionClasses = computed(() => {
5556
:pt:root:class="{ 'flex flex-row-reverse justify-between': props?.buttonLabel }"
5657
:severity="props.buttonSeverity"
5758
:variant="props.buttonVariant === 'default' ? undefined : props.buttonVariant"
59+
:size="props?.buttonSize"
5860
@click="toggleDropdownMenu($event)"
5961
>
60-
<template #icon>
62+
<template
63+
v-if="$slots.content && !props?.buttonLabel"
64+
#default
65+
>
66+
<slot name="content" />
67+
</template>
68+
<template
69+
v-else
70+
#icon
71+
>
6172
<slot
6273
v-if="$slots.toggleIcon"
6374
name="toggleIcon"

‎resources/js/layouts/app/HeaderLayout.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const {
4545
<template #footer>
4646
<PopupMenuButton
4747
name="mobile-user-menu-dd"
48+
button-size="large"
4849
:menu-items="userMenuItems"
4950
:button-label="page.props.auth.user.name"
5051
>

‎resources/js/layouts/app/SidebarLayout.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const {
4343
<template #footer>
4444
<PopupMenuButton
4545
name="mobile-user-menu-dd"
46+
button-size="large"
4647
:menu-items="userMenuItems"
4748
:button-label="page.props.auth.user.name"
4849
>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /