remove SCSS

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);
+}
+

css/app-navigation.scss → 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;
+ }
+}

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 {

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: {

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)"

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,

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,
  },