improved empty state and dropdown positions

README.md

@@ -42,7 +42,7 @@ Integrations for embedding SaaS data within documents.
 
 ## Latest version
 
-v1.54.0
+v1.54.1
 
 ## OS support
 

domain/template/endpoint.go

@@ -262,7 +262,7 @@ func (h *Handler) Use(w http.ResponseWriter, r *http.Request) {
 	var d = doc.Document{}
 	d.Title = docTitle
 	d.Location = fmt.Sprintf("template-%s", templateID)
-	d.Excerpt = "A new document"
+	d.Excerpt = "Add detailed description for document..."
 	d.Slug = stringutil.MakeSlug(d.Title)
 	d.Tags = ""
 	d.LabelID = folderID

edition/community.go

@@ -42,7 +42,7 @@ func main() {
 	rt.Product = env.ProdInfo{}
 	rt.Product.Major = "1"
 	rt.Product.Minor = "54"
-	rt.Product.Patch = "0"
+	rt.Product.Patch = "1"
 	rt.Product.Version = fmt.Sprintf("%s.%s.%s", rt.Product.Major, rt.Product.Minor, rt.Product.Patch)
 	rt.Product.Edition = "Community"
 	rt.Product.Title = fmt.Sprintf("%s Edition", rt.Product.Edition)

gui/app/components/customize/user-admin.js

@@ -114,19 +114,14 @@ export default Ember.Component.extend(AuthProvider, DropdownMixin, {
 
 			this.closeDropdown();
 
-			let drop = new Drop({
+			let dropOptions = Object.assign(this.get('dropDefaults'), {
 				target: $(".edit-button-" + id)[0],
 				content: $(".edit-user-dialog")[0],
 				classes: 'drop-theme-basic',
 				position: "bottom right",
-				openOn: "always",
+				remove: false});
-				tetherOptions: {
-					offset: "5px 0",
-					targetOffset: "10px 0"
-				},
-				remove: false
-			});
 
+			let drop = new Drop(dropOptions);
 			self.set('dropdown', drop);
 
 			drop.on('open', function () {
@@ -141,19 +136,14 @@ export default Ember.Component.extend(AuthProvider, DropdownMixin, {
 
 			this.closeDropdown();
 
-			let drop = new Drop({
+			let dropOptions = Object.assign(this.get('dropDefaults'), {
 				target: $(".delete-button-" + id)[0],
 				content: $(".delete-user-dialog")[0],
 				classes: 'drop-theme-basic',
 				position: "bottom right",
-				openOn: "always",
+				remove: false});
-				tetherOptions: {
-					offset: "5px 0",
-					targetOffset: "10px 0"
-				},
-				remove: false
-			});
 
+			let drop = new Drop(dropOptions);
 			this.set('dropdown', drop);
 		},
 

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

@@ -12,11 +12,12 @@
 import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
+import DropdownMixin from '../../mixins/dropdown';
 
-export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
+export default Ember.Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	documentService: Ember.inject.service('document'),
 	appMeta: Ember.inject.service(),
-	drop: null,
+	dropdown: null,
 	hasAttachments: Ember.computed.notEmpty('files'),
 	deleteAttachment: {
 		id: "",
@@ -78,11 +79,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 	willDestroyElement() {
 		this._super(...arguments);
-
+		this.destroyDropdown();
-		let drop = this.get('drop');
-		if (is.not.null(drop)) {
-			drop.destroy();
-		}
 	},
 
 	getAttachments() {
@@ -100,25 +97,21 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 			$(".delete-attachment-dialog").css("display", "block");
 
-			let drop = new Drop({
+			this.closeDropdown();
+
+			let dropOptions = Object.assign(this.get('dropDefaults'), {
 				target: $(".delete-attachment-" + id)[0],
 				content: $(".delete-attachment-dialog")[0],
 				classes: 'drop-theme-basic',
 				position: "bottom right",
-				openOn: "always",
+				remove: false});
-				tetherOptions: {
-					offset: "5px 0",
-					targetOffset: "10px 0"
-				},
-				remove: false
-			});
 
-			this.set('drop', drop);
+			let drop = new Drop(dropOptions);
+			this.set('dropdown', drop);
 		},
 
 		onCancel() {
-			let drop = this.get('drop');
+			this.closeDropdown();
-			drop.close();
 
 			this.set('deleteAttachment', {
 				id: "",
@@ -127,9 +120,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		},
 
 		onDelete() {
+			this.closeDropdown();
+
 			let attachment = this.get('deleteAttachment');
-			let drop = this.get('drop');
-			drop.close();
 
 			this.showNotification(`Deleted ${name}`);
 

gui/app/components/dropdown-dialog.js

@@ -62,7 +62,13 @@ export default Ember.Component.extend({
 			tetherOptions: {
 				offset: self.offset,
 				targetOffset: self.targetOffset,
-				targetModifier: 'scroll-handle'
+				// targetModifier: 'scroll-handle',
+				constraints: [
+					{
+						to: 'scrollParent',
+						attachment: 'together'
+					}
+				],
 			},
 			remove: true
 		});

gui/app/components/folder/category-admin.js

@@ -160,19 +160,14 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, DropdownMixin
 
 				$(".category-access-dialog").css("display", "block");
 
-				let drop = new Drop({
+				let dropOptions = Object.assign(this.get('dropDefaults'), {
 					target: $("#category-access-button-" + catId)[0],
 					content: $(".category-access-dialog")[0],
 					classes: 'drop-theme-basic',
 					position: "bottom right",
-					openOn: "always",
+					remove: false});
-					tetherOptions: {
-						offset: "5px 0",
-						targetOffset: "10px 0"
-					},
-					remove: false
-				});
 
+				let drop = new Drop(dropOptions);
 				this.set('dropdown', drop);
 			});
 		},

gui/app/components/folder/documents-list.js

@@ -12,6 +12,13 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+	showAdd: Ember.computed('permissions', 'documents', function() {
+		return this.get('documents.length') === 0 && this.get('permissions.documentAdd');
+	}),
+	showLockout: Ember.computed('permissions', 'documents', function() {
+		return this.get('documents.length') === 0 && !this.get('permissions.documentAdd');
+	}),
+
     actions: {
         selectDocument(documentId) {
             let doc = this.get('documents').findBy('id', documentId);

gui/app/components/folder/permission-admin.js

@@ -112,6 +112,7 @@ export default Ember.Component.extend(NotifierMixin, {
 
 			this.get('folderService').savePermissions(folder.get('id'), payload).then(() => {
 				this.showNotification('Saved permissions');
+				this.get('router').transitionTo('folder', folder.get('id'), folder.get('slug'));
 			});
 
 			if (is.not.undefined(hasEveryone)) {

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

@@ -34,6 +34,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 		newName: ''
 	},
 	deleteSpaceName: '',
+	spaceSettings: Ember.computed('permissions', function() {
+		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
+	}),
 
 	didReceiveAttrs() {
 		this._super(...arguments);

gui/app/mixins/dropdown.js

@@ -26,5 +26,27 @@ export default Ember.Mixin.create({
 		if (is.not.null(drop) && is.not.null(drop.drop)) {
 			drop.destroy();
 		}
+	},
+
+	dropDefaults: {
+		// position: "bottom right",
+		openOn: "always",
+		tetherOptions: {
+			offset: "5px 0",
+			targetOffset: "10px 0",
+			// targetModifier: 'visible',
+			// attachment: 'middle right',
+			// targetAttachment: 'middle right',
+			constraints: [
+				{
+					to: 'scrollParent',
+					attachment: 'together'
+				}
+			],
+			// optimizations: {
+			// 	moveElement: false,
+			// 	gpu: false
+			// },
+		},
 	}
 });

gui/app/pods/customize/folders/controller.js

@@ -33,6 +33,7 @@ export default Ember.Controller.extend(NotifierMixin, DropdownMixin, {
 
 
 	willDestroyElement() {
+		this._super(...arguments);
 		this.destroyDropdown();
 	},
 
@@ -43,19 +44,16 @@ export default Ember.Controller.extend(NotifierMixin, DropdownMixin, {
 			$(".delete-space-dialog").css("display", "block");
 			$('#delete-space-name').removeClass('error');
 
-			let drop = new Drop({
+			this.closeDropdown();
+
+			let dropOptions = Object.assign(this.get('dropDefaults'), {
 				target: $("#delete-space-button-" + spaceId)[0],
 				content: $(".delete-space-dialog")[0],
 				classes: 'drop-theme-basic',
 				position: "bottom right",
-				openOn: "always",
+				remove: false});
-				tetherOptions: {
-					offset: "5px 0",
-					targetOffset: "10px 0"
-				},
-				remove: false
-			});
 
+			let drop = new Drop(dropOptions);
 			this.set('dropdown', drop);
 		},
 

gui/app/styles/view/common.scss

@@ -1,15 +1,24 @@
-.explainer {
+.empty-state {
 	text-align: center;
+	margin: 0 auto;
+	margin-top: 50px;
+	max-width: 500px;
+	padding: 30px;
+	@include border-radius(5px);
+	background-color: $color-off-white;
+	display: block;
+	opacity: 0.8;
 
-	> .empty-state {
+	> p {
-		margin: 30px 0;
+		font-size: 1.5rem;
-		font-size: 1.2rem;
+		line-height: 2.5rem;
 		color: $color-gray;
+		display: block;
 	}
-	> .normal-state {
+
-		margin: 10px;
+	> .material-icons {
-		font-size: 1.2rem;
+		font-size: 5rem;
-		color: $color-gray;
+		color: $color-stroke;
 	}
 }
 

gui/app/styles/view/document/space-category-tag.scss

@@ -40,6 +40,7 @@
 
 	> .regular-button {
 		margin-right: 10px;
+		text-transform: lowercase;
 	}
 
 	> .none {

gui/app/styles/view/folder/document.scss

@@ -153,6 +153,10 @@
 		font-size: 1.0rem;
 		margin: 0 0 10px 0;
 	}
+
+	> .regular-button {
+		margin-bottom: 10px;
+	}
 }
 
 .category-filter {
@@ -161,6 +165,7 @@
 
 	> .regular-button {
 		margin-right: 10px;
+		margin-bottom: 10px;
 	}
 
 	> .caption {

gui/app/styles/view/folder/settings.scss

@@ -22,10 +22,16 @@
 			> .permission-roles-cell {
 				margin: 15px 0 20px 40px;
 
-				> .role-category {
+				> .role-container {
-					color: $color-gray;
+					white-space: nowrap;
-					font-weight: bold;
 					display: inline-block;
+					margin-bottom: 10px;
+
+					> .role-category {
+						color: $color-gray;
+						font-weight: bold;
+						display: inline-block;
+					}
 				}
 
 				> label {

gui/app/templates/components/document/document-attachments.hbs

@@ -1,4 +1,4 @@
-<div class="document-attachments">
+<div class="document-attachments non-printable">
 	<h2>Attachments</h2>
 	{{#if hasAttachments}}
 		<ul class="list">

gui/app/templates/components/empty-state.hbs

@@ -0,0 +1,4 @@
+<div class="empty-state">
+	<i class="material-icons">directions</i>
+	<p>{{message}}</p>
+</div>

gui/app/templates/components/folder/documents-list.hbs

@@ -23,3 +23,11 @@
 		{{/each}}
 	</div>
 {{/if}}
+
+{{#if showAdd}}
+	{{empty-state message="You can create new documents via the green + button"}}
+{{/if}}
+
+{{#if showLockout}}
+	{{empty-state message="It looks like space permissions are preventing you from viewing and creating documents"}}
+{{/if}}

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

@@ -8,29 +8,33 @@
 			<div class="permissions-table">
 				{{#each permissions as |permission|}}
 					<div class="row">
-						<div class="permission-name-cell">{{permission.fullname}}</div>
+						<div class="permission-name-cell">{{permission.fullname}} {{if (eq permission.userId session.user.id) '(you)'}}</div>
 						<div class="permission-roles-cell">
-							<span class="role-category">Space:&nbsp;</span>
+							<div class="role-container">
-							{{input type="checkbox" id=(concat 'space-role-view-' permission.userId) checked=permission.spaceView}}
+								<span class="role-category">Space:&nbsp;</span>
-							<label for="space-role-view-{{permission.userId}}">view</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'space-role-view-' permission.userId) checked=permission.spaceView}}
-							{{input type="checkbox" id=(concat 'space-role-manage-' permission.userId) checked=permission.spaceManage}}
+								<label for="space-role-view-{{permission.userId}}">view</label>&nbsp;&nbsp;
-							<label for="space-role-manage-{{permission.userId}}">manage</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'space-role-manage-' permission.userId) checked=permission.spaceManage}}
-							{{input type="checkbox" id=(concat 'space-role-owner-' permission.userId) checked=permission.spaceOwner}}
+								<label for="space-role-manage-{{permission.userId}}">manage</label>&nbsp;&nbsp;
-							<label for="space-role-owner-{{permission.userId}}">owner</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'space-role-owner-' permission.userId) checked=permission.spaceOwner}}
+								<label for="space-role-owner-{{permission.userId}}">owner</label>&nbsp;&nbsp;
+							</div>
 							&nbsp;&nbsp;&nbsp;&nbsp;
-							<span class="role-category">Document:&nbsp;</span>
+							<div class="role-container">
-							{{input type="checkbox" id=(concat 'doc-role-add-' permission.userId) checked=permission.documentAdd}}
+								<span class="role-category">Document:&nbsp;</span>
-							<label for="doc-role-add-{{permission.userId}}">create</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-add-' permission.userId) checked=permission.documentAdd}}
-							{{input type="checkbox" id=(concat 'doc-role-edit-' permission.userId) checked=permission.documentEdit}}
+								<label for="doc-role-add-{{permission.userId}}">create</label>&nbsp;&nbsp;
-							<label for="doc-role-edit-{{permission.userId}}">edit</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-edit-' permission.userId) checked=permission.documentEdit}}
-							{{input type="checkbox" id=(concat 'doc-role-delete-' permission.userId) checked=permission.documentDelete}}
+								<label for="doc-role-edit-{{permission.userId}}">edit</label>&nbsp;&nbsp;
-							<label for="doc-role-delete-{{permission.userId}}">delete</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-delete-' permission.userId) checked=permission.documentDelete}}
-							{{input type="checkbox" id=(concat 'doc-role-move-' permission.userId) checked=permission.documentMove}}
+								<label for="doc-role-delete-{{permission.userId}}">delete</label>&nbsp;&nbsp;
-							<label for="doc-role-move-{{permission.userId}}">move</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-move-' permission.userId) checked=permission.documentMove}}
-							{{input type="checkbox" id=(concat 'doc-role-copy-' permission.userId) checked=permission.documentCopy}}
+								<label for="doc-role-move-{{permission.userId}}">move</label>&nbsp;&nbsp;
-							<label for="doc-role-copy-{{permission.userId}}">copy</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-copy-' permission.userId) checked=permission.documentCopy}}
-							{{input type="checkbox" id=(concat 'doc-role-template-' permission.userId) checked=permission.documentTemplate}}
+								<label for="doc-role-copy-{{permission.userId}}">copy</label>&nbsp;&nbsp;
-							<label for="doc-role-template-{{permission.userId}}">templates</label>&nbsp;&nbsp;
+								{{input type="checkbox" id=(concat 'doc-role-template-' permission.userId) checked=permission.documentTemplate}}
+								<label for="doc-role-template-{{permission.userId}}">templates</label>&nbsp;&nbsp;
+							</div>
 						</div>
 					</div>
 				{{/each}}

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

@@ -1,4 +1,4 @@
-<div class="pull-left width-80">
+<div class="pull-left width-60">
 	{{#unless editMode}}
 		<div class="space-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
 			<h1 class="space-name">{{folder.name}}</h1>

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

@@ -58,7 +58,7 @@
 			</div>
 		{{/if}}
 
-		{{#if permissions.spaceManage}}
+		{{#if spaceSettings}}
 			<div class="button-gap"></div>
 			{{#link-to 'folder.settings' folder.id folder.slug}}{{model.document.name}}
 				<div class="round-button button-gray" id="space-settings-button" data-tooltip="Manage permissions" data-tooltip-position="top center">

gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "documize",
-  "version": "1.54.0",
+  "version": "1.54.1",
   "description": "The Document IDE",
   "private": true,
   "repository": "",

meta.json

@@ -1,16 +1,16 @@
 {
     "community":
     {
-        "version": "1.54.0",
+        "version": "1.54.1",
         "major": 1,
         "minor": 54,
-        "patch": 0
+        "patch": 1
     },
     "enterprise":
     {
-        "version": "1.56.0",
+        "version": "1.56.1",
         "major": 1,
         "minor": 56,
-        "patch": 0
+        "patch": 1
     }
 }