Option to add titlebar on Mac App

Features & ideas
1

Hi!

New to InkDrop and liking it so far, coming from Obsidian.

However, I kind of have a hard time moving the window around, I think the area above the note title that allows you to drag is too small, which is why I think would be nice to have an option to restore normal title bar so I can drag the window easily on my huge Mac monitor.

Thanks!

2

Hi Mark,

Thank you for the suggestion.
I understand you prefer to have a title bar for dragging the window due to the huge monitor.
Since that’s a personal preference and Electron, unfortunately, doesn’t allow to change the title bar style after creating a window, I need some input on this from other people to decide.

3

I have two kinds of workaround by adjusting the CSS in styles.less, and they both work really well.

  1. double the height of the draggable title area. this solution doesn’t have side effects.
    .editor-header-title-input.ui.input .editor-header-top-spacer {
    height: 32px;
    }
  2. mark more area as draggable, but you can’t select the text in the title. However, you can still use double click or keyboard to select.
    .editor-layout .editor-header-layout {
    -webkit-app-region: drag;
    }

I’m personally using a third solution which is more aggressive.
.editor-layout .editor-header-layout, .sidebar-layout {
-webkit-app-region: drag;
}

1 Like
4

@anon43271507 Thanks for sharing your workaround!

5

I understand OP’s request. Can you adjust the layout and the behavior of the App windows layout of the application in macOS in such a way that it behaves as expected and described in: Window Anatomy - Windows and Views - macOS - Human Interface Guidelines - Apple Developer Especially the Title Bar could be a bit thicker and react to a double click (expand app window to edge of display (!= full screen).

6

Could you please elaborate on this work around. I can’t find the file styles.less. I have not worked with CSS so I’m a bit lost here. :smiley:

7

@anon37245157 Check out the documentation for the style customizations: https://docs.inkdrop.app/manual/style-tweaks

Makes sense. The double-click handler will be added in the next release.