From 2a23d19321d93b35f7326f088f264f663b0fa661 Mon Sep 17 00:00:00 2001 From: bimlas Date: Sat, 24 Mar 2018 10:56:01 +0100 Subject: [PATCH 1/3] Add selector to sort tags by counter or alphabetically ![screencast](https://i.imgur.com/XUkTyRe.gif) --- .boostnoterc.sample | 1 + browser/main/SideNav/SideNav.styl | 35 ++++++++++++++++++++++ browser/main/SideNav/index.js | 40 ++++++++++++++++++++++++-- browser/main/lib/ConfigManager.js | 1 + locales/en.json | 1 + locales/hu.json | 1 + tests/lib/boostnoterc/.boostnoterc.all | 1 + 7 files changed, 77 insertions(+), 3 deletions(-) diff --git a/.boostnoterc.sample b/.boostnoterc.sample index 8419061d..a7981f7f 100644 --- a/.boostnoterc.sample +++ b/.boostnoterc.sample @@ -23,6 +23,7 @@ "lineNumber": true }, "sortBy": "UPDATED_AT", + "sortTagsBy": "ALPHABETICAL", "ui": { "defaultNote": "ALWAYS_ASK", "disableDirectWrite": false, diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index a0ffb2e7..b5b6378b 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -8,6 +8,29 @@ display: flex flex-direction column +.control + user-select none + height $control-height + font-size 12px + line-height 25px + display flex + color $ui-inactive-text-color + +.control-sortTagsBy + flex 1 + padding-left 15px + +.control-sortTagsBy-select + appearance: none; + margin-left 5px + color $ui-inactive-text-color + padding 0 + border none + background-color transparent + outline none + cursor pointer + font-size 12px + .top padding-bottom 15px @@ -82,6 +105,10 @@ body[data-theme="white"] background-color #f9f9f9 color $ui-text-color + .control + background-color $ui-white-backgroundColor + border-color $ui-white-borderColor + body[data-theme="dark"] .root, .root--folded border-right 1px solid $ui-dark-borderColor @@ -91,7 +118,15 @@ body[data-theme="dark"] .top border-color $ui-dark-borderColor + .control + background-color $ui-dark-backgroundColor + border-color $ui-dark-borderColor + body[data-theme="solarized-dark"] .root, .root--folded background-color $ui-solarized-dark-backgroundColor border-right 1px solid $ui-solarized-dark-borderColor + + .control + background-color $ui-solarized-dark-backgroundColor + border-color $ui-solarized-dark-borderColor diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index c3ad11ce..c3739412 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -82,7 +82,7 @@ class SideNav extends React.Component { } SideNavComponent (isFolded, storageList) { - const { location, data } = this.props + const { location, data, config } = this.props const isHomeActive = !!location.pathname.match(/^\/home$/) const isStarredActive = !!location.pathname.match(/^\/starred$/) @@ -119,6 +119,21 @@ class SideNav extends React.Component {

{i18n.__('Tags')}

+
+
+ + +
+
{this.tagListComponent(data)}
@@ -129,10 +144,15 @@ class SideNav extends React.Component { } tagListComponent () { - const { data, location } = this.props - const tagList = _.sortBy(data.tagNoteMap.map((tag, name) => { + const { data, location, config } = this.props + let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => { return { name, size: tag.size } }), ['name']) + if (config.sortTagsBy === 'COUNTER') { + tagList = _.sortBy(tagList, function (item) { + return 0 - item.size + }) + } return ( tagList.map(tag => { return ( @@ -159,6 +179,20 @@ class SideNav extends React.Component { router.push(`/tags/${name}`) } + handleSortTagsByChange (e) { + const { dispatch } = this.props + + const config = { + sortTagsBy: e.target.value + } + + ConfigManager.set(config) + dispatch({ + type: 'SET_CONFIG', + config + }) + } + emptyTrash (entries) { const { dispatch } = this.props const deletionPromises = entries.map((note) => { diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 4d67d4e7..59bd0704 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -16,6 +16,7 @@ export const DEFAULT_CONFIG = { listWidth: 280, navWidth: 200, sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL' + sortTagsBy: 'ALPHABETICAL', // 'ALPHABETICAL', 'COUNTER' listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL' amaEnabled: true, hotkey: { diff --git a/locales/en.json b/locales/en.json index 8a4a8eff..b8250ea7 100644 --- a/locales/en.json +++ b/locales/en.json @@ -111,6 +111,7 @@ "Updated": "Updated", "Created": "Created", "Alphabetically": "Alphabetically", + "Counter": "Counter", "Default View": "Default View", "Compressed View": "Compressed View", "Search": "Search", diff --git a/locales/hu.json b/locales/hu.json index 37c19e48..74cd5d04 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -111,6 +111,7 @@ "Updated": "Módosítás", "Created": "Létrehozás", "Alphabetically": "Ábécé sorrendben", + "Counter": "Számláló", "Default View": "Alapértelmezett Nézet", "Compressed View": "Tömörített Nézet", "Search": "Keresés", diff --git a/tests/lib/boostnoterc/.boostnoterc.all b/tests/lib/boostnoterc/.boostnoterc.all index 8419061d..a7981f7f 100644 --- a/tests/lib/boostnoterc/.boostnoterc.all +++ b/tests/lib/boostnoterc/.boostnoterc.all @@ -23,6 +23,7 @@ "lineNumber": true }, "sortBy": "UPDATED_AT", + "sortTagsBy": "ALPHABETICAL", "ui": { "defaultNote": "ALWAYS_ASK", "disableDirectWrite": false, From d493df429505d93b6a619e6dcd6889f9ea8ee85f Mon Sep 17 00:00:00 2001 From: bimlas Date: Mon, 26 Mar 2018 14:47:57 +0200 Subject: [PATCH 2/3] Move selector next to title --- browser/main/SideNav/SideNav.styl | 67 +++++++++++++------------------ browser/main/SideNav/index.js | 34 ++++++++-------- 2 files changed, 44 insertions(+), 57 deletions(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index b5b6378b..666ae0cd 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -8,29 +8,6 @@ display: flex flex-direction column -.control - user-select none - height $control-height - font-size 12px - line-height 25px - display flex - color $ui-inactive-text-color - -.control-sortTagsBy - flex 1 - padding-left 15px - -.control-sortTagsBy-select - appearance: none; - margin-left 5px - color $ui-inactive-text-color - padding 0 - border none - background-color transparent - outline none - cursor pointer - font-size 12px - .top padding-bottom 15px @@ -53,11 +30,33 @@ display flex flex-direction column -.tag-title - padding-left 15px - padding-bottom 13px - p - color $ui-button-default-color +.tag-control + display flex + height 30px + line-height 25px + overflow hidden + .tag-control-title + padding-left 15px + padding-bottom 13px + flex 1 + p + color $ui-button-default-color + .tag-control-sortTagsBy + user-select none + font-size 12px + color $ui-inactive-text-color + margin-left 12px + margin-right 12px + .tag-control-sortTagsBy-select + appearance: none; + margin-left 5px + color $ui-inactive-text-color + padding 0 + border none + background-color transparent + outline none + cursor pointer + font-size 12px .tagList overflow-y auto @@ -105,10 +104,6 @@ body[data-theme="white"] background-color #f9f9f9 color $ui-text-color - .control - background-color $ui-white-backgroundColor - border-color $ui-white-borderColor - body[data-theme="dark"] .root, .root--folded border-right 1px solid $ui-dark-borderColor @@ -118,15 +113,7 @@ body[data-theme="dark"] .top border-color $ui-dark-borderColor - .control - background-color $ui-dark-backgroundColor - border-color $ui-dark-borderColor - body[data-theme="solarized-dark"] .root, .root--folded background-color $ui-solarized-dark-backgroundColor border-right 1px solid $ui-solarized-dark-borderColor - - .control - background-color $ui-solarized-dark-backgroundColor - border-color $ui-solarized-dark-borderColor diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index c3739412..a20fe665 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -115,25 +115,25 @@ class SideNav extends React.Component { } else { component = (
-
-

{i18n.__('Tags')}

+
+
+

{i18n.__('Tags')}

+
+
+ + +
-
-
- - -
-
{this.tagListComponent(data)}
From 2c8f3b56aea4208d8b68850ee97795d3336a8329 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Tue, 10 Apr 2018 17:14:25 +0900 Subject: [PATCH 3/3] use arrow functions --- browser/main/SideNav/index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index a20fe665..af9ab925 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -145,13 +145,12 @@ class SideNav extends React.Component { tagListComponent () { const { data, location, config } = this.props - let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => { - return { name, size: tag.size } - }), ['name']) + let tagList = _.sortBy(data.tagNoteMap.map( + (tag, name) => ({name, size: tag.size})), + ['name'] + ) if (config.sortTagsBy === 'COUNTER') { - tagList = _.sortBy(tagList, function (item) { - return 0 - item.size - }) + tagList = _.sortBy(tagList, item => (0 - item.size)) } return ( tagList.map(tag => {