Skip to content

Commit 0325622

Browse files
ShGKmebackportbot[bot]
ShGKme
authored and
backportbot[bot]
committed
chore(NcActions): outline icons in docs
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
1 parent 3f32ca1 commit 0325622

5 files changed

Lines changed: 127 additions & 127 deletions

File tree

‎src/components/NcActionButton/NcActionButton.vue‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ 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+
<DeleteOutline :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+
<DeleteOutline :size="20" />
2121
</template>
2222
Delete and close
2323
</NcActionButton>
@@ -29,19 +29,19 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
2929
</NcActionButton>
3030
<NcActionButton :disabled="true" @click="showMessage('Disabled')">
3131
<template #icon>
32-
<Delete :size="20" />
32+
<DeleteOutline :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'
39+
import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
4040
import Plus from 'vue-material-design-icons/Plus.vue'
4141

4242
export default {
4343
components: {
44-
Delete,
44+
DeleteOutline,
4545
Plus,
4646
},
4747
methods: {
@@ -68,27 +68,27 @@ For the same purpose, but in a more compact way, `description` prop can be used.
6868
</NcActionButton>
6969
<NcActionButton name="Long button" @click="showMessage('Delete')">
7070
<template #icon>
71-
<Delete :size="20" />
71+
<DeleteOutline :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+
<PencilOutline :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'
84+
import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
85+
import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
8686
import Plus from 'vue-material-design-icons/Plus.vue'
8787

8888
export default {
8989
components: {
90-
Delete,
91-
Pencil,
90+
DeleteOutline,
91+
PencilOutline,
9292
Plus,
9393
},
9494
methods: {
@@ -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+
<HandBackLeftOutline :size="20" />
142142
</template>
143143
Raise left hand
144144
</NcActionButton>
145145
<NcActionButton>
146146
<template #icon>
147-
<HandBackRight :size="20" />
147+
<HandBackRightOutline :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 HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
155+
import HandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'
156156

157157
export default {
158158
components: {
159-
HandBackLeft,
160-
HandBackRight,
159+
HandBackLeftOutline,
160+
HandBackRightOutline,
161161
},
162162
}
163163
</script>
@@ -203,7 +203,7 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
203203
<NcActions>
204204
<NcActionButton :model-value.sync="handRaised" type="checkbox">
205205
<template #icon>
206-
<HandBackLeft :size="20" />
206+
<HandBackLeftOutline :size="20" />
207207
</template>
208208
Raise hand
209209
</NcActionButton>
@@ -216,12 +216,12 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
216216
</NcActions>
217217
</template>
218218
<script>
219-
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
219+
import HandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
220220
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
221221

222222
export default {
223223
components: {
224-
HandBackLeft,
224+
HandBackLeftOutline,
225225
Fullscreen,
226226
},
227227
data() {
@@ -254,7 +254,7 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
254254
</NcActionButton>
255255
<NcActionButton :model-value.sync="payment" type="radio" value="card">
256256
<template #icon>
257-
<CreditCard :size="20" />
257+
<CreditCardOutline :size="20" />
258258
</template>
259259
Pay by card
260260
</NcActionButton>
@@ -286,15 +286,15 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
286286
</template>
287287
<script>
288288
import Cash from 'vue-material-design-icons/Cash.vue'
289-
import CreditCard from 'vue-material-design-icons/CreditCard.vue'
289+
import CreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'
290290
import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
291291
import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
292292
import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
293293

294294
export default {
295295
components: {
296296
Cash,
297-
CreditCard,
297+
CreditCardOutline,
298298
FormatAlignLeft,
299299
FormatAlignCenter,
300300
FormatAlignRight,

‎src/components/NcActionInput/NcActionInput.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,29 @@ For the `NcSelect` component, all events will be passed through. Please see the
1616
<NcActions>
1717
<NcActionInput v-model="text" :label-outside="true" label="Label outside the input">
1818
<template #icon>
19-
<Pencil :size="20" />
19+
<PencilOutline :size="20" />
2020
</template>
2121
</NcActionInput>
2222
<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
2323
<template #icon>
24-
<Pencil :size="20" />
24+
<PencilOutline :size="20" />
2525
</template>
2626
</NcActionInput>
2727
<NcActionInput v-model="text" label="Input with placeholder">
2828
<template #icon>
29-
<Pencil :size="20" />
29+
<PencilOutline :size="20" />
3030
</template>
3131
This is the placeholder
3232
</NcActionInput>
3333
<NcActionInput type="password" v-model="text" label="Password with visible label">
3434
<template #icon>
35-
<Key :size="20" />
35+
<KeyOutline :size="20" />
3636
</template>
3737
Password placeholder
3838
</NcActionInput>
3939
<NcActionInput type="password" v-model="text" :show-trailing-button="false">
4040
<template #icon>
41-
<Key :size="20" />
41+
<KeyOutline :size="20" />
4242
</template>
4343
Password placeholder
4444
</NcActionInput>
@@ -50,7 +50,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
5050
</NcActionInput>
5151
<NcActionInput label="Visible label" v-model="text">
5252
<template #icon>
53-
<Pencil :size="20" />
53+
<PencilOutline :size="20" />
5454
</template>
5555
Input with visible label
5656
</NcActionInput>
@@ -61,13 +61,13 @@ For the `NcSelect` component, all events will be passed through. Please see the
6161
</NcActionInput>
6262
<NcActionInput type="date" isNativePicker v-model="date">
6363
<template #icon>
64-
<Pencil :size="20" />
64+
<PencilOutline :size="20" />
6565
</template>
6666
Please pick a date
6767
</NcActionInput>
6868
<NcActionInput v-model="date" type="date">
6969
<template #icon>
70-
<Pencil :size="20" />
70+
<PencilOutline :size="20" />
7171
</template>
7272
Please pick a date
7373
</NcActionInput>
@@ -77,7 +77,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
7777
input-label="Fruit selection"
7878
:options="['Apple', 'Banana', 'Cherry']">
7979
<template #icon>
80-
<Pencil :size="20" />
80+
<PencilOutline :size="20" />
8181
</template>
8282
Please pick a fruit
8383
</NcActionInput>
@@ -90,7 +90,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
9090
:multiple="true"
9191
:options="[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]">
9292
<template #icon>
93-
<Pencil :size="20" />
93+
<PencilOutline :size="20" />
9494
</template>
9595
Please pick a fruit object
9696
</NcActionInput>
@@ -99,15 +99,15 @@ For the `NcSelect` component, all events will be passed through. Please see the
9999
<script>
100100
import Close from 'vue-material-design-icons/Close'
101101
import Eyedropper from 'vue-material-design-icons/Eyedropper'
102-
import Key from 'vue-material-design-icons/Key'
103-
import Pencil from 'vue-material-design-icons/Pencil'
102+
import KeyOutline from 'vue-material-design-icons/KeyOutline'
103+
import PencilOutline from 'vue-material-design-icons/PencilOutline'
104104

105105
export default {
106106
components: {
107107
Close,
108108
Eyedropper,
109-
Key,
110-
Pencil,
109+
KeyOutline,
110+
PencilOutline,
111111
},
112112
data() {
113113
return {

‎src/components/NcActionLink/NcActionLink.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
2222
<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
2323
download="AGPL License text.odt">
2424
<template #icon>
25-
<Download :size="20" />
25+
<DownloadOutline :size="20" />
2626
</template>
2727
Download AGPL license text
2828
</NcActionLink>
@@ -38,20 +38,20 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
3838
<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
3939
download="AGPL License text.odt">
4040
<template #icon>
41-
<Download :size="20" />
41+
<DownloadOutline :size="20" />
4242
</template>
4343
Download AGPL license text
4444
</NcActionLink>
4545
</NcActions>
4646
</div>
4747
</template>
4848
<script>
49-
import Download from 'vue-material-design-icons/Download.vue'
49+
import DownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'
5050
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
5151

5252
export default {
5353
components: {
54-
Download,
54+
DownloadOutline,
5555
OpenInNew,
5656
},
5757
}

‎src/components/NcActionTextEditable/NcActionTextEditable.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,27 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
1212
<NcActions>
1313
<NcActionTextEditable v-model="text1">
1414
<template #icon>
15-
<Pencil :size="20" />
15+
<PencilOutline :size="20" />
1616
</template>
1717
</NcActionTextEditable>
1818
<NcActionTextEditable v-model="text2" disabled>
1919
<template #icon>
20-
<Pencil :size="20" />
20+
<PencilOutline :size="20" />
2121
</template>
2222
</NcActionTextEditable>
2323
<NcActionTextEditable name="text3" v-model="text3">
2424
<template #icon>
25-
<Pencil :size="20" />
25+
<PencilOutline :size="20" />
2626
</template>
2727
</NcActionTextEditable>
2828
</NcActions>
2929
</template>
3030
<script>
31-
import Pencil from 'vue-material-design-icons/Pencil'
31+
import PencilOutline from 'vue-material-design-icons/PencilOutline'
3232

3333
export default {
3434
components: {
35-
Pencil,
35+
PencilOutline,
3636
},
3737

3838
data() {

0 commit comments

Comments
 (0)