diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss index e0c1bbfa09..f64a370285 100644 --- a/apps/files/css/detailsView.scss +++ b/apps/files/css/detailsView.scss @@ -7,12 +7,6 @@ clear: both; } -#app-sidebar .mainFileInfoView { - margin-right: 20px; /* accommodate for close icon */ - float:left; - display:block; - width: 100%; -} #app-sidebar .mainFileInfoView .icon { display: inline-block; diff --git a/core/css/apps.scss b/core/css/apps.scss index 3fd1c90e61..86f0e62240 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -74,6 +74,13 @@ kbd { /* Navigation: folder like structure */ #app-navigation { width: $navigation-width; + position: sticky; + top: $header-height; + left: 0; + z-index: 1500; + overflow-y: auto; + overflow-x: hidden; + height: calc(100vh - #{$header-height}); box-sizing: border-box; background-color: var(--color-main-background); -webkit-user-select: none; @@ -320,9 +327,6 @@ kbd { &.hidden { display: none; } - &.without-app-settings { - padding-bottom: 0; - } /** * Button styling for menu, edit and undo @@ -581,12 +585,7 @@ kbd { padding-top: $header-height; box-sizing: border-box; position: relative; - overflow-x: hidden; display: flex; - /* trick: scroll #app-content and not the body - * to avoid double scrollbar with sidebar - */ - max-height: 100vh; } /* APP-CONTENT AND WRAPPER ------------------------------------------ */ @@ -637,17 +636,19 @@ kbd { min-width: $sidebar-min-width; max-width: $sidebar-max-width; display: block; - position: relative; + position: sticky; + top: $header-height; + right:0; + overflow-y: auto; + overflow-x: hidden; + z-index: 1500; + height: calc(100vh - #{$header-height}); background: var(--color-main-background); border-left: 1px solid var(--color-border); - overflow-x: hidden; - overflow-y: auto; flex-shrink: 0; - transition: 300ms width ease-in-out, - 300ms min-width ease-in-out; + // no animations possible, use OC.Apps.showAppSidebar &.disappear { - width: 0; - min-width: 0; + display: none; } } @@ -880,6 +881,11 @@ $popovericon-size: 16px; li { display: flex; flex: 0 0 auto; + + &.hidden { + display: none; + } + > button, > a, > .menuitem { @@ -895,6 +901,7 @@ $popovericon-size: 16px; box-shadow: none; width: 100%; color: var(--color-main-text); + white-space: nowrap; /* Override the app-navigation li opacity */ opacity: .7 !important; span[class^='icon-'], @@ -943,6 +950,7 @@ $popovericon-size: 16px; width: 150px; line-height: 1.6em; padding: 8px 0; + white-space: normal; } > select { margin: 0; @@ -963,7 +971,6 @@ $popovericon-size: 16px; > input.checkbox + label { padding: 0 !important; width: 100%; - white-space: nowrap; } > input.checkbox + label::before { margin: -2px 13px 0; @@ -999,11 +1006,6 @@ $popovericon-size: 16px; } } } - - &.hidden { - display: none; - } - /* css hack, only first not hidden*/ &:not(.hidden):not([style*='display:none']) { &:first-of-type { diff --git a/core/css/ie.scss b/core/css/ie.scss new file mode 100644 index 0000000000..ec7f51065e --- /dev/null +++ b/core/css/ie.scss @@ -0,0 +1,11 @@ + +#app-navigation, +#app-sidebar { + position: fixed !important; +} +#app-content { + width: $navigation-width !important; +} +#app-sidebar.disappear { + right: -$sidebar-max-width !important; +} \ No newline at end of file diff --git a/core/js/apps.js b/core/js/apps.js index b40883e88c..473fec313a 100644 --- a/core/js/apps.js +++ b/core/js/apps.js @@ -27,8 +27,9 @@ */ exports.Apps.showAppSidebar = function($el) { var $appSidebar = $el || $('#app-sidebar'); - $appSidebar.removeClass('disappear'); - $('#content').addClass('with-app-sidebar').trigger(new $.Event('appresized')); + $appSidebar.removeClass('disappear') + .show('slide', { direction: 'right' }, 300); + $('#app-content').trigger(new $.Event('appresized')); }; /** @@ -39,8 +40,11 @@ */ exports.Apps.hideAppSidebar = function($el) { var $appSidebar = $el || $('#app-sidebar'); - $appSidebar.addClass('disappear'); - $('#content').removeClass('with-app-sidebar').trigger(new $.Event('appresized')); + $appSidebar.hide('slide', { direction: 'right' }, 300, + function() { + $appSidebar.addClass('disappear'); + }); + $('#app-content').trigger(new $.Event('appresized')); }; /** diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 1efdf8b441..fc2e5798e1 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -42,6 +42,7 @@ use OC\Template\JSCombiner; use OC\Template\JSConfigHelper; use OC\Template\SCSSCacher; use OCP\Defaults; +use OC\AppFramework\Http\Request; class TemplateLayout extends \OC_Template { @@ -61,6 +62,9 @@ class TemplateLayout extends \OC_Template { // yes - should be injected .... $this->config = \OC::$server->getConfig(); + if(\OCP\Util::isIE()) { + \OC_Util::addStyle('ie'); + } // Decide which page we show if($renderAs == 'user') { diff --git a/lib/private/legacy/util.php b/lib/private/legacy/util.php index b285eb382e..a581397212 100644 --- a/lib/private/legacy/util.php +++ b/lib/private/legacy/util.php @@ -64,6 +64,7 @@ use OCP\IConfig; use OCP\IGroupManager; use OCP\ILogger; use OCP\IUser; +use OC\AppFramework\Http\Request; class OC_Util { public static $scripts = array(); @@ -1528,4 +1529,13 @@ class OC_Util { } } + /** + * is this Internet explorer ? + * + * @return boolean + */ + public static function isIe() { + return preg_match(Request::USER_AGENT_IE, $_SERVER['HTTP_USER_AGENT']) === 1; + } + } diff --git a/lib/public/Util.php b/lib/public/Util.php index 27b703ea2d..df7211d6a8 100644 --- a/lib/public/Util.php +++ b/lib/public/Util.php @@ -558,4 +558,13 @@ class Util { } return self::$needUpgradeCache; } + + /** + * is this Internet explorer ? + * + * @return boolean + */ + public static function isIe() { + return \OC_Util::isIe(); + } }