1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-23 15:19:42 +02:00

search UI

This commit is contained in:
Harvey Kandola 2017-11-29 11:09:54 +00:00
parent 95bb440a65
commit fbb6f3485d
5 changed files with 120 additions and 75 deletions

View file

@ -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);
}
});

View file

@ -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}}
{{search/search-results results=results}}
</div>
</div>

View file

@ -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 {

View file

@ -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}}

View file

@ -1,7 +0,0 @@
<div class="chips">
{{#each tagz as |tg|}}
<div class="chip">
<span class="chip-text">#{{tg}}</span>
</div>
{{/each}}
</div>