From 23a6b25b0a6c46df3e0f6f53766952a31a311973 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Thu, 7 Dec 2017 20:47:26 +0000 Subject: [PATCH] content linker styled using standard list picker control --- gui/app/components/document/content-linker.js | 1 + gui/app/components/ui/ui-list-picker.js | 10 ++ .../styles/view/document/section-editor.scss | 21 +--- gui/app/styles/widget/widget-list-picker.scss | 3 + .../components/document/content-linker.hbs | 98 ++++++++++--------- 5 files changed, 72 insertions(+), 61 deletions(-) diff --git a/gui/app/components/document/content-linker.js b/gui/app/components/document/content-linker.js index a1e3a9b5..b6558130 100644 --- a/gui/app/components/document/content-linker.js +++ b/gui/app/components/document/content-linker.js @@ -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'; diff --git a/gui/app/components/ui/ui-list-picker.js b/gui/app/components/ui/ui-list-picker.js index 4cc49f19..e508ae18 100644 --- a/gui/app/components/ui/ui-list-picker.js +++ b/gui/app/components/ui/ui-list-picker.js @@ -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 => { diff --git a/gui/app/styles/view/document/section-editor.scss b/gui/app/styles/view/document/section-editor.scss index 49712823..d53f2602 100644 --- a/gui/app/styles/view/document/section-editor.scss +++ b/gui/app/styles/view/document/section-editor.scss @@ -12,23 +12,10 @@ 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; - } - } + .icon { + margin-right: 5px; + height: 15px; + width: 15px; } } diff --git a/gui/app/styles/widget/widget-list-picker.scss b/gui/app/styles/widget/widget-list-picker.scss index 5e709a42..8233e2c6 100644 --- a/gui/app/styles/widget/widget-list-picker.scss +++ b/gui/app/styles/widget/widget-list-picker.scss @@ -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; diff --git a/gui/app/templates/components/document/content-linker.hbs b/gui/app/templates/components/document/content-linker.hbs index 353ca13f..971148fd 100644 --- a/gui/app/templates/components/document/content-linker.hbs +++ b/gui/app/templates/components/document/content-linker.hbs @@ -7,7 +7,7 @@
-
+
  • Section
  • Attachment
    • @@ -19,15 +19,8 @@ {{#if showSections}}
    -
      - {{#each candidates.pages as |p|}} -
    • - {{#ui/ui-selection selected=p.selected}} - {{p.title}} - {{/ui/ui-selection}} -
      • - {{/each}} -
    +

    Link to content within this document

    + {{ui/ui-list-picker items=candidates.pages nameField='title' singleSelect=true onSelect=(action 'setSelection')}}
    {{/if}} @@ -35,16 +28,22 @@ {{#if showAttachments}}
    -
      - {{#each candidates.attachments as |a|}} -
    • - {{#ui/ui-selection selected=a.selected}} - - {{ a.title }} - {{/ui/ui-selection}} -
      • - {{/each}} -
    +

    Link to an attachment within this document

    +
    +
      + {{#each candidates.attachments as |item|}} +
    • +
      + + {{item.title}} +
      + {{#if item.selected}} + check + {{/if}} +
      • + {{/each}} +
    +
    {{/if}} @@ -60,30 +59,41 @@ {{#unless hasMatches}} Nothing found. {{/unless}} -
      - {{#each matches.documents as |m|}} -
    • - {{#ui/ui-selection selected=m.selected}} - {{m.title}}
      {{m.context}} - {{/ui/ui-selection}} -
      • - {{/each}} - {{#each matches.pages as |m|}} -
    • - {{#ui/ui-selection selected=m.selected}} - {{m.title}}
      {{m.context}} - {{/ui/ui-selection}} -
      • - {{/each}} - {{#each matches.attachments as |a|}} -
    • - {{#ui/ui-selection selected=a.selected}} - - {{ a.title }} - {{/ui/ui-selection}} -
      • - {{/each}} -
    +
    +
      + {{#each matches.documents as |item|}} +
    • +
      + {{item.title}}
      {{item.context}} +
      + {{#if item.selected}} + check + {{/if}} +
      • + {{/each}} + {{#each matches.pages as |item|}} +
    • +
      + {{item.title}}
      {{item.context}} +
      + {{#if item.selected}} + check + {{/if}} +
      • + {{/each}} + {{#each matches.attachments as |item|}} +
    • +
      + + {{item.title}} +
      + {{#if item.selected}} + check + {{/if}} +
      • + {{/each}} +
    +
{{/if}}