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

Inputs.scss rewritting and optimisation

4 files changed, 28 insertions, 53 deletions

diff --git a/apps/files_sharing/css/authenticate.css b/apps/files_sharing/css/authenticate.css
index 55a40cf508d..16687916ac4 100644
--- 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
index 94183cf0057..70df204a696 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -107,29 +107,30 @@ 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 {
@@ -137,31 +138,9 @@ thead {
 	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
index 0045c7156d2..ad3ef856f23 100644
--- 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
index 32e4f3d3dd6..2c321f2a398 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -58,13 +58,13 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 							  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 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 					<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>