From 19d7d8796461a36dc9f73f3fe2e55df9c87bb1f7 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 16 May 2014 16:04:36 +0200 Subject: toggle the navigation on desktop, not only on mobile --- core/js/js.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index 834916b2e3f..67da7915cfb 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1111,18 +1111,12 @@ function initCore() { * If the screen is bigger, the main menu is not a toggle any more. */ function setupMainMenu() { - // toggle the navigation on mobile - if (!OC._matchMedia) { - return; - } - var mq = OC._matchMedia('(max-width: 768px)'); - var lastMatch = mq.matches; + // toggle the navigation var $toggle = $('#header #owncloud'); var $navigation = $('#navigation'); function updateMainMenu() { - // mobile mode ? - if (lastMatch && !$toggle.hasClass('menutoggle')) { + if (!$toggle.hasClass('menutoggle')) { // init the menu OC.registerMenu($toggle, $navigation); $toggle.data('oldhref', $toggle.attr('href')); -- cgit v1.2.3 From 52d9e313d18003f842cb4329090727b92a287f8d Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Sat, 17 May 2014 18:03:00 +0200 Subject: Remove obsoleted code to trigger navigation menu Now that the navigation menu is always togglable, the media query dependent code can be removed. --- core/js/js.js | 33 +++-------------- core/js/tests/specs/coreSpec.js | 82 ++--------------------------------------- 2 files changed, 9 insertions(+), 106 deletions(-) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index 67da7915cfb..0d255b55e57 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1115,35 +1115,14 @@ function initCore() { var $toggle = $('#header #owncloud'); var $navigation = $('#navigation'); - function updateMainMenu() { - if (!$toggle.hasClass('menutoggle')) { - // init the menu - OC.registerMenu($toggle, $navigation); - $toggle.data('oldhref', $toggle.attr('href')); - $toggle.attr('href', '#'); - $navigation.hide(); - } - else { - OC.unregisterMenu($toggle, $navigation); - $toggle.attr('href', $toggle.data('oldhref')); - $navigation.show(); - } - } - - updateMainMenu(); - - // TODO: debounce this - $(window).resize(function() { - if (lastMatch !== mq.matches) { - lastMatch = mq.matches; - updateMainMenu(); - } - }); + // init the menu + OC.registerMenu($toggle, $navigation); + $toggle.data('oldhref', $toggle.attr('href')); + $toggle.attr('href', '#'); + $navigation.hide(); } - if (window.matchMedia) { - setupMainMenu(); - } + setupMainMenu(); } $(document).ready(initCore); diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js index 37b5ceeec9e..0efa79a49bc 100644 --- a/core/js/tests/specs/coreSpec.js +++ b/core/js/tests/specs/coreSpec.js @@ -356,18 +356,13 @@ describe('Core base tests', function() { }); }); describe('Main menu mobile toggle', function() { - var oldMatchMedia; + var clock; var $toggle; var $navigation; var clock; beforeEach(function() { clock = sinon.useFakeTimers(); - oldMatchMedia = OC._matchMedia; - // a separate method was needed because window.matchMedia - // cannot be stubbed due to a bug in PhantomJS: - // https://github.com/ariya/phantomjs/issues/12069 - OC._matchMedia = sinon.stub(); $('#testArea').append('' + @@ -375,43 +370,15 @@ describe('Core base tests', function() { $toggle = $('#owncloud'); $navigation = $('#navigation'); }); - afterEach(function() { - OC._matchMedia = oldMatchMedia; clock.restore(); }); - it('Sets up menu toggle in mobile mode', function() { - OC._matchMedia.returns({matches: true}); + it('Sets up menu toggle', function() { window.initCore(); expect($toggle.hasClass('menutoggle')).toEqual(true); expect($navigation.hasClass('menu')).toEqual(true); }); - it('Does not set up menu toggle in desktop mode', function() { - OC._matchMedia.returns({matches: false}); - window.initCore(); - expect($toggle.hasClass('menutoggle')).toEqual(false); - expect($navigation.hasClass('menu')).toEqual(false); - }); - it('Switches on menu toggle when mobile mode changes', function() { - var mq = {matches: false}; - OC._matchMedia.returns(mq); - window.initCore(); - expect($toggle.hasClass('menutoggle')).toEqual(false); - mq.matches = true; - $(window).trigger('resize'); - expect($toggle.hasClass('menutoggle')).toEqual(true); - }); - it('Switches off menu toggle when mobile mode changes', function() { - var mq = {matches: true}; - OC._matchMedia.returns(mq); - window.initCore(); - expect($toggle.hasClass('menutoggle')).toEqual(true); - mq.matches = false; - $(window).trigger('resize'); - expect($toggle.hasClass('menutoggle')).toEqual(false); - }); - it('Clicking menu toggle toggles navigation in mobile mode', function() { - OC._matchMedia.returns({matches: true}); + it('Clicking menu toggle toggles navigation in', function() { window.initCore(); $navigation.hide(); // normally done through media query triggered CSS expect($navigation.is(':visible')).toEqual(false); @@ -422,49 +389,6 @@ describe('Core base tests', function() { clock.tick(1 * 1000); expect($navigation.is(':visible')).toEqual(false); }); - it('Clicking menu toggle does not toggle navigation in desktop mode', function() { - OC._matchMedia.returns({matches: false}); - window.initCore(); - expect($navigation.is(':visible')).toEqual(true); - $toggle.click(); - expect($navigation.is(':visible')).toEqual(true); - }); - it('Switching to mobile mode hides navigation', function() { - var mq = {matches: false}; - OC._matchMedia.returns(mq); - window.initCore(); - expect($navigation.is(':visible')).toEqual(true); - mq.matches = true; - $(window).trigger('resize'); - expect($navigation.is(':visible')).toEqual(false); - }); - it('Switching to desktop mode shows navigation', function() { - var mq = {matches: true}; - OC._matchMedia.returns(mq); - window.initCore(); - expect($navigation.is(':visible')).toEqual(false); - mq.matches = false; - $(window).trigger('resize'); - expect($navigation.is(':visible')).toEqual(true); - }); - it('Switch to desktop with opened menu then back to mobile resets toggle', function() { - var mq = {matches: true}; - OC._matchMedia.returns(mq); - window.initCore(); - expect($navigation.is(':visible')).toEqual(false); - $toggle.click(); - clock.tick(1 * 1000); - expect($navigation.is(':visible')).toEqual(true); - mq.matches = false; - $(window).trigger('resize'); - expect($navigation.is(':visible')).toEqual(true); - mq.matches = true; - $(window).trigger('resize'); - expect($navigation.is(':visible')).toEqual(false); - $toggle.click(); - clock.tick(1 * 1000); - expect($navigation.is(':visible')).toEqual(true); - }); }); describe('SVG extension replacement', function() { var svgSupportStub; -- cgit v1.2.3 From e291a04dee352fc9e3d7c7189e802d7867d1048d Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 4 Jun 2014 13:18:05 +0200 Subject: show loading feedback --- core/js/js.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'core/js/js.js') diff --git a/core/js/js.js b/core/js/js.js index 0d255b55e57..795ba788274 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -533,7 +533,6 @@ var OC={ */ registerMenu: function($toggle, $menuEl) { $menuEl.addClass('menu'); - $toggle.addClass('menutoggle'); $toggle.on('click.menu', function(event) { if ($menuEl.is(OC._currentMenu)) { $menuEl.slideUp(OC.menuSpeed); @@ -1112,7 +1111,7 @@ function initCore() { */ function setupMainMenu() { // toggle the navigation - var $toggle = $('#header #owncloud'); + var $toggle = $('#header .menutoggle'); var $navigation = $('#navigation'); // init the menu @@ -1120,6 +1119,15 @@ function initCore() { $toggle.data('oldhref', $toggle.attr('href')); $toggle.attr('href', '#'); $navigation.hide(); + + // show loading feedback + $navigation.delegate('a', 'click', function(event) { + var $app = $(event.target); + if(!$app.is('a')) { + $app = $app.closest('a'); + } + $app.find('img').attr('src', OC.imagePath('core','loading-dark.gif')); + }); } setupMainMenu(); -- cgit v1.2.3 From 26bf64631d7335093a8e9780e97e8187e76bb14f Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 4 Jun 2014 15:07:15 +0200 Subject: better loading feedback for app start, move from JS to CSS --- core/css/header.css | 24 +++++++++++++++++++++++- core/js/js.js | 2 +- core/templates/layout.user.php | 1 + 3 files changed, 25 insertions(+), 2 deletions(-) (limited to 'core/js/js.js') diff --git a/core/css/header.css b/core/css/header.css index 5225dbd446c..0fe20325d8f 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -26,7 +26,9 @@ display: inline-block; position: absolute; left: 70px; - top: 18px; + height: 27px; + padding-top: 18px; + padding-right: 10px; } /* show appname next to logo */ @@ -89,6 +91,7 @@ display: inline-block; } #navigation a { + position: relative; width: 80px; height: 80px; display: inline-block; @@ -118,6 +121,25 @@ height: initial; } + +/* loading feedback for apps */ +#navigation .app-loading .icon-loading-dark { + display: inline !important; + position: absolute; + top: 20px; + left: 24px; + width: 32px; + height: 32px; + background-color: rgba(0, 0, 0, .2); + border-radius: 50%; +} +#navigation .app-loading .icon { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; + filter: alpha(opacity=20); + opacity: .2; +} + + /* shift to account for missing navigation */ #body-user #controls, #body-settings #controls { diff --git a/core/js/js.js b/core/js/js.js index 795ba788274..b3cefa83bee 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1126,7 +1126,7 @@ function initCore() { if(!$app.is('a')) { $app = $app.closest('a'); } - $app.find('img').attr('src', OC.imagePath('core','loading-dark.gif')); + $app.addClass('app-loading'); }); } diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 49d57bcc3f6..059491abac2 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -99,6 +99,7 @@ class="active"> + -- cgit v1.2.3