Merge pull request #6777 from owncloud/mobile-style

Mobile style for public links: files, folders, picture sets

apps/files/css/files.css

@@ -65,10 +65,15 @@
 	top: 44px;
 	width: 100%;
 }
-#filestable tbody tr { background-color:#fff; height:40px; }
-#filestable, #controls {
-	min-width: 680px;
+/* make sure there's enough room for the file actions */
+#body-user #filestable {
+	min-width: 750px;
 }
+#body-user #controls {
+	min-width: 600px;
+}
+
+#filestable tbody tr { background-color:#fff; height:40px; }
 #filestable tbody tr:hover, tbody tr:active {
 	background-color: rgb(240,240,240);
 }
@@ -98,7 +103,7 @@ table td {
 }
 table th#headerName {
 	position: relative;
-	width: 100em; /* not really sure why this works better than 100% … table styling */
+	width: 9999px; /* not really sure why this works better than 100% … table styling */
 	padding: 0;
 }
 #headerName-container {
@@ -140,7 +145,7 @@ table.multiselect thead th {
 }
 table.multiselect #headerName {
 	position: relative;
-	width: 100%;
+	width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
 }
 table td.selection, table th.selection, table td.fileaction { width:32px; text-align:center; }
 table td.filename a.name {
@@ -242,7 +247,7 @@ table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; }
 
 #fileList tr td.filename a.name label {
 	position: absolute;
-	width: 100%;
+	width: 80%;
 	height: 50px;
 }
 

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

apps/files/js/files.js

@@ -751,7 +751,7 @@ Files.lazyLoadPreview = function(path, mime, ready, width, height, etag) {
 			console.warn('Files.lazyLoadPreview(): missing etag argument');
 		}
 
-		if ( $('#public_upload').length ) {
+		if ( $('#isPublic').length ) {
 			urlSpec.t = $('#dirToken').val();
 			previewURL = OC.Router.generate('core_ajax_public_preview', urlSpec);
 		} else {

apps/files/templates/index.php

@@ -1,6 +1,7 @@
 <div id="controls">
 	<?php print_unescaped($_['breadcrumb']); ?>
 		<div class="actions creatable <?php if (!$_['isCreatable']):?>hidden<?php endif; ?>">
+			<?php if(!isset($_['dirToken'])):?>
 			<div id="new" class="button">
 				<a><?php p($l->t('New'));?></a>
 				<ul>
@@ -12,12 +13,17 @@
 						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']) ?>">
 					<?php if($_['uploadMaxFilesize'] >= 0):?>
 					<input type="hidden" name="MAX_FILE_SIZE" id="max_upload"
 						   value="<?php p($_['uploadMaxFilesize']) ?>">
 					<?php endif;?>
+					<?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">
@@ -26,7 +32,7 @@
 					<a href="#" class="svg icon icon-upload"></a>
 			</div>
 			<?php if ($_['trash']): ?>
-			<input id="trash" type="button" value="<?php p($l->t('Deleted files'));?>" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?>></input>
+			<input id="trash" type="button" value="<?php p($l->t('Deleted files'));?>" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?> />
 			<?php endif; ?>
 			<div id="uploadprogresswrapper">
 				<div id="uploadprogressbar"></div>
@@ -44,7 +50,7 @@
 
 <div id="emptycontent" <?php if (!$_['emptyContent']):?>class="hidden"<?php endif; ?>><?php p($l->t('Nothing in here. Upload something!'))?></div>
 
-<input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>"></input>
+<input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>" />
 
 <table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="36" data-preview-y="36">
 	<thead>

apps/files_sharing/css/mobile.css

@@ -0,0 +1,49 @@
+@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;
+}
+
+/* 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;
+}
+
+
+}

apps/files_sharing/css/public.css

@@ -14,39 +14,17 @@ body {
 	padding:7px;
 }
 
-#details {
-	color:#fff;
-	float: left;
-}
-
-#public_upload,
-#download {
-	font-weight:700;
-	margin: 0 0 0 6px;
-	padding: 0 5px;
-	height: 32px;
-	float: left;
-
-}
-
-.header-right #details {
-	margin-right: 28px;
-}
-
 .header-right {
 	padding: 0;
 	height: 32px;
 }
 
-#public_upload {
-	margin-left: 5px;
-}
-
-#public_upload img,
-#download img {
-	padding-left:2px;
-	padding-right:5px;
-	vertical-align:text-bottom;
+#details {
+	color:#fff;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
+	padding-right: 5px;
 }
 
 #controls {
@@ -71,9 +49,8 @@ footer {
 p.info {
 	color: #777;
 	text-align: center;
-	width: 352px;
 	margin: 0 auto;
-	padding: 20px;
+	padding: 20px 0;
 }
 
 p.info a {
@@ -94,9 +71,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 {
@@ -110,27 +91,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;
 }
+.directDownload .button img {
+	vertical-align: text-bottom;
+}
 .directLink label {
 	font-weight: normal;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
 }
 .directLink input {
-	margin-left: 10px;
+	margin-left: 5px;
 	width: 300px;
 }
-.public_actions {
-	padding: 4px;
-}

apps/files_sharing/js/public.js

@@ -9,22 +9,13 @@ function fileDownloadPath(dir, file) {
 
 $(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' && $('.publicpreview').length === 0) {
 			// 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());
 			}
 		}
@@ -56,16 +47,9 @@ $(document).ready(function() {
 		};
 	});
 
-	// Add Uploadprogress Wrapper to controls bar
-	$('#controls').append($('#controls .actions div#uploadprogresswrapper'));
-	$('#uploadprogresswrapper').addClass('public_actions');
-
-	// Cancel upload trigger
-	$('#cancel_upload_button').click(function() {
-		OC.Upload.cancelUploads();
-		procesSelection();
+	$(document).on('click', '#directLink', function() {
+		$(this).focus();
+		$(this).select();
 	});
 
-	$('#directLink').focus();
-
 });

apps/files_sharing/public.php

@@ -137,6 +137,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');
@@ -159,7 +160,6 @@ if (isset($path)) {
 		if ($linkItem['item_type'] !== 'folder') {
 			$allowPublicUploadEnabled = false;
 		}
-		$tmpl->assign('allowPublicUploadEnabled', $allowPublicUploadEnabled);
 		$tmpl->assign('uploadMaxFilesize', $maxUploadFilesize);
 		$tmpl->assign('uploadMaxHumanFilesize', OCP\Util::humanFileSize($maxUploadFilesize));
 
@@ -226,7 +226,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');

apps/files_sharing/templates/public.php

@@ -9,54 +9,14 @@
 <input type="hidden" name="sharingToken" value="<?php p($_['sharingToken']) ?>" id="sharingToken">
 <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" class="icon icon-noise">
+<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="<?php p($theme->getName()); ?>" /></a>
 		<div id="logo-claim" style="display:none;"><?php p($theme->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'], $_['filename']))) ?></span>
-			<?php else: ?>
-				<span id="details"><?php p($l->t('%s shared the file %s with you',
-						array($_['displayName'], $_['filename']))) ?></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" 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="public_upload" class="button">
-					<img class="svg" alt="Upload" src="<?php print_unescaped(OCP\image_path("core", "actions/upload.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>
-			<?php endif; ?>
-		</div>
-	</div></header>
+</div></header>
 <div id="content">
 	<div id="preview">
 		<?php if (isset($_['folder'])): ?>
@@ -72,25 +32,28 @@
 						<source src="<?php p($_['downloadURL']); ?>" type="<?php p($_['mimetype']); ?>" />
 					</video>
 				</div>
-			<?php elseif (\OC\Preview::isMimeSupported($_['mimetype'])): ?>
-				<div id="imgframe">
-					<img src="<?php p(OCP\Util::linkToRoute( 'core_ajax_public_preview', array('x' => 500, 'y' => 500, 'file' => urlencode($_['directory_path']), 't' => $_['dirToken']))); ?>" class="publicpreview"/>
-				</div>
 			<?php else: ?>
-				<ul id="noPreview">
-					<li class="error">
-						<?php p($l->t('No preview available for').' '.$_['filename']); ?><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 id="imgframe">
+					<?php $size = \OC\Preview::isMimeSupported($_['mimetype']) ? 500 : 128 ?>
+					<img src="<?php p(OCP\Util::linkToRoute( 'core_ajax_public_preview', array('x' => $size, 'y' => $size, 'file' => urlencode($_['directory_path']), 't' => $_['dirToken']))); ?>" class="publicpreview"/>
+				</div>
 			<?php endif; ?>
-			<div class="directLink"><label for="directLink"><?php p($l->t('Direct link')) ?></label><input id="directLink" type="text" readonly value="<?php p($_['downloadURL']); ?>"></input></div>
+			<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>
-		<p class="info">
-			<?php print_unescaped($theme->getLongFooter()); ?>
-		</p>
-	</footer>
+
+</div>
+<footer>
+	<p class="info">
+		<?php print_unescaped($theme->getLongFooter()); ?>
+	</p>
+</footer>

core/img/actions/toggle-filelist.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <g>
+  <rect rx=".5" ry=".5" height="4" width="4" y="1" x="1"/>
+  <rect rx=".5" ry=".5" height="1" width="9" y="2" x="6"/>
+  <rect rx=".5" ry=".5" height="4" width="4" y="6" x="1"/>
+  <rect rx=".5" ry=".5" height="1" width="9" y="7" x="6"/>
+  <rect rx=".5" ry=".5" height="4" width="4" y="11" x="1"/>
+  <rect rx=".5" ry=".5" height="1" width="9" y="12" x="6"/>
+ </g>
+</svg>

core/img/actions/toggle-pictures.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <g>
+  <rect rx=".5" ry=".5" height="6" width="6" y="1" x="1"/>
+  <rect rx=".5" ry=".5" height="6" width="6" y="1" x="9"/>
+  <rect rx=".5" ry=".5" height="6" width="6" y="9" x="9"/>
+  <rect rx=".5" ry=".5" height="6" width="6" y="9" x="1"/>
+ </g>
+</svg>

core/templates/layout.base.php

@@ -11,7 +11,7 @@
 		<?php p($theme->getTitle()); ?>
 		</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
 		<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />
 		<?php foreach ($_['cssfiles'] as $cssfile): ?>

core/templates/layout.guest.php

@@ -11,7 +11,7 @@
 		<?php p($theme->getTitle()); ?>
 		</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="apple-itunes-app" content="app-id=543672169">
 		<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
 		<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />

settings/img/log Icon License

@@ -1,2 +0,0 @@
-CC BY 3.0
-http://thenounproject.com/en-us/noun/printer/#icon-No109

settings/img/log.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" xml:space="preserve" height="16px" viewBox="0 0 100 100" width="16px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g fill="#4d4d4d">
-<rect height="19" width="4" y="45" x="75"/>
-<polygon points="21 0 21 19 25 19 25 4 75 4 75 19 79 19 79 0"/>
-<polygon points="75 45 75 96 44 96 44 77 25 77 25 45 21 45 21 80 41 100 79 100 79 45"/>
-<rect height="3" width="38" y="45" x="31"/>
-<rect height="3" width="38" y="56" x="31"/>
-<rect height="3" width="38" y="67" x="31"/>
-<path d="m0 21v48h19v-10h-9v-28h80v28h-9v10h19v-48h-100zm97 7h-4v-4h4v4z"/>
-</g></svg>