Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-29 18:19:44 +02:00
Code Releases Activity

Change Search & Profile views to use new UX/UI

Browse source
This commit is contained in:
Harvey Kandola 2018-12-14 16:40:54 +00:00
parent 0ec0c65002
commit 8a654fcf3d
10 changed files with 113 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

1
gui/app/constants/constants.js
View file

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

3
gui/app/pods/profile/controller.js
View file

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

25
gui/app/pods/profile/template.hbs
View file

@ -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")}} {{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}}

54
gui/app/pods/search/template.hbs
View file

@ -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"> <div class="view-search">
{{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}} {{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}}
<div class="syntax"> <div class="syntax">
@ -42,8 +59,19 @@
{{/if}} {{/if}}
</div> </div>
</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}}

7
gui/app/styles/core/layout/master-internal.scss
View file

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

5
gui/app/styles/core/layout/sidebar.scss
View file

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

29
gui/app/styles/core/view/search.scss
View file

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

2
gui/app/templates/components/layout/master-sidebar.hbs
View file

@ -23,7 +23,7 @@
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
{{/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> <i class={{concat "dicon " constants.Icon.Search}}></i>
<div class="name">search</div> <div class="name">search</div>
{{/link-to}} {{/link-to}}

2
gui/app/templates/components/search/search-results.hbs
View file

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

24
gui/app/templates/components/search/search-view.hbs
View file

@ -4,31 +4,13 @@
{{focus-input type="text" value=filter class="form-control mr-3 search-box" placeholder="keywords, tags"}} {{focus-input type="text" value=filter class="form-control mr-3 search-box" placeholder="keywords, tags"}}
</div> </div>
<div class="form-group"> <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> </div>
</form> </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}} {{#if validSearch}}
{{search/search-results results=results keywords=filter}} {{search/search-results results=results keywords=filter}}
{{else}} {{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}} {{/if}}
</div> </div>