Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive app menu #4439

Merged
merged 3 commits into from
Apr 25, 2017
Merged

Responsive app menu #4439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7548825
Responsive app menu
juliusknorr Mar 28, 2017
673b58e
Fix adding/removing apps
juliusknorr Apr 25, 2017
27b19aa
Fix loading spinner for new app menu
juliusknorr Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 37 additions & 63 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -242,12 +243,6 @@ nav {
margin-left: -10px;
}

/* position of dropdown arrow */

#navigation:after {
left: 242px;
}

#navigation {
box-sizing: border-box;
* {
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -300,20 +294,21 @@ nav {
max-height: 32px;
max-width: 32px;
}
/* loading feedback for apps */
.app-loading {
.icon-loading-dark {
display: inline !important;
position: absolute;
top: 20px;
left: 24px;
width: 32px;
height: 32px;
}
.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)';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need those ugly/strange opacity filters for ie?

opacity: 0;
}
}

Expand Down Expand Up @@ -454,10 +449,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 {
Expand All @@ -471,11 +469,14 @@ nav {
opacity: .6;
}
}
.app-loading .icon-loading-small-dark {
top:12px;
}


li:hover a,
li a.active {
opacity: 1;

}

li img,
Expand Down Expand Up @@ -541,31 +542,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;
}
}

}
}
62 changes: 62 additions & 0 deletions core/js/js.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -1482,6 +1497,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')) {

Expand Down
63 changes: 30 additions & 33 deletions core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,54 +60,51 @@
<div class="icon-caret"></div>
</a>

<div id="appmenu">
<ul>
<?php foreach($_['headernavigation'] as $entry): ?>
<li data-id="<?php p($entry['id']); ?>">
<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon" />
<div class="icon-loading-dark" style="display:none;"></div>
<span>
<ul id="appmenu">
<?php foreach ($_['navigation'] as $entry): ?>
<li data-id="<?php p($entry['id']); ?>" class="hidden">
<a href="<?php print_unescaped($entry['href']); ?>"
tabindex="3"
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
class="app-icon"/>
<div class="icon-loading-small-dark"
style="display:none;"></div>
<span>
<?php p($entry['name']); ?>
</span>
</a>
</li>
<?php endforeach; ?>
<li id="more-apps" class="menutoggle<?php if (count($_['navigation']) <= 8): ?> hidden<?php endif; ?>">
<a href="#">
<div class="icon-more-white"></div>
<span><?php p($l->t('More apps')); ?></span>
</a>
</li>
</ul>
</div>
</a>
</li>
<?php endforeach; ?>
<li id="more-apps" class="menutoggle">
<a href="#">
<div class="icon-more-white"></div>
<span><?php p($l->t('More apps')); ?></span>
</a>
</li>
</ul>

<nav role="navigation"><div id="navigation">
<nav role="navigation">
<div id="navigation">
<div id="apps">
<ul>
<?php foreach($_['navigation'] as $entry): ?>
<?php if($entry['showInHeader']): ?>
<li data-id="<?php p($entry['id']); ?>" class="in-header">
<?php else: ?>
<li data-id="<?php p($entry['id']); ?>">
<?php endif; ?>
<li data-id="<?php p($entry['id']); ?>">
<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<svg width="32" height="32" viewBox="0 0 32 32">
<svg width="16" height="16" viewBox="0 0 16 16">
<defs><filter id="invert-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon"></image>
<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invert-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon"></image>
</svg>
<div class="icon-loading-dark" style="display:none;"></div>
<span>
<?php p($entry['name']); ?>
</span>
<div class="icon-loading-small-dark" style="display:none;"></div>
<span><?php p($entry['name']); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div></nav>
</div>
</nav>

</div>

Expand Down
2 changes: 0 additions & 2 deletions lib/private/TemplateLayout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Loading