From c3016d3291c28fd7ca692044fff83437a372d991 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Thu, 15 Feb 2018 11:38:24 +0100 Subject: 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 | 114 +++++++++++++++++++++++++++++---------------------- 1 file changed, 64 insertions(+), 50 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 7021762bf7f..d6fe3ccf983 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; + /* User menu on the right */ + #expand { + opacity: 1; /* override icon opacity */ + 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; - img { - opacity: 1; + /* 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; + } } - /* do not show display name when profile picture is present */ - &.avatardiv-shown + #expandDisplayName { - display: none; - } - } - #expandDisplayName { - padding: 8px; - opacity: .6; + #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, -- cgit v1.2.3 From 67699f95060a12d01b07cc976e0cb3db883e68b7 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 21 Feb 2018 09:48:07 +0100 Subject: 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 d6fe3ccf983..ff34f1db357 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,30 +383,28 @@ nav { #expandDisplayName { padding: 8px; opacity: .6; - } - } -} -/* full opacity for gear icon if active */ -#body-settings #expandDisplayName { - opacity: 1; -} + /* full opacity for gear icon if active */ + #body-settings & { + 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; + /* 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; + } + } } #expanddiv { @@ -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 6f1583cb77a..64e563ce411 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 fa92508ff7a..89f6f465ead 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); }, -- cgit v1.2.3 From 15a3caedc09c33b8c3037153a4316076715ffb76 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 21 Feb 2018 15:12:42 +0100 Subject: 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 ff34f1db357..a2c91d00ee4 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 9e7ec552830..b0f302e1599 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 89f6f465ead..3cdaab0cde9 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 c8c8ec84efa..e11620a3111 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -80,7 +80,7 @@ - + -- cgit v1.2.3 From 72861f2dfbe68c43b05eb00b696ed9129d513b7f Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Thu, 22 Feb 2018 09:59:48 +0100 Subject: 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 3cdaab0cde9..3c6ababf764 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); -- cgit v1.2.3 From 262ce3f19d481f05a79ef9d501bf9c6d265d5044 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Tue, 27 Feb 2018 12:53:46 +0100 Subject: 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 a2c91d00ee4..e7c0f7252c9 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 { -- cgit v1.2.3 From 7f712ae466e88b1890c8f1a87c2b98b9549f0f9e Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Sun, 4 Mar 2018 15:22:49 +0100 Subject: 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 e7c0f7252c9..3273d2d8372 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 */ } } -- cgit v1.2.3 From e70570cbd7d98dd9f759184a571366b16ee38723 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Sun, 4 Mar 2018 16:10:45 +0100 Subject: 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 64e563ce411..ebc7e094cdb 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; -- cgit v1.2.3 From c401a8cf2653512c9babfabca4a5d24293e8e7be Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Sun, 4 Mar 2018 16:24:14 +0100 Subject: 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 3273d2d8372..35e756cfcd5 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-dark { - display: inline !important; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - } - .app-icon { - opacity: 0; + /* 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 */ @@ -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; + } } -- cgit v1.2.3 From d9bd6f325392316f6b2d83d0b712d473d8510fda Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 7 Mar 2018 11:05:23 +0100 Subject: 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 ------ apps/files_sharing/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 1e9dec87fad..e040d449129 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 2fdf83e7026..519bc553228 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 35e756cfcd5..86739240aeb 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 3651e701c34..6a175de6431 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 b9451fe05a2..d3c12f8fd96 100644 --- a/core/templates/layout.public.php +++ b/core/templates/layout.public.php @@ -54,16 +54,18 @@ getActionCount()>1) { ?> - - -- cgit v1.2.3