From 7548825743bd2f7a65105b224c4eabe325c893b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Tue, 28 Mar 2017 15:04:56 +0200 Subject: [PATCH 1/3] Responsive app menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/header.scss | 77 ++++++++++------------------------ core/js/js.js | 47 +++++++++++++++++++++ core/templates/layout.user.php | 63 +++++++++++++--------------- lib/private/TemplateLayout.php | 2 - lib/private/legacy/app.php | 68 ------------------------------ 5 files changed, 100 insertions(+), 157 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 93be1dba18bba..3805dd493e799 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -191,17 +191,18 @@ /* NAVIGATION --------------------------------------------------------------- */ nav { - margin-top: auto; + display: inline-block; + width: 44px; + height: 44px; + margin-left: -54px; } #navigation { position: relative; top: 45px; left: -100%; - width: 265px; - max-height: 85%; + width: 160px; margin-top: 0; - padding-bottom: 10px; background-color: $color-main-background; box-shadow: 0 1px 10px $color-box-shadow; border-radius: 3px; @@ -242,12 +243,6 @@ nav { margin-left: -10px; } -/* position of dropdown arrow */ - -#navigation:after { - left: 242px; -} - #navigation { box-sizing: border-box; * { @@ -258,18 +253,14 @@ nav { } a { position: relative; - width: 80px; - height: 80px; - display: inline-block; - text-align: center; - padding: 20px 0; + display: block; + padding: 10px 12px; + height:40px; + vertical-align: text-bottom; span { display: inline-block; - font-size: 13px; padding-bottom: 0; - padding-left: 0; - width: 80px; - text-align: center; + padding-left: 10px; color: $color-main-text; white-space: nowrap; overflow: hidden; @@ -280,6 +271,9 @@ nav { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; opacity: .5; } + svg { + margin-bottom: 2px; + } &:hover svg, &:focus svg, &:hover span, @@ -302,13 +296,12 @@ nav { } /* loading feedback for apps */ .app-loading { - .icon-loading-dark { + .icon-loading-small-dark { display: inline !important; position: absolute; - top: 20px; - left: 24px; - width: 32px; - height: 32px; + left: 12px; + width: 16px; + height: 16px; } .app-icon { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; @@ -454,10 +447,13 @@ nav { width: auto; clear: both; height: 44px; - flex-shrink: 0; li { float: left; + display: inline-block; + position: relative; + vertical-align: top !important; + height: 45px; cursor: pointer; a { @@ -472,10 +468,10 @@ nav { } } + li:hover a, li a.active { opacity: 1; - } li img, @@ -541,31 +537,4 @@ nav { li.hidden { display: none; } - -} - -/* use popover menu on mobile and small screens */ -@media only screen and (max-width: 680px) { - - #header .header-appname-container { - display: inline-block !important; - } - - #appmenu { - display: none; - } - - #apps .in-header { - display: inline-block; - } - - #navigation { - position: fixed; - top: 45px; - left: 10px; - &:after { - left: 214px; - } - } - -} +} \ No newline at end of file diff --git a/core/js/js.js b/core/js/js.js index 883431b2b02d1..5fdafa6e41257 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1482,6 +1482,53 @@ function initCore() { }); } + var resizeMenu = function() { + var maxApps = 8; + var appList = $('#appmenu li'); + var availableWidth = $('#header-left').width() - $('#nextcloud').width() - 44; + var appCount = Math.floor((availableWidth)/44); + console.log(appCount); + // show a maximum of 8 apps + if(appCount >= maxApps) { + appCount = maxApps; + } + // show at least 2 apps in the popover + if(appList.length-1-appCount >= 1) { + appCount--; + } + + $('#more-apps a').removeClass('active'); + var lastShownApp; + for (var k = 0; k < appList.length-1; k++) { + var name = $(appList[k]).data('id'); + if(k < appCount) { + $(appList[k]).removeClass('hidden'); + $('#apps li[data-id=' + name + ']').addClass('in-header'); + lastShownApp = appList[k]; + } else { + $(appList[k]).addClass('hidden'); + $('#apps li[data-id=' + name + ']').removeClass('in-header'); + // move active app to last position if it is active + if(appCount > 0 && $(appList[k]).children('a').hasClass('active')) { + $(lastShownApp).addClass('hidden'); + $('#apps li[data-id=' + $(lastShownApp).data('id') + ']').removeClass('in-header'); + $(appList[k]).removeClass('hidden'); + $('#apps li[data-id=' + name + ']').addClass('in-header'); + } + } + } + + // show/hide more apps icon + if($('#apps li:not(.in-header)').length === 0) { + $('#more-apps').hide(); + $('#navigation').hide(); + } else { + $('#more-apps').show(); + } + }; + $(window).resize(resizeMenu); + resizeMenu(); + // just add snapper for logged in users if($('#app-navigation').length && !$('html').hasClass('lte9')) { diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 40e47c7e5822e..91b7eb3490b03 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -60,54 +60,51 @@
- + + + + + - diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index d7249a44293c3..f7bb23cd3de27 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -79,8 +79,6 @@ public function __construct( $renderAs, $appId = '' ) { $this->assign( 'appid', $appId ); $navigation = \OC_App::getNavigation(); $this->assign( 'navigation', $navigation); - $navigation = \OC_App::getHeaderNavigation(); - $this->assign( 'headernavigation', $navigation); $settingsNavigation = \OC_App::getSettingsNavigation(); $this->assign( 'settingsnavigation', $settingsNavigation); foreach($navigation as $entry) { diff --git a/lib/private/legacy/app.php b/lib/private/legacy/app.php index e6b811aa8458d..3800b8b770e83 100644 --- a/lib/private/legacy/app.php +++ b/lib/private/legacy/app.php @@ -468,69 +468,16 @@ private static function proceedNavigation($list) { } }); - $activeAppIndex = -1; $activeApp = OC::$server->getNavigationManager()->getActiveEntry(); foreach ($list as $index => &$navEntry) { - $navEntry['showInHeader'] = true; if ($navEntry['id'] == $activeApp) { $navEntry['active'] = true; - $activeAppIndex = $index; } else { $navEntry['active'] = false; } } unset($navEntry); - if (count($list) <= 8) { - return $list; - } - - $headerIconCount = 7; - if($activeAppIndex > ($headerIconCount-1)) { - $active = $list[$activeAppIndex]; - $lastInHeader = $list[$headerIconCount-1]; - $list[$headerIconCount-1] = $active; - $list[$activeAppIndex] = $lastInHeader; - } - - foreach ($list as $index => &$navEntry) { - if($index >= $headerIconCount) { - $navEntry['showInHeader'] = false; - } - } - - return $list; - } - - public static function proceedAppNavigation($entries) { - $activeAppIndex = -1; - $list = self::proceedNavigation($entries); - - $activeApp = OC::$server->getNavigationManager()->getActiveEntry(); - foreach ($list as $index => &$navEntry) { - if ($navEntry['id'] == $activeApp) { - $navEntry['active'] = true; - $activeAppIndex = $index; - } else { - $navEntry['active'] = false; - } - } - - - if (count($list) <= 8) { - return $list; - } - - $headerIconCount = 7; - // move active item to last position - if($activeAppIndex > ($headerIconCount-1)) { - $active = $list[$activeAppIndex]; - $lastInHeader = $list[$headerIconCount-1]; - $list[$headerIconCount-1] = $active; - $list[$activeAppIndex] = $lastInHeader; - } - $list = array_slice($list, 0, $headerIconCount); - return $list; } @@ -722,21 +669,6 @@ public static function getNavigation() { return self::proceedNavigation($entries); } - /** - * Returns the navigation inside the header bar - * - * @return array - * - * This function returns an array containing all entries added. The - * entries are sorted by the key 'order' ascending. Additional to the keys - * given for each app the following keys exist: - * - active: boolean, signals if the user is on this navigation entry - */ - public static function getHeaderNavigation() { - $entries = OC::$server->getNavigationManager()->getAll(); - return self::proceedAppNavigation($entries); - } - /** * Returns the Settings Navigation * From 673b58ef093c252a2cf6da1ebf4027b050e306de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Tue, 25 Apr 2017 17:25:28 +0200 Subject: [PATCH 2/3] Fix adding/removing apps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- settings/js/apps.js | 25 ++++++------------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/settings/js/apps.js b/settings/js/apps.js index 6da8c395ecbdf..3326886951fe5 100644 --- a/settings/js/apps.js +++ b/settings/js/apps.js @@ -487,22 +487,22 @@ OC.Settings.Apps = OC.Settings.Apps || { container.children('li[data-id]').each(function (index, el) { var id = $(el).data('id'); // remove all apps that are not in the correct order - if ((navEntries[index] && navEntries[index].id !== $(el).data('id'))) { + if (!navEntries[index] || (navEntries[index] && navEntries[index].id !== $(el).data('id'))) { $(el).remove(); $('#appmenu li[data-id='+id+']').remove(); } }); - var previousEntry; + var previousEntry = {}; // add enabled apps to #navigation and #appmenu for (var i = 0; i < navEntries.length; i++) { var entry = navEntries[i]; if (container.children('li[data-id="' + entry.id + '"]').length === 0) { var li = $('
  • '); li.attr('data-id', entry.id); - var img = ''; + var img = ''; img += ''; - img += ''; + img += ''; var a = $('').attr('href', entry.href); var filename = $(''); var loading = $('
    ').css('display', 'none'); @@ -526,9 +526,7 @@ OC.Settings.Apps = OC.Settings.Apps || { } } - if ($('#appmenu ul').children('li[data-id="' + entry.id + '"]').length === 0) { - // add apps to #appmenu until it is full - if ($('#appmenu li').not('.hidden').length < 8) { + if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) { var li = $('
  • '); li.attr('data-id', entry.id); var img = ''; @@ -547,22 +545,11 @@ OC.Settings.Apps = OC.Settings.Apps || { .animate({opacity: 0.5}) .animate({opacity: 1}); } - } } previousEntry = entry; - // do not show apps from #appmenu in #navigation - if(i <= 7) { - $('#navigation li').eq(i).addClass('in-header'); - } else { - $('#navigation li').eq(i).removeClass('in-header'); - } } - if (navEntries.length > 8) { - $('#more-apps').show(); - } else { - $('#more-apps').hide(); - } + $(window).trigger('resize'); } }); }, From 27b19aaba1c9a710bb2b1d3338a74ba05ea0678e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Tue, 25 Apr 2017 17:31:04 +0200 Subject: [PATCH 3/3] Fix loading spinner for new app menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/header.scss | 31 ++++++++++++++++++------------- core/js/js.js | 15 +++++++++++++++ 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 3805dd493e799..619852faf601f 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -294,19 +294,21 @@ nav { max-height: 32px; max-width: 32px; } - /* loading feedback for apps */ - .app-loading { - .icon-loading-small-dark { - display: inline !important; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - } - .app-icon { - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; - opacity: 0; - } + +} + +/* loading feedback for apps */ +.app-loading { + .icon-loading-small-dark { + display: inline !important; + position: absolute; + left: 12px; + width: 16px; + height: 16px; + } + .app-icon { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; + opacity: 0; } } @@ -467,6 +469,9 @@ nav { opacity: .6; } } + .app-loading .icon-loading-small-dark { + top:12px; + } li:hover a, diff --git a/core/js/js.js b/core/js/js.js index 5fdafa6e41257..95c00dd644802 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1398,6 +1398,7 @@ function initCore() { // toggle the navigation var $toggle = $('#header .header-appname-container'); var $navigation = $('#navigation'); + var $appmenu = $('#appmenu'); // init the menu OC.registerMenu($toggle, $navigation); @@ -1427,6 +1428,20 @@ function initCore() { OC.hideMenus(function(){return false}); } }); + + $appmenu.delegate('a', 'click', function(event) { + var $app = $(event.target); + if(!$app.is('a')) { + $app = $app.closest('a'); + } + if(event.which === 1 && !event.ctrlKey && !event.metaKey) { + $app.addClass('app-loading'); + } else { + // Close navigation when opening app in + // a new tab + OC.hideMenus(function(){return false}); + } + }); } function setupUserMenu() {