From fbb6f3485dbecc4dc7a495226c975705c404d6c4 Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Wed, 29 Nov 2017 11:09:54 +0000
Subject: [PATCH] search UI

---
 gui/app/components/search/tag-list.js         | 34 ---------
 gui/app/pods/search/template.hbs              | 65 +++++++++-------
 gui/app/styles/view/search.scss               | 75 +++++++++++++++++++
 .../components/search/search-results.hbs      | 14 ++--
 .../templates/components/search/tag-list.hbs  |  7 --
 5 files changed, 120 insertions(+), 75 deletions(-)
 delete mode 100644 gui/app/components/search/tag-list.js
 delete mode 100644 gui/app/templates/components/search/tag-list.hbs

diff --git a/gui/app/components/search/tag-list.js b/gui/app/components/search/tag-list.js
deleted file mode 100644
index 3dbf771a..00000000
--- a/gui/app/components/search/tag-list.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import Component from '@ember/component';
-
-export default Component.extend({
-    documentTags: [],
-    tagz: [],
-
-	init() {
-		this._super(...arguments);
-		
-        let tagz = [];
-
-        if (this.get('documentTags').length > 1) {
-            let tags = this.get('documentTags').split('#');
-            _.each(tags, function(tag) {
-                if (tag.length > 0) {
-                    tagz.pushObject(tag);
-                }
-            });
-        }
-
-        this.set('tagz', tagz);
-    }
-});
diff --git a/gui/app/pods/search/template.hbs b/gui/app/pods/search/template.hbs
index 190f0c6b..5497e03c 100644
--- a/gui/app/pods/search/template.hbs
+++ b/gui/app/pods/search/template.hbs
@@ -1,29 +1,40 @@
-{{#layout/zone-container}}
-	{{#layout/zone-sidebar}}
-		<div class="sidebar-common">
-			{{layout/sidebar-intro title="Search" message='Search across document name, contents, tags and attachment filenames'}}
-		</div>
-		<div class="sidebar-wrapper">
-			<div class="page-search">
-				<div class="input-control">
-					{{focus-input type="text" value=filter placeholder='type search phrase'}}
-					{{#ui/ui-checkbox selected=matchDoc}}document name{{/ui/ui-checkbox}}
-					{{#ui/ui-checkbox selected=matchContent}}content{{/ui/ui-checkbox}}
-					{{#ui/ui-checkbox selected=matchTag}}tag{{/ui/ui-checkbox}}
-					{{#ui/ui-checkbox selected=matchFile}}attachment name{{/ui/ui-checkbox}}
-				</div>
-				<div class="examples">
-					<p>a OR b</p>
-					<p>x AND y</p>
-					<p>"phrase match"</p>
-					<p>* for wildcard match</p>
-				</div>
+{{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}}
+
+	<div class="view-search mt-5">
+		<div class="heading">Search</div>
+		<div class="form-group mt-4">
+			{{focus-input type="text" value=filter class="form-control mb-4" placeholder='a OR b, x AND y, "phrase mat*"'}}
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">
+					{{input type="checkbox" id=checkId class="form-check-input" checked=matchDoc}} document title
+				</label>
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">
+					{{input type="checkbox" id=checkId class="form-check-input" checked=matchContent}} content
+				</label>
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">
+					{{input type="checkbox" id=checkId class="form-check-input" checked=matchTag}} tag name
+				</label>
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">
+					{{input type="checkbox" id=checkId class="form-check-input" checked=matchFile}} attachment name
+				</label>
 			</div>
 		</div>
-	{{/layout/zone-sidebar}}
-	{{#layout/zone-content}}
-		<div class="page-search">
-			{{search/search-results results=results}}
-		</div>
-	{{/layout/zone-content}}
-{{/layout/zone-container}}
\ No newline at end of file
+
+		{{search/search-results results=results}}
+	</div>
+</div>
diff --git a/gui/app/styles/view/search.scss b/gui/app/styles/view/search.scss
index 2af34e56..ce72f9f3 100644
--- a/gui/app/styles/view/search.scss
+++ b/gui/app/styles/view/search.scss
@@ -1,3 +1,78 @@
+.view-search {
+	> .heading {
+		font-size: 1.5rem;
+		font-weight: bold;
+		color: $color-dark;
+	}
+
+	> .documents {
+		margin: 60px 0;
+		padding: 0;
+
+		> .document {
+			@include card();
+			@include ease-in();
+			list-style-type: none;
+			overflow: hidden;
+			position: relative;
+			margin: 0 0 30px 0;
+			width: 100%;
+			// height: 150px;
+
+			&:hover {
+				> .checkbox {
+					display: block;
+				}
+			}
+
+			> a {
+				@include ease-in();
+				display: block;
+				position: relative;
+				padding: 15px 20px;
+
+				> .title {
+					color: $color-black;
+					font-size: 1.3rem;
+					margin-bottom: 5px;
+				}
+
+				> .snippet {
+					color: $color-gray;
+					font-size: 1rem;
+					line-height: 24px;
+				}
+
+				&:hover {
+					color: $color-gray;
+
+					> .title {
+						color: $color-link;
+					}
+
+					> .snippet {
+						color: $color-link;
+					}
+				}
+			}
+
+			.hashtags {
+				> .hashtag {
+					display: inline-block;
+					margin: 5px 10px 0 5px;
+					color: $color-gray;
+					font-size: 0.875rem;
+					font-style: italic;
+
+					&:hover {
+						color: $color-link;
+					}
+				}
+			}
+		}
+	}
+}
+
 .page-search {
 	.input-control {
 		> input {
diff --git a/gui/app/templates/components/search/search-results.hbs b/gui/app/templates/components/search/search-results.hbs
index 07fde071..53470aad 100644
--- a/gui/app/templates/components/search/search-results.hbs
+++ b/gui/app/templates/components/search/search-results.hbs
@@ -1,13 +1,13 @@
-<div class="search-results">
+<div class="view-search my-5">
     <div class="heading">{{resultPhrase}}</div>
-    <ul class="list">
+    <ul class="documents">
         {{#each documents key="id" as |result index|}}
-            <li class="item">
+			<li class="document">
                 <a class="link" href="s/{{result.spaceId}}/{{result.spaceSlug}}/d/{{ result.documentId }}/{{result.documentSlug}}?page={{ result.itemId }}">
-                    <div class="title">{{ result.document }}</div>
-					<div class="folder">{{ result.space }}</div>
-					<div class="excerpt">{{ result.excerpt }}</div>
-					<div class="chips">{{search/tag-list documentTags=result.tags}}</div>
+					<div class="title">{{result.document}}</div>
+					<div class="snippet">{{result.excerpt}}</div>
+					<div class="snippet">({{result.space}})</div>
+					{{folder/document-tags documentTags=result.tags}}
                 </a>
             </li>
         {{/each}}
diff --git a/gui/app/templates/components/search/tag-list.hbs b/gui/app/templates/components/search/tag-list.hbs
deleted file mode 100644
index c5f82d78..00000000
--- a/gui/app/templates/components/search/tag-list.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="chips">
-    {{#each tagz as |tg|}}
-        <div class="chip">
-			<span class="chip-text">#{{tg}}</span>
-		</div>
-    {{/each}}
-</div>