mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #6652 from nextcloud/sharing-link-menu 

Move sharing page options to menu in top right
This commit is contained in:
John Molakvoæ 2017-11-02 17:41:01 +01:00 committed by GitHub
parent 687c92bfd3 eebf19e2e6
commit 3091ddb043
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 89 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/files_sharing/css/mobile.scss
View File

@ -5,11 +5,6 @@
position: absolute !important; position: absolute !important;
} }
/* hide text of download button, only show icon */
#download-text {
display: none;
}
/* hide size and date columns */ /* hide size and date columns */
table th#headerSize, table th#headerSize,
table td.filesize, table td.filesize,
@ -51,5 +46,13 @@ table td.filename .nametext {
text-overflow: ellipsis; 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;
}
} }

43
apps/files_sharing/css/public.scss
View File

@ -1,6 +1,14 @@
#content { #content {
height: initial; 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 */ /* force layout to make sure the content element's height matches its contents' height */
@ -78,12 +86,6 @@ thead {
margin: 0; margin: 0;
} }
.directDownload,
.directLink {
margin-bottom: 20px;
}
/* keep long file names in one line to not overflow download button on mobile */ /* keep long file names in one line to not overflow download button on mobile */
.directDownload #downloadFile { .directDownload #downloadFile {
white-space: nowrap; white-space: nowrap;
@ -95,14 +97,17 @@ thead {
margin-right: auto; margin-right: auto;
} }
.directLink label { .download-size {
font-weight: normal;
opacity: .5; opacity: .5;
} }
.directLink input {
margin-left: 5px; #directLink-container {
width: 300px; flex-wrap: wrap;
max-width: 90%; }
#directLink {
margin-left: 30px;
flex-basis: 100%;
} }
/* header buttons */ /* header buttons */
@ -125,11 +130,11 @@ thead {
/* within #save */ /* within #save */
#save .save-form { #save .save-form {
position: relative; position: relative;
margin-right: -10px;
} }
#remote_address { #remote_address {
width: 200px; width: 200px;
margin-right: 4px; margin-right: 4px;
height: 31px; height: 31px;
} }
@ -138,10 +143,9 @@ thead {
position: absolute; position: absolute;
background-color: transparent; background-color: transparent;
border: none; border: none;
margin: 2px 4px !important; margin: 0;
right: 7px; right: 0px;
top: -8px; height: 40px;
height: 30px;
} }
#public-upload .avatardiv { #public-upload .avatardiv {
@ -220,6 +224,7 @@ thead {
position: relative; position: relative;
top: -10px; top: -10px;
font-weight: 300; font-weight: 300;
font-size: 12px; font-size: 11px;
opacity: .57;
margin-top: 10px; margin-top: 10px;
} }

24
apps/files_sharing/js/public.js
View File

@ -116,7 +116,9 @@ OCA.Sharing.PublicApp = {
scalingup: 0 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({ img.css({
'max-width': previewWidth, 'max-width': previewWidth,
'max-height': previewHeight 'max-height': previewHeight
@ -128,7 +130,7 @@ OCA.Sharing.PublicApp = {
if (mimetype === 'image/gif' && if (mimetype === 'image/gif' &&
(maxGifSize === -1 || fileSize <= (maxGifSize * 1024 * 1024))) { (maxGifSize === -1 || fileSize <= (maxGifSize * 1024 * 1024))) {
img.attr('src', $('#downloadURL').val()); img.attr('src', $('#downloadURL').val());
img.appendTo('#imgframe'); imgcontainer.appendTo('#imgframe');
} else if (mimetype.substr(0, mimetype.indexOf('/')) === 'text' && window.btoa) { } else if (mimetype.substr(0, mimetype.indexOf('/')) === 'text' && window.btoa) {
// Undocumented Url to public WebDAV endpoint // Undocumented Url to public WebDAV endpoint
var url = parent.location.protocol + '//' + location.host + OC.linkTo('', 'public.php/webdav'); 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.substr(0, mimetype.indexOf('/')) === 'image' &&
mimetype !== 'image/svg+xml') { mimetype !== 'image/svg+xml') {
img.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params)); 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') { } else if (mimetype.substr(0, mimetype.indexOf('/')) !== 'video') {
img.attr('src', OC.Util.replaceSVGIcon(mimetypeIcon)); img.attr('src', OC.Util.replaceSVGIcon(mimetypeIcon));
img.attr('width', 128); img.attr('width', 128);
img.appendTo('#imgframe'); imgcontainer.appendTo('#imgframe');
} }
else if (previewSupported === 'true') { else if (previewSupported === 'true') {
$('#imgframe > video').attr('poster', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params)); $('#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); 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');
}
}); });

55
apps/files_sharing/templates/public.php
View File

@ -16,6 +16,7 @@
<input type="hidden" id="isPublic" name="isPublic" value="1"> <input type="hidden" id="isPublic" name="isPublic" value="1">
<input type="hidden" name="dir" value="<?php p($_['dir']) ?>" id="dir"> <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="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="sharingToken" value="<?php p($_['sharingToken']) ?>" id="sharingToken">
<input type="hidden" name="filename" value="<?php p($_['filename']) ?>" id="filename"> <input type="hidden" name="filename" value="<?php p($_['filename']) ?>" id="filename">
<input type="hidden" name="mimetype" value="<?php p($_['mimetype']) ?>" id="mimetype"> <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>
<div class="header-right"> <div class="header-right">
<?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) { <?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) { ?>
if ($_['server2serversharing']) { <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">
<span id="save" data-protected="<?php p($_['protected']) ?>" <ul>
data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>"> <li>
<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button> <a href="<?php p($_['downloadURL']); ?>" id="download">
<form class="save-form hidden" action="#"> <span class="icon icon-download"></span>
<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/> <?php p($l->t('Download'))?>&nbsp;<span class="download-size">(<?php p($_['fileSize']) ?>)</span>
<button id="save-button-confirm" class="icon-confirm svg" disabled></button> </a>
</form> </li>
</span> <li>
<?php } ?> <a href="#" id="directLink-container">
<a href="<?php p($_['downloadURL']); ?>" id="download" class="button"> <span class="icon icon-public"></span>
<span class="icon icon-download"></span> <label for="directLink"><?php p($l->t('Direct link')) ?></label>
<span id="download-text"><?php p($l->t('Download'))?></span> <input id="directLink" type="text" readonly value="<?php p($_['previewURL']); ?>">
</a> </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 } ?> <?php } ?>
</div> </div>
</div></header> </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 --> <!-- Preview frame is filled via JS to support SVG images for modern browsers -->
<div id="imgframe"></div> <div id="imgframe"></div>
<?php endif; ?> <?php endif; ?>
<?php if ($_['previewURL'] === $_['downloadURL']): ?>
<div class="directDownload"> <div class="directDownload">
<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button"> <a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
<span class="icon icon-download"></span> <span class="icon icon-download"></span>
<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>) <?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
</a> </a>
</div> </div>
<div class="directLink"> <?php endif; ?>
<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>
</div> </div>

2
core/css/header.scss
View File

@ -143,6 +143,8 @@
#header-left, .header-left { #header-left, .header-left {
flex: 0 0; flex: 0 0;
flex-grow: 1; flex-grow: 1;
overflow: hidden;
white-space: nowrap;
} }
#header-right, .header-right { #header-right, .header-right {

5
core/css/mobile.scss
View File

@ -31,11 +31,6 @@
align-items: center; 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 */ /* do not show update notification on mobile */
#update-notification { #update-notification {
display: none !important; display: none !important;