summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--apps/files_sharing/css/mobile.scss13
-rw-r--r--apps/files_sharing/css/public.scss43
-rw-r--r--apps/files_sharing/js/public.js24
-rw-r--r--apps/files_sharing/templates/public.php55
-rw-r--r--core/css/header.scss2
-rw-r--r--core/css/mobile.scss5
6 files changed, 89 insertions, 53 deletions
diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index 8e58aa439c6..56f57d53263 100644
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/css/mobile.scss
@@ -5,11 +5,6 @@
position: absolute !important;
}
-/* hide text of download button, only show icon */
-#download-text {
- display: none;
-}
-
/* hide size and date columns */
table th#headerSize,
table td.filesize,
@@ -51,5 +46,13 @@ table td.filename .nametext {
text-overflow: ellipsis;
}
+// Hide Download label of 3-dot-menu on public share pages
+.share-menutoggle-text {
+ display: none;
+}
+#header .menutoggle {
+ padding-right: 14px;
+ background-position: center;
+}
}
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 652d36f77db..51c2bc9f4ce 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -1,6 +1,14 @@
#content {
height: initial;
- min-height: calc(100vh - 120px);
+ min-height: calc(100vh - 160px);
+}
+
+#header .menutoggle {
+ padding: 14px;
+ padding-right: 40px;
+ background-position: right 15px center;
+ color: $color-primary-text;
+ cursor: pointer;
}
/* force layout to make sure the content element's height matches its contents' height */
@@ -78,12 +86,6 @@ thead {
margin: 0;
}
-
-.directDownload,
-.directLink {
- margin-bottom: 20px;
-}
-
/* keep long file names in one line to not overflow download button on mobile */
.directDownload #downloadFile {
white-space: nowrap;
@@ -95,14 +97,17 @@ thead {
margin-right: auto;
}
-.directLink label {
- font-weight: normal;
+.download-size {
opacity: .5;
}
-.directLink input {
- margin-left: 5px;
- width: 300px;
- max-width: 90%;
+
+#directLink-container {
+ flex-wrap: wrap;
+}
+
+#directLink {
+ margin-left: 30px;
+ flex-basis: 100%;
}
/* header buttons */
@@ -125,11 +130,11 @@ thead {
/* within #save */
#save .save-form {
position: relative;
+ margin-right: -10px;
}
#remote_address {
width: 200px;
-
margin-right: 4px;
height: 31px;
}
@@ -138,10 +143,9 @@ thead {
position: absolute;
background-color: transparent;
border: none;
- margin: 2px 4px !important;
- right: 7px;
- top: -8px;
- height: 30px;
+ margin: 0;
+ right: 0px;
+ height: 40px;
}
#public-upload .avatardiv {
@@ -220,6 +224,7 @@ thead {
position: relative;
top: -10px;
font-weight: 300;
- font-size: 12px;
+ font-size: 11px;
+ opacity: .57;
margin-top: 10px;
}
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 1407737d007..2142dec1218 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -116,7 +116,9 @@ OCA.Sharing.PublicApp = {
scalingup: 0
};
- var img = $('<img class="publicpreview" alt="">');
+ var imgcontainer = $('<a href="' + $('#previewURL').val()
+ + '" target="_blank"><img class="publicpreview" alt=""></a>');
+ var img = imgcontainer.find('.publicpreview');
img.css({
'max-width': previewWidth,
'max-height': previewHeight
@@ -128,7 +130,7 @@ OCA.Sharing.PublicApp = {
if (mimetype === 'image/gif' &&
(maxGifSize === -1 || fileSize <= (maxGifSize * 1024 * 1024))) {
img.attr('src', $('#downloadURL').val());
- img.appendTo('#imgframe');
+ imgcontainer.appendTo('#imgframe');
} else if (mimetype.substr(0, mimetype.indexOf('/')) === 'text' && window.btoa) {
// Undocumented Url to public WebDAV endpoint
var url = parent.location.protocol + '//' + location.host + OC.linkTo('', 'public.php/webdav');
@@ -145,11 +147,11 @@ OCA.Sharing.PublicApp = {
mimetype.substr(0, mimetype.indexOf('/')) === 'image' &&
mimetype !== 'image/svg+xml') {
img.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
- img.appendTo('#imgframe');
+ imgcontainer.appendTo('#imgframe');
} else if (mimetype.substr(0, mimetype.indexOf('/')) !== 'video') {
img.attr('src', OC.Util.replaceSVGIcon(mimetypeIcon));
img.attr('width', 128);
- img.appendTo('#imgframe');
+ imgcontainer.appendTo('#imgframe');
}
else if (previewSupported === 'true') {
$('#imgframe > video').attr('poster', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
@@ -424,4 +426,18 @@ $(document).ready(function () {
return App.fileList.generatePreviewUrl(urlSpec);
};
}
+
+ $('#share-menutoggle').click(function() {
+ $('#share-menu').toggleClass('open');
+ });
+});
+
+
+$(document).mouseup(function(e) {
+ var container = $('#share-menu');
+
+ // if the target of the click isn't the container nor a descendant of the container
+ if (!container.is(e.target) && container.has(e.target).length === 0) {
+ container.removeClass('open');
+ }
});
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 8bbb53fa4e0..5417809b908 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -16,6 +16,7 @@
<input type="hidden" id="isPublic" name="isPublic" value="1">
<input type="hidden" name="dir" value="<?php p($_['dir']) ?>" id="dir">
<input type="hidden" name="downloadURL" value="<?php p($_['downloadURL']) ?>" id="downloadURL">
+<input type="hidden" name="previewURL" value="<?php p($_['previewURL']) ?>" id="previewURL">
<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">
@@ -48,22 +49,38 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
</div>
<div class="header-right">
- <?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
- if ($_['server2serversharing']) {
- ?>
- <span id="save" data-protected="<?php p($_['protected']) ?>"
- 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"/>
- <button id="save-button-confirm" class="icon-confirm svg" disabled></button>
- </form>
- </span>
- <?php } ?>
- <a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
- <span class="icon icon-download"></span>
- <span id="download-text"><?php p($l->t('Download'))?></span>
- </a>
+ <?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) { ?>
+ <a href="#" id="share-menutoggle" class="menutoggle icon-more-white"><span class="share-menutoggle-text"><?php p($l->t('Download')) ?></span></a>
+ <div id="share-menu" class="popovermenu menu">
+ <ul>
+ <li>
+ <a href="<?php p($_['downloadURL']); ?>" id="download">
+ <span class="icon icon-download"></span>
+ <?php p($l->t('Download'))?>&nbsp;<span class="download-size">(<?php p($_['fileSize']) ?>)</span>
+ </a>
+ </li>
+ <li>
+ <a href="#" id="directLink-container">
+ <span class="icon icon-public"></span>
+ <label for="directLink"><?php p($l->t('Direct link')) ?></label>
+ <input id="directLink" type="text" readonly value="<?php p($_['previewURL']); ?>">
+ </a>
+ </li>
+ <?php if ($_['server2serversharing']) { ?>
+ <li>
+ <a href="#" id="save" data-protected="<?php p($_['protected']) ?>"
+ data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
+ <span class="icon icon-external"></span>
+ <span id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></span>
+ <form class="save-form hidden" action="#">
+ <input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
+ <button id="save-button-confirm" class="icon-confirm svg" disabled></button>
+ </form>
+ </a>
+ </li>
+ <?php } ?>
+ </ul>
+ </div>
<?php } ?>
</div>
</div></header>
@@ -84,16 +101,14 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
<!-- Preview frame is filled via JS to support SVG images for modern browsers -->
<div id="imgframe"></div>
<?php endif; ?>
+ <?php if ($_['previewURL'] === $_['downloadURL']): ?>
<div class="directDownload">
<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
<span class="icon icon-download"></span>
<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
</a>
</div>
- <div class="directLink">
- <label for="directLink"><?php p($l->t('Direct link')) ?></label>
- <input id="directLink" type="text" readonly value="<?php p($_['previewURL']); ?>">
- </div>
+ <?php endif; ?>
<?php endif; ?>
</div>
</div>
diff --git a/core/css/header.scss b/core/css/header.scss
index c03fa2aa0d3..1e5e2846723 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -143,6 +143,8 @@
#header-left, .header-left {
flex: 0 0;
flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
}
#header-right, .header-right {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index baf874db8f5..58bb076d819 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -31,11 +31,6 @@
align-items: center;
}
-/* on mobile public share, show only the icon of the logo, hide the text */
-#body-public #header .header-appname-container {
- display: none;
-}
-
/* do not show update notification on mobile */
#update-notification {
display: none !important;