From 00b4874d098e0151dd1db553d653b3754886be2b Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Tue, 21 Aug 2018 10:57:25 +0200 Subject: [PATCH] add tag autocomplete --- browser/main/Detail/MarkdownNoteDetail.js | 1 + browser/main/Detail/NoteDetailInfo.styl | 1 + browser/main/Detail/TagSelect.js | 19 +++- browser/main/Detail/TagSelect.styl | 3 + browser/main/global.styl | 2 + browser/styles/awesomplete.styl | 114 ++++++++++++++++++++++ lib/main.html | 2 + package.json | 1 + yarn.lock | 4 + 9 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 browser/styles/awesomplete.styl diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 82073162..9aca81be 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -363,6 +363,7 @@ class MarkdownNoteDetail extends React.Component { diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 8d454203..7166a497 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -13,6 +13,7 @@ $info-margin-under-border = 30px display flex align-items center padding 0 20px + z-index 99 .info-left padding 0 10px diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index e251dd42..2ba26336 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -20,6 +20,12 @@ class TagSelect extends React.Component { componentDidMount () { this.value = this.props.value ee.on('editor:add-tag', this.addtagHandler) + + new Awesomplete(this.refs.newTag, { + minChars: 1, + autoFirst: true, + list: '#datalist' + }) } componentDidUpdate () { @@ -119,7 +125,7 @@ class TagSelect extends React.Component { } render () { - const { value, className } = this.props + const { value, className, data } = this.props const tagList = _.isArray(value) ? value.map((tag) => { @@ -137,6 +143,14 @@ class TagSelect extends React.Component { ) }) : [] + + const datalist = _.sortBy(data.tagNoteMap.map( + (tag, name) => ({ name, size: tag.size }) + ).filter( + tag => tag.size > 0 + ), ['name']).map( + tag =>
  • {tag.name}
    • + ) return (
    this.handleNewTagInputKeyDown(e)} onBlur={(e) => this.handleNewTagBlur(e)} /> +
      + {datalist} +
    ) } diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 0ff4c6a3..052c86b6 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -50,6 +50,9 @@ padding 0 4px font-size 13px +.datalist + display none + body[data-theme="dark"] .tag background-color alpha($ui-dark-tag-backgroundColor, 60%) diff --git a/browser/main/global.styl b/browser/main/global.styl index e4505a4e..6046861a 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -156,3 +156,5 @@ body[data-theme="monokai"] body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb background-color rgba(255, 255, 255, 0.3) + +@import '../styles/awesomplete.styl' \ No newline at end of file diff --git a/browser/styles/awesomplete.styl b/browser/styles/awesomplete.styl new file mode 100644 index 00000000..738fb379 --- /dev/null +++ b/browser/styles/awesomplete.styl @@ -0,0 +1,114 @@ +.awesomplete + display inline-block + position relative + + .visually-hidden + position absolute + clip rect(0, 0, 0, 0) + + ul + position fixed + z-index 1 + box-sizing border-box + list-style none + padding 0 + margin 0 + + border-radius 4px + margin .2em 0 0 + background-color $ui-noteList-backgroundColor + border 1px solid rgba(0,0,0,.3) + box-shadow .05em .2em .6em rgba(0,0,0,.2) + text-shadow none + + &:empty, + &[hidden] + display none + + &:before + content "" + position absolute + top -.43em + left 1em + width 0 height 0 + padding .4em + background-color $ui-noteList-backgroundColor + border inherit + border-right 0 + border-bottom 0 + -webkit-transform rotate(45deg) + transform rotate(45deg) + + li + position relative + padding 6px 18px 6px 10px + cursor pointer + + li:hover + background-color alpha($ui-button--active-backgroundColor, 20%) + color $ui-text-color + + li[aria-selected="true"] + background-color alpha($ui-button--active-backgroundColor, 40%) + color $ui-text-color + +body[data-theme="dark"] + .awesomplete ul + border-color $ui-dark-borderColor + background-color $ui-dark-noteList-backgroundColor + color $ui-dark-text-color + + &:before + background-color $ui-dark-noteList-backgroundColor + + li:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-dark-text-color + + li[aria-selected="true"] + background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color + +body[data-theme="white"] + .awesomplete ul + background-color $ui-white-noteList-backgroundColor + + li:hover + background-color alpha($ui-button--active-backgroundColor, 60%) + + li[aria-selected="true"] + background-color $ui-button--active-backgroundColor + +body[data-theme="solarized-dark"] + .awesomplete ul + border-color $ui-solarized-dark-borderColor + background-color $ui-solarized-dark-noteList-backgroundColor + color $ui-solarized-dark-text-color + + &:before + background-color $ui-solarized-dark-noteList-backgroundColor + + li:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-solarized-dark-text-color + + li[aria-selected="true"] + background-color $ui-dark-button--active-backgroundColor + color $ui-solarized-dark-text-color + +body[data-theme="monokai"] + .awesomplete ul + border-color $ui-monokai-borderColor + background-color $ui-monokai-noteList-backgroundColor + color $ui-monokai-text-color + + &:before + background-color $ui-dark-noteList-backgroundColor + + li:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-monokai-text-color + + li[aria-selected="true"] + background-color $ui-monokai-button-backgroundColor + color $ui-monokai-text-color \ No newline at end of file diff --git a/lib/main.html b/lib/main.html index 7366fa04..3c2d33eb 100644 --- a/lib/main.html +++ b/lib/main.html @@ -118,6 +118,8 @@ + + diff --git a/package.json b/package.json index e9949adf..4ca816e1 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@rokt33r/markdown-it-math": "^4.0.1", "@rokt33r/season": "^5.3.0", "@susisu/mte-kernel": "^2.0.0", + "awesomplete": "^1.1.2", "aws-sdk": "^2.48.0", "aws-sdk-mobile-analytics": "^0.9.2", "chart.js": "^2.7.2", diff --git a/yarn.lock b/yarn.lock index 4ecfa51b..02207b14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -568,6 +568,10 @@ ava@^0.25.0: unique-temp-dir "^1.0.0" update-notifier "^2.3.0" +awesomplete@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/awesomplete/-/awesomplete-1.1.2.tgz#b6e253f73474e46278bba5ae7f81d4262160fb75" + aws-sdk-mobile-analytics@^0.9.2: version "0.9.2" resolved "https://registry.yarnpkg.com/aws-sdk-mobile-analytics/-/aws-sdk-mobile-analytics-0.9.2.tgz#b56a6e5206fc8c3975a19170b41536c53f6d5d91"