Merge pull request #6652 from nextcloud/sharing-link-menu
Move sharing page options to menu in top right
This commit is contained in:
commit
3091ddb043
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
<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']) ?>">
|
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>
|
<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="#">
|
<form class="save-form hidden" action="#">
|
||||||
<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
|
<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
|
||||||
<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
|
<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
|
||||||
</form>
|
</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>
|
</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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue