restructure CSS files

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

@@ -31,7 +31,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 		this.load();
 	},
 
-
 	willDestroyElement() {
 		this._super(...arguments);
 		this.removeTooltips();

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

@@ -10,12 +10,10 @@
 // https://documize.com
 
 import { inject as service } from '@ember/service';
-
 import Controller from '@ember/controller';
-import NotifierMixin from '../../../mixins/notifier';
+import TooltipMixin from '../../../mixins/tooltip';
-import DropdownMixin from '../../../mixins/dropdown';
 
-export default Controller.extend(NotifierMixin, DropdownMixin, {
+export default Controller.extend(TooltipMixin, {
 	folderService: service('folder'),
 	folders: [],
 	dropdown: null,
@@ -33,34 +31,9 @@ export default Controller.extend(NotifierMixin, DropdownMixin, {
 		}
 	}.property('folders'),
 
-
-	willDestroyElement() {
-		this._super(...arguments);
-		this.destroyDropdown();
-	},
-
 	actions: {
-		onShow(spaceId) {
+		onShow(id) {
-			this.set('deleteSpace.id', spaceId);
+			this.set('deleteSpace.id', id);
-			this.set('deleteSpace.name', '');
-			$(".delete-space-dialog").css("display", "block");
-			$('#delete-space-name').removeClass('error');
-
-			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",
-				remove: false});
-
-			let drop = new Drop(dropOptions);
-			this.set('dropdown', drop);
-		},
-
-		onCancel() {
-			this.closeDropdown();
 		},
 
 		onDelete() {
@@ -71,16 +44,16 @@ export default Controller.extend(NotifierMixin, DropdownMixin, {
 			let spaceName = space.get('name');
 
 			if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') {
-				$('#delete-space-name').addClass('error').focus();
+				$('#delete-space-name').addClass('is-invalid').focus();
 				return;
 			}
 
-			this.closeDropdown();
+			$('#space-delete-modal').modal('hide');
+			$('#space-delete-modal').modal('dispose');
 
 			this.get('folderService').delete(spaceId).then(() => { /* jshint ignore:line */
 				this.set('deleteSpace.id', '');
 				this.set('deleteSpace.name', '');
-				this.showNotification("Deleted");
 
 				this.get('folderService').adminList().then((folders) => {
 					let nonPrivateFolders = folders.rejectBy('folderType', 2);

gui/app/pods/customize/folders/template.hbs

@@ -1,51 +1,47 @@
-<div class="page-customize">
+{{#if folders}}
-	<div class="space-admin">
+	<div class="row">
-
+		<div class="col">
-		{{#if folders}}
+			<h1 class="admin-heading">{{folders.length}} shared {{label}}</h1>
-			<div class="form-header">
+		</div>
-				<div class="title">{{folders.length}} shared {{label}}</div>
+	</div>
-				<div class="tip">View and change shared space ownership</div>
+	<div class="view-customize">
-			</div>
+		<div class="space-list">
-			<div class="input-control manage-space-list">
+			{{#each folders as |folder|}}
-				{{#each folders as |folder|}}
+				<div class="space row">
-					<div class="space pull-left width-80">
+					<div class="col-12 col-sm-8">
 						{{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
 					</div>
-					<div class="pull-right">
+					<div class="col-12 col-sm-4 text-right">
-						<div id="delete-space-button-{{folder.id}}" class="round-button-mono" title="Delete" {{action "onShow" folder.id}}>
+						<div id="space-delete-button-{{folder.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space" {{action "onShow" folder.id}}>
-							<i class="material-icons">delete</i>
+							<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
 						</div>
 					</div>
-					<div class="clearfix" />
-				{{/each}}
-			</div>
-
-			<div class="dropdown-dialog delete-space-dialog">
-				<div class="content">
-					<p>Are you sure you want to delete this space and all associated documents?</p>
-					<div class="input-control">
-						<div class="tip">Please type the space name to confirm</div>
-						{{input type='text' id="delete-space-name" value=deleteSpace.name}}
-					</div>
 				</div>
-				<div class="actions">
+			{{/each}}
-					<div class="flat-button" {{action 'onCancel'}}>
+		</div>
-						cancel
-					</div>
-					<div class="flat-button flat-red" {{action 'onDelete'}}>
-						delete
-					</div>
-				</div>
-				<div class="clearfix"></div>
-			</div>
-
-		{{else}}
-
-			<div class="form-header">
-				<div class="title">{{folders.length}} shared {{label}}</div>
-				<div class="tip">There are no spaces to maintain</div>
-			</div>
-
-		{{/if}}
 	</div>
-</div>
+
+	<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">Space Deletion</div>
+				<div class="modal-body">
+					<form onsubmit={{action 'onDelete'}}>
+						<p>Are you sure you want to delete this space and all documents?</p>
+						<div class="form-group">
+							<label for="delete-space-name">Please type space name to confirm</label>
+							{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpace.name}}
+							<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
+						</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-danger" onclick={{action 'onDelete'}}>Delete</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{{else}}
+	<p>There are no spaces to maintain</p>
+{{/if}}

gui/app/pods/customize/template.hbs

@@ -1,25 +1,28 @@
-{{#layout/zone-container}}
+{{layout/nav-bar}}
-	{{#layout/zone-sidebar}}
+
-		<div class="sidebar-common">
+<div class="container">
-			{{layout/sidebar-intro title='Settings' message='Documize application settings'}}
+	{{#toolbar/t-toolbar}}
+		{{#toolbar/t-links}}
+			{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
+		{{/toolbar/t-links}}
+		{{#toolbar/t-actions}}
+		{{/toolbar/t-actions}}
+	{{/toolbar/t-toolbar}}
+
+	<div class="row">
+		<div class="col my-5">
+			<ul class="tabnav-control">
+				{{#link-to 'customize.general' activeClass='selected' class="tab" tagName="li"}}General{{/link-to}}
+				{{#link-to 'customize.folders' activeClass='selected' class="tab" tagName="li"}}Spaces{{/link-to}}
+				{{#link-to 'customize.users' activeClass='selected' class="tab" tagName="li"}}Users{{/link-to}}
+				{{#if session.isGlobalAdmin}}
+					{{#link-to 'customize.global' activeClass='selected' class="tab" tagName="li"}}Global{{/link-to}}
+					{{#link-to 'customize.auth' activeClass='selected' class="tab" tagName="li"}}Authentication{{/link-to}}
+				{{/if}}
+			</ul>
 		</div>
-		<div class="sidebar-wrapper">
+	</div>
-			<div class="sidebar-menu">
+	<div class="mt-4 margin-bottom-100">
-				<ul class="options">
+		{{outlet}}
-					{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
+	</div>
-					{{#link-to 'customize.folders' activeClass='selected' class="option" tagName="li"}}Spaces{{/link-to}}
+</div>
-					{{#link-to 'customize.users' activeClass='selected' class="option" tagName="li"}}Users{{/link-to}}
-					{{#if session.isGlobalAdmin}}
-						{{#link-to 'customize.global' activeClass='selected' class="option" tagName="li"}}Global{{/link-to}}
-						{{#link-to 'customize.auth' activeClass='selected' class="option" tagName="li"}}Authentication{{/link-to}}
-					{{/if}}
-				</ul>
-			</div>
-		</div>
-	{{/layout/zone-sidebar}}
-	{{#layout/zone-content}}
-		<div class="page-customize">
-			{{outlet}}
-		</div>
-	{{/layout/zone-content}}
-{{/layout/zone-container}}

gui/app/pods/profile/template.hbs

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

gui/app/styles/app.scss

@@ -14,16 +14,13 @@
 @import "base.scss";
 @import "bootstrap.scss";
 
-@import "widget/widget.scss";
-@import "view/layout.scss"; // junk?
-@import "view/page-search.scss";
-@import "view/page-customize.scss";
-@import "view/page-auth.scss";
-@import "view/page-onboard.scss";
-@import "view/page-exceptions.scss";
-@import "view/document/all.scss";
-@import "view/common.scss";
 
+@import "view/layout.scss"; // junk?
+@import "view/document/all.scss";
+
+
+@import "view/common.scss";
+@import "widget/widget.scss";
 @import "view/navigation.scss";
 @import "view/toolbar.scss";
 @import "view/views.scss";

gui/app/styles/base.scss

@@ -55,17 +55,6 @@ a.broken-link {
 	text-decoration: line-through;
 }
 
-a.alt {
-	color: $color-blue;
-	text-decoration: none;
-	cursor: pointer;
-
-	a:focus,
-	a:hover {
-		text-decoration: underline;
-	}
-}
-
 .no-outline {
 	outline: none !important;
 	border: none !important;

gui/app/styles/view/customize.scss

@@ -1,15 +1,11 @@
-.page-customize {
+.view-customize {
-	> .auth-admin, > .general-admin, > .license-admin, > .smtp-admin, > .space-admin {
+	.admin-heading {
-		@include content-container();
+		font-size: 1.5rem;
-	}
+		font-weight: bold;
-
+		color: $color-black;
-	> .add-user {
-		@include content-container();
-		margin-bottom: 50px;
 	}
 
 	> .user-admin {
-		@include content-container();
 		margin: 30px 0;
 
 		> .heading {
@@ -94,13 +90,21 @@
 		}
 	}
 
-	.edit-user-dialog, .delete-user-dialog, .delete-space-dialog {
+	.edit-user-dialog, .delete-user-dialog {
 		display: none;
 	}
 
-	.manage-space-list {
+	> .space-list {
+        padding: 0;
+        margin: 0;
+
 		> .space {
-			margin: 20px 0;
+			margin: 15px 0;
+			padding: 15px;
+			@include card();
+			@include ease-in();
+			font-size: 1.2rem;
+			color: $color-primary;
 		}
 	}
 }

gui/app/styles/view/views.scss

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

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

@@ -1,4 +1,4 @@
-<div class="page-customize">
+<div class="view-customize">
 	<div class="general-admin">
 		<form>
 			<div class="form-header">