doc start: empty, template, import

gui/app/components/document/document-toc.js

@@ -35,7 +35,6 @@ export default Component.extend({
 
 	didReceiveAttrs() {
 		this._super(...arguments);
-
 		this.setState(this.get('currentPageId'));
 	},
 
@@ -43,10 +42,8 @@ export default Component.extend({
 		this._super(...arguments);
 
 		this.setSize();
-
 		this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
 		this.eventBus.subscribe('resized', this, 'onResize');
-
 		this.attachResizer();
 	},
 

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

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';

gui/app/components/toolbar/for-document.js

@@ -61,6 +61,8 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, {
 
 	actions: {
 		onDocumentDelete() {
+			this.modalClose('#document-delete-modal');
+			
 			this.attrs.onDocumentDelete();
 		},
 

gui/app/components/toolbar/for-space.js

@@ -11,14 +11,16 @@
 
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import AuthMixin from '../../mixins/auth';
 
-export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMixin, {
+export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, {
 	spaceService: service('folder'),
+	localStorage: service(),
+	templateService: service('template'),
 	session: service(),
 	appMeta: service(),
 	pinned: service(),
@@ -38,12 +40,24 @@ export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMix
 	deleteSpaceName: '',
 	inviteEmail: '',
 	inviteMessage: '',
+	hasTemplates: computed('templates', function() {
+		return this.get('templates.length') > 0;
+	}),
+	emptyDocName: '',
+	emptyDocNameError: false,
+	templateDocName: '',
+	templateDocNameError: false,
+	selectedTemplate: '',
+	importedDocuments: [],
+	importStatus: [],
+	dropzone: null,
 
 	didReceiveAttrs() {
 		this._super(...arguments);
 
 		let folder = this.get('space');
 		let targets = _.reject(this.get('spaces'), {id: folder.get('id')});
+		this.set('movedFolderOptions', targets);
 
 		this.get('pinned').isSpacePinned(folder.get('id')).then((pinId) => {
 			this.set('pinState.pinId', pinId);
@@ -52,8 +66,6 @@ export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMix
 			this.renderTooltips();
 		});
 
-		this.set('movedFolderOptions', targets);
-
 		if (this.get('inviteMessage').length === 0) {
 			this.set('inviteMessage', this.getDefaultInvitationMessage());
 		}
@@ -61,7 +73,6 @@ export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMix
 
 	didInsertElement() {
 		this._super(...arguments);
-
 		this.modalInputFocus('#space-delete-modal', '#delete-space-name');
 		this.modalInputFocus('#space-invite-modal', '#space-invite-email');
 	},
@@ -69,12 +80,66 @@ export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMix
 	willDestroyElement() {
 		this._super(...arguments);
 		this.removeTooltips();
+
+		if (is.not.null(this.get('dropzone'))) {
+			this.get('dropzone').destroy();
+			this.set('dropzone', null);
+		}		
 	},
 
 	getDefaultInvitationMessage() {
 		return "Hey there, I am sharing the " + this.get('space.name') + " space (in " + this.get("appMeta.title") + ") with you so we can both collaborate on documents.";
 	},
 
+	setupImport() {
+		// already done init?
+		if (is.not.null(this.get('dropzone'))) {
+			this.get('dropzone').destroy();
+			this.set('dropzone', null);
+		}
+
+		let self = this;
+		let folderId = this.get('space.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,.md,.markdown,.htm,.html",
+			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, x); // eslint-disable-line no-console
+				});
+
+				// this.on("queuecomplete", function () {});
+
+				this.on("addedfile", function (file) {
+					self.send('onDocumentImporting', file.name);
+				});
+			}
+		});
+
+		dzone.on("complete", function (file) {
+			dzone.removeFile(file);
+		});
+
+		this.set('dropzone', dzone);
+	},
+
 	actions: {
 		onUnpin() {
 			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
@@ -166,16 +231,107 @@ export default Component.extend(NotifierMixin, ModalMixin, TooltipMixin, AuthMix
 			this.modalClose('#space-delete-modal');
 		},
 
-		onAddSpace(e) {
+		onShowEmptyDocModal() {
+			this.modalOpen("#empty-doc-modal", {"show": true}, '#empty-doc-name');
+		},
+
+		onAddEmptyDoc(e) {
 			e.preventDefault();
+			let docName = this.get('emptyDocName');
+
+			if (is.empty(docName)) {
+				this.set('emptyDocNameError', true);
+				$('#empty-doc-name').focus();
+				return;
+			} else {
+				this.set('emptyDocNameError', false);
+				this.set('emptyDocName', '');
+			}
+
+			this.modalClose("#empty-doc-modal");
+
+			this.get('templateService').importSavedTemplate(this.get('space.id'), '0', docName).then((document) => {
+				this.get('router').transitionTo('document', this.get('space.id'), this.get('space.slug'), document.get('id'), document.get('slug'));
+			});
 		},
 
-		onImport() {
+		onShowTemplateDocModal() {
+			let t = this.get('templates');
+			if (t.length > 0) {
+				t[0].set('selected', true);
+				this.modalOpen("#template-doc-modal", {"show": true}, '#template-doc-name');
+			}
+		},
+
+		onSelectTemplate(i) {
+			let t = this.get('templates');
+			t.forEach((t) => {
+				t.set('selected', false);
+			})
+			i.set('selected', true);
+			this.set('selectedTemplate', i.id);
+		},
+
+		onAddTemplateDoc(e) {
+			e.preventDefault();
+			let docName = this.get('templateDocName');
+
+			if (is.empty(docName)) {
+				this.set('templateDocNameError', true);
+				$('#template-doc-name').focus();
+				return;
+			} else {
+				this.set('templateDocNameError', false);
+				this.set('templateDocName', '');
+			}
+
+			let id = this.get('selectedTemplate');
+			if (is.empty(id)) {
+				return;
+			}
+
+			this.modalClose("#template-doc-modal");
+
+			this.get('templateService').importSavedTemplate(this.get('space.id'), id, docName).then((document) => {
+				this.get('router').transitionTo('document', this.get('space.id'), this.get('space.slug'), document.get('id'), document.get('slug'));
+			});
+		},
+
+		onShowImportDocModal() {
+			this.modalOpen("#import-doc-modal", {"show": true});
+
+			this.setupImport();
+			this.modalOnShown('#import-doc-modal', function() {
+				schedule('afterRender', ()=> {
+				});
+			});
+		},
+
+		onDocumentImporting(filename) {
+			let status = this.get('importStatus');
+			let documents = this.get('importedDocuments');
+
+			status.pushObject(`Converting ${filename}...`);
+			documents.push(filename);
+
+			this.set('importStatus', status);
+			this.set('importedDocuments', documents);
+		},
+
+		onDocumentImported(filename /*, document*/ ) {
+			let status = this.get('importStatus');
+			let documents = this.get('importedDocuments');
+
+			status.pushObject(`Successfully converted ${filename}`);
+			documents.pop(filename);
+
+			this.set('importStatus', status);
+			this.set('importedDocuments', documents);
+
+			if (documents.length === 0) {
+				this.modalClose("#import-doc-modal");				
 				this.attrs.onRefresh();
-		},
+			}
-
-		onHideStartDocument() {
-			// this.set('showStartDocument', false);
 		}
 	}
 });

gui/app/mixins/modal.js

@@ -17,16 +17,18 @@ import { schedule } from '@ember/runloop';
 // 		element: #new-template-name
 // See https://getbootstrap.com/docs/4.0/components/modal/#via-javascript
 export default Mixin.create({
-	modalOpen(modalId, options) {
+	modalOpen(modalId, options, focusId) {
 		$(modalId).modal('dispose');
 		$(modalId).modal(options);
+
+		if (is.not.undefined(focusId)) {
+			$(focusId).trigger('focus');
+		}
 	},
 
 	modalInputFocus(modalId, inputId) {
-		$(modalId).on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
+		$(modalId).on('shown.bs.modal', function(event) { // eslint-disable-line no-unused-vars
-			schedule('afterRender', () => {
+			$(inputId).trigger('focus');
-				$(inputId).focus();
-			});
 		});
 	},
 

gui/app/pods/customize/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{#toolbar/t-toolbar}}
 	{{#toolbar/t-links}}
 		{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
@@ -9,6 +8,7 @@
 	{{/toolbar/t-actions}}
 {{/toolbar/t-toolbar}}
 
+<div class="container">
 	<div class="row">
 		<div class="col my-5">
 			<ul class="tabnav-control">

gui/app/pods/document/block/template.hbs

@@ -1,7 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions showTools=false showDocumentLink=true}}
 
 {{document/block-editor document=model.document folder=model.folder block=model.block onCancel=(action 'onCancel') onAction=(action 'onAction')}}
-</div>

gui/app/pods/document/index/template.hbs

@@ -1,14 +1,9 @@
 {{toolbar/nav-bar}}
 
-<div id="doc-view" class="container">
-
-	<div class="row">
-		<div class="col-12 mb-5">
 {{toolbar/for-document document=document spaces=folders space=folder permissions=permissions
 	onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')}}
-		</div>
-	</div>
 
+<div id="doc-view" class="container">
 	<div class="row">
 		<div class="col-12">
 			{{document/document-heading document=document permissions=permissions
@@ -58,5 +53,4 @@
 			{{/if}}
 		</div>
 	</div>
-
 </div>

gui/app/pods/document/section/template.hbs

@@ -1,9 +1,13 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions showTools=false showDocumentLink=true}}
 
+<div class="container">
+	<div class="row">
+		<div class="col-12">
 			<div class="mt-5">
 				{{document/document-editor document=model.document folder=model.folder page=model.page meta=model.meta onCancel=(action 'onCancel') onAction=(action 'onAction')}}
 			</div>
 		</div>
+	</div>
+</div>

gui/app/pods/folder/category/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{#toolbar/t-toolbar}}
 	{{#toolbar/t-links}}
 		{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
@@ -9,4 +8,3 @@
 {{/toolbar/t-toolbar}}
 
 {{folder/category-admin folders=model.folders folder=model.folder}}
-</div>

gui/app/pods/folder/index/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{toolbar/for-space
 	spaces=model.folders
 	space=model.folder
@@ -21,4 +20,3 @@
 	rootDocCount=model.rootDocCount
 	categoryFilter=category
 	onRefresh=(action 'onRefresh')}}
-</div>

gui/app/pods/folders/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{toolbar/for-spaces spaces=model onAddSpace=(action 'onAddSpace')}}
+
 {{spaces/space-list spaces=model}}
-</div>

gui/app/pods/profile/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{#toolbar/t-toolbar}}
 	{{#toolbar/t-links}}
 		{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
@@ -9,5 +8,6 @@
 	{{/toolbar/t-actions}}
 {{/toolbar/t-toolbar}}
 
+<div class="container">
 	{{user-profile model=model save=(action 'save')}}
 </div>

gui/app/pods/search/template.hbs

@@ -1,6 +1,5 @@
 {{toolbar/nav-bar}}
 
-<div class="container">
 {{#toolbar/t-toolbar}}
 	{{#toolbar/t-links}}
 		{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
@@ -9,6 +8,7 @@
 	{{/toolbar/t-actions}}
 {{/toolbar/t-toolbar}}
 
+<div class="container">
 	<div class="view-search mt-5">
 		<div class="heading">Search</div>
 		<div class="form-group mt-4">

gui/app/styles/view/import.scss

@@ -0,0 +1,19 @@
+.import-zone {
+	margin: 3rem 1rem;
+
+	> .import-document-button {
+		> .dz-preview, .dz-processing {
+			display: none !important;
+		}
+	}
+
+	> .import-status {
+		margin-top: 30px;
+
+		> p {
+			font-size: 1.1rem;
+			color: $color-off-black;
+		}
+	}
+}
+

gui/app/styles/view/new-doc.scss

@@ -1,87 +0,0 @@
-.new-document-wizard {
-
-	> .import-zone {
-		.import-document-button {
-			width: 100%;
-			padding: 20px;
-			margin: 0 0 30px 0;
-			text-align: center;
-			color: $color-gray;
-			cursor: pointer;
-			font-size: 1.2rem;
-			line-height: 1.7rem;
-			@include ease-in();
-			@extend .no-select;
-			border: 1px solid $color-stroke;
-			background-color: $color-off-white;
-
-			&:hover {
-				border-color: $color-link;
-				color: $color-link;
-			}
-
-			 > .dz-preview,
-			.dz-processing {
-				display: none !important;
-			}
-		}
-	}
-
-	> .fresh-zone {
-		> .template-list {
-			margin: 0;
-			padding: 0;
-
-			.item {
-				@include ease-in();
-				@include border-radius(4px);
-				list-style: none;
-				cursor: pointer;
-				display: block;
-				background-color: $color-blue;
-				margin: 0 20px 20px 0;
-				padding: 12px 0 0 20px;
-				height: 60px;
-				width: 100%;
-				position: relative;
-
-				&:hover {
-					border-color: $color-link;
-
-					> .template-actions {
-						display: block;
-					}
-				}
-
-				> .template-actions {
-					display: none;
-					position: absolute;
-					top: 10px;
-					right: 8px;
-
-					.material-icons {
-						color: $color-stroke;
-						font-size: 1rem;
-					}
-				}
-
-				> .details {
-					> .title {
-						font-size: 1rem;
-						font-weight: normal;
-						color: $color-white;
-						letter-spacing: 0.5px;
-						margin-top: 0;
-					}
-
-					> .desc {
-						color: $color-white;
-						font-size: 0.8rem;
-						margin-top: 5px;
-					}
-				}
-			}
-		}
-	}
-}
-

gui/app/styles/view/views.scss

@@ -1,6 +1,6 @@
 @import "spaces.scss";
 @import "space.scss";
-@import "new-doc.scss";
+@import "import.scss";
 @import "customize.scss";
 @import "onboard.scss";
 @import "customize.scss";

gui/app/templates/components/document/block-editor.hbs

@@ -1,4 +1,10 @@
+<div class="container">
+	<div class="row">
+		<div class="col-12">
 			<div class="block-editor">
 				{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}}
 			</div>
+		</div>
+	</div>
+</div>
 

gui/app/templates/components/folder/category-admin.hbs

@@ -1,3 +1,4 @@
+<div class="container">
 	<div class="row">
 		<div class="col">
 			<div class="space-admin mt-4 mb-5">
@@ -75,3 +76,4 @@
 		<p>Select who can view documents within category</p>
 		{{ui/ui-list-picker items=categoryUsers nameField='fullname' singleSelect=false}}
 	{{/ui/ui-dialog}}
+</div>

gui/app/templates/components/folder/permission-admin.hbs

@@ -4,8 +4,8 @@
 			<div class="modal-header">Space Permissions</div>
 			<div class="modal-body" style="overflow-x: auto;">
 
-				<div class="space-admin">
+				<div class="space-admin table-responsive">
-					<table class="table table-hover table-responsive permission-table">
+					<table class="table table-hover permission-table">
 						<thead>
 							<tr>
 								<th></th>

gui/app/templates/components/folder/space-heading.hbs

@@ -1,3 +1,4 @@
+<div class="container">
 	<div class="row">
 		<div class="col">
 			<div class="mt-4 mb-5">
@@ -26,3 +27,4 @@
 			</div>
 		</div>
 	</div>
+</div>

gui/app/templates/components/folder/space-view.hbs

@@ -1,6 +1,8 @@
 {{folder/space-heading space=space permissions=permissions }}
 
-<div class="clearfix">
+<div class="container">
+	<div class="row">
+		<div class="col-12 clearfix">
 			<div class="float-left mr-5">
 				<div class="view-space">
 					<div class="filter-caption mt-4">{{documents.length}} documents</div>
@@ -38,7 +40,13 @@
 				</div>
 			</div>
 		</div>		
-
+	</div>
+	<div class="row">
+		<div class="col-12">
 			{{folder/documents-list documents=filteredDocs spaces=spaces space=space
 				templates=templates permissions=permissions
 				onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
+		</div>
+	</div>
+</div>
+

gui/app/templates/components/spaces/space-list.hbs

@@ -1,3 +1,4 @@
+<div class="container">
 	<div class="row">
 		<div class="col">
 			<div class="mt-4 mb-5">
@@ -45,4 +46,4 @@
 			</div>
 		</div>
 	</div>
-
+</div>

gui/app/templates/components/toolbar/for-space.hbs

@@ -1,7 +1,9 @@
 {{#toolbar/t-toolbar}}
+	
 	{{#toolbar/t-links}}
 		{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
 	{{/toolbar/t-links}}
+
 	{{#toolbar/t-actions}}
 		{{#if spaceSettings}}
 			<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
@@ -80,27 +82,97 @@
 		{{/if}}
 
 		{{#if permissions.documentAdd}}
-			<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
+			<div class="btn-group" role="group">
-			<div id="add-space-modal" class="modal" tabindex="-1" role="dialog">
+				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ DOCUMENT</button>
+				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDocument">
+					<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Empty document</a>
+					{{#if hasTemplates}}
+						<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
+					{{/if}}
+					<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
+				</div>
+			</div>
+			<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
 				<div class="modal-dialog" role="document">
 					<div class="modal-content">
-						<div class="modal-header">New Document</div>
+						<div class="modal-header">Empty Document</div>
 						<div class="modal-body">
-							<form onsubmit={{action 'onAddSpace'}}>
+							<form onsubmit={{action 'onAddEmptyDoc'}}>
-								{{folder/start-document folder=space templates=templates permissions=permissions
+								<div class="form-group">
-									onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
+									<label for="empty-doc-name">Document Name</label>
+									{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
+								</div>
 							</form>
 						</div>
 						<div class="modal-footer">
 							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-success" onclick={{action 'onAddSpace'}}>Add</button>
+							<button type="button" class="btn btn-success" onclick={{action 'onAddEmptyDoc'}}>Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Document From Template</div>
+						<div class="modal-body">
+							<form onsubmit={{action 'onAddTemplateDoc'}}>
+								<div class="form-group">
+									<label for="template-doc-name">Document Name</label>
+									{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
+								</div>
+								<div class="widget-list-picker">
+									<ul class="options">
+										{{#each templates as |item|}}
+											<li class="option {{if item.selected 'selected'}}" {{action 'onSelectTemplate' item}}>
+												<div class="text text-truncate">
+													{{item.title}}<br/>{{item.description}}
+												</div>
+												{{#if item.selected}}
+													<i class="material-icons">check</i>
+												{{/if}}
+											</li>
+										{{/each}}
+									</ul>
+								</div>
+							</form>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success" onclick={{action 'onAddTemplateDoc'}}>Add</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">Import Documents</div>
+						<div class="modal-body">
+							<div class="import-zone">
+								<button id="import-document-button" type="button" class="btn btn-outline-secondary btn-lg btn-block">
+									<br/>
+									Click to select files or drag-drop files 
+									<br/><br/>
+									<span class="font-italic">.doc, .docx, .md, .markdown</span>
+									<br/><br/>
+								</button>
+								<div class="import-status">
+									{{#each importStatus as |status|}}
+										<p>{{status}}</p>
+									{{/each}}
+								</div>
+							</div>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 						</div>
 					</div>
 				</div>
 			</div>			
 		{{/if}}
-
 	{{/toolbar/t-actions}}
+
 {{/toolbar/t-toolbar}}
 
 {{folder/permission-admin folders=spaces folder=space}}

gui/app/templates/components/toolbar/nav-bar.hbs

@@ -1,4 +1,4 @@
-<div id="nav-bar" class="nav-bar clearfix">
+<div id="nav-bar" class="nav-bar clearfix container-fluid">
 	<div class="row no-gutters">
 		<div class="col col-sm-9">
 			{{#link-to "folders" class='nav-link'}}

gui/app/templates/components/toolbar/t-toolbar.hbs

@@ -1,3 +1,5 @@
-<div class="row">
+<div class="container">
+	<div class="row no-gutters">
 		{{yield}}
 	</div>
+</div>