Reverse sorting and style constants

standardnotes · Jan 1, 2019 · a30d4d8 · a30d4d8
1 parent 467f718
commit a30d4d8
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 44 deletions.
diff --git a/src/OptionsState.js b/src/OptionsState.js
@@ -22,6 +22,7 @@ export default class OptionsState {
   init() {
     this.selectedTagIds = [];
     this.sortBy = "created_at";
+    this.sortReverse = false;
   }
 
   reset() {
@@ -30,11 +31,11 @@ export default class OptionsState {
   }
 
   async loadSaved() {
-    return Storage.get().getItem("options").then(function(result){
+    return Storage.get().getItem("options").then((result) => {
       _.merge(this, _.omit(JSON.parse(result), ["changeObservers"]));
       this.rebuildOptions();
       this.notifyObservers();
-    }.bind(this))
+    })
   }
 
   persist() {
@@ -44,6 +45,7 @@ export default class OptionsState {
   toJSON() {
     return _.merge({
       sortBy: this.sortBy,
+      sortReverse: this.sortReverse,
       selectedTagIds: this.selectedTagIds
     }, this.getDisplayOptionValues());
   }
@@ -76,6 +78,11 @@ export default class OptionsState {
     this.notifyObservers(OptionsState.OptionsStateChangeEventSearch);
   }
 
+  setSortReverse(reverse) {
+    this.sortReverse = reverse;
+    this.notifyObservers(OptionsState.OptionsStateChangeEventSort);
+  }
+
   setSortBy(sortBy) {
     this.sortBy = sortBy;
     this.notifyObservers(OptionsState.OptionsStateChangeEventSort);

diff --git a/src/components/SectionHeader.js b/src/components/SectionHeader.js
@@ -2,22 +2,53 @@ import React, { Component } from 'react';
 import {Text, Platform, View, TouchableOpacity} from 'react-native';
 
 import StyleKit from "../style/StyleKit"
+import ThemedComponent from "@Components/ThemedComponent"
 
-export default class SectionHeader extends Component {
+export default class SectionHeader extends ThemedComponent {
   render() {
     var title = this.props.title;
-    if(Platform.OS == "ios") {
-      title = title.toUpperCase();
-    }
+    if(Platform.OS == "ios") { title = title.toUpperCase(); }
     return (
-      <View style={[StyleKit.stylesForKey("sectionHeaderContainer"), {backgroundColor: this.props.backgroundColor, color: this.props.foregroundColor}]}>
-        <Text style={StyleKit.stylesForKey("sectionHeader")}>{title}</Text>
+      <View style={[this.styles.sectionHeaderContainer, {backgroundColor: this.props.backgroundColor, color: this.props.foregroundColor}]}>
+        <Text style={this.styles.sectionHeader}>{title}</Text>
         {this.props.buttonText &&
           <TouchableOpacity onPress={this.props.buttonAction}>
-            <Text style={StyleKit.stylesForKey("sectionHeaderButton")}>{this.props.buttonText}</Text>
+            <Text style={this.styles.sectionHeaderButton}>{this.props.buttonText}</Text>
           </TouchableOpacity>
         }
       </View>
     )
   }
+
+  loadStyles() {
+    this.styles = {
+      sectionHeaderContainer: {
+        flex: 1,
+        flexGrow: 0,
+        justifyContent: "space-between",
+        flexDirection: 'row',
+        paddingRight: StyleKit.constants.paddingLeft,
+        paddingBottom: 10,
+        paddingTop: 10,
+        backgroundColor: StyleKit.variables.stylekitBackgroundColor
+      },
+
+      sectionHeader: {
+        backgroundColor: StyleKit.variables.stylekitBackgroundColor,
+        fontSize: StyleKit.constants.mainTextFontSize - 4,
+        paddingLeft: StyleKit.constants.paddingLeft,
+        color: StyleKit.variables.stylekitNeutralColor,
+        fontWeight: Platform.OS == "android" ? "bold" : "normal"
+      },
+
+      sectionHeaderButton: {
+        color: StyleKit.variables.stylekitInfoColor
+      },
+
+      sectionHeaderAndroid: {
+        fontSize: StyleKit.constants.mainTextFontSize - 2,
+        color: StyleKit.variables.stylekitInfoColor
+      },
+    }
+  }
 }
diff --git a/src/lib/sfjs/modelManager.js b/src/lib/sfjs/modelManager.js
@@ -174,6 +174,7 @@ export default class ModelManager extends SFModelManager {
     }
 
     var sortBy = options.sortBy;
+    let sortReverse = options.sortReverse;
 
     notes = notes.filter((note) => {
       if(note.deleted) {
@@ -203,18 +204,23 @@ export default class ModelManager extends SFModelManager {
       var bValue = b[sortBy] || "";
 
       let vector = 1;
+
+      if(sortReverse) {
+        vector *= -1;
+      }
+
       if(sortBy == "title") {
         aValue = aValue.toLowerCase();
         bValue = bValue.toLowerCase();
 
         if(aValue.length == 0 && bValue.length == 0) {
           return 0;
         } else if(aValue.length == 0 && bValue.length != 0) {
-          return 1;
+          return 1 * vector;
         } else if(aValue.length != 0 && bValue.length == 0) {
-          return -1;
+          return -1 * vector;
         } else  {
-          vector = -1;
+          vector *= -1;
         }
       }
 

diff --git a/src/screens/Settings.js b/src/screens/Settings.js
@@ -466,6 +466,11 @@ export default class Settings extends Abstract {
     this.forceUpdate();
   }
 
+  toggleSortReverse = () => {
+    this.options.setSortReverse(!this.options.sortReverse);
+    this.forceUpdate();
+  }
+
   render() {
     if(this.state.lockContent) {
       return (<LockedView />);
@@ -510,7 +515,7 @@ export default class Settings extends Abstract {
 
 
           <TableSection>
-            <SectionHeader title={"Sort By"} />
+            <SectionHeader title={"Sort Notes By"} buttonText={this.options.sortReverse ? "Disable Reverse Sort" : "Enable Reverse Sort"} buttonAction={this.toggleSortReverse} />
             {this.sortOptions.map((option, i) => {
               return (
                 <SectionedAccessoryTableCell
@@ -526,11 +531,12 @@ export default class Settings extends Abstract {
           </TableSection>
 
           <TableSection>
-            <SectionHeader title={"Options"} />
+            <SectionHeader title={"Note List Options"} />
 
             <SectionedAccessoryTableCell
               onPress={() => {this.onOptionSelect('hidePreviews')}}
               text={"Hide note previews"}
+              first={true}
               selected={() => {return this.options.hidePreviews}}
             />
 

diff --git a/src/style/StyleKit.js b/src/style/StyleKit.js
@@ -29,6 +29,8 @@ export default class StyleKit {
   constructor() {
     this.themeChangeObservers = [];
 
+    this.buildConstants();
+
     this.createDefaultThemes();
 
     KeysManager.get().registerAccountRelatedStorageKeys(["activeTheme"]);
@@ -144,6 +146,10 @@ export default class StyleKit {
     return this.get().activeTheme.content.variables;
   }
 
+  static get constants() {
+    return this.get().constants;
+  }
+
   static styles() {
     return this.get().styles;
   }
@@ -270,8 +276,8 @@ export default class StyleKit {
 
   reloadStyles() {
     let variables = this.activeTheme.content.variables;
-    let mainTextFontSize = 16;
-    let paddingLeft = 14;
+    let mainTextFontSize = this.constants.mainTextFontSize;
+    let paddingLeft = this.constants.paddingLeft;
     this.styles = {
       container: {
         height: "100%",
@@ -312,34 +318,6 @@ export default class StyleKit {
         backgroundColor: variables.stylekitBackgroundColor
       },
 
-      sectionHeaderContainer: {
-        flex: 1,
-        flexGrow: 0,
-        justifyContent: "space-between",
-        flexDirection: 'row',
-        paddingRight: paddingLeft,
-        paddingBottom: 10,
-        paddingTop: 10,
-        backgroundColor: 'rgba(52, 52, 52, 0.0)'
-      },
-
-      sectionHeader: {
-        backgroundColor: "transparent",
-        fontSize: mainTextFontSize - 4,
-        paddingLeft: paddingLeft,
-        color: variables.stylekitNeutralColor,
-        fontWeight: Platform.OS == "android" ? "bold" : "normal"
-      },
-
-      sectionHeaderButton: {
-        color: variables.stylekitInfoColor
-      },
-
-      sectionHeaderAndroid: {
-        fontSize: mainTextFontSize - 2,
-        color: variables.stylekitInfoColor
-      },
-
       sectionedTableCell: {
         borderBottomColor: variables.stylekitBorderColor,
         borderBottomWidth: 1,
@@ -473,6 +451,13 @@ export default class StyleKit {
     }
   }
 
+  buildConstants() {
+    this.constants = {
+      mainTextFontSize: 16,
+      paddingLeft: 14
+    }
+  }
+
   static actionSheetStyles() {
     return {
       wrapperStyle: StyleKit.styles().actionSheetWrapper,