feat: Presentation Mode #208

jimniels · 2023-02-02T19:39:09Z

Adds a feature to show/hide application UI (which basically is a shortcut to show/hide all view preferences).
Adds a feature to show/hide debug menu from the command palette

Notes:

Figma calls this "Show/Hide UI" and you can trigger it with CMD . or CMD \
VSCode has a "Zen mode" CMD K Z
NOTE: \ is used as "clear formatting" in Sheets

Todos:

Add "Hide application UI" to command palette & top menu
Add "Show debug menu" to command palette
- If debug menu is open, it closes when "Hide UI" is toggled (but doesn't re-open when you turn off "Hide UI")
Hide application UI controls visibility of debug menu
CMD + \ shortcut for "Hide application UI"
~~Maybe rename it to "Show/Hide UI" like figma? Need a little more thought...~~ Will call it "Hide application UI"

jimniels · 2023-02-02T19:40:17Z

This is kind of hard to test without this issue being resolved first.

davidkircos · 2023-02-02T19:41:05Z

I use this in Figma a lot. I like calling it "Show / Hide UI" that is super clear to me. Also Command + / seems like a good short cut.

Love this feature.

aws-amplify-us-west-2 · 2023-02-02T19:45:12Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-208.de5w5iglj13on.amplifyapp.com

jimniels · 2023-02-02T21:56:31Z

@davidkircos I don't love the name "Show/Hide UI" because it feels like it breaks uniformity with how we name all our other view preferences, e.g. we already have other view prefs which are labeled "Show ____"

Show row and column headings
Show grid axis
Show grid lines
Show cell type outlines

In theory, they're doing the same thing as this, so shouldn't they be called "Show/Hide ____" e.g.

Show/hide row and column headings
Show/hide grid axis
Show/hide grid lines
Show/hide cell type outlines
Show/hide UI

But the "shown" or "hidden" state is communicated by checkmarks in our app, so you don't really need the dual label. For example, this is Figma today: can you tell, from only this screenshot, whether it's showing or hiding the UI? i.e. does the checked box mean it's showing or hiding when the label says both "Show" and "Hide"?

But to your point, perhaps its obvious enough when you use the app.

The options in my head are:

Give it a name, like "Zen mode" or "Presentation mode", as it's not just toggling individual preferences like the others but a grouping of them. Then you can easily have a checkbox like [X] Presentation mode means it's on (unchecked means its off)
Have it match the pattern of the other labels and maybe give it a more precise name, like "Show grid UI"
Just roll with "Show/Hide UI"

Typing this out is an exercise in thinking and maybe just "Show/hide UI" is enough and people will just use it without thinking about it too much — but I don't have to love how it breaks consistency in labeling with the other menu items ha

davidkircos · 2023-02-02T21:58:47Z

How about “Show application UI”?

…

On Thu, Feb 2, 2023 at 2:56 PM Jim Nielsen ***@***.***> wrote: @davidkircos <https://github.com/davidkircos> I don't love the name "Show/Hide UI" because it feels like it breaks uniformity with how we name all our other view preferences, e.g. we already have other view prefs which are labeled "Show ____" - Show row and column headings - Show grid axis - Show grid lines - Show cell type outlines In theory, they're doing the same thing as this, so shouldn't they be called "Show/Hide ____" e.g. - Show/hide row and column headings - Show/hide grid axis - Show/hide grid lines - Show/hide cell type outlines - Show/hide UI But the "shown" or "hidden" state is communicated by checkmarks in our app, so you don't really need the dual label. For example, this is Figma today: can you tell, from only this screenshot, whether it's showing or hiding the UI? i.e. does the checked box mean it's showing or hiding when the label says both "Show" and "Hide"? [image: CleanShot 2023-02-02 at 14 49 ***@***.*** <https://user-images.githubusercontent.com/1316441/216457358-e3c3d1d7-0de4-4a98-b46a-9af9539683ec.png> But to your point, perhaps its obvious enough when you use the app. The options in my head are: 1. Give it a name, like "Zen mode" or "Presentation mode", as it's not just toggling individual preferences like the others but a grouping of them. Then you can easily have a checkbox like [X] Presentation mode means it's on (unchecked means its off) 2. Have it match the pattern of the other labels and maybe give it a more precise name, like "Show grid UI" 3. Just roll with "Show/Hide UI" Typing this out is an exercise in thinking and maybe just "Show/hide UI" is enough and people will just use it without thinking about it too much — but I don't have to love how it breaks consistency in labeling with the other menu items ha — Reply to this email directly, view it on GitHub <#208 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2RO7JFLFM4FOJV2TOADRTWVQURVANCNFSM6AAAAAAUPN2CBU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

jimniels · 2023-02-02T22:03:51Z

I like that.

In theory we could hide the entire UI with that command

You'd probably want some little temporary floating UI, like "return to app (CMD + /)"

But I like keeping the chrome for now.

I'll roll with that.

jimniels · 2023-02-02T22:47:35Z

Ok, I like calling it "Hide application UI"

That distinguishes it apart from the others as a kind of toggle for all of them (which are on by default). Same for the "View" menu:

When you toggle any "Show" it exits you from the "hide application mode" which I think feels right.

jimniels · 2023-02-02T23:34:33Z

src/ui/menus/TopBar/SubMenus/useGridSettings.ts

 }

 export const useGridSettings = (): GridSettingsReturn => {
  const [settings, setSettings] = useLocalStorage('gridSettings', defaultGridSettings);
+  const [showDebugMenu, setShowDebugMenu] = useLocalStorage('showDebugMenu', false);


I'm unsure what to think about this....

The file is named useGridSettings so it's about settings in the grid.

But I think, more generically, it's really about "View" settings because "Hide application UI", at least in my mind, should control showing/hiding the "Debug menu" (which, I think, is not technically a "grid setting" because it lives at the level of the application).

So that's a long way to say: I think this code works, but maybe is starting to break out of its original abstraction. Not sure if that's something we should consider refactoring now, or just leave it be and roll with it. I tried to follow the conventions in this file.

jimniels · 2023-02-02T23:35:34Z

src/ui/menus/TopBar/SubMenus/useGridSettings.ts

+      settings.showCellTypeOutlines ||
+      showDebugMenu
+    );
+  }, [settings]);


This is derived state, so i'm returning it as a function you have to call to get the boolean representation of state vs. an actual boolean.

jimniels · 2023-02-02T23:37:17Z

src/ui/menus/TopBar/SubMenus/useGridSettings.ts

+    }
+
+    emitGridSettingsEvent();
+  }, [setSettings, hideApplicationUI, emitGridSettingsEvent, showDebugMenu, setShowDebugMenu]);


I wanted each place that consumes this function to not have to worry about passing a value. They can just say "whatever state it's in, toggle it" then they don't have to get the state and figure it out themselves in each place.

It breaks the convention for the other pieces of state in this file, but maybe that's ok because it's not a piece of stored state anyway (it's derived state).

davidkircos · 2023-02-22T17:50:18Z

@jimniels I rewrote this to work as Show/Hide UI override, so it saves your other settings and just overrides Show/Hide UI

jimniels · 2023-02-23T04:11:57Z

@davidkircos this is great. Definitely better to have "show/hide UI" be an override of your current settings vs. a replacement/reset of them. That's a nice addition.

A couple of thoughts on the current state of this.

Keyboard shortcuts

We still have a clash with keyboard shortcuts.

Both "Clear formatting" and "Show/hide UI" are CMD + \.

It looks like you might've changed clear formatting to CMD + / (??) but it's not updated in all places. For example, the formatting toolbar still shows CMD + \

Which is what the command palette says for 'show/hide ui'

This is my two cents:

Google Sheets uses CMD + \ for clear formatting.
Figma uses CMD + \ for clear formatting as well as CMD + .
Sketch uses CMD + . for clear formatting

Figma probably uses CMD + . to appease Sketch users (and idk why they use CMD + \, perhaps a legacy shortcut?) I'm feeling like maybe we should keep the Google Sheets shortcut and use the figma/sketch for show/hide UI. In other words, in Quadratic:

CMD + \ - Clear formatting
CMD + . - Show/hide UI

Naming is hard

I still don't love the name, "Show/Hide UI". When you represent it as a state, it makes no sense which state you're in. For example look at this:

Which state is that in? Am I showing the UI or hiding it? What am I turning on or off? Showing the UI? Or hiding it? You can't tell from that toggle.

I like calling it "Hide UI" or "Hide interface". This is what Sketch calls it

I like it because it makes it clear when you represent the state, what state you're in:

But also I like that it feels named to match its function, e.g. "Whatever state the UI is in based on my preferences, override that and hide the application interface". The name of the feature goes with the grain of its function. I like that.

(That said, if we do go with "Show/Hide UI" we should keep sentence case consistent, so "Show/hide UI" instead of "Show/Hide UI")

davidkircos · 2023-02-24T18:11:26Z

@jimniels

Interestingly, Figma does "Show/Hide UI", and all their other settings are sentence case. I like this 🤷

For shortcuts, Command + / makes sense for Show/Hide UI, and Command + \ makes sense for clear formatting. That remains consistent with Sheets

davidkircos · 2023-02-24T21:45:57Z

@jimniels I updated all language to refer to it as "Presentation Mode" let me know what you think

jimniels · 2023-02-24T21:50:15Z

src/gridGL/interaction/keyboard/keyboardViewport.ts

  } = options;

  if (!viewport || event.altKey) return false;

-  if ((event.metaKey || event.ctrlKey) && event.code === 'KeyP') {
+  if ((event.metaKey || event.ctrlKey) && (event.code === 'KeyP' || event.code === 'KeyK' || event.code === 'Slash')) {


jimniels · 2023-02-27T21:50:46Z

Trying an additional enhancement on this, see #326

…reen feat: make presentation mode go full screen

since we hide the header, no need to add this

feat: zen mode

3fd9904

jimniels added 2 commits February 2, 2023 15:53

hide application UI

c3d0929

debug menu accounted for

f9670a7

jimniels changed the title ~~feat: zen mode~~ feat: toggle application UI (& show debug menu) Feb 2, 2023

add shortcut

586ca49

jimniels commented Feb 2, 2023

View reviewed changes

jimniels mentioned this pull request Feb 4, 2023

feat: context menu #214

Merged

jimniels marked this pull request as draft February 6, 2023 18:03

davidkircos added 2 commits February 22, 2023 10:10

Merge branch 'main' into development-zen-mode

07ca95e

show/hide ui as an override

4929de0

davidkircos changed the base branch from development to main February 22, 2023 17:50

rerender Quadrants when showUI is toggled

f34de47

davidkircos added 2 commits February 24, 2023 11:11

Merge branch 'main' into development-zen-mode

79e906f

Update Keyboard Shortcuts for Show/Hide UI and Clear Formatting

15f3686

davidkircos marked this pull request as ready for review February 24, 2023 19:24

davidkircos added 2 commits February 24, 2023 13:33

update shortcuts

cfada5b

change all language to Presentation Mode

22860a8

remove Show Debug Menu (don't want users to see this)

22bc0c0

jimniels commented Feb 24, 2023

View reviewed changes

jimniels added 2 commits February 24, 2023 14:51

sentence casing

af9c260

presentation mode

fd85896

jimniels self-assigned this Feb 27, 2023

jimniels and others added 2 commits February 27, 2023 17:23

fix stretching

44b1dcc

Merge pull request #326 from quadratichq/development-zen-mode-full-sc…

682a10e

…reen feat: make presentation mode go full screen

davidkircos changed the title ~~feat: toggle application UI (& show debug menu)~~ feat: Presentation Mode Feb 28, 2023

davidkircos approved these changes Feb 28, 2023

View reviewed changes

davidkircos and others added 2 commits February 27, 2023 17:57

Merge branch 'main' into development-zen-mode

d768a22

remove disabled

0f501af

since we hide the header, no need to add this

jimniels merged commit 1512ebc into main Feb 28, 2023

jimniels deleted the development-zen-mode branch February 28, 2023 04:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Presentation Mode #208

feat: Presentation Mode #208

jimniels commented Feb 2, 2023 •

edited

Loading

jimniels commented Feb 2, 2023

davidkircos commented Feb 2, 2023

aws-amplify-us-west-2 bot commented Feb 2, 2023

jimniels commented Feb 2, 2023

davidkircos commented Feb 2, 2023 via email

jimniels commented Feb 2, 2023

jimniels commented Feb 2, 2023

jimniels Feb 2, 2023

jimniels Feb 2, 2023

jimniels Feb 2, 2023

davidkircos commented Feb 22, 2023

jimniels commented Feb 23, 2023

davidkircos commented Feb 24, 2023

davidkircos commented Feb 24, 2023

jimniels Feb 24, 2023

jimniels commented Feb 27, 2023

feat: Presentation Mode #208

feat: Presentation Mode #208

Conversation

jimniels commented Feb 2, 2023 • edited Loading

jimniels commented Feb 2, 2023

davidkircos commented Feb 2, 2023

aws-amplify-us-west-2 bot commented Feb 2, 2023

jimniels commented Feb 2, 2023

davidkircos commented Feb 2, 2023 via email

jimniels commented Feb 2, 2023

jimniels commented Feb 2, 2023

jimniels Feb 2, 2023

Choose a reason for hiding this comment

jimniels Feb 2, 2023

Choose a reason for hiding this comment

jimniels Feb 2, 2023

Choose a reason for hiding this comment

davidkircos commented Feb 22, 2023

jimniels commented Feb 23, 2023

Keyboard shortcuts

Naming is hard

davidkircos commented Feb 24, 2023

davidkircos commented Feb 24, 2023

jimniels Feb 24, 2023

Choose a reason for hiding this comment

jimniels commented Feb 27, 2023

jimniels commented Feb 2, 2023 •

edited

Loading