Merge pull request #1596 from nextcloud/enh/1587-Use-outline-icons

feat(ui): switch to outline icons

Author: JuliaKirschenheuter

src/App.vue

@@ -58,7 +58,7 @@ import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextc
 import '@nextcloud/dialogs/style.css'
 
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import CogIcon from 'vue-material-design-icons/Cog.vue'
+import CogIcon from 'vue-material-design-icons/CogOutline.vue'
 
 import AppSettings from './components/AppSettings.vue'
 import CategoriesList from './components/CategoriesList.vue'

src/components/CreateSampleButton.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<NcButton type="secondary" @click="onNewNote">
-		<PlusIcon slot="icon" :size="20" />
+		<PlusOutlineIcon slot="icon" :size="20" />
 		{{ t('notes', 'Create a sample note with Markdown') }}
 	</NcButton>
 </template>
@@ -15,15 +15,15 @@ import {
 	NcButton,
 } from '@nextcloud/vue'
 
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import PlusOutlineIcon from 'vue-material-design-icons/PlusOutline.vue'
 
 import { createNote } from '../NotesService.js'
 import { getDefaultSampleNote, getDefaultSampleNoteTitle } from '../Util.js'
 
 export default {
 	components: {
 		NcButton,
-		PlusIcon,
+		PlusOutlineIcon,
 	},
 
 	methods: {

src/components/Dashboard.vue

@@ -26,7 +26,7 @@
 		</NcDashboardWidget>
 		<div v-if="!loading" class="buttons-footer">
 			<NcButton :href="createNoteUrl">
-				<PlusIcon slot="icon" :size="20" />
+				<PlusOutline slot="icon" :size="20" />
 				{{ t('notes', 'New note') }}
 			</NcButton>
 		</div>
@@ -37,7 +37,7 @@
 import { NcButton, NcDashboardWidget, NcDashboardWidgetItem } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import PlusOutline from 'vue-material-design-icons/PlusOutline.vue'
 
 import { getDashboardData } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
@@ -49,7 +49,7 @@ export default {
 		NcButton,
 		NcDashboardWidget,
 		NcDashboardWidgetItem,
-		PlusIcon,
+		PlusOutline,
 	},
 
 	data() {

src/components/NoteItem.vue

@@ -16,12 +16,12 @@
 			{{ categoryTitle }}
 		</template>
 		<template #icon>
-			<AlertOctagonIcon v-if="note.error"
+			<AlertOctagonOutlineIcon v-if="note.error"
 				slot="icon"
 				:size="20"
 				fill-color="#E9322D"
 			/>
-			<StarIcon v-else-if="note.favorite"
+			<StarOutlineIcon v-else-if="note.favorite"
 				slot="icon"
 				:size="20"
 				fill-color="#FC0"
@@ -32,7 +32,7 @@
 			/>
 		</template>
 		<template v-if="isShared" #indicator>
-			<ShareVariantIcon :size="16" fill-color="#0082c9" />
+			<ShareVariantOutlineIcon :size="16" fill-color="#0082c9" />
 		</template>
 		<template #actions>
 			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
@@ -41,14 +41,14 @@
 
 			<NcActionButton @click="onToggleSharing">
 				<template #icon>
-					<ShareVariantIcon :size="20" />
+					<ShareVariantOutlineIcon :size="20" />
 				</template>
 				{{ t('notes', 'Share') }}
 			</NcActionButton>
 
 			<NcActionButton v-if="!showCategorySelect" @click="showCategorySelect = true">
 				<template #icon>
-					<FolderIcon :size="20" />
+					<FolderOutlineIcon :size="20" />
 				</template>
 				{{ categoryTitle }}
 			</NcActionButton>
@@ -66,13 +66,13 @@
 				@search-change="onCategoryChange"
 			>
 				<template #icon>
-					<FolderIcon :size="20" />
+					<FolderOutlineIcon :size="20" />
 				</template>
 				{{ t('notes', 'Change category') }}
 			</NcActionInput>
 
 			<NcActionButton v-if="!renaming" @click="startRenaming">
-				<PencilIcon slot="icon" :size="20" />
+				<PencilOutlineIcon slot="icon" :size="20" />
 				{{ t('notes', 'Rename') }}
 			</NcActionButton>
 			<NcActionInput v-else
@@ -83,7 +83,7 @@
 				@input="onInputChange($event)"
 				@submit="onRename"
 			>
-				<PencilIcon slot="icon" :size="20" />
+				<PencilOutlineIcon slot="icon" :size="20" />
 			</NcActionInput>
 
 			<NcActionSeparator />
@@ -101,31 +101,31 @@
 
 <script>
 import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
-import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
+import AlertOctagonOutlineIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import PencilIcon from 'vue-material-design-icons/Pencil.vue'
-import StarIcon from 'vue-material-design-icons/Star.vue'
+import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
+import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
+import StarOutlineIcon from 'vue-material-design-icons/StarOutline.vue'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
 import { showError } from '@nextcloud/dialogs'
 import { setFavorite, setTitle, fetchNote, deleteNote, setCategory } from '../NotesService.js'
-import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
+import ShareVariantOutlineIcon from 'vue-material-design-icons/ShareVariantOutline.vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 export default {
 	name: 'NoteItem',
 
 	components: {
-		AlertOctagonIcon,
+		AlertOctagonOutlineIcon,
 		FileDocumentOutlineIcon,
-		FolderIcon,
+		FolderOutlineIcon,
 		NcActionButton,
 		NcListItem,
-		StarIcon,
+		StarOutlineIcon,
 		NcActionSeparator,
 		NcActionInput,
-		PencilIcon,
-		ShareVariantIcon,
+		PencilOutlineIcon,
+		ShareVariantOutlineIcon,
 	},
 
 	props: {

src/components/NotePlain.vue

@@ -56,8 +56,8 @@
 						v-tooltip.left="t('notes', 'CTRL + /')"
 						@click="onTogglePreview"
 					>
-						<EditIcon v-if="preview" slot="icon" :size="20" />
-						<EyeIcon v-else slot="icon" :size="20" />
+						<PencilOutlineIcon v-if="preview" slot="icon" :size="20" />
+						<EyeOutlineIcon v-else slot="icon" :size="20" />
 						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
 					</NcActionButton>
 					<NcActionButton
@@ -70,7 +70,7 @@
 				</NcActions>
 				<NcActions v-if="note.readonly">
 					<NcActionButton>
-						<NoEditIcon slot="icon" :size="20" />
+						<PencilOffOutlineIcon slot="icon" :size="20" />
 						{{ t('notes', 'Note is read-only. You cannot change it.') }}
 					</NcActionButton>
 				</NcActions>
@@ -103,10 +103,10 @@ import {
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
-import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
+import EyeOutlineIcon from 'vue-material-design-icons/EyeOutline.vue'
 import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
-import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
+import PencilOffOutlineIcon from 'vue-material-design-icons/PencilOffOutline.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
 
 import { config } from '../config.js'
@@ -122,14 +122,14 @@ export default {
 
 	components: {
 		ConflictSolution,
-		EditIcon,
-		EyeIcon,
+		PencilOutlineIcon,
+		EyeOutlineIcon,
 		FullscreenIcon,
 		NcActions,
 		NcActionButton,
 		NcAppContent,
 		NcModal,
-		NoEditIcon,
+		PencilOffOutlineIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,

src/components/Welcome.vue

@@ -12,7 +12,7 @@
 			</div>
 			<div class="feature">
 				<NcButton type="secondary" @click="onNewNote">
-					<PlusIcon slot="icon" :size="20" />
+					<PlusOutlineIcon slot="icon" :size="20" />
 					{{ t('notes', 'New note') }}
 				</NcButton>
 			</div>
@@ -39,7 +39,7 @@ import {
 	NcButton,
 } from '@nextcloud/vue'
 
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import PlusOutlineIcon from 'vue-material-design-icons/PlusOutline.vue'
 
 import CreateSampleButton from './CreateSampleButton.vue'
 import HelpMobile from './HelpMobile.vue'
@@ -54,7 +54,7 @@ export default {
 		HelpMobile,
 		NcAppContent,
 		NcButton,
-		PlusIcon,
+		PlusOutlineIcon,
 	},
 
 	methods: {