Added sorting direction buttons

browser/main/NoteList/index.js

@@ -581,6 +581,20 @@ class NoteList extends React.Component {
     })
   }
 
+  handleListDirectionButtonClick(e, direction) {
+    const { dispatch } = this.props
+
+    const config = {
+      listDirection: direction
+    }
+
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+  }
+
   alertIfSnippet(msg) {
     const warningMessage = msg =>
       ({
@@ -1120,6 +1134,7 @@ class NoteList extends React.Component {
     let { notes } = this.props
     const { selectedNoteKeys } = this.state
     const sortBy = _.get(config, [folderKey, 'sortBy'], config.sortBy.default)
+    const sortDir = config.listDirection
     const sortFunc =
       sortBy === 'CREATED_AT'
         ? sortByCreatedAt
@@ -1129,6 +1144,7 @@ class NoteList extends React.Component {
     const sortedNotes = location.pathname.match(/\/starred|\/trash/)
       ? this.getNotes().sort(sortFunc)
       : this.sortByPin(this.getNotes().sort(sortFunc))
+    if (sortDir === 'DESCENDING') sortedNotes.reverse()
     this.notes = notes = sortedNotes.filter(note => {
       // this is for the trash box
       if (note.isTrashed !== true || location.pathname === '/trashed')
@@ -1241,6 +1257,30 @@ class NoteList extends React.Component {
             </select>
           </div>
           <div styleName='control-button-area'>
+            <button
+              title={i18n.__('Ascending Order')}
+              styleName={
+                config.listDirection === 'ASCENDING'
+                  ? 'control-button--active'
+                  : 'control-button'
+              }
+              onClick={e => this.handleListDirectionButtonClick(e, 'ASCENDING')}
+            >
+              <img src='../resources/icon/icon-up.svg' />
+            </button>
+            <button
+              title={i18n.__('Descending Order')}
+              styleName={
+                config.listDirection === 'DESCENDING'
+                  ? 'control-button--active'
+                  : 'control-button'
+              }
+              onClick={e =>
+                this.handleListDirectionButtonClick(e, 'DESCENDING')
+              }
+            >
+              <img src='../resources/icon/icon-down.svg' />
+            </button>
             <button
               title={i18n.__('Default View')}
               styleName={

browser/main/lib/ConfigManager.js

@@ -27,6 +27,7 @@ export const DEFAULT_CONFIG = {
   },
   sortTagsBy: 'ALPHABETICAL', // 'ALPHABETICAL', 'COUNTER'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
+  listDirection: 'ASCENDING', // 'ASCENDING', 'DESCENDING'
   amaEnabled: true,
   autoUpdateEnabled: true,
   hotkey: {

resources/icon/icon-up.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-191.000000, -325.000000)">
+            <g id="icon-down" transform="translate(186.000000, 318.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="chevron-right" transform="translate(10.000000, 10.000000) rotate(270.000000) translate(-10.000000, -10.000000) translate(8.000000, 6.000000)" stroke-linecap="round" stroke-width="1.33333333" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 8 4 4 0 0"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>