Skip to content

Commit f23f8e4

Browse files
raimund-schluesslerraimund-schluessler
authored
Merge pull request #3571 from nextcloud/enh/button-group
Add `NcActionButtonGroup` to inline `NcActionButton`s within the action menu
2 parents 87e535d + 911ec24 commit f23f8e4

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎src/components/NcActionButtonGroup/NcActionButtonGroup.vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!--
2+
- @copyright Copyright (c) 2022
3+
-
4+
- @license AGPL-3.0-or-later
5+
-
6+
- This program is free software: you can redistribute it and/or modify
7+
- it under the terms of the GNU Affero General Public License as
8+
- published by the Free Software Foundation, either version 3 of the
9+
- License, or (at your option) any later version.
10+
-
11+
- This program is distributed in the hope that it will be useful,
12+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
- GNU Affero General Public License for more details.
15+
-
16+
- You should have received a copy of the GNU Affero General Public License
17+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
18+
-
19+
-->
20+
21+
<docs>
22+
This component is made to be used inside of the [NcActions](#NcActions) component slots,
23+
to group buttons as one visual action, like for text alignment.
24+
This should be used sparingly for accessibility.
25+
26+
```vue
27+
<template>
28+
<div style="display: flex; align-items: center;">
29+
<NcActions>
30+
<NcActionButtonGroup title="Text alignment">
31+
<NcActionButton aria-label="Align left"
32+
@click="showMessage('Align left')">
33+
<template #icon>
34+
<AlignLeft :size="20" />
35+
</template>
36+
</NcActionButton>
37+
<NcActionButton aria-label="Align center"
38+
@click="showMessage('Align center')">
39+
<template #icon>
40+
<AlignCenter :size="20" />
41+
</template>
42+
</NcActionButton>
43+
<NcActionButton aria-label="Align right"
44+
@click="showMessage('Align Right')">
45+
<template #icon>
46+
<AlignRight :size="20" />
47+
</template>
48+
</NcActionButton>
49+
</NcActionButtonGroup>
50+
<NcActionButton :close-after-click="true"
51+
@click="showMessage('Some other action')">
52+
<template #icon>
53+
<Plus :size="20" />
54+
</template>
55+
Some other action
56+
</NcActionButton>
57+
</NcActions>
58+
</div>
59+
</template>
60+
<script>
61+
import AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'
62+
import AlignRight from 'vue-material-design-icons/AlignHorizontalRight'
63+
import AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'
64+
import Plus from 'vue-material-design-icons/Plus'
65+
66+
export default {
67+
components: {
68+
AlignLeft,
69+
AlignRight,
70+
AlignCenter,
71+
Plus,
72+
},
73+
methods: {
74+
showMessage(msg) {
75+
alert(msg)
76+
},
77+
},
78+
}
79+
</script>
80+
```
81+
</docs>
82+
83+
<template>
84+
<li class="nc-button-group-base">
85+
<div v-if="title">
86+
{{ title }}
87+
</div>
88+
<ul class="nc-button-group-content">
89+
<slot />
90+
</ul>
91+
</li>
92+
</template>
93+
94+
<script>
95+
import { defineComponent } from 'vue'
96+
97+
/**
98+
* A wrapper for allowing inlining NcAction components within the action menu
99+
*/
100+
export default defineComponent({
101+
name: 'NcActionButtonGroup',
102+
props: {
103+
/**
104+
* Optional title shown below the button group
105+
*/
106+
title: {
107+
required: false,
108+
default: undefined,
109+
type: String,
110+
},
111+
},
112+
})
113+
</script>
114+
115+
<style lang="scss">
116+
.nc-button-group-base {
117+
>div {
118+
text-align: center;
119+
color: var(--color-text-maxcontrast);
120+
}
121+
122+
ul.nc-button-group-content {
123+
display: flex;
124+
justify-content: space-between;
125+
li {
126+
flex: 1 1;
127+
}
128+
129+
.action-button {
130+
// Fix action buttons beeing shifted to the left (right padding)
131+
padding: 0 !important;
132+
width: 100%;
133+
display: flex;
134+
justify-content: center;
135+
}
136+
}
137+
}
138+
</style>

‎src/components/NcActionButtonGroup/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @copyright Copyright (c) 2022
3+
*
4+
* @license AGPL-3.0-or-later
5+
*
6+
* This program is free software: you can redistribute it and/or modify
7+
* it under the terms of the GNU Affero General Public License as
8+
* published by the Free Software Foundation, either version 3 of the
9+
* License, or (at your option) any later version.
10+
*
11+
* This program is distributed in the hope that it will be useful,
12+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
* GNU Affero General Public License for more details.
15+
*
16+
* You should have received a copy of the GNU Affero General Public License
17+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
18+
*
19+
*/
20+
21+
export { default } from './NcActionButtonGroup.vue'

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
*/
2222

2323
export { default as NcActionButton } from './NcActionButton/index.js'
24+
export { default as NcActionButtonGroup } from './NcActionButtonGroup/index.js'
2425
export { default as NcActionCaption } from './NcActionCaption/index.js'
2526
export { default as NcActionCheckbox } from './NcActionCheckbox/index.js'
2627
export { default as NcActionInput } from './NcActionInput/index.js'

0 commit comments

Comments
 (0)