diff --git a/core/css/header.scss b/core/css/header.scss index 2b73937a3c..c67df9ba17 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -113,6 +113,7 @@ padding-top: 22px; padding-right: 10px; flex-shrink: 0; + display: none !important; } /* show caret indicator next to logo to make clear it is tappable */ .icon-caret { @@ -181,7 +182,7 @@ font-size: 16px; font-weight: 300; margin: 0; - margin-top: -27px; + margin-top: -26px; padding: 7px 0 7px 5px; vertical-align: middle; } @@ -212,7 +213,48 @@ z-index: 2000; &:after { left: 47%; + bottom: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(255, 255, 255, 0.97); + border-width: 9px; + margin-left: -9px; } +} + +/* arrow look */ + +#expanddiv:after { + bottom: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(255, 255, 255, 0.97); + border-width: 10px; + margin-left: -10px; +} + +/* position of dropdown arrow */ + +#navigation:after { + left: 214px; +} + +#expanddiv:after { + right: 15px; +} + +#navigation { + box-sizing: border-box; * { box-sizing: border-box; } @@ -405,3 +447,115 @@ } } } + +/* do not show display name when profile picture is present */ + +#header { + .avatardiv.avatardiv-shown + #expandDisplayName { + display: none; + } + #expand { + display: block; + } +} + +#appmenu { + display: inline-block; + width: auto; + clear: both; + height: 44px; +} + +#appmenu ul { +} + +#appmenu li { + float: left; + display: inline-block; + vertical-align: top !important; + height: 20px; + padding: 12px; +} + +#appmenu li a { + opacity: 0.6; + margin: 0; + text-align: center; + vertical-align: top !important; + position: relative; + height: 44px; +} + +#appmenu li:hover a, +#appmenu li a.active { + opacity: 1; +} + +#appmenu li img, +#appmenu .icon-more-white { + display: inline-block; + width: 20px; + height: 20px; +} + +#appmenu li span { + display: none; + position: absolute; + overflow: visible; + left: 0; + background-color: #FFF; + border: 1px solid #000; + color: #000; +} + +#appmenu li:hover a { + position: relative +} + +#appmenu li:hover span { + display: inline-block; + white-space: nowrap; + position: absolute; +} + +#appmenu li:hover span { + background-color: white; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: 0; + border: none; + color: #333; + width: auto; + left: 50%; + top: 31px; + transform: translateX(-50%); + padding: 2px 10px; + -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); +} + +#appmenu li:hover span { + display: block; +} + +#appmenu li:hover a:before, +#appmenu li a.active:before { + content: " "; + border: solid transparent; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: white; + border-width: 8px; + transform: translateX(-50%); + left: 50%; + top: 17px; + z-index: 100; +} diff --git a/core/js/js.js b/core/js/js.js index 6fd66c9c9b..e1e0feda2b 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1370,7 +1370,7 @@ function initCore() { */ function setupMainMenu() { // toggle the navigation - var $toggle = $('#header .header-appname-container'); + var $toggle = $('#more-apps'); var $navigation = $('#navigation'); // init the menu @@ -1439,7 +1439,7 @@ function initCore() { // 2 is the additional offset between the triangles if($('#navigation').length) { $('#header #nextcloud + .menutoggle').one('click', function(){ - var caretPosition = $('.header-appname + .icon-caret').offset().left - 2; + var caretPosition = $('#more-apps').offset().left - 2; if(caretPosition > 255) { // if the app name is longer than the menu, just put the triangle in the middle return; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index e9a9b042e0..84e3690c91 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -58,9 +58,54 @@
+ +
+ +
+ -
@@ -110,7 +156,8 @@