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 { computed, set } from '@ember/object';
import { inject as service } from '@ember/service';
import { A } from '@ember/array';
import Component from '@ember/component';
import TooltipMixin from '../../mixins/tooltip';
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,
items: [],
maxHeight: 0,
onSelect: null,
styleCss: computed('maxHeight', function () {
let height = this.get('maxHeight');
@ -30,6 +31,15 @@ export default Component.extend({
actions: {
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')) {
let items = this.get('items');
items.forEach(item => {

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

@ -12,25 +12,12 @@
height: 500px;
overflow-y: auto;
.link-list {
margin: 0;
padding: 0;
.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 {
width: 100%;
margin: 0 auto;
padding: 0;
> .option {
@include ease-in();
@ -13,6 +14,8 @@
background-color: $color-off-white;
cursor: pointer;
position: relative;
list-style-type: none;
line-height: 26px;
&:hover {
color: $color-black;

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

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