diff --git a/editor/__tests__/app/model.test.js b/editor/__tests__/app/model.test.js index 6af00ba..2597203 100644 --- 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 index 72d19cb..53a12a3 100644 --- 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 index 9848b56..167b0d9 100644 --- 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 index e4ab3ba..e72602e 100644 --- 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; } diff --git a/harbour-seabass/qml/pages/Editor.qml b/harbour-seabass/qml/pages/Editor.qml index 5f685a0..6d599f3 100644 --- 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