From c3016d3291c28fd7ca692044fff83437a372d991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 15 Feb 2018 11:38:24 +0100 Subject: [PATCH 1/9] New standard for top right header 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 | 116 ++++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 51 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 7021762bf7..d6fe3ccf98 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -74,13 +74,16 @@ #header { /* Header menu */ .menu { - top: 45px; background-color: $color-main-background; filter: drop-shadow(0 1px 10px $color-box-shadow); border-radius: 0 0 3px 3px; box-sizing: border-box; z-index: 2000; position: absolute; + max-width: 350px; + max-height: 280px; + right: 0; + top: 44px; &:not(.popovermenu) { display: none; @@ -96,6 +99,7 @@ width: 0; position: absolute; pointer-events: none; + right: 13px; } } .logo { @@ -151,6 +155,25 @@ #header-right, .header-right { justify-content: flex-end; } + + /* Right header standard */ + .header-right { + > div, + > form { + position: relative; + > .menutoggle { + display: flex; + justify-content: center; + align-items: center; + width: 44px; + height: 44px; + cursor: pointer; + opacity: 0.6; + padding: 0; + margin: 0; + } + } + } } /* hover effect for app switcher label */ @@ -335,57 +358,52 @@ nav { display: inline-block; color: rgba($color-primary-text, 0.7); cursor: pointer; + margin-right: 13px; + flex: 0 0 auto; + .icon-loading-small-dark { display: inline-block; margin-bottom: -3px; margin-right: 6px; background-size: 16px 16px; } - flex: 0 0 auto; -} -/* User menu on the right */ -#expand { - position: relative; - display: flex; - align-items: center; - padding: 7px 20px 6px 10px; - cursor: pointer; - * { - cursor: pointer; - } - img { - opacity: .7; - margin-bottom: -2px; - } - &:hover, - &:focus, - &:active { - color: $color-primary-text; - img, - #expandDisplayName { - opacity: 1; - } - } - - /* Profile picture in header */ - .avatardiv { - cursor: pointer; - height: 32px; - width: 32px; + /* User menu on the right */ + #expand { + opacity: 1; /* override icon opacity */ img { - opacity: 1; - cursor: pointer; + opacity: .7; + margin-bottom: -2px; } - /* do not show display name when profile picture is present */ - &.avatardiv-shown + #expandDisplayName { - display: none; + &:hover, + &:focus, + &:active { + color: $color-primary-text; + img, + #expandDisplayName { + opacity: 1; + } } - } - #expandDisplayName { - padding: 8px; - opacity: .6; + /* Profile picture in header */ + .avatardiv { + cursor: pointer; + height: 32px; + width: 32px; + img { + opacity: 1; + cursor: pointer; + } + /* do not show display name when profile picture is present */ + &.avatardiv-shown + #expandDisplayName { + display: none; + } + } + + #expandDisplayName { + padding: 8px; + opacity: .6; + } } } @@ -412,22 +430,18 @@ nav { } #expanddiv { - right: 13px; - background: $color-main-background; - &:after { - /* position of dropdown arrow */ - right: 13px; - } a { - display: block; + display: inline-flex; + align-items: center; height: 40px; color: $color-main-text; - padding: 10px 12px 0; + padding: 12px; box-sizing: border-box; opacity: .7; img { - margin-bottom: -3px; - margin-right: 6px; + margin-right: 9px; + height: 16px; + width: 16px; } &:hover, &:focus, From 67699f95060a12d01b07cc976e0cb3db883e68b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 21 Feb 2018 09:48:07 +0100 Subject: [PATCH 2/9] Clean scss, use proper loading icon and menu position on narrow screens 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 | 80 ++++++++++++++++++-------------------------- core/css/mobile.scss | 33 ++++++++++++++++++ core/js/js.js | 9 +++-- 3 files changed, 72 insertions(+), 50 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index d6fe3ccf98..ff34f1db35 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -99,7 +99,7 @@ width: 0; position: absolute; pointer-events: none; - right: 13px; + right: 12px; } } .logo { @@ -257,21 +257,6 @@ nav { } } -/* arrow look */ -#expanddiv:after { - bottom: 100%; - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - border-bottom-color: $color-main-background; - border-width: 10px; - margin-left: -10px; -} - #navigation { box-sizing: border-box; * { @@ -361,16 +346,10 @@ nav { margin-right: 13px; flex: 0 0 auto; - .icon-loading-small-dark { - display: inline-block; - margin-bottom: -3px; - margin-right: 6px; - background-size: 16px 16px; - } - /* User menu on the right */ #expand { opacity: 1; /* override icon opacity */ + img { opacity: .7; margin-bottom: -2px; @@ -379,8 +358,8 @@ nav { &:focus, &:active { color: $color-primary-text; - img, - #expandDisplayName { + + img, #expandDisplayName { opacity: 1; } } @@ -390,6 +369,7 @@ nav { cursor: pointer; height: 32px; width: 32px; + img { opacity: 1; cursor: pointer; @@ -403,32 +383,30 @@ nav { #expandDisplayName { padding: 8px; opacity: .6; + + /* full opacity for gear icon if active */ + #body-settings & { + opacity: 1; + } + } + + /* show triangle below user menu if active */ + #body-settings &:before { + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 0 solid transparent; + border-bottom-color: $color-main-background; + border-width: 10px; + bottom: 0; + z-index: 100; + display: block; } } } -/* full opacity for gear icon if active */ -#body-settings #expandDisplayName { - opacity: 1; -} - -/* show triangle below user menu if active */ -#body-settings #expand:before { - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border: 0 solid transparent; - border-bottom-color: $color-main-background; - border-width: 10px; - transform: translateX(-50%); - left: 26px; - bottom: 0; - z-index: 100; - display: block; -} - #expanddiv { a { display: inline-flex; @@ -438,6 +416,12 @@ nav { 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; @@ -477,7 +461,7 @@ nav { opacity: .6; } } - .app-loading .icon-loading-small-dark { + .app-loading .icon-loading-small { top: 12px; width: 20px; height: 20px; diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 6f1583cb77..64e563ce41 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -131,3 +131,36 @@ table.multiselect thead { /* end of media query */ } + +@media only screen and (max-width: 480px) { + #header .menu { + max-width: calc(100vw - 26px); + position: fixed; + right: 13px; + top: 45px; + &::after { + display: none !important; + } + } + /* Arrow directly child of menutoggle */ + #header .header-right > div { + &.openedMenu{ + &::after { + display: block; + } + } + &::after { + border: 10px solid transparent; + border-bottom-color: $color-main-background; + bottom: 0; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + right: 13px; + z-index: 2001; + display: none; + } + } +} diff --git a/core/js/js.js b/core/js/js.js index fa92508ff7..89f6f465ea 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -681,6 +681,7 @@ var OCP = {}, * @returns {undefined} */ registerMenu: function($toggle, $menuEl, toggle) { + console.trace(); var self = this; $menuEl.addClass('menu'); $toggle.on('click.menu', function(event) { @@ -696,6 +697,9 @@ var OCP = {}, // close it self.hideMenus(); } + + $(event.currentTarget).addClass('openedMenu'); + $menuEl.slideToggle(OC.menuSpeed, toggle); OC._currentMenu = $menuEl; OC._currentMenuToggle = $toggle; @@ -730,6 +734,7 @@ var OCP = {}, } }); } + $('.openedMenu').removeClass('openedMenu'); OC._currentMenu = null; OC._currentMenuToggle = null; }, @@ -1480,7 +1485,7 @@ function initCore() { if(event.which === 1 && !event.ctrlKey && !event.metaKey) { $page.find('img').remove(); $page.find('div').remove(); // prevent odd double-clicks - $page.prepend($('
').addClass('icon-loading-small-dark')); + $page.prepend($('
').addClass('icon-loading-small')); } else { // Close navigation when opening menu entry in // a new tab @@ -1702,7 +1707,7 @@ OC.PasswordConfirmation = { requiresPasswordConfirmation: function() { var serverTimeDiff = this.pageLoadTime - (nc_pageLoad * 1000); var timeSinceLogin = moment.now() - (serverTimeDiff + (nc_lastLogin * 1000)); - + // if timeSinceLogin > 30 minutes and user backend allows password confirmation return (backendAllowsPasswordConfirmation && timeSinceLogin > 30 * 60 * 1000); }, From 15a3caedc09c33b8c3037153a4316076715ffb76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 21 Feb 2018 15:12:42 +0100 Subject: [PATCH 3/9] Create special option to toggle header menu container 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 | 2 +- core/js/contactsmenu.js | 2 +- core/js/js.js | 10 ++++++---- core/templates/layout.user.php | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index ff34f1db35..a2c91d00ee 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -461,7 +461,7 @@ nav { opacity: .6; } } - .app-loading .icon-loading-small { + .app-loading .icon-loading-small-dark { top: 12px; width: 20px; height: 20px; diff --git a/core/js/contactsmenu.js b/core/js/contactsmenu.js index 9e7ec55283..b0f302e159 100644 --- a/core/js/contactsmenu.js +++ b/core/js/contactsmenu.js @@ -464,7 +464,7 @@ OC.registerMenu(this._$trigger, this.$el, function() { this._toggleVisibility(true); - }.bind(this)); + }.bind(this), true); this.$el.on('beforeHide', function() { this._toggleVisibility(false); }.bind(this)); diff --git a/core/js/js.js b/core/js/js.js index 89f6f465ea..3cdaab0cde 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -678,10 +678,10 @@ var OCP = {}, * @param {jQuery} $toggle * @param {jQuery} $menuEl * @param {function|undefined} toggle callback invoked everytime the menu is opened + * @param {boolean} headerMenu is this a top right header menu? * @returns {undefined} */ - registerMenu: function($toggle, $menuEl, toggle) { - console.trace(); + registerMenu: function($toggle, $menuEl, toggle, headerMenu) { var self = this; $menuEl.addClass('menu'); $toggle.on('click.menu', function(event) { @@ -698,7 +698,9 @@ var OCP = {}, self.hideMenus(); } - $(event.currentTarget).addClass('openedMenu'); + if (headerMenu === true) { + $(event.currentTarget).parent().addClass('openedMenu'); + } $menuEl.slideToggle(OC.menuSpeed, toggle); OC._currentMenu = $menuEl; @@ -1401,7 +1403,7 @@ function initCore() { initSessionHeartBeat(); } - OC.registerMenu($('#expand'), $('#expanddiv')); + OC.registerMenu($('#expand'), $('#expanddiv'), false, true); // toggle for menus $(document).on('mouseup.closemenus', function(event) { diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index c8c8ec84ef..e11620a311 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -80,7 +80,7 @@ - + From 72861f2dfbe68c43b05eb00b696ed9129d513b7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Feb 2018 09:59:48 +0100 Subject: [PATCH 4/9] Use correct variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/js/js.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/js/js.js b/core/js/js.js index 3cdaab0cde..3c6ababf76 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -699,7 +699,7 @@ var OCP = {}, } if (headerMenu === true) { - $(event.currentTarget).parent().addClass('openedMenu'); + $menuEl.parent().addClass('openedMenu'); } $menuEl.slideToggle(OC.menuSpeed, toggle); From 262ce3f19d481f05a79ef9d501bf9c6d265d5044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 27 Feb 2018 12:53:46 +0100 Subject: [PATCH 5/9] App menu fix 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 | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/css/header.scss b/core/css/header.scss index a2c91d00ee..e7c0f7252c 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -226,7 +226,8 @@ nav { display: inline-block; width: 44px; height: 44px; - margin-left: -54px; + margin-left: -44px; + position: relative; } .header-left #navigation { From 7f712ae466e88b1890c8f1a87c2b98b9549f0f9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 4 Mar 2018 15:22:49 +0100 Subject: [PATCH 6/9] Fixed centering of the nav/picker popup 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 | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index e7c0f7252c..3273d2d837 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -222,17 +222,17 @@ } /* NAVIGATION --------------------------------------------------------------- */ -nav { +nav[role='navigation'] { display: inline-block; width: 44px; height: 44px; margin-left: -44px; - position: relative; } .header-left #navigation { position: relative; - left: -100%; + left: 22px; /* half the togglemenu */ + transform: translateX(-50%); width: 160px; } @@ -243,7 +243,7 @@ nav { filter: drop-shadow(0 1px 10px $color-box-shadow); &:after { /* position of dropdown arrow */ - left: 47%; + left: 50%; bottom: 100%; border: solid transparent; content: ' '; @@ -253,8 +253,8 @@ nav { pointer-events: none; border-color: rgba(0, 0, 0, 0); border-bottom-color: $color-main-background; - border-width: 9px; - margin-left: -9px; + border-width: 10px; + margin-left: -10px; /* border width */ } } From e70570cbd7d98dd9f759184a571366b16ee38723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 4 Mar 2018 16:10:45 +0100 Subject: [PATCH 7/9] Fixed appsmenu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/mobile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 64e563ce41..ebc7e094cd 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -133,7 +133,7 @@ table.multiselect thead { } @media only screen and (max-width: 480px) { - #header .menu { + #header .header-right .menu { max-width: calc(100vw - 26px); position: fixed; right: 13px; From c401a8cf2653512c9babfabca4a5d24293e8e7be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 4 Mar 2018 16:24:14 +0100 Subject: [PATCH 8/9] Fixed loading state in apps nav menu 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 | 48 +++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 3273d2d837..35e756cfcd 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -268,10 +268,10 @@ nav[role='navigation'] { } a { position: relative; - display: block; + display: inline-flex; padding: 10px 12px; - height:40px; - vertical-align: text-bottom; + height: 40px; + align-items: center; span { display: inline-block; padding-bottom: 0; @@ -286,9 +286,6 @@ nav[role='navigation'] { span { opacity: .7; } - svg { - margin-bottom: 2px; - } &:hover svg, &:focus svg, &:hover span, @@ -308,20 +305,20 @@ nav[role='navigation'] { 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; + } + } -/* loading feedback for apps */ -.app-loading { - .icon-loading-small-dark { - display: inline !important; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - } - .app-icon { - opacity: 0; - } } /* Apps management */ @@ -462,10 +459,15 @@ nav[role='navigation'] { opacity: .6; } } - .app-loading .icon-loading-small-dark { - top: 12px; - width: 20px; - height: 20px; + .app-loading { + > svg { + display: none; + } + .icon-loading-small-dark { + width: 20px; + height: 20px; + display: block !important; + } } From d9bd6f325392316f6b2d83d0b712d473d8510fda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 11:05:23 +0100 Subject: [PATCH 9/9] Fixed public template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/css/public.scss | 9 ----- .../lib/Template/LinkMenuAction.php | 8 +++-- core/css/header.scss | 1 + core/css/public.scss | 34 +++++++++---------- core/templates/layout.public.php | 22 ++++++------ 5 files changed, 36 insertions(+), 38 deletions(-) diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index 1e9dec87fa..e040d44912 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -88,15 +88,6 @@ thead { opacity: .5; } -#directLink-container { - flex-wrap: wrap; -} - -#directLink { - margin-left: 30px; - flex-basis: 100%; -} - /* header buttons */ #details { display: inline-flex; diff --git a/apps/files_sharing/lib/Template/LinkMenuAction.php b/apps/files_sharing/lib/Template/LinkMenuAction.php index 2fdf83e702..519bc55322 100644 --- a/apps/files_sharing/lib/Template/LinkMenuAction.php +++ b/apps/files_sharing/lib/Template/LinkMenuAction.php @@ -47,8 +47,12 @@ class LinkMenuAction extends SimpleMenuAction { '' . '' . '' . - '' . '' . + '' . + '
  • ' . + '' . + '' . + '' . '
    • '; } -} \ No newline at end of file +} diff --git a/core/css/header.scss b/core/css/header.scss index 35e756cfcd..86739240ae 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -84,6 +84,7 @@ max-height: 280px; right: 0; top: 44px; + margin: 0; &:not(.popovermenu) { display: none; diff --git a/core/css/public.scss b/core/css/public.scss index 3651e701c3..6a175de643 100644 --- a/core/css/public.scss +++ b/core/css/public.scss @@ -1,22 +1,22 @@ #body-public { - .header-right { + .header-right { - span:not(.popovermenu) a { - color: $color-primary-text; - } + span:not(.popovermenu) a { + color: $color-primary-text; + } - .menutoggle, - #header-primary-action[class^='icon-'] { - padding: 14px; - padding-right: 40px; - background-position: right 15px center; - color: $color-primary-text; - cursor: pointer; - } + .menutoggle, + #header-primary-action[class^='icon-'] { + padding: 14px; + padding-right: 40px; + background-position: right 15px center; + color: $color-primary-text; + cursor: pointer; + } - .menutoggle { - padding-right: 10px; - } + #header-secondary-action { + margin-right: 13px; + } - } -} \ No newline at end of file + } +} diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php index b9451fe05a..d3c12f8fd9 100644 --- a/core/templates/layout.public.php +++ b/core/templates/layout.public.php @@ -54,16 +54,18 @@ getActionCount()>1) { ?> - -