[harbour-seabass] change floating button position when toggling searc…

…h panel
milikhin · Jul 21, 2024 · b39800b · b39800b
1 parent bb74e3e
commit b39800b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/editor/__tests__/app/model.test.js b/editor/__tests__/app/model.test.js
@@ -27,7 +27,7 @@ describe('SeabassAppModel', () => {
       content: uuid(),
       editorConfig: { indent_size: 1, tab_width: 1 },
       filePath: uuid(),
-      isReadOnly: false
+      isReadOnly: false,
     }
 
     it('should open new Editor', () => {
@@ -58,7 +58,8 @@ describe('SeabassAppModel', () => {
         hasUndo: false,
         hasRedo: false,
         filePath: options.filePath,
-        isReadOnly: options.isReadOnly
+        isReadOnly: options.isReadOnly,
+        searchPanelHeight: 0
       })
     })
   })

diff --git a/editor/src/app/view.ts b/editor/src/app/view.ts
@@ -25,6 +25,10 @@ export default class SeabassView {
    * Shows welcome note, hides tabs interface
    */
   showWelcomeScreen (): void {
+    if (!this._welcomeElem) {
+      return
+    }
+
     this._welcomeElem.style.display = 'block'
     this._rootElem.style.display = 'none'
   }

diff --git a/editor/src/editor/editor.ts b/editor/src/editor/editor.ts
@@ -59,6 +59,7 @@ export default class Editor extends EventTarget {
   ON_CHANGE_TIMEOUT = 250
   SCROLL_INTO_VIEW_TIMEOUT = 250
   OSK_SCROLL_DELAY = 100
+  SEARCH_BTN_QUERY = '.editor .cm-editor .cm-panel.cm-search'
 
   constructor (options: EditorOptions) {
     super()
@@ -72,9 +73,12 @@ export default class Editor extends EventTarget {
       placeSearchOnTop: options.placeSearchOnTop
     })
 
+    // listen to SearchPanel events
+    const updateListenerExtension = EditorView.updateListener.of(this._onChange.bind(this));
+
     // set initial editor state
     this._initialState = EditorState.create({
-      extensions: this._setup.extensions,
+      extensions: [...this._setup.extensions, updateListenerExtension],
       doc: options.content
     })
     this._isOskVisible = false
@@ -225,7 +229,6 @@ export default class Editor extends EventTarget {
     } else {
       openSearchPanel(this._editor)
     }
-    this._onChange()
   }
 
   /**
@@ -234,15 +237,15 @@ export default class Editor extends EventTarget {
    */
   getUiState (): SeabassEditorState {
     const isSearchPanelOpened = searchPanelOpen(this._editor.state)
-
+    const searchPanelHeight = isSearchPanelOpened
+      ? document.querySelector(this.SEARCH_BTN_QUERY)?.clientHeight ?? 0
+      : 0
     return {
       hasChanges: !this._isReadOnly && !this._editor.state.doc.eq(this._initialState.doc),
       hasUndo: !this._isReadOnly && undoDepth(this._editor.state) > 0,
       hasRedo: !this._isReadOnly && redoDepth(this._editor.state) > 0,
       isReadOnly: this._isReadOnly,
-      searchPanelHeight: isSearchPanelOpened
-        ? document.querySelector('.harbour .editor .cm-editor .cm-panel.cm-search')?.clientHeight ?? 0
-        : 0
+      searchPanelHeight: searchPanelHeight * window.devicePixelRatio
     }
   }
 

diff --git a/harbour-seabass/qml/html/index.html b/harbour-seabass/qml/html/index.html
@@ -36,7 +36,7 @@
     }
 
     .harbour .editor .cm-editor .cm-panel.cm-search button[name="close"] {
-      padding: 5px;
+      padding: 7px;
       font-size: 1rem;
     }
   </style>

diff --git a/harbour-seabass/qml/pages/Editor.qml b/harbour-seabass/qml/pages/Editor.qml
@@ -256,6 +256,7 @@ WebViewPage {
                     enabled: hasOpenedFile
                     onClicked: {
                         api.postMessage('toggleSearchPanel')
+                        isMenuEnabled = !isMenuEnabled
                     }
                 }
                 MenuItem {
@@ -333,9 +334,9 @@ WebViewPage {
 
             // Floating action button to enable pulley menus
             PlatformComponents.FloatingButton {
-                anchors.bottom: (toolbar.open ? toolbar.top : parent.bottom) + editorState.searchPanelHeight
+                anchors.bottom: toolbar.open ? toolbar.top : parent.bottom
                 anchors.right: parent.right
-                anchors.bottomMargin: Theme.paddingMedium
+                anchors.bottomMargin: Theme.paddingMedium + editorState.searchPanelHeight
                 anchors.rightMargin: Theme.paddingMedium
                 visible: hasOpenedFile