move doc import into sidebar

README.md

@@ -8,7 +8,7 @@ The mission is to bring software dev inspired features (refactoring, testing, li
 
 ## Latest version
 
-v0.28.0
+v0.28.1
 
 ## OS Support
 

app/app/components/folder/folder-toolbar.js

@@ -19,14 +19,12 @@ const {
 
 export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	folderService: Ember.inject.service('folder'),
-	documentService: Ember.inject.service('document'),
 	session: Ember.inject.service(),
 	appMeta: Ember.inject.service(),
 
 	showToolbar: false,
 	folder: {},
 	busy: false,
-	importedDocuments: [],
 	isFolderOwner: computed.equal('folder.userId', 'session.user.id'),
 	moveFolderId: "",
 	drop: null,
@@ -53,16 +51,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 				this.addTooltip(document.getElementById("folder-share-button"));
 				this.addTooltip(document.getElementById("folder-settings-button"));
 			}
-			if (this.get('folderService').get('canEditCurrentFolder')) {
-				this.addTooltip(document.getElementById("import-document-button"));
-			}
 		}
 	},
 
-	didUpdate() {
-		this.setupImport();
-	},
-
 	willDestroyElement() {
 		if (is.not.null(this.get('drop'))) {
 			this.get('drop').destroy();
@@ -72,88 +63,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		this.destroyTooltips();
 	},
 
-	setupImport() {
-		// guard against unecessary file upload component init
-		if (this.get('hasSelectedDocuments') || !this.get('folderService').get('canEditCurrentFolder')) {
-			return;
-		}
-
-		// already done init?
-		if (is.not.null(this.get('drop'))) {
-			if (is.not.null(this.get('drop'))) {
-				this.get('drop').destroy();
-				this.set('drop', null);
-			}
-		}
-
-		let self = this;
-		let folderId = this.get('folder.id');
-		let url = this.get('appMeta.endpoint');
-		let importUrl = `${url}/import/folder/${folderId}`;
-
-		let dzone = new Dropzone("#import-document-button > i", {
-			headers: {
-				'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
-			},
-			url: importUrl,
-			method: "post",
-			paramName: 'attachment',
-			acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
-			clickable: true,
-			maxFilesize: 10,
-			parallelUploads: 3,
-			uploadMultiple: false,
-			addRemoveLinks: false,
-			autoProcessQueue: true,
-
-			init: function () {
-				this.on("success", function (document) {
-					self.send('onDocumentImported', document.name, document);
-				});
-
-				this.on("error", function (x) {
-					console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
-				});
-
-				this.on("queuecomplete", function () {});
-
-				this.on("addedfile", function (file) {
-					self.send('onDocumentImporting', file.name);
-					self.audit.record('converted-document');
-				});
-			}
-		});
-
-		dzone.on("complete", function (file) {
-			dzone.removeFile(file);
-		});
-
-		this.set('drop', dzone);
-	},
-
 	actions: {
-		onDocumentImporting(filename) {
-			this.send("showNotification", `Importing ${filename}`);
-
-			let documents = this.get('importedDocuments');
-			documents.push(filename);
-			this.set('importedDocuments', documents);
-		},
-
-		onDocumentImported(filename /*, document*/ ) {
-			this.send("showNotification", `${filename} ready`);
-
-			let documents = this.get('importedDocuments');
-			documents.pop(filename);
-			this.set('importedDocuments', documents);
-
-			this.attrs.refresh();
-
-			if (documents.length === 0) {
-				// this.get('showDocument')(this.get('folder'), document);
-			}
-		},
-
 		deleteDocuments() {
 			this.attrs.onDeleteDocument();
 		},

app/app/components/folder/folders-list.js

@@ -120,6 +120,10 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
     },
 
 	actions: {
+		onImport() {
+			this.attrs.onImport();
+		},
+		
 		scrollTop() {
 			this.set('showScrollTool', false);
 

app/app/components/folder/start-document.js

@@ -14,9 +14,93 @@ import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
 	localStorage: Ember.inject.service(),
+	appMeta: Ember.inject.service(),
+
 	canEditTemplate: "",
+	importedDocuments: [],
+	drop: null,
+
+	didInsertElement() {
+		this.setupImport();
+	},
+
+	setupImport() {
+		// already done init?
+		if (is.not.null(this.get('drop'))) {
+			if (is.not.null(this.get('drop'))) {
+				this.get('drop').destroy();
+				this.set('drop', null);
+			}
+		}
+
+		let self = this;
+		let folderId = this.get('folder.id');
+		let url = this.get('appMeta.endpoint');
+		let importUrl = `${url}/import/folder/${folderId}`;
+
+		let dzone = new Dropzone("#import-document-button", {
+			headers: {
+				'Authorization': 'Bearer ' + self.get('session.session.content.authenticated.token')
+			},
+			url: importUrl,
+			method: "post",
+			paramName: 'attachment',
+			acceptedFiles: ".doc,.docx,.txt,.md,.markdown",
+			clickable: true,
+			maxFilesize: 10,
+			parallelUploads: 3,
+			uploadMultiple: false,
+			addRemoveLinks: false,
+			autoProcessQueue: true,
+
+			init: function () {
+				this.on("success", function (document) {
+					self.send('onDocumentImported', document.name, document);
+				});
+
+				this.on("error", function (x) {
+					console.log("Conversion failed for ", x.name, " obj ", x); // TODO proper error handling
+				});
+
+				this.on("queuecomplete", function () {});
+
+				this.on("addedfile", function (file) {
+					self.send('onDocumentImporting', file.name);
+					self.audit.record('converted-document');
+				});
+			}
+		});
+
+		dzone.on("complete", function (file) {
+			dzone.removeFile(file);
+		});
+
+		this.set('drop', dzone);
+	},
 
 	actions: {
+		onDocumentImporting(filename) {
+			this.send("showNotification", `Importing ${filename}`);
+
+			let documents = this.get('importedDocuments');
+			documents.push(filename);
+			this.set('importedDocuments', documents);
+		},
+
+		onDocumentImported(filename /*, document*/ ) {
+			this.send("showNotification", `${filename} ready`);
+
+			let documents = this.get('importedDocuments');
+			documents.pop(filename);
+			this.set('importedDocuments', documents);
+
+			this.attrs.onImport();
+
+			if (documents.length === 0) {
+				// this.get('showDocument')(this.get('folder'), document);
+			}
+		},
+
 		editTemplate(template) {
 			this.audit.record('edited-saved-template');
 			this.attrs.onEditTemplate(template);

app/app/pods/folders/folder/controller.js

@@ -1,11 +1,11 @@
 // Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
 //
-// This software (Documize Community Edition) is licensed under 
+// This software (Documize Community Edition) is licensed under
 // GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
 //
 // You can operate outside the AGPL restrictions by purchasing
 // Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>. 
+// by contacting <sales@documize.com>.
 //
 // https://documize.com
 
@@ -19,7 +19,7 @@ export default Ember.Controller.extend(NotifierMixin, {
 	selectedDocuments: [],
 
 	actions: {
-		refresh() {
+		onImport() {
 			this.get('target.router').refresh();
 		},
 
@@ -75,4 +75,4 @@ export default Ember.Controller.extend(NotifierMixin, {
 			});
 		}
 	}
-});
+});

app/app/pods/folders/folder/template.hbs

@@ -4,6 +4,7 @@
 
 	{{#layout/zone-sidebar}}
 		{{folder/folders-list folders=model.folders folder=model.folder
+			onImport=(action 'onImport')
 			onFolderAdd=(action 'onFolderAdd')
 			showDocument=(action 'showDocument')}}
 	{{/layout/zone-sidebar}}
@@ -13,7 +14,6 @@
 			folders=model.folders
 			folder=model.folder
 			hasSelectedDocuments=hasSelectedDocuments
-			refresh=(action 'refresh')
 			onDeleteDocument=(action 'onDeleteDocument')
 			onMoveDocument=(action 'onMoveDocument')}}
 

app/app/styles/view/page-documents.scss

@@ -178,71 +178,103 @@
 	text-align: center;
 }
 
-.templates-list {
+.start-document {
-	margin: 0;
+	> .space-name {
+		color: $color-primary;
+		font-size: 1.3rem;
+		font-weight: bold;
+		margin-bottom: 30px;
+	}
 
-	> .list {
+	> .import-document-button {
+		width: 100%;
+		padding: 20px;
+		margin: 30px 0;
+		text-align: center;
+		color: $color-gray;
+		border: 2px dotted $color-gray;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1.7rem;
+		@include border-radius(10px);
+		@include ease-in();
+
+		&:hover {
+			border-color: $color-link;
+			color: $color-link;
+		}
+
+		> .dz-preview, .dz-processing {
+			display: none !important;
+		}
+	}
+
+	> .templates-list {
 		margin: 0;
-		padding: 0;
 
-		> .item {
+		> .list {
-			list-style: none;
+			margin: 0;
-			padding: 10px 5px;
+			padding: 0;
-			margin: 20px 0;
-			@include ease-in();
 
-			.icon {
+			> .item {
-				text-align: center;
+				list-style: none;
-				display: inline-block;
+				padding: 10px 5px;
-				width: 50px;
+				margin: 20px 0;
+				@include ease-in();
 
-				> .img {
+				.icon {
-					float: left;
 					text-align: center;
 					display: inline-block;
-					height: 40px;
+					width: 50px;
-					width: 40px;
+
+					> .img {
+						float: left;
+						text-align: center;
+						display: inline-block;
+						height: 40px;
+						width: 40px;
+					}
+
+					> .edit-control {
+						color: $color-gray;
+						font-size: 0.9rem;
+						text-align: center;
+						float: left;
+					    margin: 5px 0 0 9px;
+						cursor: pointer;
+
+						&:hover {
+							color: $color-link;
+						}
+					}
 				}
 
-				> .edit-control {
+				> .details {
-					color: $color-gray;
+					vertical-align: top;
-					font-size: 0.9rem;
+					display: inline-block;
-					text-align: center;
+					width: 80%;
-					float: left;
-				    margin: 5px 0 0 9px;
 					cursor: pointer;
 
+					> .title {
+						font-size: 1rem;
+						font-weight: bold;
+						color: $color-off-black;
+						letter-spacing: 0.5px;
+					}
+
+					> .desc {
+						color: $color-off-black;
+						font-size: 0.9rem;
+						margin-top: 5px;
+					}
+
 					&:hover {
-						color: $color-link;
+						> .title, > .desc {
-					}
+							color: $color-link !important;
+						}
+				    }
 				}
 			}
-
-			> .details {
-				vertical-align: top;
-				display: inline-block;
-				width: 80%;
-				cursor: pointer;
-
-				> .title {
-					font-size: 1rem;
-					font-weight: bold;
-					color: $color-off-black;
-					letter-spacing: 0.5px;
-				}
-
-				> .desc {
-					color: $color-off-black;
-					font-size: 0.9rem;
-					margin-top: 5px;
-				}
-
-				&:hover {
-					> .title, > .desc {
-						color: $color-link !important;
-					}
-			    }
-			}
 		}
 	}
 }

app/app/templates/components/folder/folder-toolbar.hbs

@@ -41,12 +41,6 @@
 					</div>
 				{{/link-to}}
 			{{/if}}
-			{{#if folderService.canEditCurrentFolder}}
-				<div class="button-gap"></div>
-				<div class="round-button-mono" id="import-document-button" data-tooltip="Import Word / Markdown" data-tooltip-position="top center">
-					<i class="material-icons color-gray">file_upload</i>
-				</div>
-			{{/if}}
 	    {{/if}}
 	</div>
 {{/if}}

app/app/templates/components/folder/folders-list.hbs

@@ -4,7 +4,10 @@
 			<i class="material-icons color-gray">close</i>
 		</div>
 
-		{{folder/start-document savedTemplates=savedTemplates folder=folder editor=folderService.canEditCurrentFolder onEditTemplate=(action 'onEditTemplate') onDocumentTemplate=(action 'onDocumentTemplate')}}
+		{{folder/start-document savedTemplates=savedTemplates folder=folder editor=folderService.canEditCurrentFolder
+			onImport=(action 'onImport')
+			onEditTemplate=(action 'onEditTemplate')
+			onDocumentTemplate=(action 'onDocumentTemplate')}}
 	{{/if}}
 
 	{{#if showScrollTool}}

app/app/templates/components/folder/start-document.hbs

@@ -1,24 +1,31 @@
-<p class="bold color-link margin-bottom-20">{{folder.name}}</p>
+<div class="start-document">
+	<p class="space-name">{{folder.name}}</p>
 
-<div class="templates-list">
+	<div id="import-document-button" class="import-document-button">
-	<ul class="list">
+		Drag-drop .doc, .docx, .txt, .md, .markdown<br/>
-		{{#each savedTemplates key="id" as |template|}}
+		or click to select files
-			<li class="item">
+	</div>
-				<div class="icon">
+
-					<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
+	<div class="templates-list">
-					{{#if editor}}
+		<ul class="list">
-						{{#unless template.locked}}
+			{{#each savedTemplates key="id" as |template|}}
-							<div class="edit-control" {{action 'editTemplate' template}}>edit</div>
+				<li class="item">
-						{{/unless}}
+					<div class="icon">
-					{{/if}}
+						<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
-				</div>
+						{{#if editor}}
-				<div class="details" {{action 'startDocument' template}}>
+							{{#unless template.locked}}
-					<div class='title'>
+								<div class="edit-control" {{action 'editTemplate' template}}>edit</div>
-						{{template.title}}
+							{{/unless}}
+						{{/if}}
 					</div>
-					<div class='desc'>{{template.description}}</div>
+					<div class="details" {{action 'startDocument' template}}>
-				</div>
+						<div class='title'>
-			</li>
+							{{template.title}}
-		{{/each}}
+						</div>
-	</ul>
+						<div class='desc'>{{template.description}}</div>
+					</div>
+				</li>
+			{{/each}}
+		</ul>
+	</div>
 </div>

core/product.go

@@ -27,7 +27,7 @@ type ProdInfo struct {
 func Product() (p ProdInfo) {
 	p.Major = "0"
 	p.Minor = "28"
-	p.Patch = "0"
+	p.Patch = "1"
 	p.Version = fmt.Sprintf("%s.%s.%s", p.Major, p.Minor, p.Patch)
 	p.Edition = "Community"
 	p.Title = fmt.Sprintf("%s Edition", p.Edition)