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 7021762bf7..86739240ae 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -74,13 +74,17 @@
#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;
+ margin: 0;
&:not(.popovermenu) {
display: none;
@@ -96,6 +100,7 @@
width: 0;
position: absolute;
pointer-events: none;
+ right: 12px;
}
}
.logo {
@@ -151,6 +156,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 */
@@ -199,16 +223,17 @@
}
/* NAVIGATION --------------------------------------------------------------- */
-nav {
+nav[role='navigation'] {
display: inline-block;
width: 44px;
height: 44px;
- margin-left: -54px;
+ margin-left: -44px;
}
.header-left #navigation {
position: relative;
- left: -100%;
+ left: 22px; /* half the togglemenu */
+ transform: translateX(-50%);
width: 160px;
}
@@ -219,7 +244,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: ' ';
@@ -229,26 +254,11 @@ 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 */
}
}
-/* 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;
* {
@@ -259,10 +269,10 @@ nav {
}
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;
@@ -277,9 +287,6 @@ nav {
span {
opacity: .7;
}
- svg {
- margin-bottom: 2px;
- }
&:hover svg,
&:focus svg,
&:hover span,
@@ -299,20 +306,20 @@ nav {
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 */
@@ -335,99 +342,89 @@ nav {
display: inline-block;
color: rgba($color-primary-text, 0.7);
cursor: pointer;
- .icon-loading-small-dark {
- display: inline-block;
- margin-bottom: -3px;
- margin-right: 6px;
- background-size: 16px 16px;
- }
+ margin-right: 13px;
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 */
- /* Profile picture in header */
- .avatardiv {
- cursor: pointer;
- height: 32px;
- width: 32px;
img {
- opacity: 1;
+ 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;
+ 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;
+
+ /* 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;
}
}
-
- #expandDisplayName {
- padding: 8px;
- opacity: .6;
- }
-}
-
-/* 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 {
- 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;
+ white-space: nowrap;
+
+ .icon-loading-small {
+ margin-right: 9px;
+ background-size: 16px 16px;
+ }
img {
- margin-bottom: -3px;
- margin-right: 6px;
+ margin-right: 9px;
+ height: 16px;
+ width: 16px;
}
&:hover,
&:focus,
@@ -463,10 +460,15 @@ nav {
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;
+ }
}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 6f1583cb77..ebc7e094cd 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 .header-right .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/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/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 fa92508ff7..3c6ababf76 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -678,9 +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) {
+ registerMenu: function($toggle, $menuEl, toggle, headerMenu) {
var self = this;
$menuEl.addClass('menu');
$toggle.on('click.menu', function(event) {
@@ -696,6 +697,11 @@ var OCP = {},
// close it
self.hideMenus();
}
+
+ if (headerMenu === true) {
+ $menuEl.parent().addClass('openedMenu');
+ }
+
$menuEl.slideToggle(OC.menuSpeed, toggle);
OC._currentMenu = $menuEl;
OC._currentMenuToggle = $toggle;
@@ -730,6 +736,7 @@ var OCP = {},
}
});
}
+ $('.openedMenu').removeClass('openedMenu');
OC._currentMenu = null;
OC._currentMenuToggle = null;
},
@@ -1396,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) {
@@ -1480,7 +1487,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 +1709,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);
},
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) { ?>
-
-
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 @@
-
+