Merge pull request #1742 from bimlas/order-of-tags

Add selector to sort tags by counter or alphabetically

.boostnoterc.sample

@@ -23,6 +23,7 @@
         "lineNumber": true
     },
     "sortBy": "UPDATED_AT",
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,

browser/main/SideNav/SideNav.styl

@@ -30,11 +30,33 @@
   display flex
   flex-direction column
 
-.tag-title
+.tag-control
-  padding-left 15px
+  display flex
-  padding-bottom 13px
+  height 30px
-  p
+  line-height 25px
-    color $ui-button-default-color
+  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

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$/)
@@ -115,8 +115,23 @@ class SideNav extends React.Component {
     } else {
       component = (
         <div styleName='tabBody'>
-          <div styleName='tag-title'>
+          <div styleName='tag-control'>
-            <p>{i18n.__('Tags')}</p>
+            <div styleName='tag-control-title'>
+              <p>{i18n.__('Tags')}</p>
+            </div>
+            <div styleName='tag-control-sortTagsBy'>
+              <i className='fa fa-angle-down' />
+              <select styleName='tag-control-sortTagsBy-select'
+                title={i18n.__('Select filter mode')}
+                value={config.sortTagsBy}
+                onChange={(e) => this.handleSortTagsByChange(e)}
+              >
+                <option title='Sort alphabetically'
+                  value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
+                <option title='Sort by update time'
+                  value='COUNTER'>{i18n.__('Counter')}</option>
+              </select>
+            </div>
           </div>
           <div styleName='tagList'>
             {this.tagListComponent(data)}
@@ -129,10 +144,14 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data, location } = this.props
+    const { data, location, config } = this.props
-    const tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
+    let tagList = _.sortBy(data.tagNoteMap.map(
-      return { name, size: tag.size }
+      (tag, name) => ({name, size: tag.size})),
-    }), ['name'])
+      ['name']
+    )
+    if (config.sortTagsBy === 'COUNTER') {
+      tagList = _.sortBy(tagList, item => (0 - item.size))
+    }
     return (
       tagList.map(tag => {
         return (
@@ -159,6 +178,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) => {

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: {

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",

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",

tests/lib/boostnoterc/.boostnoterc.all

@@ -23,6 +23,7 @@
         "lineNumber": true
     },
     "sortBy": "UPDATED_AT",
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,