Fix design issues

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/prosemirror.scss

@@ -212,5 +212,4 @@ div.ProseMirror {
 	color: var(--color-text-maxcontrast);
 	pointer-events: none;
 	height: 0;
-	font-style: italic;
 }

src/EditorFactory.js

@@ -79,7 +79,7 @@ const createEditor = ({ content, onInit, onUpdate, extensions, enableRichEditing
 			new Image(),
 			new Placeholder({
 				emptyNodeClass: 'is-empty',
-				emptyNodeText: 'Write something …',
+				emptyNodeText: 'Add notes, lists or links …',
 				showOnlyWhenEditable: true
 			})
 		]

src/files.js

@@ -22,10 +22,11 @@
 
 import FilesEditor from './components/FilesEditor'
 import PreviewPlugin from './files/PreviewPlugin'
+import RichWorkspace from './views/RichWorkspace'
+
 import { registerFileActionFallback, registerFileCreate } from './helpers/files'
 import { openMimetypesMarkdown, openMimetypesPlainText } from './helpers/mime'
 
-
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = OC.linkTo('text', 'js/') // eslint-disable-line
 
@@ -67,26 +68,22 @@ const FilesPlugin = {
 
 	render: (fileList) => {
 
-		const RichWorkspace = import(/* webpackChunkName: "richworkspace" */'./views/RichWorkspace')
-		const Vue = import('vue')
-		FilesPlugin.el.id = 'files-workspace-wrapper'
-		Vue.prototype.t = window.t
-		Vue.prototype.n = window.n
-		Vue.prototype.OCA = window.OCA
-		const View = Vue.extend(RichWorkspace)
-		const vm = new View({
-			propsData: {
-				path: fileList.getCurrentDirectory()
-			}
-		}).$mount(FilesPlugin.el)
+		import('vue').then((module) => {
+			const Vue = module.default
+			FilesPlugin.el.id = 'files-workspace-wrapper'
+			Vue.prototype.t = window.t
+			Vue.prototype.n = window.n
+			Vue.prototype.OCA = window.OCA
+			const View = Vue.extend(RichWorkspace)
+			const vm = new View({
+				propsData: {
+					path: fileList.getCurrentDirectory()
+				}
+			}).$mount(FilesPlugin.el)
 
-		fileList.$el.on('changeDirectory', data => {
-			vm.path = data.dir.toString()
-			vm.changeDirectory({
-				dir: data.dir,
-				fileList
+			fileList.$el.on('changeDirectory', data => {
+				vm.path = data.dir.toString()
 			})
-			// TODO Switch to path/README.md
 		})
 	}
 }

src/views/RichWorkspace.vue

@@ -23,10 +23,9 @@
 <template>
 	<div id="rich-workspace" :class="{'icon-loading': !loaded || !ready }">
 		<div v-if="!file || (autofocus && !ready)" class="empty-workspace" @click="createNew">
-			<i>{{ t('text', 'Click to enter notes, lists or links …') }}</i>
-		</div>
-		<div v-if="(file && !ready)" class="empty-workspace">
-			<i>{{ t('text', 'Write something …') }}</i>
+			<p class="placeholder">
+				{{ t('text', 'Add notes, lists or links …') }}
+			</p>
 		</div>
 
 		<EditorWrapper v-if="file"
@@ -44,7 +43,7 @@
 export default {
 	name: 'RichWorkspace',
 	components: {
-		EditorWrapper: () => import(/* webpackChunkName: "editor" */'./EditorWrapper')
+		EditorWrapper: () => import(/* webpackChunkName: "editor" */'./../components/EditorWrapper')
 	},
 	props: {
 		path: {
@@ -69,9 +68,6 @@ export default {
 		this.getFileInfo()
 	},
 	methods: {
-		changeDirectory({ dir, fileList }) {
-			console.log('vue cchangeDirectory', dir, fileList)
-		},
 		getFileInfo() {
 			this.loaded = false
 			this.autofocus = false
@@ -87,7 +83,7 @@ export default {
 			})
 		},
 		createNew() {
-			window.FileList.createFile('README.md', { scrollTo: false }).then((status, data) => {
+			window.FileList.createFile('README.md', { scrollTo: false, animate: false }).then((status, data) => {
 				this.getFileInfo()
 				this.autofocus = true
 			})
@@ -98,15 +94,16 @@ export default {
 
 <style scoped>
 	#rich-workspace {
-		padding: 0 20px;
+		padding: 0 60px;
 		min-height: 90px;
 	}
+
 	.empty-workspace {
 		margin-top: 54px;
 		color: var(--color-text-maxcontrast);
 		height: 0;
-		font-style: italic;
 	}
+
 	#rich-workspace::v-deep div[contenteditable=false] {
 		width: 100%;
 		padding: 0px;
@@ -135,6 +132,5 @@ export default {
 
 	#rich-workspace::v-deep .editor__content {
 		margin: 0;
-		max-width: 100%;
 	}
 </style>