Merge pull request #3187 from nextcloud/inputs-scss-optimisation

Inputs.scss rewritting and optimisation
nextcloud · Jan 22, 2017 · 0d6e3ca · 0d6e3ca
2 parents bde1150 + 08361e6
commit 0d6e3ca
Show file tree

Hide file tree

Showing 26 changed files with 341 additions and 655 deletions.
diff --git a/apps/files_sharing/css/authenticate.css b/apps/files_sharing/css/authenticate.css
@@ -9,12 +9,8 @@ input[type='submit'] {
 	margin:	6px;
 }
 
-#body-login input[type='submit'] {
-	position: absolute;
-	top: 0;
-	border: none;
-}
-
 fieldset > p {
 	position: relative;
+	display: flex;
+	align-items: center;
 }
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
@@ -107,61 +107,40 @@ thead {
 	max-width: 90%;
 }
 
+/* header buttons */
+#details {
+	display: inline-flex;
+}
+#details button,
+#details input,
+#details .button {
+	margin: 0 5px;
+	line-height: normal;
+}
+#details button:hover,
+#details input:hover,
+#details .button:hover {
+	/* No  */
+	border-color: rgba(0,0,0,0.3) !important;
+}
+
 /* within #save */
 #save .save-form {
 	position: relative;
 }
 
 #remote_address {
-	margin: 0;
-	width: 130px;
-	height: 14px;
-	padding: 6px;
-	padding-right: 24px;
-}
-
-.ie8 #remote_address {
-	padding-right: 30px;
-}
-
-#save #save-button,
-#save #save-button-confirm {
-	margin: 0 5px;
-	height: 28px;
-	padding-bottom: 4px;
-	line-height: 14px;
+	width: 200px;
 }
 
 #save-button-confirm {
 	position: absolute;
 	background-color: transparent;
 	border: none;
 	margin: 2px 4px !important;
-	right: 0;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
-}
-
-.ie8 #save-button-confirm {
-	margin: 2px 0 !important;
-}
-
-#save-button-confirm:disabled,
-#save-button-confirm:disabled:hover,
-#save-button-confirm:disabled:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-	filter: alpha(opacity=20);
-	opacity: .2;
-	cursor: default;
-}
-
-#save-button-confirm:hover,
-#save-button-confirm:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-	opacity: 1;
-	cursor: pointer;
+	right: 4px;
+	box-shadow: none;
+	height: 30px;
 }
 
 #public-upload .avatardiv {

diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
@@ -259,7 +259,7 @@ OCA.Sharing.PublicApp = {
 		$('.save-form').submit(function (event) {
 			event.preventDefault();
 
-			var remote = $(this).find('input[type="text"]').val();
+			var remote = $(this).find('input[type="email"]').val();
 			var token = $('#sharingToken').val();
 			var owner = $('#save').data('owner');
 			var ownerDisplayName = $('#save').data('owner-display-name');

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
@@ -58,13 +58,13 @@
 							  data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
 						<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
 						<form class="save-form hidden" action="#">
-							<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
+							<input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
 							<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
 						</form>
 					</span>
 					<?php } ?>
 					<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
-						<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
+						<span class="icon icon-download"></span>
 						<span id="download-text"><?php p($l->t('Download'))?></span>
 					</a>
 				<?php } ?>
@@ -89,8 +89,8 @@
 					<div id="imgframe"></div>
 				<?php endif; ?>
 				<div class="directDownload">
-					<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
-						<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
+					<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button primary">
+						<span class="icon icon-download"></span>
 						<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
 					</a>
 				</div>

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -214,7 +214,8 @@ em {
 		top: 0;
 		bottom: 0;
 		font-size: 12px;
-		button, .counter {
+		button,
+		.counter {
 			width: 44px;
 			height: 44px;
 			padding-top: 12px;
@@ -258,6 +259,7 @@ em {
 		height: 100%;
 		width: 100%;
 		margin: 0;
+		box-shadow: none;
 	}
 	.app-navigation-entry-utils-menu-button {
 		button {
@@ -620,6 +622,7 @@ em {
 			height: auto;
 			margin: 0;
 			font-weight: inherit;
+			box-shadow: none;
 			/* prevent .action class to break the design */
 			&.action {
 				padding: inherit !important;