From e4e2444170d7f7003b8fedaa86adafa7fb0a6183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jul 2018 13:28:23 +0200 Subject: [PATCH] Design structure fixes + acceptance fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/detailsView.scss | 6 --- core/css/apps.scss | 44 ++++++++++--------- core/css/ie.scss | 11 +++++ core/js/apps.js | 12 +++-- lib/private/TemplateLayout.php | 4 ++ lib/private/legacy/util.php | 10 +++++ lib/public/Util.php | 9 ++++ tests/acceptance/features/app-files.feature | 26 ++++++++++- .../features/bootstrap/FilesAppContext.php | 42 +++++++++++++++++- 9 files changed, 130 insertions(+), 34 deletions(-) create mode 100644 core/css/ie.scss diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss index e0c1bbfa09510..f64a370285037 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 3fd1c90e61d0c..86f0e622405d3 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 0000000000000..ec7f51065e426 --- /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 b40883e88cf2c..473fec313a10c 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 1efdf8b441c08..fc2e5798e1c58 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -42,6 +42,7 @@ 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 @@ public function __construct( $renderAs, $appId = '' ) { // 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 b285eb382e745..a581397212afe 100644 --- a/lib/private/legacy/util.php +++ b/lib/private/legacy/util.php @@ -64,6 +64,7 @@ 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 @@ public static function needUpgrade(\OC\SystemConfig $config) { } } + /** + * 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 27b703ea2d8b7..df7211d6a80a2 100644 --- a/lib/public/Util.php +++ b/lib/public/Util.php @@ -558,4 +558,13 @@ public static function needUpgrade() { } return self::$needUpgradeCache; } + + /** + * is this Internet explorer ? + * + * @return boolean + */ + public static function isIe() { + return \OC_Util::isIe(); + } } diff --git a/tests/acceptance/features/app-files.feature b/tests/acceptance/features/app-files.feature index 956430c02ba0e..199b333e308fb 100644 --- a/tests/acceptance/features/app-files.feature +++ b/tests/acceptance/features/app-files.feature @@ -34,11 +34,13 @@ Feature: app-files Given I act as John And I am logged in And I share the link for "welcome.txt" + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I write down the shared link When I act as Jane And I visit the shared link I wrote down And I see that the current page is the shared link I wrote down - And I open the Share menu + And I open the share settings menu Then I see that the Share menu is shown Scenario: creation is not possible by default in a public shared folder @@ -51,9 +53,12 @@ Feature: app-files # to its opening animation. Instead of ensuring that the animations of the # contents and the details view have both finished it is easier to close the # details view and wait until it is closed before continuing. + And I see that the details view is open And I close the details view And I see that the details view is closed And I share the link for "Shared folder" + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I write down the shared link When I act as Jane And I visit the shared link I wrote down @@ -71,9 +76,12 @@ Feature: app-files # to its opening animation. Instead of ensuring that the animations of the # contents and the details view have both finished it is easier to close the # details view and wait until it is closed before continuing. + And I see that the details view is open And I close the details view And I see that the details view is closed And I share the link for "Editable shared folder" + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I set the shared link as editable And I write down the shared link When I act as Jane @@ -92,9 +100,12 @@ Feature: app-files # to its opening animation. Instead of ensuring that the animations of the # contents and the details view have both finished it is easier to close the # details view and wait until it is closed before continuing. + And I see that the details view is open And I close the details view And I see that the details view is closed And I share the link for "Editable shared folder" + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I set the shared link as editable And I write down the shared link And I act as Jane @@ -109,6 +120,8 @@ Feature: app-files Scenario: set a password to a shared link Given I am logged in And I share the link for "welcome.txt" + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened When I protect the shared link with the password "abcdef" Then I see that the working icon for password protect is shown And I see that the working icon for password protect is eventually not shown @@ -117,6 +130,9 @@ Feature: app-files Given I act as John And I am logged in And I share the link for "welcome.txt" protected by the password "abcdef" + # menu is closed on password enter + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I write down the shared link When I act as Jane And I visit the shared link I wrote down @@ -129,6 +145,9 @@ Feature: app-files Given I act as John And I am logged in And I share the link for "welcome.txt" protected by the password "abcdef" + # menu is closed on password enter + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I write down the shared link When I act as Jane And I visit the shared link I wrote down @@ -140,6 +159,9 @@ Feature: app-files Given I act as John And I am logged in And I share the link for "welcome.txt" protected by the password "abcdef" + # menu is closed on password enter + And I open the share settings menu for the share id "shareLink" + And I see that the share menu for the share id "shareLink" is opened And I write down the shared link When I act as Jane And I visit the direct download shared link I wrote down @@ -158,7 +180,7 @@ Feature: app-files Scenario: show the input field for tags in the details view after the sharing tab has loaded Given I am logged in And I open the details view for "welcome.txt" - And I see that the details view is open + And I see that the details view is open And I open the "Sharing" tab in the details view And I see that the "Sharing" tab in the details view is eventually loaded When I open the input field for tags in the details view diff --git a/tests/acceptance/features/bootstrap/FilesAppContext.php b/tests/acceptance/features/bootstrap/FilesAppContext.php index 41c75b4ef176e..df735955763f6 100644 --- a/tests/acceptance/features/bootstrap/FilesAppContext.php +++ b/tests/acceptance/features/bootstrap/FilesAppContext.php @@ -204,6 +204,30 @@ public static function shareLinkField() { describedAs("Share link field in the details view in Files app"); } + /** + * @return Locator + */ + public static function shareLinkCopyButton() { + return Locator::forThe()->css(".clipboardButton")->descendantOf(self::shareMenuForShareId($id))-> + describedAs("Share link copy button in the details view in Files app"); + } + + /** + * @return Locator + */ + public static function shareMenuButtonForShareId($id) { + return Locator::forThe()->css("#$id .icon-more")->descendantOf(self::detailsView())-> + describedAs("Share menu button for the share id $id"); + } + + /** + * @return Locator + */ + public static function shareMenuForShareId($id) { + return Locator::forThe()->css("#$id .popovermenu")->descendantOf(self::detailsView())-> + describedAs("Share menu for the share id $id"); + } + /** * @return Locator */ @@ -240,7 +264,7 @@ public static function passwordProtectField() { * @return Locator */ public static function passwordProtectWorkingIcon() { - return Locator::forThe()->css(".linkPass .icon-loading-small")->descendantOf(self::detailsView())-> + return Locator::forThe()->css(".linkPassMenu .icon-loading-small")->descendantOf(self::detailsView())-> describedAs("Password protect working icon in the details view in Files app"); } @@ -265,6 +289,13 @@ public function iOpenTheTabInTheDetailsView($tabName) { $this->actor->find(self::tabHeaderInDetailsViewNamed($tabName), 10)->click(); } + /** + * @Given I open the share settings menu for the share id shareLink + */ + public function iOpenTheShareMenuForTheShareId($id) { + $this->actor->find(self::shareMenuButtonForShareId($id), 10)->click(); + } + /** * @Given I share the link for :fileName */ @@ -371,6 +402,14 @@ public function iSeeThatTheFileNameShownInTheDetailsViewIs($fileName) { $this->actor->find(self::fileNameInDetailsView(), 10)->getText(), $fileName); } + /** + * @Then I see that the share menu for the share id :id is opened + */ + public function iSeeThatTheShareMenuForShareIdIsOpened($id) { + PHPUnit_Framework_Assert::assertEquals( + $this->actor->find(self::shareMenuForShareId($id), 10)->isVisible()); + } + /** * @Then I see that the input field for tags in the details view is shown */ @@ -455,6 +494,7 @@ public function iSeeThatTheWorkingIconForPasswordProtectIsEventuallyNotShown() { */ public function iShareTheLinkForProtectedByThePassword($fileName, $password) { $this->iShareTheLinkFor($fileName); + $this->iOpenTheShareMenuForTheShareId("shareLink"); $this->iProtectTheSharedLinkWithThePassword($password); $this->iSeeThatTheWorkingIconForPasswordProtectIsShown(); $this->iSeeThatTheWorkingIconForPasswordProtectIsEventuallyNotShown();