Applied new layout to space admin screens

Applied the new master layout and UI controls to the following space admin screens:

1. General options.
2. Deletion.
3. Permissions.
4. Content blocks.

Co-Authored-By: Harvey Kandola <harvey@documize.com>

gui/app/components/folder/settings-general.js

@@ -63,13 +63,13 @@ export default Component.extend(AuthMixin, Notifier, {
 			this.set('spaceType', t);
 		},
 
-		onSetLikes(l) {
+		// onSetLikes(l) {
-			this.set('allowLikes', l);
+		// 	this.set('allowLikes', l);
 
-			schedule('afterRender', () => {
+		// 	schedule('afterRender', () => {
-				if (l) this.$('#space-likes-prompt').focus();
+		// 		if (l) this.$('#space-likes-prompt').focus();
-			});
+		// 	});
-		},
+		// },
 
 		onSave() {
 			if (!this.get('isSpaceAdmin')) return;

gui/app/components/folder/settings-permissions.js

@@ -30,6 +30,8 @@ export default Component.extend(Notifier, Modals, {
 	searchText: '',
 	inviteEmail: '',
 	inviteMessage: '',
+	showSpacePermExplain: false,
+	showDocumentPermExplain: false,
 
 	isSpaceAdmin: computed('permissions', function() {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
@@ -146,6 +148,26 @@ export default Component.extend(Notifier, Modals, {
 	},
 
 	actions: {
+		toggleSpacePerms() {
+			this.set('showSpacePermExplain', !this.get('showSpacePermExplain'));
+
+			if (this.showSpacePermExplain) {
+				this.$(".space-perms").show();
+			} else {
+				this.$(".space-perms").hide();
+			}
+		},
+
+		toggleDocumentPerms() {
+			this.set('showDocumentPermExplain', !this.get('showDocumentPermExplain'));
+
+			if (this.showDocumentPermExplain) {
+				this.$(".document-perms").show();
+			} else {
+				this.$(".document-perms").hide();
+			}
+		},
+
 		onShowInviteModal() {
 			this.modalOpen("#space-invite-user-modal", {"show": true}, '#space-invite-email');
 		},

gui/app/components/ui/ui-toolbar-icon.js

@@ -39,10 +39,11 @@ export default Component.extend({
 			this.onClick(e);
 			return;
 		}
+
 		if (is.not.undefined(this.linkTo)) {
 			// TODO: pass in linkModel, linkOptions
 			// https://emberjs.com/api/ember/3.5/classes/RouterService/methods/transitionTo?anchor=transitionTo
-			this.router.transitionTo(this.linkTo);
+			this.router.transitionTo(this.get('linkTo'));
 		}
 	}
 });

gui/app/constants/constants.js

@@ -208,6 +208,7 @@ let constants = EmberObject.extend({
 		ArrowSmallRight: 'dicon-small-right',
 		Attachment: 'dicon-attachment',
 		BarChart: 'dicon-chart-bar-2',
+		Blocks: 'dicon-menu-6',
 		Bookmark: 'dicon-bookmark',
 		BookmarkAdd: 'dicon-bookmark-add',
 		BookmarkDelete: 'dicon-bookmark-delete',
@@ -260,6 +261,7 @@ let constants = EmberObject.extend({
 		Delete: 'Delete',
 		Export: 'Export',
 		Insert: 'Insert',
+		Invite: 'Invite',
 		Join: 'Join',
 		Leave: 'Leave',
 		Next: 'Next',

gui/app/pods/customize/template.hbs

@@ -2,7 +2,7 @@
 	{{ui/ui-spacer size=300}}
 
 	<div class="section">
-		<div class="title">filter</div>
+		<div class="title">administration</div>
 		<div class="list">
 			{{#link-to "customize.general" activeClass="selected" class="item" tagName="div"}}
 				<i class={{concat "dicon " constants.Icon.Settings}} />

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

@@ -1,4 +1,4 @@
-{{#layout/master-sidebar selectedItem="spaces"}}
+{{#layout/master-sidebar}}
 	{{folder/space-sidebar
 		spaces=model.folders
 		space=model.folder

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

@@ -1,18 +1,49 @@
-{{#layout/top-bar}}
+{{#layout/master-sidebar}}
-	<li class="item">
+	{{ui/ui-spacer size=300}}
-		{{#link-to "folder.index" model.folder.id model.folder.slug class="link"}}
-			{{model.folder.name}}
-		{{/link-to}}
-	</li>
-	<li class="item">
-		{{#link-to "folder.settings" model.folder.id model.folder.slug class="link selected"}}
-			Settings
-		{{/link-to}}
-	</li>
-{{/layout/top-bar}}
 
-{{#layout/middle-zone}}
+	{{#link-to "folder.index"}}
-	{{#layout/middle-zone-content}}
+		{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Back to space"}}
+	{{/link-to}}
+
+	{{ui/ui-spacer size=400}}
+
+	<div class="section">
+		<div class="title">space management</div>
+		<div class="list">
+			<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
+				<i class={{concat "dicon " constants.Icon.Settings}} />
+				<div class="name">Options</div>
+			</div>
+			<div class="item {{if (eq tab "categories") "selected"}}" {{action "onTab" "categories"}}>
+				<i class={{concat "dicon " constants.Icon.Category}} />
+				<div class="name">Categories</div>
+			</div>
+			<div class="item {{if (eq tab "permissions") "selected"}}" {{action "onTab" "permissions"}}>
+				<i class={{concat "dicon " constants.Icon.Locked}} />
+				<div class="name">Permissions</div>
+			</div>
+			<div class="item {{if (eq tab "blocks") "selected"}}" {{action "onTab" "blocks"}}>
+				<i class={{concat "dicon " constants.Icon.Blocks}} />
+				<div class="name">Content Blocks</div>
+			</div>
+			{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+				<div class="item {{if (eq tab "archived") "selected"}}" {{action "onTab" "archived"}}>
+					<i class={{concat "dicon " constants.Icon.ListBullet}} />
+					<div class="name">Archived Content</div>
+				</div>
+				<li class="tab tab-vertical {{if (eq tab "archived") "selected"}}" {{action "onTab" "archived"}}>Archived</li>
+			{{/if}}
+			{{#if model.permissions.spaceOwner}}
+				<div class="item {{if (eq tab "deletion") "selected"}}" {{action "onTab" "deletion"}}>
+					<i class={{concat "dicon " constants.Icon.Delete}} />
+					<div class="name">Deletion</div>
+				</div>
+			{{/if}}
+		</div>
+	</div>
+{{/layout/master-sidebar}}
+
+{{#layout/master-content}}
 	{{#if (eq tab "general")}}
 		{{folder/settings-general permissions=model.permissions space=model.folder}}
 	{{/if}}
@@ -42,38 +73,4 @@
 	{{#if (eq tab "deletion")}}
 		{{folder/settings-delete permissions=model.permissions spaces=model.folder space=model.folder}}
 	{{/if}}
-	{{/layout/middle-zone-content}}
+{{/layout/master-content}}
-
-	{{#layout/middle-zone-sidebar}}
-		<div id="sidebar" class="sidebar">
-			<ul class="tabnav-control tabnav-control-centered w-75">
-				<li class="tab tab-vertical {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>General</li>
-				<li class="tab tab-vertical {{if (eq tab "permissions") "selected"}}" {{action "onTab" "permissions"}}>User Permissions</li>
-			</ul>
-
-			<div class="mt-4" />
-			<ul class="tabnav-control tabnav-control-centered w-75">
-				<li class="tab tab-vertical {{if (eq tab "categories") "selected"}}" {{action "onTab" "categories"}}>Categories</li>
-			</ul>
-
-			<div class="mt-4" />
-			<ul class="tabnav-control tabnav-control-centered w-75">
-				<li class="tab tab-vertical {{if (eq tab "templates") "selected"}}" {{action "onTab" "templates"}}>Document Templates</li>
-				<li class="tab tab-vertical {{if (eq tab "blocks") "selected"}}" {{action "onTab" "blocks"}}>Content Blocks</li>
-				{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
-					<li class="tab tab-vertical {{if (eq tab "archived") "selected"}}" {{action "onTab" "archived"}}>Archived</li>
-				{{/if}}
-			</ul>
-
-			{{#if model.permissions.spaceOwner}}
-				<div class="mt-4" />
-				<ul class="tabnav-control tabnav-control-centered w-75">
-					<li class="tab tab-vertical {{if (eq tab "deletion") "selected"}}" {{action "onTab" "deletion"}}>Delete</li>
-				</ul>
-			{{/if}}
-		</div>
-	{{/layout/middle-zone-sidebar}}
-{{/layout/middle-zone}}
-
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}

gui/app/styles/core/view/customize.scss

@@ -1,5 +1,4 @@
 .view-customize {
-
 	> .explain-user-perms {
 		padding: 15px 25px;
 		background-color: map-get($yellow-shades, 100);

gui/app/styles/core/view/space.scss

@@ -138,15 +138,31 @@
 }
 
 .space-admin {
-	> .title {
+	> .blocks {
-		font-size: 1.5rem;
+		margin: 0;
-		font-weight: bold;
+		padding: 0;
+
+		> .block {
+			@include card();
+			list-style-type: none;
+			margin: 0 0 2rem 0;
+			padding: 15px 20px;
+			width: 100%;
+			position: relative;
+
+			> .name {
+				font-size: 1.3rem;
+				font-weight: 700;
 				color: map-get($gray-shades, 800);
 			}
 
-	> .sub-title {
+			> .desc {
 				font-size: 1.1rem;
-		color: map-get($gray-shades, 600);
+				font-weight: 400;
+				margin: 0.4rem 0 1rem 0;
+				color: $color-black-light-3;
+			}
+		}
 	}
 
 	> .permission-table {

gui/app/templates/components/customize/user-admin.hbs

@@ -1,5 +1,3 @@
-<div class="row">
-	<div class="col">
 <div class="view-customize">
 	{{#if isAuthProviderDocumize}}
 		{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Person label=constants.Label.Add onClick=(action "onOpenUserModal")}}
@@ -44,5 +42,3 @@
 		</div>
 	{{/if}}
 </div>
-	</div>
-</div>

gui/app/templates/components/folder/settings-blocks.hbs

@@ -1,15 +1,22 @@
-<div class="content-zone">
+{{layout/logo-heading
-	<div class="explainer-header explainer-gap">Content blocks provide re-usable content that can be inserted into any document</div>
+	title="Content Blocks"
+	desc="Content blocks provide re-usable content that can be inserted into any document"
+	icon=constants.Icon.Blocks}}
+
+<div class="space-admin">
+	<div class="blocks">
 		{{#each blocks as |block|}}
-		<div class="mb-5">
+			<div class="block">
-			<h1>{{block.title}}</h1>
+				<div class="name">{{block.title}}</div>
-			<p>{{block.excerpt}}</p>
+				<div class="desc">{{block.excerpt}}</div>
-			<button type="button" class="btn btn-outline-success" onclick={{action "onEdit" block.id}}>Edit</button>
+				{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
-			<div class="button-gap" />
+					{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray tooltip="Edit block" onClick=(action "onEdit" block.id)}}
-			<button type="button" class="btn btn-outline-danger" onclick={{action "onShowDeleteDialog" block.id}}>Delete</button>
+					{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete block" onClick=(action "onShowDeleteDialog" block.id)}}
+				{{/ui/ui-toolbar}}
 			</div>
 		{{/each}}
 	</div>
+</div>
 
 {{#if isSpaceAdmin}}
     {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDeleteBlock")}}

gui/app/templates/components/folder/settings-delete.hbs

@@ -1,5 +1,8 @@
-<div class="content-zone">
+{{layout/logo-heading
-	<div class="explainer-header explainer-gap">Delete this space and all documents</div>
+	title="Delete Space"
+	desc="Proceed with caution as there is no undo"
+	icon=constants.Icon.Delete}}
+
 <form>
 	<div class="form-group">
 		<label>Please type space name to confirm</label>
@@ -7,5 +10,10 @@
 		<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
 	</div>
 </form>
-	<button type="button" class="btn btn-danger mt-3" onclick={{action "onDelete"}}>Delete Space</button>
+
-</div>
+{{ui/ui-button
+	color=constants.Color.Red
+	icon=constants.Icon.Delete
+	label=constants.Label.Delete
+	light=true
+	onClick=(action 'onDelete')}}

gui/app/templates/components/folder/settings-general.hbs

@@ -1,5 +1,8 @@
-<div class="content-zone">
+{{layout/logo-heading
-	<div class="explainer-header explainer-gap">General options for this space</div>
+	title="General Options"
+	desc="Set options to control how people interact with this space"
+	icon=constants.Icon.Settings}}
+
 <form>
 	<div class="form-group">
 		<label>Space Name</label>
@@ -9,23 +12,25 @@
 	<div class="form-group">
 		<label>Space Type</label>
 		{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
-			<small class="form-text text-muted">Who can see this space?</small>
 	</div>
 
 	<div class="form-group">
-			<label>Content Liking</label>
+		<label>Enable Like/Dislike Feedback</label>
+		{{x-toggle value=allowLikes size="medium" theme="light" onToggle=(action (mut allowLikes))}}
+	</div>
+
 	{{#if allowLikes}}
+		<div class="form-group">
+			<label>Feedback Prompt</label>
 				{{input type="text" id="space-likes-prompt" class="form-control" placeholder="Enter prompt asking for user feedback" value=likes}}
 				<small class="form-text text-muted">Specify the prompt, e.g. Did this help you? Was this helpful? Did you find what you needed?</small>
-				<div class="mt-4">
-					<button type="button" class="btn btn-outline-danger" onclick={{action "onSetLikes" false}}>Do not allow users to like content</button>
-				</div>
-			{{else}}
-				<div>
-					<button type="button" class="btn btn-outline-success" onclick={{action "onSetLikes" true}}>Allow users to like content</button>
 		</div>
 	{{/if}}
-		</div>
 </form>
-	<button type="button" class="btn btn-success mt-3" onclick={{action "onSave"}}>Save</button>
+
-</div>
+{{ui/ui-button
+	color=constants.Color.Green
+	icon=constants.Icon.Settings
+	label=constants.Label.Save
+	light=true
+	onClick=(action 'onSave')}}

gui/app/templates/components/folder/settings-permissions.hbs

@@ -1,17 +1,76 @@
-<div class="content-zone">
+{{layout/logo-heading
-	<div class="explainer-header">Who can see this space and perform actions</div>
+	title="Space Permissions"
+	desc="Assign permissions to users or groups and invite new users to this space"
+	icon=constants.Icon.Locked}}
+
+<div class="view-customize">
+	<div class="explain-user-perms">
+		<div class="title" {{action "toggleSpacePerms"}}>
+			Space Permissions Explained
+			{{#if showSpacePermExplain}}
+				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
+			{{else}}
+				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
+			{{/if}}
+		</div>
+		<div class="perms space-perms">
+			<div class="perm-name">View</div>
+			<div class="perm-desc">See content within this space</div>
+			<div class="perm-name">Manage</div>
+			<div class="perm-desc">Manage all aspects of space except deletion</div>
+			<div class="perm-name">Owner</div>
+			<div class="perm-desc">Manage and delete space</div>
 		</div>
 
-<div class="container-fluid my-3">
+		{{ui/ui-spacer size=200}}
-	<div class="row justify-content-center">
+
-		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowAddModal"}}>Add existing users</button>
+		<div class="title" {{action "toggleDocumentPerms"}}>
-		&nbsp;&nbsp;
+			Document Permissions Explained
-		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowInviteModal"}}>Invite new users</button>
+			{{#if showDocumentPermExplain}}
+				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
+			{{else}}
+				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
+			{{/if}}
+		</div>
+		<div class="perms document-perms">
+			<div class="perm-name">Create</div>
+			<div class="perm-desc">Can create new documents in space</div>
+			<div class="perm-name">Edit</div>
+			<div class="perm-desc">Can change document contents</div>
+			<div class="perm-name">Delete</div>
+			<div class="perm-desc">Can remove documents from space</div>
+			<div class="perm-name">Move</div>
+			<div class="perm-desc">Can move documents from this space to another space</div>
+			<div class="perm-name">Copy</div>
+			<div class="perm-desc">Can duplicate documents</div>
+			<div class="perm-name">Templates</div>
+			<div class="perm-desc">Can create and publish document templates</div>
+			<div class="perm-name">Approval</div>
+			<div class="perm-desc">Can approve or reject document content changes</div>
+			<div class="perm-name">Lifecycle</div>
+			<div class="perm-desc">Can mark documents as Draft, Live and Archived</div>
+			<div class="perm-name">Versions</div>
+			<div class="perm-desc">Can create document version and link them together</div>
 		</div>
 	</div>
+</div>
+
+{{ui/ui-spacer size=300}}
+
+<div class="text-center">
+	{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Person
+		label="Add Existing User"
+		onClick=(action "onShowAddModal")}}
+	{{ui/ui-button-gap}}
+	{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Plus
+		label="Invite New User"
+		onClick=(action "onShowInviteModal")}}
+</div>
+
+{{ui/ui-spacer size=300}}
 
 <div class="space-admin table-responsive">
-	<table class="table table-hover permission-table mb-3">
+	<table class="table table-hover permission-table">
 		<thead>
 			<tr>
 				<th></th>
@@ -88,36 +147,8 @@
 	</table>
 </div>
 
-<button type="button" class="btn btn-success bold-700 text-uppercase my-3" onclick={{action "onSave"}}>SAVE</button>
+{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked
-
+	label=constants.Label.Save onClick=(action "onSave")}}
-<div class="row my-3">
-	<div class="col-12 col-md-6">
-		<div class="content-zone">
-			<p class="explainer-text">Space permissions:</p>
-			<ul class="explainer-list">
-				<li>View &mdash; see content within this space</li>
-				<li>Manage &mdash; manage all aspects of space except deletion</li>
-				<li>Owner &mdash; manage and delete space</li>
-			</ul>
-		</div>
-	</div>
-	<div class="col-12 col-md-6">
-		<div class="content-zone">
-			<p class="explainer-text">Document permissions:</p>
-			<ul class="explainer-list explainer-gap">
-				<li>Create &mdash; create new documents</li>
-				<li>Edit &mdash; edit documents</li>
-				<li>Delete &mdash; delete documents</li>
-				<li>Move &mdash; move content between documents</li>
-				<li>Copy &mdash; copy content between documents</li>
-				<li>Templates &mdash; create, edit, delete document templates and content blocks</li>
-				<li>Approval &mdash; approve or reject content changes</li>
-				<li>Lifecycle &mdash; mark documents as Draft, Live or Archived</li>
-				<li>Versions &mdash; create versions of documents (baselining)</li>
-			</ul>
-		</div>
-	</div>
-</div>
 
 <div id="space-add-user-modal" class="modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
@@ -135,7 +166,7 @@
 				{{/each}}
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+	 			{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
 			</div>
 		</div>
 	</div>
@@ -160,8 +191,11 @@
 				</form>
 			</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+				{{ui/ui-button color=constants.Color.Gray light=true
-				<button type="button" class="btn btn-success" onclick={{action "onSpaceInvite"}}>Invite</button>
+					label=constants.Label.Close dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true
+					label=constants.Label.Invite onClick=(action "onSpaceInvite")}}
 			</div>
 		</div>
 	</div>

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

@@ -4,7 +4,7 @@
 			tooltip="Export as HTML" onClick=(action "onShowExport")}}
 	{{/if}}
 	{{#if pinState.isPinned}}
-		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Gray
+		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
 			tooltip="Remove view from bookmarks" onClick=(action "onUnpin")}}
 	{{else if session.authenticated}}
 		{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
@@ -13,11 +13,7 @@
 
 	{{#if (or permissions.spaceOwner permissions.spaceManage)}}
 		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
-			tooltip="Space settings" link="folder.settings" }}
+			tooltip="Space settings" linkTo="folder.settings"}}
-		{{!-- {{#link-to "folder.settings" space.id space.slug class="button-icon-gray align-middle"}}
-			<i class="material-icons">settings</i>
-			{{#attach-tooltip showDelay=1000}}Settings, permissions, templates{{/attach-tooltip}}
-		{{/link-to}} --}}
 	{{/if}}
 {{/ui/ui-toolbar}}