From bb9e282e9581fc65ad4be39cd01bc578c3b0d95e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 3 Dec 2018 08:35:31 +0100 Subject: [PATCH 1/3] Unify headers menu design, fix click area MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/header.scss | 167 ++++++++++----------------------- core/js/js.js | 21 ++++- core/templates/layout.user.php | 3 - 3 files changed, 66 insertions(+), 125 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 4511b44668..82263eb14f 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -77,6 +77,8 @@ #header { /* Header menu */ + $header-menu-entry-height: 44px; + .header-left > nav > .menu, .header-right > div > .menu { background-color: var(--color-main-background); @@ -86,10 +88,11 @@ z-index: 2000; position: absolute; max-width: 350px; - max-height: 280px; - right: 5px; + max-height: $header-menu-entry-height * 7.5; // half entry + right: 5px; // relative to parent top: $header-height; margin: 0; + -webkit-overflow-scrolling: touch; &:not(.popovermenu) { display: none; @@ -107,6 +110,51 @@ pointer-events: none; right: 10px; } + + /* Use by the apps menu and the settings right menu */ + ul { + li { + a { + display: inline-flex; + align-items: center; + height: $header-menu-entry-height; + color: var(--color-main-text); + padding: 10px 12px; + box-sizing: border-box; + opacity: .7; + white-space: nowrap; + position: relative; + width: 100%; + &:hover, + &:focus, + &:active, + &.active { + opacity: 1; + box-shadow: inset 4px 0 var(--color-primary); + } + span { + display: inline-block; + padding-bottom: 0; + color: var(--color-main-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 110px; + } + .icon-loading-small { + margin-right: 10px; + background-size: 16px 16px; + } + img, + svg { + opacity: .7; + margin-right: 10px; + height: 16px; + width: 16px; + } + } + } + } } .logo { display: inline-flex; @@ -265,81 +313,9 @@ nav[role='navigation'] { #navigation { box-sizing: border-box; - * { - box-sizing: border-box; - } - li { - display: inline-block; - } - a { - position: relative; - width: 100%; - display: inline-flex; - padding: 10px 12px; - height: 40px; - align-items: center; - span { - display: inline-block; - padding-bottom: 0; - padding-left: 10px; - color: var(--color-main-text); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 110px; - } - svg, - span { - opacity: .7; - } - &:hover svg, - &:focus svg, - &:hover span, - &:focus span { - opacity: 1; - } - &.active { - svg, span { - opacity: 1; - } - } - } - .app-icon { - margin: 0 auto; - padding: 0; - max-height: 32px; - max-width: 32px; - } - - /* loading feedback for apps */ - .app-loading { - .icon-loading-small { - display: inline !important; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - } - .app-icon { - opacity: 0; - } - } - -} - -/* Apps management */ -#apps { - max-height: inherit; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; .in-header { display: none; } - ul { - display: flex; - flex-direction: column; - } } /* USER MENU -----------------------------------------------------------------*/ @@ -421,37 +397,6 @@ nav[role='navigation'] { } } -/* Settings menu */ -#expanddiv { - a { - display: inline-flex; - align-items: center; - height: 40px; - color: var(--color-main-text); - padding: 12px; - box-sizing: border-box; - opacity: .7; - white-space: nowrap; - - .icon-loading-small { - margin-right: 9px; - background-size: 16px 16px; - } - img { - margin-right: 9px; - height: 16px; - width: 16px; - } - &:hover, - &:focus, - &:active, - &.active { - opacity: 1; - box-shadow: inset 4px 0 var(--color-primary); - } - } -} - /* Apps menu */ #appmenu { display: inline-flex; @@ -532,18 +477,6 @@ nav[role='navigation'] { } } - .app-loading { - > svg { - display: none; - } - .icon-loading-small-dark { - width: 20px; - height: 20px; - display: block !important; - } - } - - /* Show all app titles on hovering app menu area */ &:hover { li { diff --git a/core/js/js.js b/core/js/js.js index 1aaee24af9..d7f2fa25a2 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1466,14 +1466,18 @@ function initCore() { $toggle.attr('href', '#'); $navigation.hide(); - // show loading feedback + // show loading feedback on more apps list $navigation.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'); + $app.find('svg').remove(); + $app.find('div').remove(); // prevent odd double-clicks + // no need for theming, loader is already inverted on dark mode + // but we need it over the primary colour + $app.prepend($('
').addClass('icon-loading-small')); } else { // Close navigation when opening app in // a new tab @@ -1489,13 +1493,20 @@ function initCore() { } }); - $appmenu.delegate('a', 'click', function(event) { + // show loading feedback on visible apps list + $appmenu.delegate('li:not(#more-apps) > 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'); + if(event.which === 1 && !event.ctrlKey && !event.metaKey && $app.parent('#more-apps').length === 0) { + $app.find('svg').remove(); + $app.find('div').remove(); // prevent odd double-clicks + $app.prepend($('
').addClass( + OCA.Theming && OCA.Theming.inverted + ? 'icon-loading-small' + : 'icon-loading-small-dark' + )); } else { // Close navigation when opening app in // a new tab diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index dfa96c5d1c..ea474d7be1 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -57,8 +57,6 @@ filter="url(#invertMenuMain-)" xlink:href="" class="app-icon" /> - @@ -87,7 +85,6 @@ - From ecede42969b63349c3b5dbc413ceb7b9c56a41e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 29 Jan 2019 08:43:08 +0100 Subject: [PATCH 2/3] Popovermenu size fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 06d13e384f..05a9213949 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -841,8 +841,9 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; } /* POPOVER MENU ------------------------------------------------------------ */ -$popoveritem-height: 38px; +$popoveritem-height: 44px; $popovericon-size: 16px; +$outter-margin: ($popoveritem-height - $popovericon-size) / 2; .ie, .edge { @@ -861,7 +862,6 @@ $popovericon-size: 16px; background-color: var(--color-main-background); color: var(--color-main-text); border-radius: var(--border-radius); - border: 1px solid transparent; z-index: 110; margin: 5px; margin-top: -5px; @@ -1000,7 +1000,7 @@ $popovericon-size: 16px; } /* Add padding if contains icon+text */ &:not(:empty) { - padding-right: 10px !important; + padding-right: $outter-margin !important; } /* DEPRECATED! old img in popover fallback * TODO: to remove */ @@ -1039,28 +1039,29 @@ $popovericon-size: 16px; } /* Inputs inside popover supports text, submit & reset */ input { - min-width: #{$popoveritem-height - 4px}; /* twice the margin */ - max-height: #{$popoveritem-height - 4px}; /* twice the margin */ + min-width: $popoveritem-height; + max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */ margin: 2px 0; flex: 1 1 auto; + // space between inline inputs &:not(:first-child) { margin-left: 5px; } } } - /* css hack, only first not hidden*/ + /* css hack, only first not hidden */ &:not(.hidden):not([style*='display:none']) { &:first-of-type { > button, > a, > .menuitem { > form, > input { - margin-top: 10px; + margin-top: $outter-margin - 2px; // minus the input margin } } } &:last-of-type { > button, > a, > .menuitem { > form, > input { - margin-bottom: 10px; + margin-bottom: $outter-margin - 2px; // minus the input margin } } } From 818c23d9f105b5352b8211ddb3cc04419b35270e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 30 Jan 2019 10:30:20 +0100 Subject: [PATCH 3/3] Scrolling on apps popovermenu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/header.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/core/css/header.scss b/core/css/header.scss index 82263eb14f..6d863ab237 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -318,6 +318,13 @@ nav[role='navigation'] { } } +#apps { + max-height: inherit; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + /* USER MENU -----------------------------------------------------------------*/ #settings { display: inline-block;