Mobile sidebar swipe #8159

jancborchardt · 2014-04-10T21:32:24Z

APP DEVS: If tapping on an element in the app-navigation switches to the content and you don’t want that (for example if it’s a button or so), use .app-navigation-noclose on the highest element in which you do not want taps to close the navigation.

Fixing #176

This will make ownCloud usable on mobile again since we introduced sidebars. Specifically this is about having a way to toggle between the sidebar (app-navigation) and content (app-content).

This is done using Snap.js and works via swipe as well as with the button in the top left.

TODO:

settle on a way to do the sidebar – FIXED, YEAH! Thanks to everyone! :)
switch to the app-content when an entry in app-navigation is clicked (for navigation)
decide where to put a toggle button (using the menu.svg icon) so it’s more discoverable than just swiping
test if drag&drop works, maybe adjust so both swiping and drag&drop works
the hard part: adjust the apps which use app-navigation/app-content but don’t work / modify core apps.css
test opening files, for example with the text editor
check smoothness of animation against demo at http://jakiestfu.github.io/Snap.js/demo/apps/default.html

tanghus · 2014-04-11T00:19:43Z

@jbtbnl for contacts it seems to be this commit owncloud/contacts@0382cee

jancborchardt · 2014-04-11T07:03:46Z

@jbtbnl I’d be very interested what you think about how to do the sidebar right. I think we do need to position that and the content absolutely. The question is, should we use a fixed 250px width, or percentage? I’d also be cool with fixed, but what do you think about the percentage?

jbtbnl · 2014-04-11T09:54:52Z

@jancborchardt how did you test the swipe gesture? I'm testing it with Google Chrome device emulation but it won't work...

Edit: works on my BB Q10.

jbtbnl · 2014-04-11T10:24:50Z

@jancborchardt af few feedback points:

the snap.js example on http://jakiestfu.github.io/Snap.js/demo/apps/default.html does work with Chrome device emulation and the animation is a lot smoother (don't know why)
the navigation bar should reach all the way to the top so that all vertical space is efficiently used (might improve performance as well)
the header should have the "three horizontal lines" menu button on the left so that the user knows that there is a hidden menu. We need to consider how to match this with the apps menu. Having two different menu's can be confusing for the user. Maybe relocate the app icons to the top of the menu on mobile?

Disclaimer: I do realize that it's not an easy job to implement the above mentioned :)

jbtbnl · 2014-04-11T10:46:53Z

A mock-up of app icons in sidebar on mobile:

A mock-up with distinction between app-navigation and apps menu:

Niduroki · 2014-04-11T14:46:49Z

Looks pretty good so far!

jancborchardt · 2014-04-11T16:27:34Z

@jbtbnl good concepts! I really wonder about the combined sidebar vs the separated one:

combined would be better, less cognitive load. We also thought about combining the apps list with the user menu in the past.
on the other hand, for people who use more apps, the combined menu does not really scale and pushes the app menu to the bottom

And if we don’t make it combined, it would be confusing to have the sidebar be full height because that makes it seem global. It’s not though. It’s just a view on an app, and some apps are not going to need it either.

(Also, in the mockups, make sure to not miss the ownCloud logo and the user menu. ;)

jancborchardt · 2014-04-11T16:29:24Z

@jbtbnl btw I would really like to have a call with you about that. Do you use Skype, or wanna use http://talky.io or whatnot? I’m busy until Sunday but Monday would work. (We can talk about it on IRC.)

jbtbnl · 2014-04-11T18:16:46Z

@jancborchardt yeah, I forgot about the user menu, the ownCloud logo not so much :)
I'll contact you about the video call.

jbtbnl · 2014-04-14T12:41:42Z

PVince81 · 2014-05-16T13:44:47Z

Please make sure to also test opening files, for example with the text editor: it will auto-hide the sidebar to display itself fullscreen (since the sidebar PR). I guess it should still work with your approach, but better be sure 😄

jancborchardt · 2014-06-05T11:21:49Z

Updated, please test this out on mobile and desktop @owncloud/designers!

LEDfan · 2014-06-05T12:04:03Z

I have 3 remarks/questions:

it works very well and is a nice very needed function!
it breaks the contacts app on mobile and a bit on dekstop (probably I'll try to fix this)
If you click on a group (in contacts app)/news item (in news)/conv (in chat app) is it supposed to close the app-navigation?

ghost · 2014-06-05T13:17:13Z

💣 Test Failed. 💣
Refer to this link for build results: https://ci.owncloud.org/job/pull-request-analyser/5385/

jbtbnl · 2014-06-05T13:26:57Z

If you click on a group (in contacts app)/news item (in news)/conv (in chat app) is it supposed to close the app-navigation?

@LEDfan yes, I think that is the desired behavior.

jancborchardt · 2014-06-05T19:21:27Z

One thing which still needs to be fixed: The content is swipable to the right even when you are not in mobile mode. This results in big whitespace.

@MorrisJobke @jbtbnl could you check if you can fix that? Maybe we need to wrap the snap.js part in js.js in a media query. Or disable something in the call to snap.js

ghost · 2014-06-05T20:37:17Z

💣 Test Failed. 💣
Refer to this link for build results: https://ci.owncloud.org/job/pull-request-analyser/5417/

jbtbnl · 2014-06-05T21:36:40Z

@jancborchardt there still are major compatibility issues with all apps and the performance is terrible. I understand that you want to push this before the feature freeze but in this state it hardly fixes anything...

MorrisJobke · 2014-06-05T23:33:38Z

I fixed the problem with wider screens (now it's just activated for small screens (< 768px)

ghost · 2014-06-06T00:13:06Z

💣 Test Failed. 💣
Refer to this link for build results: https://ci.owncloud.org/job/pull-request-analyser/5421/

scrutinizer-notifier · 2014-06-06T00:55:25Z

The inspection completed: 22 new issues

PVince81 · 2014-06-06T07:41:00Z

auto-close when window resize

PVince81 · 2014-06-06T07:41:41Z

debounce resize event

Also fixed JSHint errors

scrutinizer-notifier · 2014-06-06T08:05:07Z

A new inspection was created.

PVince81 · 2014-06-06T08:05:34Z

👍

jancborchardt · 2014-06-06T08:06:10Z

Ok, changes by you look good as well @PVince81 👍

jancborchardt · 2014-06-06T08:08:01Z

JS tests run locally

MorrisJobke · 2014-06-06T08:53:24Z

@jancborchardt Also document this!!! Otherwise it will just be lost and only used in some apps

ghost · 2014-06-06T09:21:01Z

💣 Test Failed. 💣
Refer to this link for build results: https://ci.owncloud.org/job/pull-request-analyser/5431/

DeepDiver1975 · 2014-06-06T09:27:01Z

failing unit tests are unrelated -> merge

Mobile sidebar swipe

jancborchardt · 2014-06-06T09:55:48Z

PVince81 · 2014-06-10T15:01:09Z

core/js/js.js

@@ -1131,6 +1131,60 @@ function initCore() {
 	}

 	setupMainMenu();
+
+	// just add snapper for logged in users
+	if($('#body-login, #body-public').length === 0) {


@jancborchardt didn't you change this to #app-navigation ? I remember you did when we were having a look at it.
Either you forgot to push that change or reverted back ?

jancborchardt added Design labels Apr 10, 2014

jbtbnl mentioned this pull request Apr 11, 2014

[WIP] design forward music app owncloud/music#211

Open

jancborchardt mentioned this pull request May 2, 2014

Sharing overview page #8417

Merged

jancborchardt mentioned this pull request May 9, 2014

Files app navigation sidebar #6260

Merged

jbtbnl mentioned this pull request May 19, 2014

Toggle app navigation not only on mobile, but on desktop as well #8620

Merged

This was referenced May 26, 2014

Single implementation for the app-settings animation #8611

Closed

Mobile UI issue #8788

Closed

jancborchardt added 4 commits June 5, 2014 11:51

add menu icon

1ad2101

add snap.js script

9e56acb

adjust CSS to styleguide, remove left padding, prevent user-selection

24641c9

add app sidebar toggle and swipe on mobile

86a9cb2

jancborchardt added the High label Jun 5, 2014

jancborchardt added this to the ownCloud 7 milestone Jun 5, 2014

jancborchardt changed the title ~~[WIP] Mobile sidebar swipe~~ Mobile sidebar swipe Jun 5, 2014

slightly widen sidebar to 250px, works better with apps and on mobile

9063a25

Disable snapper on bigger screens and on public/login page

584c47b

jancborchardt and others added 4 commits June 6, 2014 09:44

prevent scrollbar when sidebar is open

5d02b56

Added debounce on resize

b8ab77a

Fixed Snap mock

d764aaa

Also fixed JSHint errors

Fixed viewer mode for sidebar swipe

b2bae93

DeepDiver1975 added a commit that referenced this pull request Jun 6, 2014

Merge pull request #8159 from owncloud/mobile-sidebar-swipe

289accc

Mobile sidebar swipe

DeepDiver1975 merged commit 289accc into master Jun 6, 2014

DeepDiver1975 deleted the mobile-sidebar-swipe branch June 6, 2014 09:27

PVince81 reviewed Jun 10, 2014
View reviewed changes

butonic added p2-high sev2-high and removed High labels Sep 10, 2014

lock bot locked as resolved and limited conversation to collaborators Aug 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile sidebar swipe #8159

Mobile sidebar swipe #8159

jancborchardt commented Apr 10, 2014

tanghus commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

Niduroki commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 14, 2014

PVince81 commented May 16, 2014

jancborchardt commented Jun 5, 2014

LEDfan commented Jun 5, 2014

ghost commented Jun 5, 2014

jbtbnl commented Jun 5, 2014

jancborchardt commented Jun 5, 2014

ghost commented Jun 5, 2014

jbtbnl commented Jun 5, 2014

MorrisJobke commented Jun 5, 2014

ghost commented Jun 6, 2014

scrutinizer-notifier commented Jun 6, 2014

PVince81 commented Jun 6, 2014

PVince81 commented Jun 6, 2014

scrutinizer-notifier commented Jun 6, 2014

PVince81 commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

MorrisJobke commented Jun 6, 2014

ghost commented Jun 6, 2014

DeepDiver1975 commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

PVince81 Jun 10, 2014

Mobile sidebar swipe #8159

Mobile sidebar swipe #8159

Conversation

jancborchardt commented Apr 10, 2014

tanghus commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

Niduroki commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jancborchardt commented Apr 11, 2014

jbtbnl commented Apr 11, 2014

jbtbnl commented Apr 14, 2014

PVince81 commented May 16, 2014

jancborchardt commented Jun 5, 2014

LEDfan commented Jun 5, 2014

ghost commented Jun 5, 2014

jbtbnl commented Jun 5, 2014

jancborchardt commented Jun 5, 2014

ghost commented Jun 5, 2014

jbtbnl commented Jun 5, 2014

MorrisJobke commented Jun 5, 2014

ghost commented Jun 6, 2014

scrutinizer-notifier commented Jun 6, 2014

PVince81 commented Jun 6, 2014

PVince81 commented Jun 6, 2014

scrutinizer-notifier commented Jun 6, 2014

PVince81 commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

MorrisJobke commented Jun 6, 2014

ghost commented Jun 6, 2014

DeepDiver1975 commented Jun 6, 2014

jancborchardt commented Jun 6, 2014

PVince81 Jun 10, 2014

Choose a reason for hiding this comment