# Mobile editor preview button and toolbar
**URL:** https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942
**Category:** UX
**Created:** [April 10, 2019, 9:29am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942 "2019-04-10T09:29:10Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [April 10, 2019, 9:29am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/1 "2019-04-10T09:29:10Z")
I started to use mobile (phone, tablet) more and more on forums. As you post images or links, you want to check the preview, but I find the two step click a bit inconvenient.
Have read this topic, where feature was introduced:
> [@Image preview while posting through mobile?](https://meta.discourse.org/t/image-preview-while-posting-through-mobile/28370/20):
>
> I do like being able to look at the post I’m replying to, but I suppose hiding the editor is sufficient for that.
I find this mini-hamburger menu as very hard to notice (discoverability issue) and find two click process as two much for such common feature. I see this on same level as insert image, which is available all the time.
I see following two options how to improve it:
1. **Show toolbar always**
- Better discoverability for whole toolbar - I find that you can afford one additional line of vertical space for it on modern mobile devices.
- Mini-hamburger removed for better top bar (prevent misclick on colapse editor)
- Can move image button from bottom to toolbar to make it on same spot as others (consistency)
- Preview button could be moved in the place of image upload button - as it has impact on whole post, similar as other buttons below.
1. **Add preview button next to image upload**
- Saves one click, improves discoverability
- Maybe confusing with image button next to it?
I think option 1. would greatly improve mobile editor.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 10, 2019, 10:38am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/2 "2019-04-10T10:38:00Z")
What are you talking about? The toolbar, which includes the preview toolbar button, does show by default on mobile. Are you on an unusual device?
Although now that I think about it, if we are removing the duplicated upload button from the toolbar, and we have the upload button at bottom right on mobile.. preview button might make sense there since it is also a mobile only thing? What do you think @sam?
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [April 10, 2019, 10:44am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/3 "2019-04-10T10:44:14Z")
Interesting: on [my forum](https://pojalabanda.com) (using PWA on Google Pixel 2 XL) when I reply, toolbar is missing:
On new topic is OK, and on meta I cannot reproduce missing toolbar.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 10, 2019, 10:49am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/4 "2019-04-10T10:49:41Z")
I like that cause we can make the button a bit bigger as well.
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [April 10, 2019, 10:51am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/5 "2019-04-10T10:51:29Z")
> [@codinghorror](#):
>
> The toolbar, which includes the preview toolbar button, does show by default on mobile.
If this should be the case, why not remove option to remove toolbar (mini-hamburger button)?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 10, 2019, 2:35pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/6 "2019-04-10T14:35:46Z")
We’re short on space there because of the `saving...` `saved` status
Would it make more sense for upload to exist in the toolbar and preview to be on its own below? 🤔
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 11, 2019, 12:02am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/7 "2019-04-11T00:02:17Z")
I think it makes more sense to use a glyph for saved, maybe a checkmark? “Saving” should be the spinning circle anyways.. so go from
- spinning circle (I’m saving!)
- checkmark (saved!)
- fade away..
Less translations = more betterer
---
### Author:  [@venarius](https://meta.discourse.org/u/venarius)
#### Post date: [April 11, 2019, 5:58am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/8 "2019-04-11T05:58:13Z")
Would love to create a nice animation for it 🙂
EDIT: Opened a PR
[https://github.com/discourse/discourse/pull/7356](https://github.com/discourse/discourse/pull/7356)
Problem is that even after turning the “saving” into an animation, there can still be an error like “Edit Conflict” or “Drafts Offline” which then would still be displayed as text and thus require more width.
An Idea I have on this one would be to show a cross instead of a check if there is an error and show the error message as a tooltip if the user hovers the cross.
cc @awesomerobot @codinghorror
---
### Author:  [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [April 11, 2019, 10:33am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/9 "2019-04-11T10:33:17Z")
> [@codinghorror](#):
>
> What are you talking about? The toolbar, which includes the preview toolbar button, does show by default on mobile. Are you on an unusual device?
I can confirm that this is not always the case. It seems that the toolbar retains its visibility state from the last time it was changed (not sure what state it is in for a new user).
Steps to repro here on meta:
- open composer
- select hamburger menu to toggle edit toolbar (hide)
- exit composer without saving
- open composer
- toolbar is still hidden (it persists even on browser close)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 11, 2019, 10:35am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/10 "2019-04-11T10:35:11Z")
> [@md-misko](#):
>
> not sure what state it is in for a new user
It is visible by default for a new user, except when the viewport is very small, and on new topic creation (as that adds category selector which takes up additional space).
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 11, 2019, 2:40pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/11 "2019-04-11T14:40:45Z")
> [@venarius](#):
>
> there can still be an error like “Edit Conflict” or “Drafts Offline” which then would still be displayed as text and thus require more width.
>
> An Idea I have on this one would be to show a cross instead of a check if there is an error and show the error message as a tooltip if the user hovers the cross.
I don’t think this would be clear enough, to the point where an X might be more confusing than having nothing at all… I’m also assuming that “drafts offline” probably happens more often with flaky mobile connections so there’s no tooltip.
I don’t think coming up with a “connection issue” type of icon would be _too_ hard for the draft case… but edit conflict is much harder to convey. Maybe edit conflict could be more interruptive anyway? A little overlay like the posting errors? Not sure.
---
### Author:  [@venarius](https://meta.discourse.org/u/venarius)
#### Post date: [April 11, 2019, 2:51pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/12 "2019-04-11T14:51:15Z")
For “Draft offline” Fontawesome would have Icons like “signal-slashed” or “wifi-slashed”. But both icons are only available with the pro version.
And isn’t edit conflict already a full popup or sth like that? Probably no need for a draft status then.
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [April 11, 2019, 3:06pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/13 "2019-04-11T15:06:50Z")
> [@codinghorror](#):
>
> It is visible by default for a new user, except when the viewport is very small, and on new topic creation (as that adds category selector which takes up additional space).
Ok, this is probably what got me confused. Is it really not enough space to just have it always and remove mini-hamburger altogether?
I think such simplification would improve ux.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 11, 2019, 10:27pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/14 "2019-04-11T22:27:20Z")
> [@venarius](#):
>
> An Idea I have on this one would be to show a cross instead of a check if there is an error and show the error message as a tooltip if the user hovers the cross.
Love this idea, go with it ❤
---
### Author:  [@venarius](https://meta.discourse.org/u/venarius)
#### Post date: [April 12, 2019, 7:02am UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/15 "2019-04-12T07:02:24Z")
Opened a PR 🙂
[https://github.com/discourse/discourse/pull/7369](https://github.com/discourse/discourse/pull/7369)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 19, 2019, 3:38pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/16 "2019-04-19T15:38:31Z")
Are we clear to add the bottom right preview button on mobile now, and remove it from the toolbar on mobile @awesomerobot?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 19, 2019, 4:51pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/17 "2019-04-19T16:51:42Z")
I think we still need an icon for “drafts offline” status
The only out-of-the-box FA5 icon that makes sense to me is the generic error
tried a couple custom-built options that might be a little more meaningful on their own…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 19, 2019, 11:08pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/18 "2019-04-19T23:08:18Z")
I think the red exclamation point is a bit much, drafts offline is not really an error. Let’s go with red [sync-alt?](https://fontawesome.com/icons/sync-alt?style=solid)
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [April 19, 2019, 11:17pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/19 "2019-04-19T23:17:16Z")
Maybe some text explanation beside the icon would be helpful 🙂
(I love those ones with grey backgrounds that are fading out after a few seconds.)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 19, 2019, 11:18pm UTC](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942/20 "2019-04-19T23:18:49Z")
This is for mobile, there is no hover on mobile. Tapping on it could show something but the use case is so narrow I don’t feel we need to gold plate it.
[Next page](https://meta.discourse.org/t/mobile-editor-preview-button-and-toolbar/113942.md?page=2)