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

content linker styled using standard list picker control

Browse source
This commit is contained in:
Harvey Kandola 2017-12-07 20:47:26 +00:00
parent db1b3aef8c
commit 23a6b25b0a
5 changed files with 72 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

1
gui/app/components/document/content-linker.js
View file

@ -12,6 +12,7 @@
import { debounce } from '@ember/runloop'; import { debounce } from '@ember/runloop';
import { computed, set } from '@ember/object'; import { computed, set } from '@ember/object';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import { A } from '@ember/array';
import Component from '@ember/component'; import Component from '@ember/component';
import TooltipMixin from '../../mixins/tooltip'; import TooltipMixin from '../../mixins/tooltip';
import ModalMixin from '../../mixins/modal'; import ModalMixin from '../../mixins/modal';

10
gui/app/components/ui/ui-list-picker.js
View file

@ -18,6 +18,7 @@ export default Component.extend({
singleSelect: false, singleSelect: false,
items: [], items: [],
maxHeight: 0, maxHeight: 0,
onSelect: null,
styleCss: computed('maxHeight', function () { styleCss: computed('maxHeight', function () {
let height = this.get('maxHeight'); let height = this.get('maxHeight');
@ -30,6 +31,15 @@ export default Component.extend({
actions: { actions: {
onToggle(item) { onToggle(item) {
// callback takes precedence
// caller sets item to 'selected'
let cb = this.get('onSelect');
if (cb !== null) {
this.attrs.onSelect(item);
return;
}
// no callback, we mark item as selected
if (this.get('singleSelect')) { if (this.get('singleSelect')) {
let items = this.get('items'); let items = this.get('items');
items.forEach(item => { items.forEach(item => {

21
gui/app/styles/view/document/section-editor.scss
View file

@ -12,23 +12,10 @@
height: 500px; height: 500px;
overflow-y: auto; overflow-y: auto;
.link-list { .icon {
margin: 0; margin-right: 5px;
padding: 0; height: 15px;
width: 15px;
.link-item {
margin: 0;
padding: 0;
font-size: 0.9rem;
color: $color-gray;
cursor: pointer;
.icon {
margin-right: 5px;
height: 15px;
width: 15px;
}
}
} }
} }

3
gui/app/styles/widget/widget-list-picker.scss
View file

@ -4,6 +4,7 @@
> .options { > .options {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0;
> .option { > .option {
@include ease-in(); @include ease-in();
@ -13,6 +14,8 @@
background-color: $color-off-white; background-color: $color-off-white;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
list-style-type: none;
line-height: 26px;
&:hover { &:hover {
color: $color-black; color: $color-black;

98
gui/app/templates/components/document/content-linker.hbs
View file

@ -7,7 +7,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col mt-3 mb-5">
<ul class="tabnav-control text-center"> <ul class="tabnav-control text-center">
<li class="tab {{if tab1Selected 'selected'}}" {{action 'onTabSelect' 1}}>Section</li> <li class="tab {{if tab1Selected 'selected'}}" {{action 'onTabSelect' 1}}>Section</li>
<li class="tab {{if tab2Selected 'selected'}}" {{action 'onTabSelect' 2}}>Attachment</li> <li class="tab {{if tab2Selected 'selected'}}" {{action 'onTabSelect' 2}}>Attachment</li>
@ -19,15 +19,8 @@
{{#if showSections}} {{#if showSections}}
<div class="row"> <div class="row">
<div class="col content-linker-modal-container"> <div class="col content-linker-modal-container">
<ul class="link-list"> <p>Link to content within this document</p>
{{#each candidates.pages as |p|}} {{ui/ui-list-picker items=candidates.pages nameField='title' singleSelect=true onSelect=(action 'setSelection')}}
<li class="link-item" {{ action 'setSelection' p }}>
{{#ui/ui-selection selected=p.selected}}
{{p.title}}
{{/ui/ui-selection}}
</li>
{{/each}}
</ul>
</div> </div>
</div> </div>
{{/if}} {{/if}}
@ -35,16 +28,22 @@
{{#if showAttachments}} {{#if showAttachments}}
<div class="row"> <div class="row">
<div class="col content-linker-modal-container"> <div class="col content-linker-modal-container">
<ul class="link-list"> <p>Link to an attachment within this document</p>
{{#each candidates.attachments as |a|}} <div class="widget-list-picker">
<li class="link-item" {{ action 'setSelection' a }}> <ul class="options">
{{#ui/ui-selection selected=a.selected}} {{#each candidates.attachments as |item|}}
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" /> <li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
{{ a.title }} <div class="text text-truncate">
{{/ui/ui-selection}} <img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}" />
</li> {{item.title}}
{{/each}} </div>
</ul> {{#if item.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
@ -60,30 +59,41 @@
{{#unless hasMatches}} {{#unless hasMatches}}
Nothing found. Nothing found.
{{/unless}} {{/unless}}
<ul class="link-list"> <div class="widget-list-picker">
{{#each matches.documents as |m|}} <ul class="options">
<li class="link-item" {{ action 'setSelection' m }}> {{#each matches.documents as |item|}}
{{#ui/ui-selection selected=m.selected}} <li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
{{m.title}}<br/><span class="color-gray">{{m.context}}</span> <div class="text text-truncate">
{{/ui/ui-selection}} {{item.title}}<br/>{{item.context}}
</li> </div>
{{/each}} {{#if item.selected}}
{{#each matches.pages as |m|}} <i class="material-icons">check</i>
<li class="link-item" {{ action 'setSelection' m }}> {{/if}}
{{#ui/ui-selection selected=m.selected}} </li>
{{m.title}}<br/><span class="color-gray">{{m.context}}</span> {{/each}}
{{/ui/ui-selection}} {{#each matches.pages as |item|}}
</li> <li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
{{/each}} <div class="text text-truncate">
{{#each matches.attachments as |a|}} {{item.title}}<br/>{{item.context}}
<li class="link-item" {{ action 'setSelection' a }}> </div>
{{#ui/ui-selection selected=a.selected}} {{#if item.selected}}
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" /> <i class="material-icons">check</i>
{{ a.title }} {{/if}}
{{/ui/ui-selection}} </li>
</li> {{/each}}
{{/each}} {{#each matches.attachments as |item|}}
</ul> <li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
<div class="text text-truncate">
<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}" />
{{item.title}}
</div>
{{#if item.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}