Skip to content

Commit cd4ebe2

Browse files
MorrisJobkeMorrisJobke
authored
Merge pull request #3008 from nextcloud/appmenu-experiment
Show apps in header
2 parents 2a9d1a7 + b8ef616 commit cd4ebe2

6 files changed

Lines changed: 438 additions & 91 deletions

File tree

‎core/css/header.scss‎

Lines changed: 192 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
height: 34px;
110110
}
111111
.header-appname-container {
112-
display: inline-block;
112+
display: none;
113113
padding-top: 22px;
114114
padding-right: 10px;
115115
flex-shrink: 0;
@@ -181,29 +181,31 @@
181181
font-size: 16px;
182182
font-weight: 300;
183183
margin: 0;
184-
margin-top: -27px;
184+
margin-top: -26px;
185185
padding: 7px 0 7px 5px;
186186
vertical-align: middle;
187187
}
188188

189-
190-
191189
/* do not show menu toggle on public share links as there is no menu */
192190
#body-public #header .icon-caret {
193191
display: none;
194192
}
195193

196194
/* NAVIGATION --------------------------------------------------------------- */
195+
nav {
196+
margin-top: auto;
197+
}
198+
197199
#navigation {
198-
position: fixed;
200+
position: relative;
199201
top: 45px;
200-
left: 10px;
202+
left: -100%;
201203
width: 265px;
202204
max-height: 85%;
203205
margin-top: 0;
204206
padding-bottom: 10px;
205-
background-color: rgba(255, 255, 255, 0.97);
206-
box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
207+
background-color: rgba(255, 255, 255, .97);
208+
box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
207209
border-radius: 3px;
208210
border-top-left-radius: 0;
209211
border-top-right-radius: 0;
@@ -212,7 +214,48 @@
212214
z-index: 2000;
213215
&:after {
214216
left: 47%;
217+
bottom: 100%;
218+
border: solid transparent;
219+
content: ' ';
220+
height: 0;
221+
width: 0;
222+
position: absolute;
223+
pointer-events: none;
224+
border-color: rgba(0, 0, 0, 0);
225+
border-bottom-color: rgba(255, 255, 255, .97);
226+
border-width: 9px;
227+
margin-left: -9px;
215228
}
229+
}
230+
231+
/* arrow look */
232+
233+
#expanddiv:after {
234+
bottom: 100%;
235+
border: solid transparent;
236+
content: ' ';
237+
height: 0;
238+
width: 0;
239+
position: absolute;
240+
pointer-events: none;
241+
border-color: rgba(0, 0, 0, 0);
242+
border-bottom-color: rgba(255, 255, 255, .97);
243+
border-width: 10px;
244+
margin-left: -10px;
245+
}
246+
247+
/* position of dropdown arrow */
248+
249+
#navigation:after {
250+
left: 242px;
251+
}
252+
253+
#expanddiv:after {
254+
right: 15px;
255+
}
256+
257+
#navigation {
258+
box-sizing: border-box;
216259
* {
217260
box-sizing: border-box;
218261
}
@@ -307,6 +350,9 @@
307350
#apps {
308351
max-height: calc(100vh - 100px);
309352
overflow: auto;
353+
.in-header {
354+
display: none;
355+
}
310356
}
311357

312358
/* USER MENU -----------------------------------------------------------------*/
@@ -375,7 +421,7 @@
375421
z-index: 2000;
376422
display: none;
377423
background: rgb(255, 255, 255);
378-
box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
424+
box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
379425
border-radius: 3px;
380426
border-top-left-radius: 0;
381427
border-top-right-radius: 0;
@@ -405,3 +451,140 @@
405451
}
406452
}
407453
}
454+
455+
/* do not show display name when profile picture is present */
456+
457+
#header {
458+
.avatardiv.avatardiv-shown + #expandDisplayName {
459+
display: none;
460+
}
461+
#expand {
462+
display: block;
463+
}
464+
}
465+
466+
#appmenu {
467+
display: inline-block;
468+
width: auto;
469+
clear: both;
470+
height: 44px;
471+
472+
li {
473+
float: left;
474+
display: inline-block;
475+
vertical-align: top !important;
476+
height: 20px;
477+
padding: 12px;
478+
479+
a {
480+
opacity: 0.6;
481+
margin: 0;
482+
text-align: center;
483+
vertical-align: top !important;
484+
position: relative;
485+
height: 44px;
486+
}
487+
}
488+
489+
li:hover a,
490+
li a.active {
491+
opacity: 1;
492+
493+
}
494+
495+
li img,
496+
.icon-more-white {
497+
display: inline-block;
498+
width: 20px;
499+
height: 20px;
500+
}
501+
502+
li span {
503+
display: none;
504+
position: absolute;
505+
overflow: visible;
506+
background-color: rgba(255, 255, 255, .97);
507+
white-space: nowrap;
508+
border: none;
509+
-webkit-border-radius: 3px;
510+
-moz-border-radius: 3px;
511+
border-radius: 3px;
512+
border-top-left-radius: 0;
513+
border-top-right-radius: 0;
514+
margin-top: 0;
515+
color: rgba(0, 0, 0, .6);
516+
width: auto;
517+
left: 50%;
518+
top: 31px;
519+
transform: translateX(-50%);
520+
padding: 4px 10px;
521+
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
522+
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
523+
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
524+
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
525+
filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
526+
}
527+
528+
li:hover span {
529+
display: inline-block;
530+
}
531+
532+
533+
li:hover a:before,
534+
li a.active:before {
535+
content: ' ';
536+
height: 0;
537+
width: 0;
538+
position: absolute;
539+
pointer-events: none;
540+
border: 0 solid transparent;
541+
border-bottom-color: white;
542+
border-width: 10px;
543+
transform: translateX(-50%);
544+
left: 50%;
545+
top: 12px;
546+
z-index: 100;
547+
display: block;
548+
}
549+
&.menu-open li:hover a:before,
550+
&.menu-open li a.active:before,
551+
&.menu-open li:hover span {
552+
display: none !important;
553+
}
554+
555+
/* do not show active indicator when hovering other icons */
556+
&:hover li:not(:hover) a:before {
557+
display: none;
558+
}
559+
560+
li.hidden {
561+
display: none;
562+
}
563+
564+
}
565+
566+
/* use popover menu on mobile and small screens */
567+
@media only screen and (max-width: 600px) {
568+
569+
#header .header-appname-container {
570+
display: inline-block !important;
571+
}
572+
573+
#appmenu {
574+
display: none;
575+
}
576+
577+
#apps .in-header {
578+
display: inline-block;
579+
}
580+
581+
#navigation {
582+
position: fixed;
583+
top: 45px;
584+
left: 10px;
585+
&:after {
586+
left: 214px;
587+
}
588+
}
589+
590+
}

‎core/js/js.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1369,6 +1369,10 @@ function initCore() {
13691369
* If the screen is bigger, the main menu is not a toggle any more.
13701370
*/
13711371
function setupMainMenu() {
1372+
1373+
// init the more-apps menu
1374+
OC.registerMenu($('#more-apps'), $('#navigation'));
1375+
13721376
// toggle the navigation
13731377
var $toggle = $('#header .header-appname-container');
13741378
var $navigation = $('#navigation');
@@ -1438,13 +1442,20 @@ function initCore() {
14381442
// move triangle of apps dropdown to align with app name triangle
14391443
// 2 is the additional offset between the triangles
14401444
if($('#navigation').length) {
1441-
$('#header #nextcloud + .menutoggle').one('click', function(){
1445+
$('#header #nextcloud + .menutoggle').on('click', function(){
1446+
$('#menu-css-helper').remove();
14421447
var caretPosition = $('.header-appname + .icon-caret').offset().left - 2;
14431448
if(caretPosition > 255) {
14441449
// if the app name is longer than the menu, just put the triangle in the middle
14451450
return;
14461451
} else {
1447-
$('head').append('<style>#navigation:after { left: '+ caretPosition +'px; }</style>');
1452+
$('head').append('<style id="menu-css-helper">#navigation:after { left: '+ caretPosition +'px; }</style>');
1453+
}
1454+
});
1455+
$('#header #appmenu .menutoggle').on('click', function() {
1456+
$('#appmenu').toggleClass('menu-open');
1457+
if($('#appmenu').is(':visible')) {
1458+
$('#menu-css-helper').remove();
14481459
}
14491460
});
14501461
}

0 commit comments

Comments
 (0)