Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move sharing page options to menu in top right #6652

Merged
merged 11 commits into from
Nov 2, 2017
Merged

Move sharing page options to menu in top right #6652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3d05540
Move shared page controls to menu in top right
jancborchardt Aug 12, 2017
93d14dd
Fix header text hiding completely or wrapping wrongly
jancborchardt Sep 26, 2017
40a3b01
Fix display of Download entry text
jancborchardt Sep 26, 2017
9f4cd52
Add label to download action
jancborchardt Sep 26, 2017
f2fadf6
Adjust prominence of shared-by info to not overpower file name
jancborchardt Sep 26, 2017
116cb58
Show and hide menu via Javascript, thanks @skjnldsv
jancborchardt Sep 29, 2017
b3ccaf8
Fix scrollbar showing up on public page
jancborchardt Nov 1, 2017
bc47668
Use standard way of showing and hiding popover menu
jancborchardt Nov 1, 2017
18dff92
Directly show link
jancborchardt Nov 1, 2017
84b8cb1
Clicking publicly shared image opens direct preview url
jancborchardt Nov 1, 2017
eebf19e
Fix Scrutinizer issue
jancborchardt Nov 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions apps/files_sharing/css/mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

}
43 changes: 24 additions & 19 deletions apps/files_sharing/css/public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
Expand Down Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -125,11 +130,11 @@ thead {
/* within #save */
#save .save-form {
position: relative;
margin-right: -10px;
}

#remote_address {
width: 200px;

margin-right: 4px;
height: 31px;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -220,6 +224,7 @@ thead {
position: relative;
top: -10px;
font-weight: 300;
font-size: 12px;
font-size: 11px;
opacity: .57;
margin-top: 10px;
}
24 changes: 20 additions & 4 deletions apps/files_sharing/js/public.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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');
Expand All @@ -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));
Expand Down Expand Up @@ -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');
}
});
55 changes: 35 additions & 20 deletions apps/files_sharing/templates/public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -48,22 +49,38 @@
</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="[email protected]"/>
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the download link having the icon-more-white class? This needs to be 2 separate elements. :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Download is just the text label for the menu, so it's the same element. :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels strange! :/ :)

<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="[email protected]"/>
<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
</form>
</a>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
</div></header>
Expand All @@ -84,16 +101,14 @@
<!-- 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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not working on my setup, No response or feedback when clicking this link.
Maybe we should also fix this here?

<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>
Expand Down
2 changes: 2 additions & 0 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@
#header-left, .header-left {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could have a display: inline-flex for easier alignment .

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That’s already set in the lines above. :)

flex: 0 0;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
}

#header-right, .header-right {
Expand Down
5 changes: 0 additions & 5 deletions core/css/mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down