feat: sort the navigation bar dropdown items alphabetically

josdejong · Aug 6, 2021 · d85ecb2 · d85ecb2
1 parent b01460f
commit d85ecb2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/lib/components/controls/navigationBar/NavigationBar.svelte b/src/lib/components/controls/navigationBar/NavigationBar.svelte
@@ -8,6 +8,7 @@
   import { createSelection, SELECTION_TYPE } from '../../../logic/selection'
   import createDebug from 'debug'
   import NavigationBarItem from '../../../components/controls/navigationBar/NavigationBarItem.svelte'
+  import { caseInsensitiveNaturalCompare } from '../../../logic/sort'
 
   const debug = createDebug('jsoneditor:NavigationBar')
 
@@ -45,7 +46,12 @@
     if (Array.isArray(node)) {
       return range(0, node.length)
     } else if (isObject(node)) {
-      return getIn(state, path.concat(STATE_KEYS)) || Object.keys(node)
+      const keys = getIn(state, path.concat(STATE_KEYS)) || Object.keys(node)
+
+      const sortedKeys = keys.slice(0)
+      sortedKeys.sort(caseInsensitiveNaturalCompare)
+
+      return sortedKeys
     } else {
       // never happens but just for robustness...
       return []

diff --git a/src/lib/components/controls/navigationBar/NavigationBarItem.scss b/src/lib/components/controls/navigationBar/NavigationBarItem.scss
@@ -22,8 +22,12 @@
     }
 
     &.jse-navigation-bar-arrow {
-      font-size: $font-size-mono - 10px;
-      line-height: $font-size-mono - 10px;
+      // TODO: fix the height of the buttons for real, this is an ugly
+      //  trick to make the buttons have the same height.
+      //  when there is no selection, the navigation bar must have the same
+      //  height as when there is a selection
+      font-size: $font-size-mono - 8px;
+      line-height: $font-size-mono - 8px;
       padding: $padding-half $padding;
 
       &.open {

diff --git a/src/lib/logic/sort.js b/src/lib/logic/sort.js
@@ -6,7 +6,7 @@ import { parseJSONPointerWithArrayIndices } from '../utils/jsonPointer.js'
 
 const diffSequences = diffSequencesExport.default || diffSequencesExport
 
-function caseInsensitiveNaturalCompare(a, b) {
+export function caseInsensitiveNaturalCompare(a, b) {
   const aLower = typeof a === 'string' ? a.toLowerCase() : a
   const bLower = typeof b === 'string' ? b.toLowerCase() : b