Skip to content

Commit 7282411

Browse files
Merge pull request #11455 from nextcloud/fix/ui/action-icons-16px
fix(ui): resize action icons from 16px to 20px
2 parents 1f30005 + 99fbdda commit 7282411

13 files changed

+106
-106
lines changed

src/components/ComposerSessionIndicator.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
:disabled="disabled"
2121
@click.stop="onShowComposer">
2222
<template #icon>
23-
<ArrowExpandIcon :size="16" />
23+
<ArrowExpandIcon :size="20" />
2424
</template>
2525
</NcActionButton>
2626
</NcActions>
@@ -29,7 +29,7 @@
2929
:disabled="disabled"
3030
@click.stop="onClose">
3131
<template #icon>
32-
<CloseIcon :size="16" />
32+
<CloseIcon :size="20" />
3333
</template>
3434
</NcActionButton>
3535
</NcActions>

src/components/Envelope.vue

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
<template v-if="!moreActionsOpen && !snoozeOptions">
139139
<ActionText>
140140
<template #icon>
141-
<ClockOutlineIcon :size="16" />
141+
<ClockOutlineIcon :size="20" />
142142
</template>
143143
{{
144144
messageLongDate
@@ -149,7 +149,7 @@
149149
:close-after-click="true"
150150
@click.prevent="onToggleJunk">
151151
<template #icon>
152-
<AlertOctagonIcon :size="16" />
152+
<AlertOctagonIcon :size="20" />
153153
</template>
154154
{{
155155
data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')
@@ -159,7 +159,7 @@
159159
:close-after-click="true"
160160
@click.prevent="onOpenTagModal">
161161
<template #icon>
162-
<TagIcon :size="16" />
162+
<TagIcon :size="20" />
163163
</template>
164164
{{ t('mail', 'Edit tags') }}
165165
</ActionButton>
@@ -168,7 +168,7 @@
168168
@click="showSnoozeOptions">
169169
<template #icon>
170170
<AlarmIcon :title="t('mail', 'Snooze')"
171-
:size="16" />
171+
:size="20" />
172172
</template>
173173
{{
174174
t('mail', 'Snooze')
@@ -201,7 +201,7 @@
201201
:disabled="disableArchiveButton"
202202
@click.prevent="onArchive">
203203
<template #icon>
204-
<ArchiveIcon :size="16" />
204+
<ArchiveIcon :size="20" />
205205
</template>
206206
<template v-if="layoutMessageViewThreaded">
207207
{{ t('mail', 'Archive thread') }}
@@ -214,7 +214,7 @@
214214
:close-after-click="true"
215215
@click.prevent="onDelete">
216216
<template #icon>
217-
<DeleteIcon :size="16" />
217+
<DeleteIcon :size="20" />
218218
</template>
219219
<template v-if="layoutMessageViewThreaded">
220220
{{ t('mail', 'Delete thread') }}
@@ -226,7 +226,7 @@
226226
<ActionButton :close-after-click="false"
227227
@click="showMoreActionOptions">
228228
<template #icon>
229-
<DotsHorizontalIcon :size="16" />
229+
<DotsHorizontalIcon :size="20" />
230230
</template>
231231
{{ t('mail', 'More actions') }}
232232
</ActionButton>
@@ -235,7 +235,7 @@
235235
<ActionButton :close-after-click="false"
236236
@click="snoozeOptions = false">
237237
<template #icon>
238-
<ChevronLeft :size="16" />
238+
<ChevronLeft :size="20" />
239239
</template>
240240
{{
241241
t('mail', 'Back')
@@ -260,15 +260,15 @@
260260
:min="new Date()"
261261
@change="setCustomSnoozeDateTime">
262262
<template #icon>
263-
<CalendarClock :size="16" />
263+
<CalendarClock :size="20" />
264264
</template>
265265
</NcActionInput>
266266

267267
<ActionButton :aria-label="t('mail', 'Set custom snooze')"
268268
close-after-click
269269
@click.stop="setCustomSnooze(customSnoozeDateTime)">
270270
<template #icon>
271-
<CheckIcon :size="16" />
271+
<CheckIcon :size="20" />
272272
</template>
273273
{{ t('mail', 'Set custom snooze') }}
274274
</ActionButton>
@@ -277,35 +277,35 @@
277277
<ActionButton :close-after-click="false"
278278
@click="moreActionsOpen=false">
279279
<template #icon>
280-
<ChevronLeft :size="16" />
280+
<ChevronLeft :size="20" />
281281
</template>
282282
{{ t('mail', 'More actions') }}
283283
</ActionButton>
284284
<ActionButton :close-after-click="true"
285285
@click.prevent="onOpenEditAsNew">
286286
<template #icon>
287-
<PlusIcon :size="16" />
287+
<PlusIcon :size="20" />
288288
</template>
289289
{{ t('mail', 'Edit as new message') }}
290290
</ActionButton>
291291
<ActionButton :close-after-click="true"
292292
@click.prevent="showEventModal = true">
293293
<template #icon>
294-
<IconCreateEvent :size="16" />
294+
<IconCreateEvent :size="20" />
295295
</template>
296296
{{ t('mail', 'Create event') }}
297297
</ActionButton>
298298
<ActionButton :close-after-click="true"
299299
@click.prevent="showTaskModal = true">
300300
<template #icon>
301-
<TaskIcon :size="16" />
301+
<TaskIcon :size="20" />
302302
</template>
303303
{{ t('mail', 'Create task') }}
304304
</ActionButton>
305305
<ActionLink :close-after-click="true"
306306
:href="exportMessageLink">
307307
<template #icon>
308-
<DownloadIcon :size="16" />
308+
<DownloadIcon :size="20" />
309309
</template>
310310
{{ t('mail', 'Download message') }}
311311
</ActionLink>

src/components/EnvelopeList.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,32 +73,32 @@
7373
<ActionButton v-if="isAtLeastOneSelectedNotJunk"
7474
@click.prevent="markSelectionJunk">
7575
<template #icon>
76-
<AlertOctagonIcon :size="16" />
76+
<AlertOctagonIcon :size="20" />
7777
</template>
7878
{{ n('mail', 'Mark {number} as spam', 'Mark {number} as spam', selection.length, { number: selection.length }) }}
7979
</ActionButton>
8080
<ActionButton v-if="isAtLeastOneSelectedJunk"
8181
@click.prevent="markSelectionNotJunk">
8282
<template #icon>
83-
<AlertOctagonIcon :size="16" />
83+
<AlertOctagonIcon :size="20" />
8484
</template>
8585
{{ n('mail', 'Mark {number} as not spam', 'Mark {number} as not spam', selection.length, { number: selection.length }) }}
8686
</ActionButton>
8787
<ActionButton :close-after-click="true" @click.prevent="onOpenTagModal">
8888
<template #icon>
89-
<TagIcon :size="16" />
89+
<TagIcon :size="20" />
9090
</template>
9191
{{ n('mail', 'Edit tags for {number}', 'Edit tags for {number}', selection.length, { number: selection.length }) }}
9292
</ActionButton>
9393
<ActionButton v-if="!account.isUnified" :close-after-click="true" @click.prevent="onOpenMoveModal">
9494
<template #icon>
95-
<OpenInNewIcon :size="16" />
95+
<OpenInNewIcon :size="20" />
9696
</template>
9797
{{ n('mail', 'Move {number} thread', 'Move {number} threads', selection.length, { number: selection.length }) }}
9898
</ActionButton>
9999
<ActionButton :close-after-click="true" @click.prevent="forwardSelectedAsAttachment">
100100
<template #icon>
101-
<ShareIcon :size="16" />
101+
<ShareIcon :size="20" />
102102
</template>
103103
{{ n('mail', 'Forward {number} as attachment', 'Forward {number} as attachment', selection.length, { number: selection.length }) }}
104104
</ActionButton>

src/components/MenuEnvelope.vue

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
:close-after-click="true"
1212
@click.prevent="onToggleImportant">
1313
<template #icon>
14-
<ImportantIcon v-if="isImportant" :size="16" />
15-
<ImportantOutlineIcon v-else :size="16" />
14+
<ImportantIcon v-if="isImportant" :size="20" />
15+
<ImportantOutlineIcon v-else :size="20" />
1616
</template>
1717
{{
1818
isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
@@ -22,7 +22,7 @@
2222
@click="onForward">
2323
<template #icon>
2424
<ShareIcon :title="t('mail', 'Forward')"
25-
:size="16" />
25+
:size="20" />
2626
</template>
2727
{{ t('mail', 'Forward') }}
2828
</ActionButton>
@@ -31,7 +31,7 @@
3131
@click.prevent="onToggleJunk">
3232
<template #icon>
3333
<AlertOctagonIcon :title="envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')"
34-
:size="16" />
34+
:size="20" />
3535
</template>
3636
{{
3737
envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')
@@ -42,7 +42,7 @@
4242
@click.prevent="$emit('open-tag-modal')">
4343
<template #icon>
4444
<TagIcon :title="t('mail', 'Edit tags')"
45-
:size="16" />
45+
:size="20" />
4646
</template>
4747
{{ t('mail', 'Edit tags') }}
4848
</ActionButton>
@@ -51,7 +51,7 @@
5151
@click.prevent="$emit('open-move-modal')">
5252
<template #icon>
5353
<OpenInNewIcon :title="t('mail', 'Move message')"
54-
:size="16" />
54+
:size="20" />
5555
</template>
5656
{{ t('mail', 'Move message') }}
5757
</ActionButton>
@@ -60,7 +60,7 @@
6060
@click="snoozeActionsOpen = true">
6161
<template #icon>
6262
<AlarmIcon :title="t('mail', 'Snooze')"
63-
:size="16" />
63+
:size="20" />
6464
</template>
6565
{{ t('mail', 'Snooze') }}
6666
</ActionButton>
@@ -69,7 +69,7 @@
6969
@click="onUnSnooze">
7070
<template #icon>
7171
<AlarmIcon :title="t('mail', 'Unsnooze')"
72-
:size="16" />
72+
:size="20" />
7373
</template>
7474
{{ t('mail', 'Unsnooze') }}
7575
</ActionButton>
@@ -78,15 +78,15 @@
7878
@click.prevent="$emit('open-translation-modal')">
7979
<template #icon>
8080
<TranslationIcon :title="t('mail', 'Translate')"
81-
:size="16" />
81+
:size="20" />
8282
</template>
8383
{{ t('mail', 'Translate') }}
8484
</ActionButton>
8585
<ActionButton :close-after-click="false"
8686
@click="localMoreActionsOpen=true">
8787
<template #icon>
8888
<DotsHorizontalIcon :title="t('mail', 'More actions')"
89-
:size="16" />
89+
:size="20" />
9090
</template>
9191
{{ t('mail', 'More actions') }}
9292
</ActionButton>
@@ -96,39 +96,39 @@
9696
@click="localMoreActionsOpen=false">
9797
<template #icon>
9898
<ChevronLeft :title="t('mail', 'More actions')"
99-
:size="16" />
99+
:size="20" />
100100
{{ t('mail', 'More actions') }}
101101
</template>
102102
</ActionButton>
103103
<ActionButton :close-after-click="true"
104104
@click.prevent="forwardSelectedAsAttachment">
105105
<template #icon>
106106
<ShareIcon :title="t('mail', 'Forward message as attachment')"
107-
:size="16" />
107+
:size="20" />
108108
</template>
109109
{{ t('mail', 'Forward message as attachment') }}
110110
</ActionButton>
111111
<ActionButton :close-after-click="true"
112112
@click="onOpenEditAsNew">
113113
<template #icon>
114114
<PlusIcon :title="t('mail', 'Edit as new message')"
115-
:size="16" />
115+
:size="20" />
116116
</template>
117117
{{ t('mail', 'Edit as new message') }}
118118
</ActionButton>
119119
<ActionButton :close-after-click="true"
120120
@click.prevent="$emit('open-event-modal')">
121121
<template #icon>
122122
<CalendarBlankIcon :title="t('mail', 'Create event')"
123-
:size="16" />
123+
:size="20" />
124124
</template>
125125
{{ t('mail', 'Create event') }}
126126
</ActionButton>
127127
<ActionButton :close-after-click="true"
128128
@click.prevent="$emit('open-task-modal')">
129129
<template #icon>
130130
<TaskIcon :title="t('mail', 'Create task')"
131-
:size="16" />
131+
:size="20" />
132132
</template>
133133
{{ t('mail', 'Create task') }}
134134
</ActionButton>
@@ -137,7 +137,7 @@
137137
@click.prevent="$emit('show-source-modal')">
138138
<template #icon>
139139
<InformationIcon :title="t('mail', 'View source')"
140-
:size="16" />
140+
:size="20" />
141141
</template>
142142
{{ t('mail', 'View source') }}
143143
</ActionButton>
@@ -151,7 +151,7 @@
151151
<ActionLink :close-after-click="true"
152152
:href="exportMessageLink">
153153
<template #icon>
154-
<DownloadIcon :size="16" />
154+
<DownloadIcon :size="20" />
155155
</template>
156156
{{ t('mail', 'Download message') }}
157157
</ActionLink>
@@ -160,7 +160,7 @@
160160
@click.prevent="$emit('open-mail-filter-from-envelope')">
161161
<template #icon>
162162
<FilterIcon :title="t('mail', 'Create mail filter')"
163-
:size="16" />
163+
:size="20" />
164164
</template>
165165
{{ t('mail', 'Create mail filter') }}
166166
</ActionButton>
@@ -170,7 +170,7 @@
170170
:close-after-click="true">
171171
<template #icon>
172172
<DownloadIcon :title="t('mail', 'Download thread data for debugging')"
173-
:size="16" />
173+
:size="20" />
174174
</template>
175175
{{ t('mail', 'Download thread data for debugging') }}
176176
</ActionLink>
@@ -179,7 +179,7 @@
179179
<ActionButton :close-after-click="false"
180180
@click="snoozeActionsOpen = false">
181181
<template #icon>
182-
<ChevronLeft :size="16" />
182+
<ChevronLeft :size="20" />
183183
</template>
184184
{{
185185
t('mail', 'Back')
@@ -202,15 +202,15 @@
202202
:min="new Date()"
203203
@change="setCustomSnoozeDateTime">
204204
<template #icon>
205-
<CalendarClock :size="16" />
205+
<CalendarClock :size="20" />
206206
</template>
207207
</NcActionInput>
208208

209209
<NcActionButton :aria-label="t('spreed', 'Set custom snooze')"
210210
close-after-click
211211
@click.stop="setCustomSnooze(customSnoozeDateTime)">
212212
<template #icon>
213-
<CheckIcon :size="16" />
213+
<CheckIcon :size="20" />
214214
</template>
215215
{{ t('spreed', 'Set custom snooze') }}
216216
</NcActionButton>

0 commit comments

Comments
 (0)