Sidebar: removed
Signed-off-by: Jonathan Pagel <jonny_tischbein@systemli.org>
This commit is contained in:
Jonathan Pagel
Julius Härtl
parent
40fcc6e3c8
commit
91d0df1393
|
|
@ -37,8 +37,6 @@
|
|||
</div>
|
||||
</NcAppContent>
|
||||
<router-view v-else @note-deleted="onNoteDeleted" />
|
||||
|
||||
<router-view name="sidebar" />
|
||||
</NcContent>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,10 +29,6 @@
|
|||
<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
|
||||
{{ actionFavoriteText }}
|
||||
</NcActionButton>
|
||||
<NcActionButton @click="onToggleSidebar">
|
||||
<SidebarIcon slot="icon" :size="20" />
|
||||
{{ t('notes', 'Details') }}
|
||||
</NcActionButton>
|
||||
<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
|
||||
{{ t('notes', 'Delete note') }}
|
||||
</NcActionButton>
|
||||
|
|
@ -45,14 +41,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { NcListItem, NcActionButton } from '@nextcloud/vue'
|
||||
import { NcListItem, NcActionButton, NcActionSeparator } from '@nextcloud/vue'
|
||||
import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
|
||||
import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
|
||||
import StarIcon from 'vue-material-design-icons/Star.vue'
|
||||
import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
|
||||
import { categoryLabel, routeIsNewNote } from '../Util.js'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import store from '../store.js'
|
||||
import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
|
||||
|
||||
export default {
|
||||
|
|
@ -63,8 +57,8 @@ export default {
|
|||
FileDocumentOutlineIcon,
|
||||
NcActionButton,
|
||||
NcListItem,
|
||||
SidebarIcon,
|
||||
StarIcon,
|
||||
NcActionSeparator,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -131,10 +125,6 @@ export default {
|
|||
this.actionsOpen = false
|
||||
this.$emit('category-selected', this.note.category)
|
||||
},
|
||||
onToggleSidebar() {
|
||||
this.actionsOpen = false
|
||||
store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
|
||||
},
|
||||
onRename(newTitle) {
|
||||
this.loading.note = true
|
||||
setTitle(this.note.id, newTitle)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
|
||||
<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error)}">
|
||||
<div v-if="!loading && note && !note.error && !note.deleting"
|
||||
id="note-container"
|
||||
class="note-container"
|
||||
|
|
@ -47,13 +47,6 @@
|
|||
</div>
|
||||
<span class="action-buttons">
|
||||
<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
|
||||
<NcActionButton v-show="!sidebarOpen && !fullscreen"
|
||||
icon="icon-details"
|
||||
@click="onToggleSidebar"
|
||||
>
|
||||
<SidebarIcon slot="icon" :size="20" />
|
||||
{{ t('notes', 'Details') }}
|
||||
</NcActionButton>
|
||||
<NcActionButton
|
||||
v-tooltip.left="t('notes', 'CTRL + /')"
|
||||
@click="onTogglePreview"
|
||||
|
|
@ -109,7 +102,6 @@ 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 { config } from '../config.js'
|
||||
|
|
@ -133,7 +125,6 @@ export default {
|
|||
NcAppContent,
|
||||
NcModal,
|
||||
NoEditIcon,
|
||||
SidebarIcon,
|
||||
SyncAlertIcon,
|
||||
TheEditor,
|
||||
ThePreview,
|
||||
|
|
@ -179,9 +170,6 @@ export default {
|
|||
isManualSave() {
|
||||
return store.state.app.isManualSave
|
||||
},
|
||||
sidebarOpen() {
|
||||
return store.state.app.sidebarOpen
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -293,11 +281,6 @@ export default {
|
|||
this.actionsOpen = false
|
||||
},
|
||||
|
||||
onToggleSidebar() {
|
||||
store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
|
||||
this.actionsOpen = false
|
||||
},
|
||||
|
||||
onVisibilityChange() {
|
||||
if (document.visibilityState === 'visible') {
|
||||
this.stopRefreshTimer()
|
||||
|
|
@ -436,9 +419,6 @@ export default {
|
|||
transition-duration: var(--animation-quick);
|
||||
transition-property: padding-right;
|
||||
}
|
||||
.sidebar-open .note-container {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* distraction free styles */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
|
||||
<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'is-mobile': isMobile }">
|
||||
<div v-show="!loading" ref="editor" class="text-editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -41,9 +41,6 @@ export default {
|
|||
isNewNote() {
|
||||
return routeIsNewNote(this.$route)
|
||||
},
|
||||
sidebarOpen() {
|
||||
return store.state.app.sidebarOpen
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,280 +0,0 @@
|
|||
<template>
|
||||
<NcAppSidebar v-if="sidebarOpen"
|
||||
:title="title"
|
||||
:subtitle="subtitle"
|
||||
:star-loading="loading.favorite"
|
||||
:starred="note.favorite"
|
||||
:title-editable.sync="titleEditable"
|
||||
:title-tooltip="titleTooltip"
|
||||
@update:starred="onSetFavorite"
|
||||
@update:title="onUpdateTitle"
|
||||
@submit-title="onRenameTitle"
|
||||
@close="onCloseSidebar"
|
||||
>
|
||||
<div class="sidebar-content-wrapper">
|
||||
<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="">
|
||||
<NcMultiselect id="category"
|
||||
:value="category"
|
||||
:options="categories"
|
||||
:placeholder="t('notes', 'Uncategorized')"
|
||||
:disabled="loading.category"
|
||||
:class="['category-select', {'icon-loading-small': loading.category}]"
|
||||
:show-no-results="false"
|
||||
:taggable="true"
|
||||
:preserve-search="true"
|
||||
:title="t('notes', 'Set category')"
|
||||
@input="onSaveCategory"
|
||||
@close="onFinishEditCategory"
|
||||
@search-change="onEditCategory"
|
||||
>
|
||||
<template #option="{ option }">
|
||||
<span :class="{ gray: option==='' }">{{ option | categoryOptionLabel }}</span>
|
||||
</template>
|
||||
</NcMultiselect>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modified"
|
||||
:title="t('notes', 'Click here to save manually')"
|
||||
@click="onManualSave"
|
||||
>
|
||||
<div v-show="note.error" class="note-error">
|
||||
{{ t('notes', 'Saving failed!') }}
|
||||
</div>
|
||||
{{ t('notes', 'Last modified: {date}', { date: formattedDate }) }}
|
||||
<span v-show="note.unsaved" :title="t('notes', 'Note has unsaved changes')"> * </span>
|
||||
</div>
|
||||
</div>
|
||||
</NcAppSidebar>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import {
|
||||
NcAppSidebar,
|
||||
NcMultiselect,
|
||||
Tooltip,
|
||||
} from '@nextcloud/vue'
|
||||
import moment from '@nextcloud/moment'
|
||||
|
||||
import InfoIcon from 'vue-material-design-icons/Information.vue'
|
||||
|
||||
import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService.js'
|
||||
import { categoryLabel } from '../Util.js'
|
||||
import store from '../store.js'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
|
||||
components: {
|
||||
InfoIcon,
|
||||
NcAppSidebar,
|
||||
NcMultiselect,
|
||||
},
|
||||
|
||||
directives: {
|
||||
tooltip: Tooltip,
|
||||
},
|
||||
|
||||
filters: {
|
||||
categoryOptionLabel(obj) {
|
||||
const category = obj.isTag ? obj.label : obj
|
||||
return categoryLabel(category)
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
noteId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: {
|
||||
category: false,
|
||||
favorite: false,
|
||||
title: false, // TODO reflect this state in the UI
|
||||
},
|
||||
categoryInput: null,
|
||||
titleEditableInternal: false,
|
||||
newTitle: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
note() {
|
||||
return store.getters.getNote(parseInt(this.noteId))
|
||||
},
|
||||
titleEditable: {
|
||||
get() {
|
||||
return this.titleEditableInternal && !this.note.readonly
|
||||
},
|
||||
set(newValue) {
|
||||
if (newValue) {
|
||||
this.newTitle = this.title
|
||||
}
|
||||
this.titleEditableInternal = newValue
|
||||
},
|
||||
},
|
||||
title() {
|
||||
if (!this.titleEditable) {
|
||||
return this.note?.title || ''
|
||||
} else {
|
||||
return this.newTitle || ''
|
||||
}
|
||||
},
|
||||
category() {
|
||||
return this.note?.category || ''
|
||||
},
|
||||
formattedDate() {
|
||||
return moment(this.note.modified * 1000).format('LLL')
|
||||
},
|
||||
wordCount() {
|
||||
const value = this.note?.content
|
||||
if (value && (typeof value === 'string')) {
|
||||
const wordCount = value.split(/\s+/).filter(
|
||||
// only count words containing
|
||||
// at least one alphanumeric character
|
||||
value => value.search(/[A-Za-z0-9]/) !== -1,
|
||||
).length
|
||||
const charCount = Array.from(value).length
|
||||
return n('notes', '%n word', '%n words', wordCount)
|
||||
+ ', ' + n('notes', '%n character', '%n characters', charCount)
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
subtitle() {
|
||||
return this.wordCount
|
||||
},
|
||||
categoriesInfo() {
|
||||
return t('notes', 'You can create subcategories by using “/” as delimiter between parent category and subcategory, e.g. “{parent}/{sub}”.', { parent: t('notes', 'Category'), sub: t('notes', 'Subcategory') })
|
||||
},
|
||||
categories() {
|
||||
return ['', ...getCategories(0, false)]
|
||||
},
|
||||
sidebarOpen() {
|
||||
return store.state.app.sidebarOpen
|
||||
},
|
||||
titleTooltip() {
|
||||
return t('notes', 'Click to edit title')
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onCloseSidebar() {
|
||||
store.commit('setSidebarOpen', false)
|
||||
},
|
||||
|
||||
onEditCategory(text) {
|
||||
this.categoryInput = text
|
||||
},
|
||||
|
||||
onFinishEditCategory(str) {
|
||||
if (this.categoryInput) {
|
||||
this.onSaveCategory(this.categoryInput)
|
||||
}
|
||||
},
|
||||
|
||||
onSetFavorite(favorite) {
|
||||
this.loading.favorite = true
|
||||
setFavorite(this.note.id, favorite)
|
||||
.catch(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.loading.favorite = false
|
||||
})
|
||||
},
|
||||
|
||||
onUpdateTitle(newTitle) {
|
||||
this.newTitle = newTitle
|
||||
},
|
||||
|
||||
onRenameTitle() {
|
||||
if (this.title !== this.newTitle) {
|
||||
this.loading.title = true
|
||||
setTitle(this.note.id, this.newTitle)
|
||||
.catch(() => {
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading.title = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onSaveCategory(category) {
|
||||
this.categoryInput = null
|
||||
if (category !== null && this.note.category !== category) {
|
||||
this.loading.category = true
|
||||
this.note.category = category
|
||||
setCategory(this.note.id, category)
|
||||
.catch(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.loading.category = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onManualSave() {
|
||||
saveNoteManually(this.note.id)
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.sidebar-content-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.note-error {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-primary-element-text);
|
||||
border-radius: 0.5ex;
|
||||
padding: 0.5ex 1ex;
|
||||
}
|
||||
|
||||
.note-category {
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
form.category > .multiselect,
|
||||
form.category > .icon-confirm {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
form.category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.note-category .icon-info {
|
||||
padding: 11px 20px;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.category-select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.modified {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 1ex 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,6 @@ import { generateUrl } from '@nextcloud/router'
|
|||
import Loading from './components/Loading.vue'
|
||||
import Welcome from './components/Welcome.vue'
|
||||
import NotesView from './components/NotesView.vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
|
|
@ -29,11 +28,9 @@ export default new Router({
|
|||
name: 'note',
|
||||
components: {
|
||||
default: NotesView,
|
||||
sidebar: Sidebar,
|
||||
},
|
||||
props: {
|
||||
default: true,
|
||||
sidebar: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ const state = {
|
|||
isSaving: false,
|
||||
isManualSave: false,
|
||||
documentTitle: null,
|
||||
sidebarOpen: false,
|
||||
searchText: '',
|
||||
}
|
||||
|
||||
|
|
@ -33,10 +32,6 @@ const mutations = {
|
|||
state.documentTitle = title
|
||||
},
|
||||
|
||||
setSidebarOpen(state, open) {
|
||||
state.sidebarOpen = open
|
||||
},
|
||||
|
||||
updateSearchText(state, searchText) {
|
||||
state.searchText = searchText
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue