Change Search & Profile views to use new UX/UI

gui/app/constants/constants.js

@@ -260,6 +260,7 @@ let constants = EmberObject.extend({
 		Reset: 'Reset',
 		Restore: 'Restore',
 		Save: 'Save',
+		Search: 'Search',
 		SignIn: 'Sign In',
 		Update: 'Update',
 	}

gui/app/pods/profile/controller.js

@@ -10,9 +10,8 @@
 // https://documize.com
 
 import { inject as service } from '@ember/service';
-
-import Controller from '@ember/controller';
 import { isPresent } from '@ember/utils';
+import Controller from '@ember/controller';
 
 export default Controller.extend({
 	userService: service('user'),

gui/app/pods/profile/template.hbs

@@ -1,18 +1,11 @@
-{{#layout/top-bar}}
+{{#layout/master-sidebar}}
-{{/layout/top-bar}}
+{{/layout/master-sidebar}}
+
+{{#layout/master-content}}
+	{{layout/logo-heading
+		title=session.user.fullname
+		desc="Manage you profile and password"
+		icon=constants.Icon.Person}}
 
-{{#layout/middle-zone}}
-	{{#layout/middle-zone-content}}
 	{{user/user-profile model=model save=(action "save")}}
-	{{/layout/middle-zone-content}}
+{{/layout/master-content}}
-
-	{{#layout/middle-zone-sidebar}}
-		<div id="sidebar" class="sidebar sidebar-center">
-			<h1>{{session.user.fullname}}</h1>
-			<div class="avatar-large my-3">{{session.user.initials}}</div>
-		</div>
-	{{/layout/middle-zone-sidebar}}
-{{/layout/middle-zone}}
-
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}

gui/app/pods/search/template.hbs

@@ -1,14 +1,31 @@
-{{#layout/top-bar}}
+{{#layout/master-sidebar selectedItem="search"}}
-{{/layout/top-bar}}
+	{{ui/ui-spacer size=300}}
 
-{{#layout/middle-zone}}
+	<div class="section">
-	{{#layout/middle-zone-content}}
+		<div class="title">Match Filter</div>
-		{{search/search-view filter=filter matchDoc=matchDoc matchContent=matchContent matchTag=matchTag matchFile=matchFile slog=slog}}
+		<div class="list">
-	{{/layout/middle-zone-content}}
+			<div class="item">
+				{{input id="search-1" type="checkbox" checked=matchDoc}}
+				<label for="search-1" class="name">Document name</label>
+			</div>
+			<div class="item">
+				{{input id="search-2" type="checkbox" checked=matchContent}}
+				<label for="search-2" class="name">Document content</label>
+			</div>
+			<div class="item">
+				{{input id="search-3" type="checkbox" checked=matchTag}}
+				<label for="search-3" class="name">Tag name</label>
+			</div>
+			<div class="item">
+				{{input id="search-4" type="checkbox" checked=matchFile}}
+				<label for="search-4" class="name">Attachment name</label>
+			</div>
+		</div>
+	</div>
+	{{ui/ui-spacer size=200}}
 
-	{{#layout/middle-zone-sidebar scrollable=true}}
+	<div class="section">
-		<div id="sidebar" class="sidebar">
+		<div class="title">query examples</div>
-			<h1>Search</h1>
 		<div class="view-search">
 			{{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}}
 				<div class="syntax">
@@ -42,8 +59,19 @@
 			{{/if}}
 		</div>
 	</div>
-	{{/layout/middle-zone-sidebar}}
+{{/layout/master-sidebar}}
-{{/layout/middle-zone}}
 
-{{#layout/bottom-bar}}
+{{#layout/master-content}}
-{{/layout/bottom-bar}}
+	{{layout/logo-heading
+		title="Search"
+		desc="Basic and advanced search queries"
+		icon=constants.Icon.Search}}
+
+	{{search/search-view
+		filter=filter
+		matchDoc=matchDoc
+		matchContent=matchContent
+		matchTag=matchTag
+		matchFile=matchFile
+		slog=slog}}
+{{/layout/master-content}}

gui/app/styles/core/layout/master-internal.scss

@@ -40,6 +40,7 @@
 			> .nav-options {
 				> .option {
 					cursor: pointer;
+					display: block;
 
 					> .dicon {
 						display: inline-block;
@@ -52,6 +53,10 @@
 						display: none;
 					}
 				}
+
+				> .selected {
+					// background-color: $theme-400;
+				}
 			}
 
 			> .meta {

gui/app/styles/core/layout/sidebar.scss

@@ -37,6 +37,11 @@
 					color: $color-black-light-3;
 				}
 
+				> input[type=checkbox] {
+					margin: -6px 0 0 0;
+					padding: 0;
+				}
+
 				&:hover {
 					> .dicon {
 						color: map-get($gray-shades, 600);

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

@@ -1,16 +1,8 @@
 .view-search {
-	margin-top: 30px;
-
-	> .heading {
-		font-size: 1.5rem;
-		font-weight: bold;
-		color: map-get($gray-shades, 800);
-		margin-top: 30px;
-	}
-
 	.search-box {
 		width: 300px;
 	}
+
 	@media (min-width: 900px) {
 		.search-box {
 			width: 400px;
@@ -105,22 +97,27 @@
 		}
 	}
 
-
 	> .syntax {
-		margin: 20px 0;
+		margin: 10px 0;
 
 		> .example {
 			margin-top: 10px;
-			font-weight: 600;
+			font-weight: 500;
-			font-size: 1.1rem;
+			font-size: 1rem;
 			font-style: italic;
-			color: map-get($gray-shades, 800);
+			color: map-get($gray-shades, 700);
 		}
 
 		> .explain {
-			margin: 10px 0 20px 0px;
+			margin: 5px 0 15px 0px;
-			font-size: 1.2rem;
+			font-size: 0.9rem;
 			color: map-get($gray-shades, 600);
 		}
 	}
+
+	> .result-summary {
+		font-size: 1.2rem;
+		font-weight: 600;
+		color: map-get($gray-shades, 800);
+	}
 }

gui/app/templates/components/layout/master-sidebar.hbs

@@ -23,7 +23,7 @@
 					{{/link-to}}
 				{{/if}}
 			{{/if}}
-			{{#link-to "search" class=(if (eq selectedItem "spaces") "option selected" "option")}}
+			{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
 				<i class={{concat "dicon " constants.Icon.Search}}></i>
 				<div class="name">search</div>
 			{{/link-to}}

gui/app/templates/components/search/search-results.hbs

@@ -1,5 +1,5 @@
 <div class="view-search">
-	<div class="heading">{{resultPhrase}}</div>
+	<div class="result-summary">{{resultPhrase}}</div>
 	<ul class="documents">
 		{{#each documents key="id" as |result|}}
 			<li class="document">

gui/app/templates/components/search/search-view.hbs

@@ -4,31 +4,13 @@
 			{{focus-input type="text" value=filter class="form-control mr-3 search-box" placeholder="keywords, tags"}}
 		</div>
 		<div class="form-group">
-			<button class="btn btn-success" {{action "onSearch"}}>Search</button>
+			{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Search onClick=(action "onSearch")}}
 		</div>
 	</form>
-	<div class="form-group mt-2">
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-1" class="form-check-input" checked=matchDoc}}
-			<label class="form-check-label" for="search-1">&nbsp;document title</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-2" class="form-check-input" checked=matchContent}}
-			<label class="form-check-label" for="search-2">&nbsp;content</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-3" class="form-check-input" checked=matchTag}}
-			<label class="form-check-label" for="search-3">&nbsp;tag name</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-4" class="form-check-input" checked=matchFile}}
-			<label class="form-check-label" for="search-4">&nbsp;attachment name</label>
-		</div>
-	</div>
-
 	{{#if validSearch}}
 		{{search/search-results results=results keywords=filter}}
 	{{else}}
-		<p class="text-danger my-5">Your search term is too short</p>
+		{{ui/ui-spacer size=300}}
+		<p class="color-red-700">Your search query is too short</p>
 	{{/if}}
 </div>