Skip to content

Commit 49763e7

Browse files
ShGKmeShGKme
authored
Merge pull request #7920 from nextcloud-libraries/chore/NcActions--icons-in-docs
chore(NcActions): outline icons in docs
2 parents 6ee53d3 + 8c16bd9 commit 49763e7

File tree

6 files changed

+271
-271
lines changed

6 files changed

+271
-271
lines changed

‎src/components/NcActionButton/NcActionButton.vue‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,38 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
1111
<NcActions>
1212
<NcActionButton @click="showMessage('Delete')">
1313
<template #icon>
14-
<Delete :size="20" />
14+
<IconTrashCanOutline :size="20" />
1515
</template>
1616
Delete
1717
</NcActionButton>
1818
<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
1919
<template #icon>
20-
<Delete :size="20" />
20+
<IconTrashCanOutline :size="20" />
2121
</template>
2222
Delete and close
2323
</NcActionButton>
2424
<NcActionButton :is-menu="true">
2525
<template #icon>
26-
<Plus :size="20" />
26+
<IconPlus :size="20" />
2727
</template>
2828
Create
2929
</NcActionButton>
3030
<NcActionButton :disabled="true" @click="showMessage('Disabled')">
3131
<template #icon>
32-
<Delete :size="20" />
32+
<IconTrashCanOutline :size="20" />
3333
</template>
3434
Disabled button
3535
</NcActionButton>
3636
</NcActions>
3737
</template>
3838
<script>
39-
import Delete from 'vue-material-design-icons/Delete.vue'
40-
import Plus from 'vue-material-design-icons/Plus.vue'
39+
import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
40+
import IconPlus from 'vue-material-design-icons/Plus.vue'
4141

4242
export default {
4343
components: {
44-
Delete,
45-
Plus,
44+
IconTrashCanOutline,
45+
IconPlus,
4646
},
4747
methods: {
4848
showMessage(msg) {
@@ -62,34 +62,34 @@ For the same purpose, but in a more compact way, `description` prop can be used.
6262
<NcActions>
6363
<NcActionButton @click="showMessage('Add')">
6464
<template #icon>
65-
<Plus :size="20" />
65+
<IconPlus :size="20" />
6666
</template>
6767
Add new
6868
</NcActionButton>
6969
<NcActionButton name="Long button" @click="showMessage('Delete')">
7070
<template #icon>
71-
<Delete :size="20" />
71+
<IconTrashCanOutline :size="20" />
7272
</template>
7373
This button is associated with a very long text.\nAnd with new lines too.
7474
</NcActionButton>
7575
<NcActionButton description="Subline description for the button" @click="showMessage('Edit')">
7676
<template #icon>
77-
<Pencil :size="20" />
77+
<IconPencilOutline :size="20" />
7878
</template>
7979
Edit
8080
</NcActionButton>
8181
</NcActions>
8282
</template>
8383
<script>
84-
import Delete from 'vue-material-design-icons/Delete.vue'
85-
import Pencil from 'vue-material-design-icons/Pencil.vue'
86-
import Plus from 'vue-material-design-icons/Plus.vue'
84+
import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
85+
import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
86+
import IconPlus from 'vue-material-design-icons/Plus.vue'
8787

8888
export default {
8989
components: {
90-
Delete,
91-
Pencil,
92-
Plus,
90+
IconTrashCanOutline,
91+
IconPencilOutline,
92+
IconPlus,
9393
},
9494
methods: {
9595
showMessage(msg) {
@@ -108,18 +108,18 @@ Action icon attribute with a single action
108108
<NcActions>
109109
<NcActionButton @click="showMessage('Add')">
110110
<template #icon>
111-
<Plus :size="20" />
111+
<IconPlus :size="20" />
112112
</template>
113113
Add new
114114
</NcActionButton>
115115
</NcActions>
116116
</template>
117117
<script>
118-
import Plus from 'vue-material-design-icons/Plus.vue'
118+
import IconPlus from 'vue-material-design-icons/Plus.vue'
119119

120120
export default {
121121
components: {
122-
Plus,
122+
IconPlus,
123123
},
124124
methods: {
125125
showMessage(msg) {
@@ -138,26 +138,26 @@ You can also use a custom icon, for example from the vue-material-design-icons l
138138
<NcActions>
139139
<NcActionButton>
140140
<template #icon>
141-
<HandBackLeft :size="20" />
141+
<IconHandBackLeftOutline :size="20" />
142142
</template>
143143
Raise left hand
144144
</NcActionButton>
145145
<NcActionButton>
146146
<template #icon>
147-
<HandBackRight :size="20" />
147+
<IconHandBackRightOutline :size="20" />
148148
</template>
149149
Raise right hand
150150
</NcActionButton>
151151
</NcActions>
152152
</template>
153153
<script>
154-
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
155-
import HandBackRight from 'vue-material-design-icons/HandBackRight.vue'
154+
import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
155+
import IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
156156

157157
export default {
158158
components: {
159-
HandBackLeft,
160-
HandBackRight,
159+
IconHandBackLeftOutline,
160+
IconHandBackRightOutline,
161161
},
162162
}
163163
</script>
@@ -173,18 +173,18 @@ For example to have the button act like a toggle button just set the `modelValue
173173
<NcActions>
174174
<NcActionButton v-model="fullscreen">
175175
<template #icon>
176-
<Fullscreen :size="20" />
176+
<IconFullscreen :size="20" />
177177
</template>
178178
Fullscreen
179179
</NcActionButton>
180180
</NcActions>
181181
</template>
182182
<script>
183-
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
183+
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
184184

185185
export default {
186186
components: {
187-
Fullscreen,
187+
IconFullscreen,
188188
},
189189
data() {
190190
return {
@@ -203,26 +203,26 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
203203
<NcActions>
204204
<NcActionButton v-model="handRaised" type="checkbox">
205205
<template #icon>
206-
<HandBackLeft :size="20" />
206+
<IconHandBackLeftOutline :size="20" />
207207
</template>
208208
Raise hand
209209
</NcActionButton>
210210
<NcActionButton v-model="fullscreen" type="checkbox">
211211
<template #icon>
212-
<Fullscreen :size="20" />
212+
<IconFullscreen :size="20" />
213213
</template>
214214
Fullscreen
215215
</NcActionButton>
216216
</NcActions>
217217
</template>
218218
<script>
219-
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
220-
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
219+
import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
220+
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
221221

222222
export default {
223223
components: {
224-
HandBackLeft,
225-
Fullscreen,
224+
IconHandBackLeftOutline,
225+
IconFullscreen,
226226
},
227227
data() {
228228
return {
@@ -248,32 +248,32 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
248248
<NcActions>
249249
<NcActionButton v-model="payment" type="radio" value="cash">
250250
<template #icon>
251-
<Cash :size="20" />
251+
<IconCash :size="20" />
252252
</template>
253253
Pay with cash
254254
</NcActionButton>
255255
<NcActionButton v-model="payment" type="radio" value="card">
256256
<template #icon>
257-
<CreditCard :size="20" />
257+
<IconCreditCardOutline :size="20" />
258258
</template>
259259
Pay by card
260260
</NcActionButton>
261261
<NcActionSeparator />
262262
<NcActionButton type="radio" :model-value="align.isLeft" @update:modelValue="setAlign('Left', $event)">
263263
<template #icon>
264-
<FormatAlignLeft :size="20" />
264+
<IconFormatAlignLeft :size="20" />
265265
</template>
266266
Left
267267
</NcActionButton>
268268
<NcActionButton type="radio" :model-value="align.isCenter" @update:modelValue="setAlign('Center', $event)">
269269
<template #icon>
270-
<FormatAlignCenter :size="20" />
270+
<IconFormatAlignCenter :size="20" />
271271
</template>
272272
Center
273273
</NcActionButton>
274274
<NcActionButton type="radio" :model-value="align.isRight" @update:modelValue="setAlign('Right', $event)">
275275
<template #icon>
276-
<FormatAlignRight :size="20" />
276+
<IconFormatAlignRight :size="20" />
277277
</template>
278278
Right
279279
</NcActionButton>
@@ -285,19 +285,19 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
285285
</div>
286286
</template>
287287
<script>
288-
import Cash from 'vue-material-design-icons/Cash.vue'
289-
import CreditCard from 'vue-material-design-icons/CreditCard.vue'
290-
import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
291-
import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
292-
import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
288+
import IconCash from 'vue-material-design-icons/Cash.vue'
289+
import IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'
290+
import IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
291+
import IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
292+
import IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
293293

294294
export default {
295295
components: {
296-
Cash,
297-
CreditCard,
298-
FormatAlignLeft,
299-
FormatAlignCenter,
300-
FormatAlignRight,
296+
IconCash,
297+
IconCreditCardOutline,
298+
IconFormatAlignLeft,
299+
IconFormatAlignCenter,
300+
IconFormatAlignRight,
301301
},
302302
data() {
303303
return {

‎src/components/NcActionButtonGroup/NcActionButtonGroup.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,48 +18,48 @@ This should be used sparingly for accessibility.
1818
type="radio"
1919
value="l">
2020
<template #icon>
21-
<AlignLeft :size="20" />
21+
<IconAlignHorizontalLeft :size="20" />
2222
</template>
2323
</NcActionButton>
2424
<NcActionButton aria-label="Align center"
2525
v-model="alignment"
2626
type="radio"
2727
value="c">
2828
<template #icon>
29-
<AlignCenter :size="20" />
29+
<IconAlignHorizontalCenter :size="20" />
3030
</template>
3131
</NcActionButton>
3232
<NcActionButton aria-label="Align right"
3333
v-model="alignment"
3434
type="radio"
3535
value="r">
3636
<template #icon>
37-
<AlignRight :size="20" />
37+
<IconAlignHorizontalRight :size="20" />
3838
</template>
3939
</NcActionButton>
4040
</NcActionButtonGroup>
4141
<NcActionButton :close-after-click="true"
4242
@click="showMessage('Some other action')">
4343
<template #icon>
44-
<Plus :size="20" />
44+
<IconPlus :size="20" />
4545
</template>
4646
Some other action
4747
</NcActionButton>
4848
</NcActions>
4949
</div>
5050
</template>
5151
<script>
52-
import AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'
53-
import AlignRight from 'vue-material-design-icons/AlignHorizontalRight'
54-
import AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'
55-
import Plus from 'vue-material-design-icons/Plus'
52+
import IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'
53+
import IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'
54+
import IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'
55+
import IconPlus from 'vue-material-design-icons/Plus.vue'
5656

5757
export default {
5858
components: {
59-
AlignLeft,
60-
AlignRight,
61-
AlignCenter,
62-
Plus,
59+
IconAlignHorizontalLeft,
60+
IconAlignHorizontalRight,
61+
IconAlignHorizontalCenter,
62+
IconPlus,
6363
},
6464
data() {
6565
return { alignment: 'l' }

0 commit comments

Comments
 (0)