enhance(toolbar): use native operating system toolbar #1120

shanberg · 2021-05-06T03:15:32Z

Note: I can't get script/lint and cljstyle fix to agree with each other.

Refreshes the toolbars to look more at home on 3 major OSs.
Replaces Electron/Browser-style zooming with an internally controlled facsimile, mainly to prevent the toolbar from breaking when you zoom, but also allowing us to provide additional UI helpers for zooming
Provides example code for doing more with the Electron wrapper by getting IpcMain events and sending events through channels.
Adds app-classes helper to style elements based on electron v browser, and per-OS
The styles themselves are mostly a first pass. Main task of this PR is to create the infrastructure for further improvements.

Before

After

Merge from origin

tangjeff0

One small-ish issue is that you cannot see the native controls when Athens is a small window for Windows.

Windows

Old

New:

Mac

New

Mac is fine

Ubuntu

My guess is this probably also exists for Ubuntu. Unfortunately, mine comes with built-in tiling, so I cannot make the width small. @sid597 can you test this out? Please checkout @shanberg's branch, make the width of Athens small, and then share a screenshot. My guess is that the top-right controls will be hidden.

src/cljs/athens/style.cljs

tangjeff0 · 2021-06-09T22:21:47Z

src/cljs/athens/views/app_toolbar.cljs

+                                  {:class (app-classes {:os os
+                                                        :electron? electron?
+                                                        :theme-dark? @theme-dark
+                                                        :win-focused? @win-focused?
+                                                        :win-fullscreen? @win-fullscreen?
+                                                        :win-maximized? @win-maximized?})})


We may want {:class (...)} to a direct argument to merge, otherwise stylefy will generate class for each permutation of classes.

@tangjeff0 Not sure whether that's possible, since Stylefy has to wrap the props passed to the element.

tangjeff0 · 2021-06-09T22:22:35Z

src/cljs/athens/views/app_toolbar.cljs

+                           {:class (app-classes {:os os
+                                                 :electron? electron?
+                                                 :theme-dark? @theme-dark
+                                                 :win-focused? @win-focused?
+                                                 :win-fullscreen? @win-fullscreen?
+                                                 :win-maximized? @win-maximized?})})


We may want {:class (...)} to a direct argument to merge, otherwise stylefy will generate class for each permutation of classes.

tangjeff0 · 2021-06-09T22:24:10Z

src/cljs/athens/views.cljs

@@ -86,7 +88,12 @@

         :else [:<>
                (when @modal [filesystem/window])
-                [:div (stylefy/use-style app-wrapper-style)
+                [:div (use-style app-wrapper-style
+                                 {:class [(case (get-os)


May want to put (get-os) in the let binding at the top, otherwise will get computed on each re-render. (unlikely OS of Athens needs to be recomputed)

sid597 · 2021-06-09T23:36:40Z

@tangjeff0 Yeah the controls are hidden. Which tiling manager do you use ? I use i3wm and I can make a window float.

tangjeff0 · 2021-06-09T23:39:21Z

@sid597 I forgot I can make floating windows 🤦 yeah but getting same thing. Changes requested for @shanberg to make the native toolbar controls always visible for Ubuntu and Windows (which are found on the right side, rather than left as in Mac)

shanberg · 2021-06-10T00:52:53Z

One small-ish issue is that you cannot see the native controls when Athens is a small window for Windows.

@tangjeff0 I've hidden the athena button label at small App widths, and adjusted the app's minimum width to make sure the controls are always visible. Tested on macOS, Windows, Ubuntu.

…erg/athens into frameless-styled-toolbar-3

tangjeff0

I added ^:cljstyle/ignore to (superficially) address issue of kondo and cljstyle fighting with each other.

I increased minWidth from 670 to 800 because going to 670 width still led to the X button on Ubuntu getting hidden. I used 800 because that was the value I saw in app-toolbar. Maybe that should be parameterized, assuming they should be the same?

src/cljs/athens/style.cljs

…#1120) * feat(blocks): update writing smoothly * refactor(dropdown): separate component defn from defcard * feat(blocks): hook up slash commands and context menu to blocks * feat(slash-menu): improved layout * feat: basic frameless etc stuff in place * chore: update from main * fix: add toolbar drag handle * feat: add minimize button * feat: add minimize button * chore: midflight making window minimize button * feat: working minimize button * fix: block in windows window controls * feat: improved style for toolbar buttons on win * chore: add type hints to graph * feat: electron min max win toggle effect * fix: windows toolbar controls work work properly * feat: rerender max/restore icons * feat: main view classed with os and electron * chore: update stylefy * feat: basic toolbar style conditions in place * fix: dont hide win controls on win * feat: improvements to toolbar * feat: improved style for macos toolbar * feat: improved style on win * feat: improved style for macos toolbar * feat: proper handling of fullscreen in macos * feat: add conditions for fullscreen windows button * feat: block in new listener for f11 fullscreen event * feat: fullscreen and close functionality for win * feat: toolbar styled for ubuntu * fix: properly drop minimize icon in linux * chore: fix code style issues * feat: shorter titlebar when app is fullscreen * chore: fix linter issue * chore: fix linter complaint * chore: remove unnecessary changes * fix: remove redundant db attribute * rfct: use case instead of cond for app view classname * rfct: simplify app toolbar code * chore: fix linter complaints * fix: remove unused import * feat: add is-focused class to toolbar * chore: fix linter issues * feat: improved style for unfocused app toolbar in linux * chore: revert stylefy upgrade * feat: midfight adding zoom-factor to db * feat: build app-level zoom factor * fix: move base font size to root * feat: working controlled zoom * rfct: prefer relative font sizes and no 'all' transitions * feat: fully control zoom across app * feat: improved zoom clamping * chore: remove redundant type * feat: clearer comment around old zoom cotrols * fix: solve issue with menu on pc * feat: better toolbar height for windows * fix: menu working on pc * fix: revert code style changes * chore: better code style in electron * fix: cljstyle * fix: revert whitespace change * fix: remove redundant style * fix: cleaner code style * fix: cljstyle * fix: code style * fix: code tsyle * fix: code style * fix: code style * fix: contains had extra parens * fix(left-sidebar): clamp size of version indicator * fix: page menu follows page title * rfct: improved zoom range * chore: fix lint issues * chore: sort requires * feat: comment out more unused menu tiems * rfct: simplify menu to use more defaults * chore: fix linter issues * chore: fix linter issue * refactor: move min-max zoom sizes into style * chore: misc cleanup * cleanup: minor refactor and cleanup * chore: fix linter complaints * fix: sort namespaces * fix: fix linter again * rfct: clean up app classes util * rfct: centralize ipcMainChannels def * chore: fix linter issues * feat: border under toolbar only shown on hover * fix: proper button size in windows * feat: hide athena button label at small widths * feat: increased min app width to toolbar break point * rfct: minor cleanup * style: better code comments * fix: ignore cljstyle and increase minWidth * single semi-colon inline comments for newest version of cljstyle Co-authored-by: Jeffery Tang <tangj1122@gmail.com> Co-authored-by: shanberg <98312+shanberg@users.noreply.github.com> Co-authored-by: Dominic Chiampi <dominicchiampi@gmail.com>

tangjeff0 and others added 30 commits July 2, 2020 16:13

feat(blocks): update writing smoothly

81eda1b

refactor(dropdown): separate component defn from defcard

9fe1c74

feat(blocks): hook up slash commands and context menu to blocks

9fd5efa

feat(slash-menu): improved layout

5a07610

Merge branch 'master' of https://github.com/athensresearch/athens

9127fb9

feat: basic frameless etc stuff in place

5ba79e0

chore: update from main

afa148d

fix: add toolbar drag handle

c613eb2

feat: add minimize button

a022a9b

feat: add minimize button

34ab1d6

chore: midflight making window minimize button

afd1444

feat: working minimize button

5a910ea

fix: block in windows window controls

b2f8b01

feat: improved style for toolbar buttons on win

4508db2

chore: add type hints to graph

18b3a88

feat: electron min max win toggle effect

2964163

fix: windows toolbar controls work work properly

5ae0f51

feat: rerender max/restore icons

61bbdee

Merge branch 'frameless-styled-toolbar-3' into pr/5

4b52162

Merge pull request #6 from shanberg/merge-from-origin

32420f5

Merge from origin

feat: main view classed with os and electron

3866f36

chore: update stylefy

94fff07

feat: basic toolbar style conditions in place

6399e32

fix: dont hide win controls on win

3d5d12a

feat: improvements to toolbar

b3686c7

feat: improved style for macos toolbar

7d388f2

feat: improved style on win

cff3298

feat: improved style for macos toolbar

c8cd933

feat: proper handling of fullscreen in macos

620842a

feat: add conditions for fullscreen windows button

e5278ae

shanberg added 2 commits May 23, 2021 08:50

fix: sort namespaces

31bef19

fix: fix linter again

86e7399

shanberg marked this pull request as ready for review May 23, 2021 16:58

shanberg and others added 8 commits May 23, 2021 21:41

rfct: clean up app classes util

6526871

rfct: centralize ipcMainChannels def

ed02498

Merge branch 'main' into frameless-styled-toolbar-3

ba46058

chore: fix linter issues

beac566

Merge branch 'main' into frameless-styled-toolbar-3

070d606

feat: border under toolbar only shown on hover

63e87c4

fix: proper button size in windows

10c308b

Merge branch 'main' into frameless-styled-toolbar-3

7c199b1

tangjeff0 reviewed Jun 9, 2021

View reviewed changes

shanberg added 2 commits June 9, 2021 20:34

feat: hide athena button label at small widths

ac43019

feat: increased min app width to toolbar break point

3ad1c8a

shanberg and others added 2 commits June 9, 2021 21:49

rfct: minor cleanup

d277aeb

Merge branch 'main' into frameless-styled-toolbar-3

094e360

shanberg requested a review from tangjeff0 June 10, 2021 01:50

shanberg and others added 3 commits June 9, 2021 21:53

style: better code comments

b3d3e70

Merge branch 'frameless-styled-toolbar-3' of https://github.com/shanb…

0af237c

…erg/athens into frameless-styled-toolbar-3

fix: ignore cljstyle and increase minWidth

9c24058

tangjeff0 approved these changes Jun 13, 2021

View reviewed changes

src/cljs/athens/style.cljs Show resolved Hide resolved

single semi-colon inline comments for newest version of cljstyle

3e21848

tangjeff0 changed the title ~~style(toolbar): more-native toolbar styles in windows, macos, linux~~ enhance(toolbar): more-native toolbar styles in windows, macos, linux Jun 13, 2021

tangjeff0 changed the title ~~enhance(toolbar): more-native toolbar styles in windows, macos, linux~~ enhance(toolbar): use native operating system toolbar Jun 13, 2021

tangjeff0 merged commit e2c953b into athensresearch:main Jun 13, 2021

shanberg deleted the frameless-styled-toolbar-3 branch September 27, 2021 23:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enhance(toolbar): use native operating system toolbar #1120

enhance(toolbar): use native operating system toolbar #1120

shanberg commented May 6, 2021 •

edited

Loading

tangjeff0 left a comment •

edited

Loading

tangjeff0 Jun 9, 2021

shanberg Jun 10, 2021

tangjeff0 Jun 9, 2021

tangjeff0 Jun 9, 2021

sid597 commented Jun 9, 2021

tangjeff0 commented Jun 9, 2021 •

edited

Loading

shanberg commented Jun 10, 2021

tangjeff0 left a comment

enhance(toolbar): use native operating system toolbar #1120

enhance(toolbar): use native operating system toolbar #1120

Conversation

shanberg commented May 6, 2021 • edited Loading

tangjeff0 left a comment • edited Loading

Choose a reason for hiding this comment

Windows

Old

New:

Mac

New

Ubuntu

tangjeff0 Jun 9, 2021

Choose a reason for hiding this comment

shanberg Jun 10, 2021

Choose a reason for hiding this comment

tangjeff0 Jun 9, 2021

Choose a reason for hiding this comment

tangjeff0 Jun 9, 2021

Choose a reason for hiding this comment

sid597 commented Jun 9, 2021

tangjeff0 commented Jun 9, 2021 • edited Loading

shanberg commented Jun 10, 2021

tangjeff0 left a comment

Choose a reason for hiding this comment

shanberg commented May 6, 2021 •

edited

Loading

tangjeff0 left a comment •

edited

Loading

tangjeff0 commented Jun 9, 2021 •

edited

Loading