Add distraction free mode by Henni · Pull Request #12 · nextcloud/notes

Henni · 2016-10-25T12:07:59Z

fixes #9

jancborchardt · 2016-10-25T12:37:16Z

Awesome! This is very cool. One enhancement to make it really distraction-free and true to the icon would be to actually use the browser fullscreen API.

irgendwie · 2016-10-25T12:39:24Z

Maybe add a tool-tip, describing the function of the new button.
Additionally, the button (and word-count) is barely visible - increase contrast? 😊

Henni · 2016-10-25T12:59:23Z

@jancborchardt I'm planning to do that, it is a bit more difficult than I thought because it is still prefixed in all browsers.

karlitschek · 2016-10-25T16:39:13Z

indeed super cool feature!

Henni · 2016-10-25T17:01:23Z

@irgendwie does this look better to you?

jancborchardt · 2016-10-25T22:45:05Z

@Henni this is how we do it in the Spreed app: nextcloud/spreed@c606751 :)

irgendwie · 2016-10-26T19:13:39Z

@Henni Contrast is much better! Thanks!
The tooltip needs to be placed a bit higher I think and should not be labeld "test" 😉

jancborchardt · 2016-11-18T01:01:17Z

@Henni what do we have left to do here btw? :D

jancborchardt · 2016-12-01T08:57:19Z

@Henni @irgendwie @korelstar can we merge this? :)

Henni · 2016-12-01T14:13:53Z

Final review and then we are ready to go!

korelstar · 2016-12-01T18:40:07Z

Travis failed (but this may has nothing to do with these changes)
These changes are not compatible with the up-to-date stable Nextcloud 10.0.1 (and below). See [stable10] add fullscreen icon server#1818. Is it possible to improve this situation?
When distraction free mode is activated, I see black font on black background. The only thing, I can see is the red underlining of the spell correction. I'm using Firefox ESR 45.5.1 on Debian jessie (but this could also be due to other changes in core that are not backported yet to Nextcloud 10 -- I don't know, I only tested with Nextcloud 10.0.1). If I add #app-content-container { background: #fff; } to notes.css it works.

Henni · 2016-12-01T19:15:20Z

I'll look into it
Do I understand it correctly, that versions before 10.0.1 didn't have this icon? If this is the case it might be possible to find a fallback, which could be removed in the future
Black on black is really strange... No idea where the black background comes from. (Also can't reproduce it)

korelstar · 2016-12-01T20:13:45Z

No, in fact Nextcloud 10.0.1 does not have this icon. This will be only part of version 11 and 10.0.2 (if I understood the release strategy correctly).
Black seems to be the default background color for fullscreen in Firefox. I could reproduce this on another computer with Firefox 50.0.2 on Windows.

I tried it also with this minimal page ("works" only on Firefox):

<html>
<body>
<div id="content">
click me
</div>
<script>
function toggleFullScreen() {
        if(document.mozFullScreenElement) {
                document.mozCancelFullScreen();
        } else {
                document.getElementById('content').mozRequestFullScreen();
        }
}
document.getElementById("content").addEventListener("click", toggleFullScreen, false);
</script>
</body>
</html>

Henni · 2016-12-01T20:18:47Z

@korelstar I should be able to fix both of these points. I'll take a look

jancborchardt · 2016-12-01T21:35:50Z

Yeah, so since the fullscreen-icon is only going to be in the latest patch, probably best to copy it over into the img folder, and add a class .icon-fullscreen to the Notes app CSS which calls that one. That will be the fallback for older systems.

Henni · 2017-04-10T19:31:07Z

fixed the black background in firefox.

@korelstar @jancborchardt regarding the second issue: is it still worth supporting Nextcloud 9 (and 10)?

korelstar

Works now in Firefox 👍

I think that it's okay that this particular feature is not supported by Nextcloud 9 and 10, because the whole app is functional even if this feature doesn't work. But the app as a whole should be still compatible, for now.

Henni added the enhancement New feature or request label Oct 25, 2016

Henni closed this Oct 25, 2016

Henni reopened this Oct 25, 2016

Henni force-pushed the distraction branch from 29184d8 to eceae4e Compare December 1, 2016 14:13

Henni added 3 commits April 10, 2017 21:18

add distraction free mode

ce5e81e

increase contrast of meta data and add tooltip

046cb26

actually go into fullscreen in distraction free mode

bd65e87

Henni force-pushed the distraction branch from eceae4e to bd65e87 Compare April 10, 2017 19:20

fullscreen white background

d5db815

korelstar approved these changes Apr 13, 2017

View reviewed changes

Henni merged commit bab3d16 into master Apr 19, 2017

Henni deleted the distraction branch April 19, 2017 17:03

Conversation

Henni commented Oct 25, 2016

Uh oh!

jancborchardt commented Oct 25, 2016

Uh oh!

irgendwie commented Oct 25, 2016

Uh oh!

Henni commented Oct 25, 2016

Uh oh!

karlitschek commented Oct 25, 2016

Uh oh!

Henni commented Oct 25, 2016

Uh oh!

jancborchardt commented Oct 25, 2016

Uh oh!

irgendwie commented Oct 26, 2016

Uh oh!

jancborchardt commented Nov 18, 2016

Uh oh!

jancborchardt commented Dec 1, 2016

Uh oh!

Henni commented Dec 1, 2016

Uh oh!

korelstar commented Dec 1, 2016

Uh oh!

Henni commented Dec 1, 2016

Uh oh!

korelstar commented Dec 1, 2016

Uh oh!

Henni commented Dec 1, 2016

Uh oh!

jancborchardt commented Dec 1, 2016

Uh oh!

Henni commented Apr 10, 2017

Uh oh!

korelstar left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants