Merge pull request #7185 from owncloud/backport_6777_mobile_style_for_public_pages_stable5

initial backport of #6777 - mobile public pages - to stable5

9 files changed, 135 insertions, 145 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index e16088b3b45..4d07fa14740 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -60,6 +60,14 @@
 	color:#888; text-shadow:#fff 0 1px 0;
 }
 #filestable { position: relative; top:37px; width:100%; }
+/* make sure there's enough room for the file actions */
+#body-user #filestable {
+	min-width: 750px;
+}
+#body-user #controls {
+	min-width: 600px;
+}
+
 tbody tr { background-color:#fff; height:2.5em; }
 tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#f8f8f8; }
 tbody tr.selected { background-color:#eee; }
@@ -75,7 +83,10 @@ table th { height:2em; padding:0 .5em; color:#999; }
 table th .name { float:left; margin-left:.5em; }
 table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }
 table td { border-bottom:1px solid #eee; font-style:normal; background-position:1em .5em; background-repeat:no-repeat; }
-table th#headerName { width:100em; /* not really sure why this works better than 100% … table styling */ }
+
+table th#headerName {
+	width: 9999px; /* not really sure why this works better than 100% … table styling */
+}
 table th#headerSize, table td.filesize { min-width:3em; padding:0 1em; text-align:right; }
 table th#headerDate, table td.date { min-width:11em; padding:0 .1em 0 1em; text-align:left; }
 
@@ -83,7 +94,11 @@ table th#headerDate, table td.date { min-width:11em; padding:0 .1em 0 1em; text-
 #filestable.multiselect { top:63px; }
 table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 64px; width:100%; }
 table.multiselect thead th { background:rgba(230,230,230,.8); color:#000; font-weight:bold; border-bottom:0; }
-table.multiselect #headerName { width: 100%; }
+
+table.multiselect #headerName {
+	position: relative;
+	width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
+}
 table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
 table td.filename a.name { display:block; height:1.5em; vertical-align:middle; margin-left:3em; }
 table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }
diff --git a/apps/files/index.php b/apps/files/index.php
index 2d1ae26bba2..4ef24b21a93 100644
--- a/apps/files/index.php
+++ b/apps/files/index.php
@@ -144,5 +144,6 @@ if ($needUpgrade) {
 	$tmpl->assign('usedSpacePercent', (int)$storageInfo['relative']);
 	$tmpl->assign('isPublic', false);
 	$tmpl->assign('publicUploadEnabled', $publicUploadEnabled);
+	$tmpl->assign('disableSharing', false);
 	$tmpl->printPage();
 }
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 0c0f5be0ace..c41b58f8bd4 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -103,9 +103,9 @@ var FileActions = {
 				}
 				var html = '<a href="#" class="action" data-action="' + name + '">';
 				if (img) {
-					html += '<img class ="svg" src="' + img + '" /> ';
+					html += '<img class ="svg" src="' + img + '" />';
 				}
-				html += t('files', name) + '</a>';
+				html += '<span> ' + t('files', name) + '</span></a>';
 
 				var element = $(html);
 				element.data('action', name);
diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index eec0bec49cf..1735069d183 100644
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -3,6 +3,7 @@
 	<?php print_unescaped($_['breadcrumb']); ?>
 	<?php if ($_['isCreatable']):?>
 		<div class="actions <?php if (isset($_['files']) and count($_['files'])==0):?>emptyfolder<?php endif; ?>">
+			<?php if(!isset($_['dirToken'])):?>
 			<div id="new" class="button">
 				<a><?php p($l->t('New'));?></a>
 				<ul>
@@ -14,6 +15,7 @@
 						data-type='web'><p><?php p($l->t('From link'));?></p></li>
 				</ul>
 			</div>
+			<?php endif;?>
 			<div id="upload" class="button"
 				 title="<?php p($l->t('Upload') . ' max. '.$_['uploadMaxHumanFilesize']) ?>">
 				<form data-upload-id='1'
@@ -27,7 +29,10 @@
 						   value="<?php p($_['uploadMaxFilesize']) ?>">
 					<!-- Send the requesttoken, this is needed for older IE versions
 						 because they don't send the CSRF token via HTTP header in this case -->
-					<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" id="requesttoken">
+					<?php if(isset($_['dirToken'])):?>
+					<input type="hidden" id="publicUploadRequestToken" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+					<input type="hidden" id="dirToken" name="dirToken" value="<?php p($_['dirToken']) ?>" />
+					<?php endif;?>
 					<input type="hidden" class="max_human_file_size"
 						   value="(max <?php p($_['uploadMaxHumanFilesize']); ?>)">
 					<input type="hidden" name="dir" value="<?php p($_['dir']) ?>" id="dir">
@@ -59,6 +64,8 @@
 	<div id="emptyfolder"><?php p($l->t('Nothing in here. Upload something!'))?></div>
 <?php endif; ?>
 
+<input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>" />
+
 <table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>">
 	<thead>
 		<tr>
diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
new file mode 100644
index 00000000000..e76c20cc2bd
--- /dev/null
+++ b/apps/files_sharing/css/mobile.css
@@ -0,0 +1,53 @@
+@media only screen and (max-width: 600px) {
+
+/* make header scroll up for single shares, more view of content on small screens */
+#header.share-file {
+	position: absolute !important;
+}
+
+#controls {
+	box-shadow: initial;
+}
+
+/* hide size and date columns */
+table th#headerSize,
+table td.filesize,
+table th#headerDate,
+table td.date {
+	display: none;
+}
+
+/* restrict length of displayed filename to prevent overflow */
+table td.filename .nametext {
+	max-width: 75% !important;
+}
+
+/* on mobile, show single shared image at full width without margin */
+#imgframe {
+	width: 100%;
+	padding: 0;
+	margin-bottom: 35px;
+}
+/* some margin for the file type icon */
+#imgframe .publicpreview {
+	margin-top: 32px;
+}
+
+/* always show actions on mobile */
+#fileList a.action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
+	filter: alpha(opacity=20) !important;
+	opacity: .2 !important;
+	display: inline !important;
+}
+/* some padding for better clickability */
+#fileList a.action img {
+	padding: 0 6px 0 12px;
+}
+/* hide text of the actions on mobile */
+#fileList a.action span {
+	display: none;
+}
+
+
+}
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index b6511cb57cc..6b19cb008e3 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -17,32 +17,10 @@ body {
 
 #details {
 	color:#fff;
-	float: left;
-}
-
-#public_upload,
-#download {
-	font-weight:700;
-	margin: 0 0.4em 0 0;
-	padding: 0 5px;
-	height: 27px;
-	float: left;
-
-}
-
-.header-right #details {
-	margin-right: 2em;
-}
-
-#public_upload {
-	margin-left: 0.3em;
-}
-
-#public_upload img,
-#download img {
-	padding-left:.1em;
-	padding-right:.3em;
-	vertical-align:text-bottom;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
+	padding-right: 5px;
 }
 
 #preview {
@@ -59,11 +37,10 @@ body {
 }
 
 p.info {
-	color:#777;
-	text-align:center;
-	text-shadow:#fff 0 1px 0;
-	width:22em;
-	margin:2em auto;
+	color: #777;
+	text-align: center;
+	margin: 0 auto;
+	padding: 20px 0;
 }
 
 p.info a {
@@ -73,8 +50,8 @@ p.info a {
 
 #imgframe {
 	height:75%;
-	padding-bottom:2em;
-	padding-top:2em;
+	padding-bottom:32px;
+	padding-top:32px;
 	width:80%;
 	margin:0 auto;
 }
@@ -84,9 +61,13 @@ p.info a {
 	max-width:100%;
 }
 
-thead{
-	background-color: white;
-	padding-left:0 !important; /* fixes multiselect bar offset on shared page */
+/* some margin for the file type icon */
+#imgframe .publicpreview {
+	margin-top: 10%;
+}
+
+thead {
+	padding-left: 0 !important; /* fixes multiselect bar offset on shared page */
 }
 
 #data-upload-form {
@@ -100,37 +81,20 @@ thead{
 	margin: 0;
 }
 
-#file_upload_start {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: alpha(opacity=0);
-	opacity: 0;
-	z-index: 20;
-	position: absolute !important;
-	top: 0;
-	left: 0;
-	width: 100% !important;
+.directDownload,
+.directLink {
+	margin-bottom: 20px;
 }
-
-#download span {
-	position: relative;
-	bottom: 3px;
+.directDownload .button img {
+	vertical-align: text-bottom;
 }
-
-#publicUploadButtonMock {
-	position:relative;
-	display:block;
-	width:100%;
-	height:27px;
-	cursor:pointer;
-	z-index:10;
-	background-image:url('%webroot%/core/img/actions/upload.svg');
-	background-repeat:no-repeat;
-	background-position:7px 6px;
+.directLink label {
+	font-weight: normal;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
 }
-
-#publicUploadButtonMock span {
-	margin: 0 5px 0 28px;
-	position: relative;
-	top: -2px;
-	color: #555;
+.directLink input {
+	margin-left: 5px;
+	width: 300px;
 }
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 9fe54ae7f6d..06a58386621 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -11,22 +11,13 @@ var form_data;
 
 $(document).ready(function() {
 
-	$('#data-upload-form').tipsy({gravity:'ne', fade:true});
-
 	if (typeof FileActions !== 'undefined') {
 		var mimetype = $('#mimetype').val();
 		// Show file preview if previewer is available, images are already handled by the template
 		if (mimetype.substr(0, mimetype.indexOf('/')) != 'image') {
 			// Trigger default action if not download TODO
 			var action = FileActions.getDefault(mimetype, 'file', OC.PERMISSION_READ);
-			if (typeof action === 'undefined') {
-				$('#noPreview').show();
-				if (mimetype != 'httpd/unix-directory') {
-					// NOTE: Remove when a better file previewer solution exists
-					$('#content').remove();
-					$('table').remove();
-				}
-			} else {
+			if (typeof action !== 'undefined') {
 				action($('#filename').val());
 			}
 		}
@@ -59,10 +50,9 @@ $(document).ready(function() {
     subdir: $('input#dir').val()
   };
 
-  // Add Uploadprogress Wrapper to controls bar
-  $('#controls').append($('#additional_controls div#uploadprogresswrapper'));
-
-  // Cancel upload trigger
-  $('#cancel_upload_button').click(Files.cancelUploads);
+	$(document).on('click', '#directLink', function() {
+		$(this).focus();
+		$(this).select();
+	});
 
 });
diff --git a/apps/files_sharing/public.php b/apps/files_sharing/public.php
index 36520175ccf..d569286eb20 100644
--- a/apps/files_sharing/public.php
+++ b/apps/files_sharing/public.php
@@ -113,6 +113,7 @@ if (isset($path)) {
 	} else {
 		OCP\Util::addScript('files', 'file-upload');
 		OCP\Util::addStyle('files_sharing', 'public');
+		OCP\Util::addStyle('files_sharing', 'mobile');
 		OCP\Util::addScript('files_sharing', 'public');
 		OCP\Util::addScript('files', 'fileactions');
 		OCP\Util::addScript('files', 'jquery.iframe-transport');
@@ -126,7 +127,7 @@ if (isset($path)) {
 		$tmpl->assign('mimetype', \OC\Files\Filesystem::getMimeType($path));
 		$tmpl->assign('fileTarget', basename($linkItem['file_target']));
 		$tmpl->assign('dirToken', $linkItem['token']);
-		$allowPublicUploadEnabled = (($linkItem['permissions'] & OCP\PERMISSION_CREATE) ? true : false );
+		$allowPublicUploadEnabled = (bool) ($linkItem['permissions'] & OCP\PERMISSION_CREATE);
 		if (\OCP\App::isEnabled('files_encryption')) {
 			$allowPublicUploadEnabled = false;
 		}
@@ -137,7 +138,6 @@ if (isset($path)) {
 			$allowPublicUploadEnabled = false;
 		}
 
-		$tmpl->assign('allowPublicUploadEnabled', $allowPublicUploadEnabled);
 		$tmpl->assign('uploadMaxFilesize', $maxUploadFilesize);
 		$tmpl->assign('uploadMaxHumanFilesize', OCP\Util::humanFileSize($maxUploadFilesize));
 
@@ -196,7 +196,8 @@ if (isset($path)) {
 			$folder->assign('fileList', $list->fetchPage());
 			$folder->assign('breadcrumb', $breadcrumbNav->fetchPage());
 			$folder->assign('dir', $getPath);
-			$folder->assign('isCreatable', false);
+			$folder->assign('isCreatable', $allowPublicUploadEnabled);
+			$folder->assign('dirToken', $linkItem['token']);
 			$folder->assign('permissions', OCP\PERMISSION_READ);
 			$folder->assign('isPublic',true);
 			$folder->assign('publicUploadEnabled', 'no');
@@ -205,6 +206,8 @@ if (isset($path)) {
 			$folder->assign('uploadMaxHumanFilesize', OCP\Util::humanFileSize($maxUploadFilesize));
 			$folder->assign('allowZipDownload', intval(OCP\Config::getSystemValue('allowZipDownload', true)));
 			$folder->assign('usedSpacePercent', 0);
+			$folder->assign('disableSharing', true);
+			$folder->assign('trash', false);
 			$tmpl->assign('folder', $folder->fetchPage());
 			$allowZip = OCP\Config::getSystemValue('allowZipDownload', true)
 						&& $totalSize <= OCP\Config::getSystemValue('maxZipInputSize', OCP\Util::computerFileSize('800 MB'));
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index fd0a861142d..fcac8240097 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -9,64 +9,14 @@
 <input type="hidden" name="downloadURL" value="<?php p($_['downloadURL']) ?>" id="downloadURL">
 <input type="hidden" name="filename" value="<?php p($_['filename']) ?>" id="filename">
 <input type="hidden" name="mimetype" value="<?php p($_['mimetype']) ?>" id="mimetype">
-<header><div id="header">
+<header><div id="header" class="icon icon-noise <?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
 		<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud"><img class="svg"
 		                                                                                          src="<?php print_unescaped(image_path('', 'logo-wide.svg')); ?>" alt="ownCloud" /></a>
 		<div id="logo-claim" style="display:none;"><?php p($defaults->getLogoClaim()); ?></div>
 		<div class="header-right">
-			<?php if (isset($_['folder'])): ?>
-				<span id="details"><?php p($l->t('%s shared the folder %s with you',
-						array($_['displayName'], $_['fileTarget']))) ?></span>
-			<?php else: ?>
-				<span id="details"><?php p($l->t('%s shared the file %s with you',
-						array($_['displayName'], $_['fileTarget']))) ?></span>
-			<?php endif; ?>
-
-
-			<?php if (!isset($_['folder']) || $_['allowZipDownload']): ?>
-				<a href="<?php p($_['downloadURL']); ?>" class="button" id="download"><img
-						class="svg" alt="Download" src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>"
-						/><span><?php p($l->t('Download'))?></span></a>
-			<?php endif; ?>
-
-			<?php if ($_['allowPublicUploadEnabled']):?>
-
-
-			<input type="hidden" id="publicUploadRequestToken" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
-			<input type="hidden" id="dirToken" name="dirToken" value="<?php p($_['dirToken']) ?>" />
-			<input type="hidden" id="uploadMaxFilesize" name="uploadMaxFilesize" value="<?php p($_['uploadMaxFilesize']) ?>" />
-			<input type="hidden" id="uploadMaxHumanFilesize" name="uploadMaxHumanFilesize" value="<?php p($_['uploadMaxHumanFilesize']) ?>" />
-			<input type="hidden" id="directory_path" name="directory_path" value="<?php p($_['directory_path']) ?>" />
-			<?php if($_['uploadMaxFilesize'] >= 0):?>
-				<input type="hidden" name="MAX_FILE_SIZE" id="max_upload"
-				       value="<?php p($_['uploadMaxFilesize']) ?>">
-			<?php endif;?>
-
-
-			<div id="data-upload-form" class="button" title="<?php p($l->t('Upload') . ' max. '.$_['uploadMaxHumanFilesize']) ?>">
-				<input id="file_upload_start" type="file" name="files[]" data-url="<?php print_unescaped(OCP\Util::linkTo('files', 'ajax/upload.php')); ?>" multiple>
-				<a href="#" id="publicUploadButtonMock" class="svg">
-					<span><?php p($l->t('Upload'))?></span>
-				</a>
-			</div>
-
+			<span id="details"><?php p($l->t('shared by %s', array($_['displayName']))) ?></span>
 		</div>
-
-		<div id="additional_controls" style="display:none">
-			<div id="uploadprogresswrapper">
-				<div id="uploadprogressbar"></div>
-				<input id="cancel_upload_button" type="button" class="stop" style="display:none"
-				       value="<?php p($l->t('Cancel upload'));?>"
-					/>
-			</div>
-
-
-
-
-			<?php endif; ?>
-
-		</div>
-	</div></header>
+</div></header>
 <div id="content">
 <div id="preview">
 	<?php if (isset($_['folder'])): ?>
@@ -80,11 +30,18 @@
 		<ul id="noPreview">
 			<li class="error">
 				<?php p($l->t('No preview available for').' '.$_['fileTarget']); ?><br />
-				<a href="<?php p($_['downloadURL']); ?>" id="download"><img class="svg" alt="Download"
-					src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>"
-					/><?php p($l->t('Download'))?></a>
 			</li>
 		</ul>
+		<div class="directDownload">
+			<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
+				<img class="svg" alt="" src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>"/>
+				<?php p($l->t('Download %s', array($_['filename'])))?>
+			</a>
+		</div>
+		<div class="directLink">
+			<label for="directLink"><?php p($l->t('Direct link')) ?></label>
+			<input id="directLink" type="text" readonly value="<?php p($_['downloadURL']); ?>">
+		</div>
 	<?php endif; ?>
 </div>
 <footer>