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æ
GitHub
commit
3091ddb043
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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'))?> <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>
|
||||
|
|
|
|||
|
|
@ -143,6 +143,8 @@
|
|||
#header-left, .header-left {
|
||||
flex: 0 0;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#header-right, .header-right {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue