Design structure fixes + acceptance fixes

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

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;

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 {

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;
+}

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'));
 	};
 
 	/**

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') {

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;
+	}
+
 }

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();
+	}
 }

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

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();