Focus - Full-screen composer mode

theme-component

(Joe) #1

Focus is a (desktop only) theme component that adds a full-screen composer mode.

Github repository link

https://github.com/hnb-ku/discourse-focus-composer


This component adds a button to the default composer. Clicking the button makes the composer enter into “focus” mode where you only see the things you need to edit the body of the post / topic / message and a couple of other essentials like the formatting bar and draft / upload status.

Try it live on Theme creator:
(You have to set the category to Junk before going into fullscreen mode to see what it would look like on your install)

https://theme-creator.discourse.org/theme/Johani/focus-mode

This component does not interfere with any of the functions of the composer. It only adds Focus mode on top of what is already there.


Samples:

The button:

Focus mode active:

Focus mode active - preview hidden:


How do I install this?

You install this component just like any other theme. Follow the instructions in the official guide:

Once you’re done, simply add the component to your current theme. Done!


Automagically maximize "create new topic" window?
Quick Messages Plugin
(Sam Saffron) #3

Nice! I wonder if you should hide some of the content behind so scroll bar does not show up?


(Joe) #4

Yes! I like that a lot :fire:

This is now done, along with a couple of other minor tweaks.

No more extra scrollbars :tada:

I also updated the preview on Theme-Creator


(Dave McClure) #5

Another thought (not sure if it’s a good one):

What if there was a bit of space between the composer and the preview?

The full screen preview also reminded me that this may be a nice change here too: Show title, category and tags in composer preview for new topics


(Lee Strickland) #6

I needed this! Thanks a bunch! Makes editing large wiki articles sooooooo much better. :fist_right::fist_left:


(Daniela) #7

Great component!

When the composer is in focus the popup partially ends up on the new button.


By reducing the composer to its original size again, it is no longer possible to enlarge it without first closing the popup that completely covers the button.

In the same way if you start to type something on the composer and one of the popups appears, the button will be hidden until the popup is closed.

Changing a few px the distance of the popup from the top should leave the two minimize and focus buttons always visible.


#8

good lord, this is excellent.


(Joe) #9

Great catch @dax :sunflower:

All fixed now :confetti_ball:


#10

It would be great if we didn’t have to exit the full screen mode to post/reply.
Also, the icon is misaligned in Safari.
14%20PM


(Joe) #11

This is fixed

I removed the buttons because you can’t submit unless you add a title and if you try to submit while in fullscreen mode you won’t see the error because the the title field is not visible. If I add the title / category / tag fields back well, it’s not much in the way of a minimal interface.

Regardless, I added a new setting that will allow you to show the buttons even in fullscreen mode:

It’s on by default but you can disable it to show the buttons.


There’s a keyboard shortcut for fullscreen mode now!

Use the combination

ctrl +

and for Mac

Command +


(Jeff Atwood) #12

Hmm, CTRL+↓ is used to select text (for that matter, CTRL + any arrow does). I think we’d need a three-key shortcut here to keep it from conflicting.


(Joe) #13

You’re right, that shortcut is no good.

I’d like to give a two-key shortcut one more shot. If that doesn’t work, I’ll move to to a three-key shortcut.

I’ve changed it to

ctrl + space

and

command + space


(David Taylor) #14

Unfortunately that will conflict with spotlight search on macOS :frowning:


(Rafael dos Santos Silva) #15

byobu and sublime use Shift+F11 to zoom/focus.


#16

Fantastic update! Thank you @Johani


(Joe) #17

I really like this! :heart:

It feels very natural and you can quickly toggle browser fullscreen afterwards.

I updated the theme to use that shortcut.


#18

Hey Joe :grin:

I think I may have found a few minor things that could be looked at when you get a chance:

  • When the fullscreen composer is installed, the expand icon starts to make the hide-composer button overlap with the who’s typing presence indicator.

56%20PM

I found that the following CSS fixes the issue:

.composer-fields .presence-users {
    right: 65px;
}
  • It seems that shift+f11 does not work on a Mac (or at least a MacBook). That key combination moves all the open windows out of view and exposes the desktop shortcuts. I haven’t done any customization of system keyboard shortcuts.

  • Might it be helpful to add plugin-outlets to the various sections of the ? Keyboard Shortcut modal so one wouldn’t have to override the whole template to add the keyboard shortcut for the full screen composer? Plugin outlets in those location could be useful to anyone interested in adding additional keyboard shortcuts to their Discourse site, too.

  • I was thinking it might be helpful to add a tooltip with the shortcut keys to the composer expand button in the same way hovering over the Reply button on the composer shows “Or press Ctr+Enter
    It should be as simple as changing line 46 of the theme’s Desktop </head> section:

<i title="Or Press shift+f11" class="fa fa-expand d-icon d-icon-expand"></i>

(Justin DiRose) #19

I’ll be adding this to my personal instance for sure, since I use it for notetaking. @joebuhlig - you may be of interest too.