diff options
-rw-r--r-- | apps/files_sharing/css/mobile.scss | 13 | ||||
-rw-r--r-- | apps/files_sharing/css/public.scss | 43 | ||||
-rw-r--r-- | apps/files_sharing/js/public.js | 24 | ||||
-rw-r--r-- | apps/files_sharing/templates/public.php | 55 | ||||
-rw-r--r-- | core/css/header.scss | 2 | ||||
-rw-r--r-- | core/css/mobile.scss | 5 |
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'))?> <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; |