mirror of
https://github.com/documize/community.git
synced 2025-07-23 15:19:42 +02:00
search UI
This commit is contained in:
parent
95bb440a65
commit
fbb6f3485d
5 changed files with 120 additions and 75 deletions
|
@ -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);
|
||||
}
|
||||
});
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
<div class="chips">
|
||||
{{#each tagz as |tg|}}
|
||||
<div class="chip">
|
||||
<span class="chip-text">#{{tg}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue