Merge pull request #157 from milikhin/harbour-settings

Add Settings page to harbour-seabass

Author: milikhin

editor/__tests__/app/app.test.js

@@ -19,9 +19,5 @@ describe('SeabassApp', () => {
     // Check for 'appLoaded' action
     const evt = await waitForApiMessage
     expect(evt.detail.action).toEqual('appLoaded')
-    expect(evt.detail.data).toEqual({
-      isToolbarOpened: true,
-      directory: null
-    })
   })
 })

editor/__tests__/app/model.test.js

@@ -18,10 +18,6 @@ describe('SeabassAppModel', () => {
       expect(model._viewport).toEqual({
         verticalHtmlOffset: 0
       })
-      expect(model.sailfishPreferences).toEqual({
-        isToolbarOpened: true,
-        directory: null
-      })
     })
   })
 
@@ -204,15 +200,4 @@ describe('SeabassAppModel', () => {
       })
     })
   })
-
-  describe('#setSailfishPreferences', () => {
-    it('should set toolbar visibility', () => {
-      const model = new SeabassAppModel()
-
-      const options = { isToolbarOpened: true }
-      model.setSailfishPreferences(options)
-
-      expect(model._sailfish.isToolbarOpened).toEqual(options.isToolbarOpened)
-    })
-  })
 })

editor/src/api/api-interface.ts

@@ -1,4 +1,4 @@
-import { InputPreferences, SeabassSailfishPreferences, ViewportOptions } from '../app/model'
+import { InputPreferences, ViewportOptions } from '../app/model'
 import { KeyDownOptions } from '../editor/editor'
 
 export interface ApiTransport {
@@ -56,7 +56,6 @@ export interface IncomingMessagePayload {
   requestSaveAndClose: FileActionOptions
   setContent: SetContentOptions
   setPreferences: InputPreferences
-  setSailfishPreferences: SeabassSailfishPreferences
   undo: undefined
   toggleReadOnly: undefined
 }

editor/src/api/api.ts

@@ -10,7 +10,7 @@ import SocketApiTransport from './socket-transport'
 /** Outgoing API message to a platform-specific app */
 interface OutgoingApiMessage {
   action: string
-  data: unknown
+  data?: unknown
 }
 
 interface ApiOptions {
@@ -45,7 +45,6 @@ export default class SeabassApi extends EventTarget {
     'requestSaveAndClose',
     'setContent',
     'setPreferences',
-    'setSailfishPreferences',
     'toggleReadOnly',
     'undo',
     'viewportChange'

editor/src/app/app.ts

@@ -9,7 +9,6 @@ import SeabassView from './view'
 import SeabassAppModel, {
   EditorStateChangeOptions,
   InputPreferences,
-  SeabassSailfishPreferences,
   ViewportOptions
 } from './model'
 
@@ -46,7 +45,7 @@ class SeabassApp {
     this._tabs = new Tabs({ rootElem })
 
     this._registerApiEventListeners()
-    this._api.send({ action: 'appLoaded', data: this._model.sailfishPreferences })
+    this._api.send({ action: 'appLoaded' })
   }
 
   /**
@@ -64,7 +63,6 @@ class SeabassApp {
     this._api.addEventListener('requestSaveAndClose', this._onRequestFileSave.bind(this))
     this._api.addEventListener('setContent', this._forwardEvent.bind(this))
     this._api.addEventListener('setPreferences', this._onSetPreferences.bind(this))
-    this._api.addEventListener('setSailfishPreferences', this._onSetSailfishPreferences.bind(this))
     this._api.addEventListener('toggleReadOnly', this._forwardEvent.bind(this))
     this._api.addEventListener('undo', this._forwardEvent.bind(this))
     this._api.addEventListener('viewportChange', this._onViewportChange.bind(this))
@@ -118,8 +116,8 @@ class SeabassApp {
   }
 
   /**
-   * Loads saved SailfishOS-specific preferences
-   * @param evt setTheme event
+   * Handles viewport changes
+   * @param evt viewportChange event
    */
   _onViewportChange (evt: CustomEvent<ViewportOptions>): void {
     this._model.setViewportOptions(evt.detail)
@@ -146,14 +144,6 @@ class SeabassApp {
     this._model.setPreferences(evt.detail)
   }
 
-  /**
-   * Loads saved SailfishOS-specific preferences
-   * @param evt setTheme event
-   */
-  _onSetSailfishPreferences (evt: CustomEvent<SeabassSailfishPreferences>): void {
-    this._model.setSailfishPreferences(evt.detail)
-  }
-
   /**
    * Forwards UI state changes to the platform-specific app
    * @param evt state change event

editor/src/app/model.ts

@@ -26,13 +26,6 @@ export interface SeabassCommonPreferences {
   useWrapMode?: boolean
 }
 
-export interface SeabassSailfishPreferences {
-  /** Bottom toolbar state */
-  isToolbarOpened: boolean
-  /** Current file tree directory */
-  directory: string|null
-}
-
 export interface ViewportOptions {
   /** HTML page's offset from the bottom of webView. Used as a workaround to SfOS rendering issues */
   verticalHtmlOffset: number
@@ -47,7 +40,6 @@ interface AppEvents {
   loadFile: CustomEvent<FileLoadOptions>
   log: CustomEvent<unknown>
   preferencesChange: CustomEvent<SeabassCommonPreferences>
-  sfosPreferencesChange: CustomEvent<SeabassSailfishPreferences>
   stateChange: CustomEvent<EditorStateChangeOptions>
 }
 
@@ -72,36 +64,19 @@ export default class SeabassAppModel extends EventTarget {
     useWrapMode: boolean
   }
 
-  /** SailfishOS-specific preferences */
-  _sailfish: {
-    isToolbarOpened: boolean
-    directory: string|null
-  }
-
   _viewport: {
     verticalHtmlOffset: number
   }
 
-  SFOS_TOOLBAR_LOCAL_STORAGE_KEY = 'sailfish__isToolbarOpened'
-  SFOS_DIRECTORY_LOCAL_STORAGE_KEY = 'sailfish__directory'
-
   constructor () {
     super()
     this._editors = new Map()
     this._preferences = { isDarkTheme: false, useWrapMode: true }
-    this._sailfish = {
-      isToolbarOpened: localStorage.getItem(this.SFOS_TOOLBAR_LOCAL_STORAGE_KEY) === 'true',
-      directory: localStorage.getItem(this.SFOS_DIRECTORY_LOCAL_STORAGE_KEY)
-    }
     this._viewport = {
       verticalHtmlOffset: 0
     }
   }
 
-  get sailfishPreferences (): SeabassSailfishPreferences {
-    return this._sailfish
-  }
-
   addEventListener<T extends keyof AppEvents>(type: T,
     callback: AppEventListener<T>, options?: EventListenerOptions): void {
     super.addEventListener(type, callback as EventListenerOrEventListenerObject | null, options)
@@ -213,21 +188,4 @@ export default class SeabassAppModel extends EventTarget {
     this.dispatchEvent(new CustomEvent('htmlThemeChange', { detail: this._htmlTheme }))
     this.dispatchEvent(new CustomEvent('preferencesChange', { detail: this._preferences }))
   }
-
-  /**
-   * Sets sailfish-specific app preferences
-   * @param options app preferences
-   */
-  setSailfishPreferences (options: Partial<SeabassSailfishPreferences>): void {
-    if (options.isToolbarOpened !== undefined) {
-      this._sailfish.isToolbarOpened = options.isToolbarOpened
-      localStorage.setItem(this.SFOS_TOOLBAR_LOCAL_STORAGE_KEY, options.isToolbarOpened.toString())
-    }
-    if (options.directory !== undefined && options.directory !== null) {
-      this._sailfish.directory = options.directory
-      localStorage.setItem(this.SFOS_DIRECTORY_LOCAL_STORAGE_KEY, options.directory)
-    }
-
-    this.dispatchEvent(new CustomEvent('sfosPreferencesChange', { detail: this._sailfish }))
-  }
 }

editor/src/editor/editor.ts

@@ -93,9 +93,10 @@ export default class Editor extends EventTarget {
    * Destroys editor
    */
   destroy (): void {
+    this._removeDomEventHandlers()
+    this._editor.destroy()
     const editorParentElem = this._editorElem.parentElement as HTMLElement
     editorParentElem.removeChild(this._editorElem)
-    this._removeDomEventHandlers()
   }
 
   dispatchEvent<T extends keyof Events> (event: Events[T]): boolean {

harbour-seabass/harbour-seabass.pro

@@ -30,6 +30,7 @@ DISTFILES += qml/harbour-seabass.qml \
     qml/pages/Files.qml \
     qml/pages/NewFile.qml \
     qml/pages/SaveDialog.qml \
+    qml/pages/Settings.qml \
     qml/py-backend \
     rpm/harbour-seabass.changes.in \
     rpm/harbour-seabass.changes.run.in \

harbour-seabass/html/index.html

@@ -7,7 +7,7 @@
 
   </style>
   <style id="theme-css">
-    /* CSS Custom Properties are not supported in Sailfish */
+    /* CSS Custom Properties were not supported in Sailfish prior to v4.2 */
     /* these values are going to be replaces within JS: */
     body {
       /*background-color: #backgroungColor */
@@ -18,15 +18,17 @@
     #welcome a {
       /* color: #highlightColor */
     }
+    .cm-editor {
+      /* font-size: #fontSize */
+    }
   </style>
 </head>
 
 <body>
   <div id="welcome">
     <p>
-      v0.10 introduces new file picker component.
-      It has compact design, remembers last opened directory and provides possiblity
-      to create new files.
+      v0.11 introduces Settings page.
+      It is possible to change font size and text wrapping.
     </p>
     <p>
       Please let me know if you have any issues:

harbour-seabass/qml/pages/About.qml

@@ -9,7 +9,7 @@ Page {
         anchors.fill: parent
         header: PageHeader {
             id: header
-            title: qsTr('Seabass v%1').arg('0.10.0')
+            title: qsTr('Seabass v%1').arg('0.11.0')
         }
         model: ListModel {
             ListElement {

harbour-seabass/qml/pages/Editor.qml

@@ -4,6 +4,7 @@ import Sailfish.Silica 1.0
 import Sailfish.Pickers 1.0
 import Sailfish.WebView 1.0
 import Sailfish.WebEngine 1.0
+import Nemo.Configuration 1.0
 
 import '../generic/utils.js' as QmlJs
 import '../components' as PlatformComponents
@@ -31,20 +32,43 @@ WebViewPage {
         width: page.width
     }
 
+    Component.onCompleted: {
+        pageStack.busyChanged.connect(function() {
+            if (!hasOpenedFile) {
+                return
+            }
+
+            if (!pageStack.busy) {
+                page.isMenuEnabled = false
+            }
+        })
+    }
+
+    ConfigurationValue {
+        id: configToolbarVisibility
+        key: "/apps/harbour-seabass/settings/is_toolbar_visible"
+        defaultValue: false
+    }
+
+    ConfigurationValue {
+        id: configFontSize
+        key: "/apps/harbour-seabass/settings/font_size"
+        defaultValue: 12
+    }
+
+    ConfigurationValue {
+        id: configUseWrapMode
+        key: "/apps/harbour-seabass/settings/soft_wrap_enabled"
+        defaultValue: true
+    }
+
     GenericComponents.EditorState {
         id: editorState
         isDarkTheme: Theme.colorScheme === Theme.LightOnDark
+        directory: api.homeDir
+        fontSize: configFontSize.value
+        useWrapMode: configUseWrapMode.value
         verticalHtmlOffset: headerHeight / WebEngineSettings.pixelRatio
-
-        onFilePathChanged: {
-            isMenuEnabled = false
-        }
-
-        onDirectoryChanged: {
-            api.postMessage('setSailfishPreferences', {
-                directory: directory
-            })
-        }
     }
 
     GenericComponents.EditorApi {
@@ -57,9 +81,6 @@ WebViewPage {
 
         // API methods
         onAppLoaded: function (data) {
-            toolbar.open = data.isToolbarOpened || false
-            // use `data.directory || api.homeDir` to restore last opened directory when opening app
-            editorState.directory = api.homeDir
             editorState.loadTheme()
             editorState.updateViewport()
         }
@@ -87,7 +108,7 @@ WebViewPage {
             page: page
             title: hasOpenedFile
                 ? ((editorState.hasChanges ? '*' : '') + QmlJs.getFileName(filePath))
-                : qsTr('Seabass v%1').arg('0.10.0')
+                : qsTr('Seabass v%1').arg('0.11.0')
             description: hasOpenedFile
                 ? QmlJs.getPrintableDirPath(QmlJs.getDirPath(filePath), api.homeDir)
                 : qsTr('Release notes')
@@ -169,6 +190,12 @@ WebViewPage {
                     toolbar.open = !toolbar.open
                 }
             }
+            MenuItem {
+                text: qsTr('Settings')
+                onClicked: {
+                    pageStack.push(settings)
+                }
+            }
             MenuItem {
                 text: qsTr('About')
                 onClicked: {
@@ -183,7 +210,7 @@ WebViewPage {
             width: parent.width
             height: Theme.itemSizeMedium
             focus: false
-            open: false
+            open: configToolbarVisibility.value
             background: Rectangle {
                 // default background doesn't look good when virtual keyboard is opened
                 // hence the workaround with Rectangle
@@ -193,9 +220,7 @@ WebViewPage {
             }
 
             onOpenChanged: {
-                api.postMessage('setSailfishPreferences', {
-                    isToolbarOpened: open
-                })
+                configToolbarVisibility.value = open
             }
 
             PlatformComponents.Toolbar {
@@ -290,6 +315,21 @@ WebViewPage {
         }
     }
 
+    Component {
+        id: settings
+        Settings {
+            fontSize: configFontSize.value
+            useWrapMode: configUseWrapMode.value
+
+            onFontSizeChanged: {
+                configFontSize.value = fontSize
+            }
+            onUseWrapModeChanged: {
+                configUseWrapMode.value = useWrapMode
+            }
+        }
+    }
+
     /**
      * Displays error message
      * @param {string} [errorMessage] - error message to display