Auto-hide the title bar for a better look

Bike Outliner
1

Current:
The top Title Bar, Navigation Bar, and content area, are split into three colors, which is not aesthetically pleasing in terms of design.

Expectation:
1, support auto-hide title bar, only show when mouse over title bar area.
2, Navigation bar and content block can keep the same color between them, looks seamless and beautiful.

Overall, as the outline tool requires a long period of focused thinking, it is expected to bring a minimalist, immersive and beautiful interface effect.

Here are some examples for reference, such as the “ufocus” app：‎uFocus on the App Store

2

For me I agree the navigation bar isn’t perfect.

Generally when I use Bike I have it hidden. It’s there because I feel it’s a good affordance so that new users learn that navigation is a thing in Bike, but visually I don’t think it’s worth the complexity once you understand how Bike works.

1, support auto-hide title bar, only show when mouse over title bar area.

Once you hide the navigation bar then I like the current titlebar design. For me the autohide behavior is more distracting than just seeing the standard titlebar. For me the fact that the titlebar is distinct (and standard macOS) makes it easier to use and easer to ignore. It’s just part of the scenery.

(I understand this is less strong argument that now macOS itself has decided on so many different menubar styles, some of which have autohide… I dislike them too!)

All that to say I mostly like the current design. And of course if you need to really block everything out then you can zoom to fullscreen that hides menubar.

At the same time in Bike 2 I somehow need to add a search bar. That’s gong to cause some rethinking, I don’t know what final design will look like and maybe some sort of autohide will be the answer.

All that to say. I like current design pretty well. Keep your eyes on these forums for Bike 2 preview releases once I start finalizing the UI and continue to make suggestions. Maybe I will add autohide there.

3

Thanks for the developer’s answer, my main idea is: minimalism.

Provide as many options as possible to hide various interface elements, so that the user is completely focused on the outline content (because for long-time users, there will be a tendency to use shortcuts to think about the outline in an immersive way).

Objective:
1, Minimalist aesthetic preference.
2, Immersive focused thinking without distractions.

The exact design solution depends on the developer.

4

@rxjsh

In the meanwhile, with language set to JavaScript in the lop left of Script Editor, you can experiment with toggling the visibility of the title bar like this:

Expand disclosure triangle to view JS source 
(() => {
    "use strict";

    const doc = Application("Bike").documents.at(0);

    return doc.exists()
        ? (doc.showTitleBar = !doc.showTitleBar())
            ? "Title bar of front document showing."
            : `Title bar of '${doc.name()}' hidden.`
        : "No documents open in Bike.";
})();

See: Using Scripts | Bike

You can, of course, assign this toggle to a keystroke with something like FastScripts or Keyboard Maestro

2 Likes
5

Ha, I’d forgotten about this. Thanks for reminder.

1 Like