From 86a9cb2a6b167a216f5bd39350ea5cf4fd2305f6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 5 Jun 2014 13:19:56 +0200 Subject: add app sidebar toggle and swipe on mobile --- core/js/js.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index b3cefa83bee..123c4ad8e81 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1131,6 +1131,21 @@ function initCore() { } setupMainMenu(); + + // App sidebar on mobile + var snapper = new Snap({ + element: document.getElementById('app-content'), + disable: 'right', + maxPosition: 230 + }); + $('#app-content').prepend(''); + $('#app-navigation-toggle').click(function(){ + if(snapper.state().state == 'left'){ + snapper.close(); + } else { + snapper.open('left'); + } + }); } $(document).ready(initCore); -- cgit v1.2.3 From 96278e0201f947a8aba0897a97167b672c6ec6e0 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 5 Jun 2014 17:06:21 +0200 Subject: close sidebar when switching navigation entry, except on add or change settings --- core/js/js.js | 20 ++++++++++++++++++++ core/js/tests/specHelper.js | 3 +++ 2 files changed, 23 insertions(+) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index 123c4ad8e81..5c14cf34bb3 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1132,6 +1132,7 @@ function initCore() { setupMainMenu(); + // App sidebar on mobile var snapper = new Snap({ element: document.getElementById('app-content'), @@ -1146,6 +1147,25 @@ function initCore() { snapper.open('left'); } }); + // close sidebar when switching navigation entry + var $appNavigation = $('#app-navigation'); + $appNavigation.delegate('a', 'click', function(event) { + var $target = $(event.target); + // don't hide navigation when changing settings or adding things + if($target.is('.app-navigation-noclose') || + $target.closest('.app-navigation-noclose').length) { + return; + } + if($target.is('.add-new') || + $target.closest('.add-new').length) { + return; + } + if($target.is('#app-settings') || + $target.closest('#app-settings').length) { + return; + } + snapper.close(); + }); } $(document).ready(initCore); diff --git a/core/js/tests/specHelper.js b/core/js/tests/specHelper.js index fc5043c2f49..f7ec7856ba7 100644 --- a/core/js/tests/specHelper.js +++ b/core/js/tests/specHelper.js @@ -68,6 +68,9 @@ window.oc_appconfig = { }; window.oc_defaults = {}; +// mock for Snap.js plugin +window.Snap = function() {}; + // global setup for all tests (function setupTests() { var fakeServer = null, -- cgit v1.2.3 From 9063a25bb44d43b30cb10372b5b33901a4922e0e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 5 Jun 2014 21:18:21 +0200 Subject: slightly widen sidebar to 250px, works better with apps and on mobile --- apps/files/css/files.css | 2 +- core/css/apps.css | 4 ++-- core/css/mobile.css | 2 +- core/js/js.js | 2 +- settings/css/settings.css | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) (limited to 'core/js/js.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index acdeaf17fde..46f1966e08c 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -97,7 +97,7 @@ * to be more flexible / relative */ #body-user .app-files #controls { - left: 230px; /* sidebar width */ + left: 250px; /* sidebar width */ position: fixed; padding-left: 0px; } diff --git a/core/css/apps.css b/core/css/apps.css index f48750545f3..ebb0c269000 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -18,7 +18,7 @@ /* Navigation: folder like structure */ #app-navigation { - width: 230px; + width: 250px; height: 100%; float: left; -moz-box-sizing: border-box; box-sizing: border-box; @@ -193,7 +193,7 @@ /* settings area */ #app-settings { position: fixed; - width: 229px; + width: 249px; bottom: 0; border-top: 1px solid #ccc; } diff --git a/core/css/mobile.css b/core/css/mobile.css index e7e646ed88f..1e048cd766b 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -73,7 +73,7 @@ } #app-navigation { - width: 230px !important; + width: 250px !important; } #app-content { diff --git a/core/js/js.js b/core/js/js.js index 5c14cf34bb3..efc28e88212 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1137,7 +1137,7 @@ function initCore() { var snapper = new Snap({ element: document.getElementById('app-content'), disable: 'right', - maxPosition: 230 + maxPosition: 250 }); $('#app-content').prepend(''); $('#app-navigation-toggle').click(function(){ diff --git a/settings/css/settings.css b/settings/css/settings.css index cd81cfb2b3d..638d2fc576b 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -9,7 +9,7 @@ input#openid, input#webdav { width:20em; } -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; right: 0; - left: 230px; + left: 250px; height: 44px; padding: 0; margin: 0; background: #eee; border-bottom: 1px solid #e7e7e7; -- cgit v1.2.3 From 584c47b4338266d040198b64984c6b9ada60431c Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Fri, 6 Jun 2014 01:20:31 +0200 Subject: Disable snapper on bigger screens and on public/login page --- core/js/js.js | 85 ++++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 52 insertions(+), 33 deletions(-) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index efc28e88212..52a3e69fc7a 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1132,40 +1132,59 @@ function initCore() { setupMainMenu(); - - // App sidebar on mobile - var snapper = new Snap({ - element: document.getElementById('app-content'), - disable: 'right', - maxPosition: 250 - }); - $('#app-content').prepend(''); - $('#app-navigation-toggle').click(function(){ - if(snapper.state().state == 'left'){ + // just add snapper for logged in users + if($('#body-login, #body-public').length === 0) { + + // App sidebar on mobile + var snapper = new Snap({ + element: document.getElementById('app-content'), + disable: 'right', + maxPosition: 250 + }); + $('#app-content').prepend(''); + $('#app-navigation-toggle').click(function(){ + if(snapper.state().state == 'left'){ + snapper.close(); + } else { + snapper.open('left'); + } + }); + // close sidebar when switching navigation entry + var $appNavigation = $('#app-navigation'); + $appNavigation.delegate('a', 'click', function(event) { + var $target = $(event.target); + // don't hide navigation when changing settings or adding things + if($target.is('.app-navigation-noclose') || + $target.closest('.app-navigation-noclose').length) { + return; + } + if($target.is('.add-new') || + $target.closest('.add-new').length) { + return; + } + if($target.is('#app-settings') || + $target.closest('#app-settings').length) { + return; + } snapper.close(); - } else { - snapper.open('left'); - } - }); - // close sidebar when switching navigation entry - var $appNavigation = $('#app-navigation'); - $appNavigation.delegate('a', 'click', function(event) { - var $target = $(event.target); - // don't hide navigation when changing settings or adding things - if($target.is('.app-navigation-noclose') || - $target.closest('.app-navigation-noclose').length) { - return; - } - if($target.is('.add-new') || - $target.closest('.add-new').length) { - return; - } - if($target.is('#app-settings') || - $target.closest('#app-settings').length) { - return; - } - snapper.close(); - }); + }); + + var toggleSnapperOnSize = function() { + if($(window).width() > 768) { + snapper.close(); + snapper.disable(); + } else { + snapper.enable(); + } + }; + + $(window).resize(toggleSnapperOnSize); + + // initial call + toggleSnapperOnSize(); + + } + } $(document).ready(initCore); -- cgit v1.2.3 From b8ab77a475c4e0af6761396ad346b72e72a0aa6e Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 6 Jun 2014 09:50:46 +0200 Subject: Added debounce on resize --- core/js/js.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index 52a3e69fc7a..d02dc6445f2 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1178,7 +1178,7 @@ function initCore() { } }; - $(window).resize(toggleSnapperOnSize); + $(window).resize(_.debounce(toggleSnapperOnSize, 250)); // initial call toggleSnapperOnSize(); -- cgit v1.2.3