sticky form headers, category improvements, dropdown improvements

domain/category/endpoint.go

@@ -82,11 +82,27 @@ func (h *Handler) Add(w http.ResponseWriter, r *http.Request) {
 
 	h.Store.Audit.Record(ctx, audit.EventTypeCategoryAdd)
 
-	ctx.Transaction.Commit()
+	perm := pm.Permission{}
+	perm.OrgID = ctx.OrgID
+	perm.Who = "user"
+	perm.WhoID = ctx.UserID
+	perm.Scope = "object"
+	perm.Location = "category"
+	perm.RefID = cat.RefID
+	perm.Action = pm.CategoryView
+
+	err = h.Store.Permission.AddPermission(ctx, perm)
+	if err != nil {
+		ctx.Transaction.Rollback()
+		response.WriteServerError(w, method, err)
+		h.Runtime.Log.Error(method, err)
+		return
+	}
 
 	cat, err = h.Store.Category.Get(ctx, cat.RefID)
 	if err != nil {
 		response.WriteServerError(w, method, err)
+		h.Runtime.Log.Error(method, err)
 		return
 	}
 

domain/space/endpoint.go

@@ -116,7 +116,9 @@ func (h *Handler) Add(w http.ResponseWriter, r *http.Request) {
 	perm.RefID = sp.RefID
 	perm.Action = "" // we send array for actions below
 
-	err = h.Store.Permission.AddPermissions(ctx, perm, permission.SpaceOwner, permission.SpaceManage, permission.SpaceView)
+	err = h.Store.Permission.AddPermissions(ctx, perm, permission.SpaceOwner, permission.SpaceManage, permission.SpaceView,
+		permission.DocumentAdd, permission.DocumentCopy, permission.DocumentDelete, permission.DocumentEdit, permission.DocumentMove,
+		permission.DocumentTemplate)
 	if err != nil {
 		ctx.Transaction.Rollback()
 		response.WriteServerError(w, method, err)

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

@@ -23,6 +23,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, DropdownMixin
 		id: "",
 		name: "",
 	},
+	canShow: Ember.computed('permissions', 'files', function() {
+		return this.get('files.length') > 0 || this.get('permissions.documentEdit');
+	}),
 
 	init() {
 		this._super(...arguments);

gui/app/components/document/space-category.js

@@ -17,6 +17,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
     documentService: Ember.inject.service('document'),
 	categoryService: Ember.inject.service('category'),
 	sessionService: Ember.inject.service('session'),
+	newCategory: '',
 	categories: [],
 	hasCategories: Ember.computed('categories', function() {
 		return this.get('categories').length > 0;

gui/app/components/dropdown-dialog.js

@@ -32,6 +32,7 @@ export default Ember.Component.extend({
 	targetOffset: "10px 0",
 	constrainToWindow: true,
 	constrainToScrollParent: true,
+	cssClass: '',
 	tether: Ember.inject.service(),
 
 	hasSecondButton: Ember.computed('button2', 'color2', function () {

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

@@ -155,25 +155,31 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
 							filtered.pushObject(d);
 						}
 					});
+
 					this.set('spaceSelected', false);
+					this.set('uncategorizedSelected', false);
 					break;
 
 				case 'uncategorized':
-					this.set('uncategorizedSelected', true);
 					allowed = _.pluck(categoryMembers, 'documentId');
 					docs.forEach((d) => {
 						if (!_.contains(allowed, d.get('id'))) {
 							filtered.pushObject(d);
 						}
 					});
+
+					this.set('uncategorizedSelected', true);
+					this.set('spaceSelected', false);
 					break;
 
 				case 'space':
-					this.set('spaceSelected', true);
 					allowed = _.pluck(categoryMembers, 'documentId');
 					docs.forEach((d) => {
 						filtered.pushObject(d);
 					});
+
+					this.set('spaceSelected', true);
+					this.set('uncategorizedSelected', false);
 					break;
 			}
 

gui/app/styles/mixins.scss

@@ -1,3 +1,15 @@
+@mixin sticky()
+{
+	position: -webkit-sticky;
+	position: -moz-sticky;
+	position: -ms-sticky;
+	position: -o-sticky;
+	position: -webkit-sticky;
+	position: sticky;
+	display: flex;
+	z-index: 999;
+	width: 100%;
+}
 @mixin box-shadow($spec)
 {
     -webkit-box-shadow: $spec;

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

@@ -27,6 +27,22 @@
 	}
 }
 
+.document-category-dialog {
+	height: 200px;
+	overflow-y: auto;
+	margin: 0;
+	padding: 0;
+
+	// // Medium devices (tablets, 768px and up)
+	// @media (min-width: 768px) { height: 300px; }
+
+	// // Large devices (desktops, 992px and up)
+	// @media (min-width: 992px) { height: 400px; }
+
+	// // Extra large devices (large desktops, 1200px and up)
+	// @media (min-width: 1200px) { height: 500px; }
+}
+
 .document-tags {
 	margin: 20px 0 0 0;
 

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

@@ -141,7 +141,6 @@
 	}
 }
 
-
 .space-filter {
 	display: inline-block;
 	margin: 0 30px 30px 0;
@@ -176,9 +175,3 @@
 		margin: 0 0 10px 0;
 	}
 }
-
-// .category-filter {
-// 	> .selected {
-// 		// @extend .button-nav;
-// 	}
-// }

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

@@ -3,12 +3,13 @@
 		@include content-container();
 		@include ease-in();
 		@extend .transition-all;
+        margin: 0 0 30px 0;
 	}
 
 	.permissions-table {
-        padding: 0;
+		padding: 0;
-        margin: 0 0 30px 0;
+		margin: 0 auto;
-		width: 100%;
+		width: 90%;
 
 		> .row {
 			padding: 8px 0;

gui/app/styles/widget/widget-input.scss

@@ -203,6 +203,47 @@
 	}
 }
 
+.form-header-sticky {
+	@include sticky();
+	top: 0;
+	padding: 20px 0;
+	background-color: $color-white;
+
+	> .left-zone {
+		float: left;
+		text-align: left;
+		width: 65%;
+		background-color: $color-white;
+
+		> .title {
+			font-size: 1.4rem;
+			font-weight: normal;
+			font-family: $font-semibold;
+			pointer-events: none;
+			font-weight: bold;
+			color: $color-off-black;
+			@extend .no-select;
+		}
+
+		> .tip {
+			color: $color-input;
+			font-size: 1.2rem;
+			margin: 5px 0 30px;
+			padding: 0;
+			font-family: $font-light;
+			text-align: left;
+			@extend .no-select;
+		}
+	}
+
+	> .right-zone {
+		float: right;
+		text-align: right;
+		width: 30%;
+		background-color: $color-white;
+	}
+}
+
 .form-divider {
 	margin-top: 30px;
 }

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

@@ -1,42 +1,44 @@
-<div class="document-attachments non-printable">
+{{#if canShow}}
-	<h2>Attachments</h2>
+	<div class="document-attachments non-printable">
-	{{#if hasAttachments}}
+		<h2>Attachments</h2>
-		<ul class="list">
+		{{#if hasAttachments}}
-			{{#each files key="id" as |a index|}}
+			<ul class="list">
-				<li class="item">
+				{{#each files key="id" as |a index|}}
-					<img class="icon" src="/assets/img/attachments/{{document/file-icon a.extension}}" />
+					<li class="item">
-					<a href="{{ appMeta.endpoint }}/public/attachments/{{ appMeta.orgId }}/{{ a.id }}">
+						<img class="icon" src="/assets/img/attachments/{{document/file-icon a.extension}}" />
-						<span class="file">{{ a.filename }}</span>
+						<a href="{{ appMeta.endpoint }}/public/attachments/{{ appMeta.orgId }}/{{ a.id }}">
-					</a>
+							<span class="file">{{ a.filename }}</span>
-					{{#if permissions.documentEdit}}
+						</a>
-						<div class="action round-button-mono">
+						{{#if permissions.documentEdit}}
-							<i class="material-icons color-gray delete-attachment-{{a.id}}" title="Delete" {{action 'onConfirmDelete' a.id a.filename}}>delete</i>
+							<div class="action round-button-mono">
-						</div>
+								<i class="material-icons color-gray delete-attachment-{{a.id}}" title="Delete" {{action 'onConfirmDelete' a.id a.filename}}>delete</i>
-					{{/if}}
+							</div>
-				</li>
+						{{/if}}
-			{{/each}}
+					</li>
-		</ul>
+				{{/each}}
-	{{/if}}
+			</ul>
-	{{#if permissions.documentEdit}}
+		{{/if}}
-		<div class="upload-document-files">
+		{{#if permissions.documentEdit}}
-			<div class="chip chip-action">
+			<div class="upload-document-files">
-				<span id="upload-document-files" class="chip-text">+ attachment</span>
+				<div class="chip chip-action">
+					<span id="upload-document-files" class="chip-text">+ attachment</span>
+				</div>
+			</div>
+		{{/if}}
+	</div>
+
+	<div class="dropdown-dialog delete-attachment-dialog">
+		<div class="content">
+			<p>Are you sure you want to delete <span class="bold">{{deleteAttachment.name}}?</span></p>
+		</div>
+		<div class="actions">
+			<div class="flat-button" {{action 'onCancel'}}>
+				cancel
+			</div>
+			<div class="flat-button flat-red" {{action 'onDelete'}}>
+				delete
 			</div>
 		</div>
-	{{/if}}
+		<div class="clearfix"></div>
-</div>
-
-<div class="dropdown-dialog delete-attachment-dialog">
-	<div class="content">
-		<p>Are you sure you want to delete <span class="bold">{{deleteAttachment.name}}?</span></p>
 	</div>
-	<div class="actions">
+{{/if}}
-		<div class="flat-button" {{action 'onCancel'}}>
-			cancel
-		</div>
-		<div class="flat-button flat-red" {{action 'onDelete'}}>
-			delete
-		</div>
-	</div>
-	<div class="clearfix"></div>
-</div>

gui/app/templates/components/document/space-category.hbs

@@ -27,12 +27,14 @@
 		<div class="regular-button button-white" id="document-category-button">
 			<i class="material-icons">add</i>
 		</div>
-		{{#dropdown-dialog target="document-category-button" position="bottom left" button="set" color="flat-green" onAction=(action 'onSave')}}
+		{{#dropdown-dialog target="document-category-button" position="bottom right" button="set" color="flat-green" onAction=(action 'onSave')}}
 			<p class="heading">Set document categories</p>
-			{{ui/ui-list-picker items=categories nameField='category'}}
+			<div class="document-category-dialog">
-			{{#if canAddCategory}}
+				{{ui/ui-list-picker items=categories nameField='category'}}
-				{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
+				{{#if canAddCategory}}
-			{{/if}}
+					{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
+				{{/if}}
+			</div>
 		{{/dropdown-dialog}}
 	{{/if}}
 </div>

gui/app/templates/components/dropdown-dialog.hbs

@@ -1,4 +1,4 @@
-<div id="{{contentId}}" class="dropdown-dialog">
+<div id="{{contentId}}" class="dropdown-dialog {{cssClass}}">
 	<form class="form" {{action 'onAction' on="submit"}}>
 		<div class="content">
 	        {{yield}}

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

@@ -1,9 +1,15 @@
 <div class="space-settings">
 	<div class="panel">
-		<div class="form-header">
+		<div class="form-header-sticky">
-			<div class="title">Permissions</div>
+			<div class="left-zone">
-			<div class="tip">Define who can do what in this space</div>
+				<div class="title">Permissions</div>
+				<div class="tip">Define who can do what in this space</div>
+			</div>
+			<div class="right-zone">
+				<div class="regular-button button-blue" {{action 'setPermissions'}}>GRANT</div>
+			</div>
 		</div>
+		<div class="clearfix" />
 		<div class="input-control">
 			<div class="permissions-table">
 				{{#each permissions as |permission|}}
@@ -40,6 +46,5 @@
 				{{/each}}
 			</div>
 		</div>
-		<div class="regular-button button-blue" {{action 'setPermissions'}}>GRANT</div>
 	</div>
 </div>

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

@@ -3,7 +3,7 @@
 		<div class="space-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
 			<h1 class="space-name">{{folder.name}}</h1>
 			<div class="space-summary">
-				This space contains {{documents.length}} {{if (eq rootDocCount.length 1) 'document' 'documents'}}
+				This space contains {{documents.length}} {{if (eq documents.length 1) 'document' 'documents'}}
 				{{if (eq categories.length 1) (concat 'and ' categories.length ' category')}}
 				{{if (gt categories.length 1) (concat 'and ' categories.length ' categories')}}
 			</div>

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

@@ -19,7 +19,7 @@
 		{{#if (gt categories.length 0)}}
 			<div class="space-filter">
 				<div class="caption">Space</div>
-				<div class="regular-button button-nav {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' folder.id}}>
+				<div class="regular-button {{if spaceSelected 'button-blue' 'button-nav'}}" {{action 'onDocumentFilter' 'space' folder.id}}>
 					<div class="name">all ({{documents.length}})</div>
 				</div>
 			</div>
@@ -27,13 +27,13 @@
 			<div class="category-filter">
 				<div class="caption">Category</div>
 				{{#if (gt rootDocCount 0)}}
-					<div class="regular-button button-blue {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' folder.id}}>
+					<div class="regular-button {{if uncategorizedSelected 'button-blue' 'button-gray'}}" {{action 'onDocumentFilter' 'uncategorized' folder.id}}>
 						<div class="name">uncategorized ({{rootDocCount}})</div>
 					</div>
 					<div class="button-gap"/>
 				{{/if}}
 				{{#each categories as |cat index|}}
-					<div class="regular-button button-blue {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
+					<div class="regular-button {{if cat.selected 'button-blue' 'button-gray'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
 						{{cat.category}} ({{cat.docCount}})
 					</div>
 					<div class="button-gap"/>