mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Acceptance and mobile navigation fixes 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-07-23 20:14:19 +02:00
parent 262cb04c3a
commit 0274507cb1
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
10 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/files_sharing/templates/public.php
View File

@ -2,7 +2,7 @@
/** @var $l \OCP\IL10N */ /** @var $l \OCP\IL10N */
/** @var $_ array */ /** @var $_ array */
?> ?>
<div id="app-content">
<?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?> <?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
<link rel="image_src" href="<?php p($_['previewImage']); ?>" /> <link rel="image_src" href="<?php p($_['previewImage']); ?>" />
<?php endif; ?> <?php endif; ?>
@ -90,3 +90,4 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
data-url="<?php p(\OC::$server->getURLGenerator()->linkTo('files', 'ajax/upload.php')); ?>" /> data-url="<?php p(\OC::$server->getURLGenerator()->linkTo('files', 'ajax/upload.php')); ?>" />
</div> </div>
<?php endif; ?> <?php endif; ?>
</div>

22
core/css/apps.scss
View File

@ -74,13 +74,15 @@ kbd {
/* Navigation: folder like structure */ /* Navigation: folder like structure */
#app-navigation { #app-navigation {
width: $navigation-width; width: $navigation-width;
position: sticky; position: fixed;
top: $header-height; top: $header-height;
left: 0; left: 0;
z-index: 1500; z-index: 500;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: calc(100vh - #{$header-height}); // Do not use vh because of mobile headers
// are included in the calculation
height: calc(100% - #{$header-height});
box-sizing: border-box; box-sizing: border-box;
background-color: var(--color-main-background); background-color: var(--color-main-background);
-webkit-user-select: none; -webkit-user-select: none;
@ -170,6 +172,7 @@ kbd {
> ul { > ul {
opacity: 0; opacity: 0;
max-height: 0; max-height: 0;
overflow-y: hidden;
/* bezier override the hide/slow effect due to the 2000 max-height */ /* bezier override the hide/slow effect due to the 2000 max-height */
transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
opacity 250ms ease-in-out; opacity 250ms ease-in-out;
@ -523,7 +526,7 @@ kbd {
.app-navigation-entry-deleted { .app-navigation-entry-deleted {
display: inline-flex; display: inline-flex;
padding-left: 44px; padding-left: 44px;
transform: translateX(250px); transform: translateX(#{$navigation-width});
.app-navigation-entry-deleted-description { .app-navigation-entry-deleted-description {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
@ -580,12 +583,17 @@ kbd {
/* CONTENT --------------------------------------------------------- */ /* CONTENT --------------------------------------------------------- */
#content-wrapper {
// everything not related to content but needs to be on the window
// goes here (popups, tooltips...)
position: relative;
}
#content { #content {
/* header height */
padding-top: $header-height;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
display: flex; display: flex;
margin-left: $navigation-width;
margin-top: $header-height;
} }
/* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* APP-CONTENT AND WRAPPER ------------------------------------------ */
@ -594,7 +602,7 @@ kbd {
z-index: 1000; z-index: 1000;
background-color: var(--color-main-background); background-color: var(--color-main-background);
position: relative; position: relative;
min-height: calc(100vh - #{$header-height}); min-height: 100%;
flex-basis: 100vw; flex-basis: 100vw;
overflow: auto; overflow: auto;
/* no top border for first settings item */ /* no top border for first settings item */

3
core/css/header.scss
View File

@ -46,8 +46,7 @@
display: inline-flex; display: inline-flex;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; width: 100%;
right: 0;
z-index: 2000; z-index: 2000;
height: $header-height; height: $header-height;
background-color: var(--color-primary); background-color: var(--color-primary);

1
core/css/ie.scss
View File

@ -1,5 +1,4 @@
#app-navigation,
#app-sidebar { #app-sidebar {
position: fixed !important; position: fixed !important;
} }

6
core/css/mobile.scss
View File

@ -20,7 +20,7 @@
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
#app-navigation { #app-navigation {
transform: translateX(-250px); transform: translateX(-#{$navigation-width});
} }
.snapjs-left { .snapjs-left {
#app-navigation { #app-navigation {
@ -28,8 +28,8 @@
} }
} }
#app-content { #content {
margin-left: -$navigation-width; margin-left: 0;
} }

1
core/css/styles.scss
View File

@ -89,7 +89,6 @@ body {
line-height: 1.6em; line-height: 1.6em;
font-family: var(--font-face); font-family: var(--font-face);
color: var(--color-main-text); color: var(--color-main-text);
height: auto;
} }
.two-factor-header { .two-factor-header {

2
core/js/js.js
View File

@ -1614,7 +1614,7 @@ function initCore() {
var snapper = new Snap({ var snapper = new Snap({
element: document.getElementById('app-content'), element: document.getElementById('app-content'),
disable: 'right', disable: 'right',
maxPosition: 250, maxPosition: 300, // $navigation-width
minDragDistance: 100 minDragDistance: 100
}); });
$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>'); $('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');

6
core/templates/layout.base.php
View File

@ -18,6 +18,10 @@
</head> </head>
<body id="body-public"> <body id="body-public">
<?php include 'layout.noscript.warning.php'; ?> <?php include 'layout.noscript.warning.php'; ?>
<?php print_unescaped($_['content']); ?> <div id="content-wrapper">
<div id="content" class="app-public" role="main">
<?php print_unescaped($_['content']); ?>
</div>
</div>
</body> </body>
</html> </html>

8
core/templates/layout.public.php
View File

@ -70,9 +70,11 @@
</div> </div>
<?php } ?> <?php } ?>
</header> </header>
<div id="content" class="app-<?php p($_['appid']) ?>" role="main"> <div id="content-wrapper">
<?php print_unescaped($_['content']); ?> <div id="content" class="app-<?php p($_['appid']) ?>" role="main">
</div> <?php print_unescaped($_['content']); ?>
</div>
</div
<?php if($template->getFooterVisible()) { ?> <?php if($template->getFooterVisible()) { ?>
<footer> <footer>
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p> <p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>

14
tests/acceptance/features/bootstrap/SettingsMenuContext.php
View File

@ -31,8 +31,17 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
/** /**
* @return Locator * @return Locator
*/ */
public static function settingsMenuButton() { public static function settingsSectionInHeader() {
return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'settings']")-> return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'settings']")->
describedAs("Settings menu section in the header");
}
/**
* @return Locator
*/
public static function settingsMenuButton() {
return Locator::forThe()->id("expand")->
descendantOf(self::settingsSectionInHeader())->
describedAs("Settings menu button"); describedAs("Settings menu button");
} }
@ -40,7 +49,8 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
* @return Locator * @return Locator
*/ */
public static function settingsMenu() { public static function settingsMenu() {
return Locator::forThe()->id("expanddiv")->descendantOf(self::settingsMenuButton())-> return Locator::forThe()->id("expanddiv")->
descendantOf(self::settingsSectionInHeader())->
describedAs("Settings menu"); describedAs("Settings menu");
} }