From 172f96866de68758607444ccd262e46d8e38957e Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Sun, 2 Oct 2022 15:31:12 +0200
Subject: [PATCH] remove SCSS

---
 css/global.css                              | 10 +++++
 css/global.scss                             |  2 -
 css/{app-navigation.scss => notes.css}      | 48 +++++++++++++--------
 css/notes.scss                              |  8 ----
 css/print.scss                              | 23 ----------
 img/folder-empty.svg                        |  1 -
 img/folder.svg                              |  1 -
 img/notes-dark.svg                          |  1 +
 img/notes-trans.svg                         |  2 +-
 img/recent.svg                              |  1 -
 src/components/Dashboard.vue                |  2 +-
 src/components/NavigationCategoriesItem.vue | 22 ++++++++--
 src/components/NavigationList.vue           |  1 -
 src/components/Note.vue                     | 28 +++++++++---
 src/components/Sidebar.vue                  | 15 ++++++-
 15 files changed, 99 insertions(+), 66 deletions(-)
 create mode 100644 css/global.css
 delete mode 100644 css/global.scss
 rename css/{app-navigation.scss => notes.css} (54%)
 delete mode 100644 css/notes.scss
 delete mode 100644 css/print.scss
 delete mode 100644 img/folder-empty.svg
 delete mode 100644 img/folder.svg
 create mode 100644 img/notes-dark.svg
 delete mode 100644 img/recent.svg

diff --git a/css/global.css b/css/global.css
new file mode 100644
index 000000000..80a846b21
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,10 @@
+.icon-notes {
+	background-image: url(../img/notes-dark.svg);
+	filter: var(--background-invert-if-dark);
+}
+
+.icon-notes-trans {
+	background-image: url(../img/notes-trans.svg);
+	filter: var(--background-invert-if-dark);
+}
+
diff --git a/css/global.scss b/css/global.scss
deleted file mode 100644
index 0dcd63a46..000000000
--- a/css/global.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@include icon-black-white('notes', 'notes', 1);
-@include icon-black-white('notes-trans', 'notes', 1);
diff --git a/css/app-navigation.scss b/css/notes.css
similarity index 54%
rename from css/app-navigation.scss
rename to css/notes.css
index 8a0595d14..520192ff2 100644
--- a/css/app-navigation.scss
+++ b/css/notes.css
@@ -1,3 +1,10 @@
+/* workaround for https://github.com/nextcloud/nextcloud-vue/issues/1384 */
+body {
+	min-height: 100%;
+	height: auto;
+}
+
+/* App Navigation fixes */
 .app-navigation-entry.category-header:not(.app-navigation-entry--opened) .app-navigation-entry__title {
 	font-weight: bold;
 }
@@ -7,23 +14,6 @@
 	pointer-events: inherit;
 }
 
-#app-navigation > ul > li.app-navigation-caption.timeslot {
-	color: var(--color-text-maxcontrast);
-}
-
-/* icons for sidebar */
-.icon-files {
-	@include icon-color('folder', 'notes', $color-black);
-}
-
-.icon-emptyfolder {
-	@include icon-color('folder-empty', 'notes', $color-black);
-}
-
-.icon-recent {
-	@include icon-color('recent', 'notes', $color-black);
-}
-
 .app-navigation-entry__utils .action-item {
 	visibility: hidden;
 }
@@ -36,3 +26,27 @@ li:focus  .app-navigation-entry__utils .action-item {
 	visibility: visible;
 }
 
+@media print {
+	#header,
+	.app-navigation,
+	#note-container .action-buttons,
+	#note-container .upload-button {
+		display: none !important;
+	}
+
+	.content {
+		display: block;
+		padding: 0;
+		color: #000;
+	}
+
+	#note-container .note-editor,
+	#note-container .note-preview {
+		padding: 0 !important;
+		font-size: 10pt !important;
+	}
+
+	.app-content {
+		margin-left: 0 !important;
+	}
+}
diff --git a/css/notes.scss b/css/notes.scss
deleted file mode 100644
index 02f6f1db0..000000000
--- a/css/notes.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'app-navigation';
-@import 'print';
-
-// workaround for https://github.com/nextcloud/nextcloud-vue/issues/1384
-body {
-	min-height: 100%;
-	height: auto;
-}
diff --git a/css/print.scss b/css/print.scss
deleted file mode 100644
index 2a473ec65..000000000
--- a/css/print.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@media print {
-	#header,
-	.app-navigation,
-	#note-container .action-buttons {
-		display: none !important;
-	}
-
-	.content {
-		display: block;
-		padding: 0;
-		color: #000;
-	}
-
-	#note-container .note-editor,
-	#note-container .note-preview {
-		padding: 0 !important;
-		font-size: 10pt !important;
-	}
-
-	.app-content {
-		margin-left: 0 !important;
-	}
-}
diff --git a/img/folder-empty.svg b/img/folder-empty.svg
deleted file mode 100644
index 6fefe1d27..000000000
--- a/img/folder-empty.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" version="1.1" height="16"><path d="M1.46 2c-.25 0-.46.21-.46.46v11.08c0 .258.202.46.46.46h13.08c.258 0 .46-.202.46-.46V4.462c0-.25-.21-.463-.46-.463H8L6 2H1.46zM2 5h12v8H2V5z" fill="#0082c9"/></svg>
diff --git a/img/folder.svg b/img/folder.svg
deleted file mode 100644
index b58c3e232..000000000
--- a/img/folder.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" /></svg>
diff --git a/img/notes-dark.svg b/img/notes-dark.svg
new file mode 100644
index 000000000..beaba9e4c
--- /dev/null
+++ b/img/notes-dark.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.0" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m24.484 3.5156c-1.0237 0-2.0471 0.38887-2.8281 1.1699l5.6582 5.6582c1.5621-1.5621 1.5621-4.0961 0-5.6582-0.78105-0.78105-1.8064-1.1699-2.8301-1.1699zm-4.2422 2.584-12.02 12.021 5.6562 5.6562 12.021-12.02-5.6582-5.6582zm-13.436 13.436-2.1211 7.7793 7.7793-2.1211-5.6582-5.6582z" fill="#000"/></svg>
diff --git a/img/notes-trans.svg b/img/notes-trans.svg
index 1850accbb..1163eb6e5 100644
--- a/img/notes-trans.svg
+++ b/img/notes-trans.svg
@@ -1 +1 @@
-<svg width="32" height="32" version="1.0" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m24.484 3.5156c-1.0237 0-2.0471 0.38887-2.8281 1.1699l5.6582 5.6582c1.5621-1.5621 1.5621-4.0961 0-5.6582-0.78105-0.78105-1.8064-1.1699-2.8301-1.1699zm-4.2422 2.584-12.02 12.021 5.6562 5.6562 12.021-12.02-5.6582-5.6582zm-13.436 13.436-2.1211 7.7793 7.7793-2.1211-5.6582-5.6582z" fill="#fff" style="fill-opacity:0.5" /></svg>
+<svg width="32" height="32" version="1.0" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m24.484 3.5156c-1.0237 0-2.0471 0.38887-2.8281 1.1699l5.6582 5.6582c1.5621-1.5621 1.5621-4.0961 0-5.6582-0.78105-0.78105-1.8064-1.1699-2.8301-1.1699zm-4.2422 2.584-12.02 12.021 5.6562 5.6562 12.021-12.02-5.6582-5.6582zm-13.436 13.436-2.1211 7.7793 7.7793-2.1211-5.6582-5.6582z" fill="#000" style="fill-opacity:0.5" /></svg>
diff --git a/img/recent.svg b/img/recent.svg
deleted file mode 100644
index cb681fb70..000000000
--- a/img/recent.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path style="text-decoration-color:#000;isolation:auto;mix-blend-mode:normal;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none" d="M8 0C3.594 0 0 3.594 0 8c0 4.406 3.594 8 8 8 4.406 0 8-3.594 8-8 0-4.406-3.594-8-8-8zm0 2c3.326 0 6 2.674 6 6s-2.674 6-6 6-6-2.674-6-6 2.674-6 6-6zm-.44.932a.617.617 0 0 0-.605.613l-.852 4.44V8C5.92 8.755 6.44 9 7.02 9.352h.005l2.998 1.58c.653.502 1.407-.476.754-.98L9 8.01V8l-.81-4.45a.617.617 0 0 0-.63-.618z" color="#000" white-space="normal"/></svg>
\ No newline at end of file
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 71cd4dc7c..39ff0c06e 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -104,7 +104,7 @@ export default {
 }
 
 .note-item-favorite {
-	background: var(--icon-star-dark-FC0, var(--icon-star-dark-fc0));
+	background: var(--icon-starred-yellow, var(--icon-star-dark-FC0, var(--icon-star-dark-fc0)));
 }
 
 .note-item {
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/NavigationCategoriesItem.vue
index 28c0f396c..67e134a60 100644
--- a/src/components/NavigationCategoriesItem.vue
+++ b/src/components/NavigationCategoriesItem.vue
@@ -1,18 +1,18 @@
 <template>
 	<AppNavigationItem
 		:title="title"
-		icon="icon-files"
 		class="app-navigation-noclose separator-below"
 		:class="{ 'category-header': selectedCategory !== null }"
 		:open.sync="open"
 		:allow-collapse="true"
 		@click.prevent.stop="onToggleCategories"
 	>
+		<FolderIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 		<AppNavigationItem
 			:title="t('notes', 'All notes')"
-			icon="icon-recent"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
+			<HistoryIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 			<AppNavigationCounter slot="counter">
 				{{ numNotes }}
 			</AppNavigationCounter>
@@ -21,9 +21,18 @@
 		<AppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
-			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
+			<FolderOutlineIcon v-if="category.name === ''"
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-main-text)"
+			/>
+			<FolderIcon v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-main-text)"
+			/>
 			<AppNavigationCounter slot="counter">
 				{{ category.count }}
 			</AppNavigationCounter>
@@ -37,6 +46,10 @@ import {
 	AppNavigationCounter,
 } from '@nextcloud/vue'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
+import HistoryIcon from 'vue-material-design-icons/History.vue'
+
 import { getCategories } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
@@ -47,6 +60,9 @@ export default {
 	components: {
 		AppNavigationItem,
 		AppNavigationCounter,
+		FolderIcon,
+		FolderOutlineIcon,
+		HistoryIcon,
 	},
 
 	props: {
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index e7e5e03c2..2ee9383b6 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -11,7 +11,6 @@
 		<template v-for="item in noteItems">
 			<AppNavigationCaption v-if="category!==null && category!==item.category"
 				:key="item.category"
-				icon="icon-files"
 				class="app-navigation-noclose"
 				:title="categoryToLabel(item.category)"
 				@click.native="$emit('category-selected', item.category)"
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 2bdefe568..34bfdeba9 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -51,26 +51,36 @@
 						icon="icon-details"
 						@click="onToggleSidebar"
 					>
+						<SidebarIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ t('notes', 'Details') }}
 					</ActionButton>
 					<ActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
-						:icon="preview ? 'icon-rename' : 'icon-toggle'"
 						@click="onTogglePreview"
 					>
+						<EditIcon v-if="preview"
+							slot="icon"
+							:size="20"
+							fill-color="var(--color-main-text)"
+						/>
+						<EyeIcon v-else
+							slot="icon"
+							:size="20"
+							fill-color="var(--color-main-text)"
+						/>
 						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
 					</ActionButton>
 					<ActionButton
-						icon="icon-fullscreen"
 						:class="{ active: fullscreen }"
 						@click="onToggleDistractionFree"
 					>
+						<FullscreenIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
 					</ActionButton>
 				</Actions>
 				<Actions v-if="note.readonly">
 					<ActionButton>
-						<PencilOffIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
+						<NoEditIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ t('notes', 'Note is read-only. You cannot change it.') }}
 					</ActionButton>
 				</Actions>
@@ -103,8 +113,12 @@ import {
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
+import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
+import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
+import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
+import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
-import PencilOffIcon from 'vue-material-design-icons/PencilOff.vue'
 
 import { config } from '../config.js'
 import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
@@ -122,8 +136,12 @@ export default {
 		ActionButton,
 		AppContent,
 		ConflictSolution,
+		EditIcon,
+		EyeIcon,
+		FullscreenIcon,
 		Modal,
-		PencilOffIcon,
+		NoEditIcon,
+		SidebarIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index f3f16b6f9..df3ffe53a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -8,8 +8,15 @@
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
-			<div v-if="!note.readonly" class="note-category" :title="t('notes', 'Set category')">
-				<h4>{{ t('notes', 'Category') }} <span v-tooltip="categoriesInfo" class="icon-info svg" /></h4>
+			<div v-if="!note.readonly" class="note-category">
+				<h4>
+					{{ t('notes', 'Category') }}
+					<InfoIcon v-tooltip="categoriesInfo"
+						:size="20"
+						fill-color="var(--color-main-text)"
+						style="display: inline-block; margin-left: 1ex;"
+					/>
+				</h4>
 				<form class="category" @submit.prevent.stop="">
 					<Multiselect id="category"
 						:value="category"
@@ -20,6 +27,7 @@
 						:show-no-results="false"
 						:taggable="true"
 						:preserve-search="true"
+						:title="t('notes', 'Set category')"
 						@input="onSaveCategory"
 						@close="onFinishEditCategory"
 						@search-change="onEditCategory"
@@ -61,6 +69,8 @@ import {
 } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 
+import InfoIcon from 'vue-material-design-icons/Information.vue'
+
 import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
@@ -70,6 +80,7 @@ export default {
 
 	components: {
 		AppSidebar,
+		InfoIcon,
 		Multiselect,
 	},