diff options
| -rw-r--r-- | apps/files_sharing/css/sharetabview.scss | 115 | ||||
| -rw-r--r-- | core/css/apps.scss | 1 | ||||
| -rw-r--r-- | core/css/share.scss | 204 | ||||
| -rw-r--r-- | core/img/actions/public-white.svg | 1 | ||||
| -rw-r--r-- | core/js/sharedialoglinkshareview.js | 371 | ||||
| -rw-r--r-- | core/js/sharedialogshareelistview.js | 18 | ||||
| -rw-r--r-- | core/js/sharedialogview.js | 1 |
7 files changed, 325 insertions, 386 deletions
diff --git a/apps/files_sharing/css/sharetabview.scss b/apps/files_sharing/css/sharetabview.scss index 18897802f48..22cc58cbdc0 100644 --- a/apps/files_sharing/css/sharetabview.scss +++ b/apps/files_sharing/css/sharetabview.scss @@ -33,9 +33,6 @@ padding: 14px; } .popovermenu { - &.socialSharingMenu { - right: -7px; - } .clipboardButton { position: relative; top: initial; @@ -80,10 +77,22 @@ } } } + // fix for popover link share + &.share-note-link { + margin-bottom: 10px; + } } } - label { - white-space: nowrap; + .linkPass .icon-loading-small { + margin-right: 0px; + } + .icon { + background-size: 16px 16px; + } + .shareWithList .icon-loading-small:not(.hidden) + span, + .linkShareView .icon-loading-small:not(.hidden) + input + label:before { + /* Hide if loader is visible */ + display: none !important; } input { &[type='checkbox'] { @@ -92,19 +101,16 @@ } &[type='text'] { &.shareWithField, - &.emailField, - &.linkText { + &.emailField { width: 100%; box-sizing: border-box; padding-right: 32px; text-overflow: ellipsis; } } - &[type='password'] { - width: 100%; - box-sizing: border-box; - padding-right: 32px; - text-overflow: ellipsis; + &[type='text'].linkText + &[type='password'].linkPassText { + width: 180px !important; } } form { @@ -114,71 +120,58 @@ } } -/* fix the popup menu because the button is shifted and then the menu is not aligned */ - +// Sharing tab users list #shareWithList { list-style-type: none; - padding: 0 0 16px; + display: flex; + flex-direction: column; > li { - padding-top: 5px; - padding-bottom: 5px; + height: 44px; white-space: normal; display: inline-flex; align-items: center; + .avatar { + width: 32px; + height: 32px; + background-color: var(--color-background-darker); + } } .unshare img { vertical-align: text-bottom; /* properly align icons */ } .sharingOptionsGroup { - > a .icon { - padding: 7px; - vertical-align: middle; - opacity: 0.5; + margin-left: auto; + display: flex; + align-items: center; + // can edit label + > .shareOption > label { + padding: 13px; + padding-right: 0; } - .popovermenu:after { - right: 3px; + // more menu + > .share-menu { + position: relative; + display: block; + .icon-more { + padding: 14px; + height: 16px; + width: 16px; + opacity: .5; + display: block; + cursor: pointer; + } + &:hover, + &:focus, + &:active { + .icon-more { + opacity: .7;; + } + } } } - label input[type='checkbox'] { - margin-left: 0; - position: relative; - } .username { - padding-right: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; - } - li .sharingOptionsGroup > .shareOption > label { - padding: 6px; - margin-right: 8px; - vertical-align: text-top; - } -} - -.linkShareView { - margin-top: 16px; -} - -.shareTabView { - .linkPass .icon-loading-small { - margin-right: 0px; - } - .icon { - background-size: 16px 16px; - } - .icon-loading-small { - display: inline-block; - z-index: 1; - vertical-align: text-top; - } - .shareWithList .icon-loading-small:not(.hidden) + span, - .linkShareView .icon-loading-small:not(.hidden) + input + label:before { - /* Hide if loader is visible */ - display: none !important; + padding: 0 8px; } } diff --git a/core/css/apps.scss b/core/css/apps.scss index b294d8c3fee..3fd1c90e61d 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -963,6 +963,7 @@ $popovericon-size: 16px; > input.checkbox + label { padding: 0 !important; width: 100%; + white-space: nowrap; } > input.checkbox + label::before { margin: -2px 13px 0; diff --git a/core/css/share.scss b/core/css/share.scss deleted file mode 100644 index 07489cd55a3..00000000000 --- a/core/css/share.scss +++ /dev/null @@ -1,204 +0,0 @@ -/** - * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com> - * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de> - * @copyright Copyright (c) 2016, Julia Bode <julia.bode@lulisaur.us> - * @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at> - * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de> - * @copyright Copyright (c) 2015, Jan-Christoph Borchardt <hey@jancborchardt.net> - * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com> - * @copyright Copyright (c) 2015, Arthur Schiwon <blizzz@owncloud.com> - * @copyright Copyright (c) 2015, Roeland Jago Douma <roeland@famdouma.nl> - * @copyright Copyright (c) 2015, Morris Jobke <hey@morrisjobke.de> - * - * @license GNU AGPL version 3 or any later version - * - */ - -/* SHARE TAB STYLING -------------------------------------------------------- */ -.shareTabView { - .unshare.icon-loading-small { - margin-top: 1px; - } - .shareWithLoading, .linkShare .icon-loading-small { - display: inline-block !important; - padding-left: 10px; - } - .shareWithLoading { - position: relative; - right: 70px; - top: 2px; - } - .icon-loading-small.hidden { - display: none !important; - } - .avatar { - margin-right: 8px; - display: inline-block; - overflow: hidden; - vertical-align: middle; - width: 32px; - height: 32px; - } - label { - font-weight: 400; - white-space: nowrap; - } - input[type='radio'].radio + label { - margin-left: -1px; - } - input[type='checkbox'] { - margin: 0 3px 0 8px; - vertical-align: middle; - } - input[type='submit'] { - margin-left: 7px; - } - form { - font-size: 100%; - margin-left: 0; - margin-right: 0; - } - .error { - color: var(--color-error); - border-color: var(--color-error); - } - .mailView .icon-mail { - opacity: 0.5; - } -} - -.share-autocomplete-item { - display: flex; - .autocomplete-item-text { - margin-left: 10px; - margin-right: 10px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 32px; - vertical-align: middle; - } -} - -.ui-autocomplete .autocomplete-note { - padding: 5px 10px; - color: rgba(0, 0, 0, .3); -} - -#shareWithList { - list-style-type: none; - padding: 8px; - > li { - position: relative; - padding-top: 10px; - padding-bottom: 10px; - font-weight: bold; - line-height: 21px; - white-space: normal; - width: 100%; - } - .sharingOptionsGroup { - flex-shrink: 0; - position: relative; - .popovermenu { - right: -11px; - top: 35px; - } - } - - .shareOption { - white-space: nowrap; - display: inline-block; - } - .unshare img { - vertical-align: text-bottom; - /* properly align icons */ - } - label input[type=checkbox] { - margin-left: 0; - position: relative; - } - .username { - padding-right: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; - flex-grow: 5; - } -} - -#link { - border-top: 1px solid var(--color-border); - padding-top: 8px; - #showPassword img { - padding-left: 5px; - width: 12px; - } -} - -.reshare, -#link label, -#expiration label { - display: inline-block; - padding: 6px 4px; -} - -.resharerInfoView.subView { - position: relative; -} - -#defaultExpireMessage, .reshare { - /* fix shared by text going out of box */ - white-space: normal; -} - -#defaultExpireMessage { - /* show message on new line */ - display: block; - padding-left: 4px; - /* TODO: style the dropdown in a proper way - border-box, etc. */ - width: 90%; -} - -.ui-autocomplete { - /* limit dropdown height to 4 1/2 entries */ - max-height: 200px; - overflow-y: auto; - overflow-x: hidden; -} - -.notCreatable { - padding-left: 12px; - padding-top: 12px; - color: var(--color-text-lighter); -} - -.contactsmenu-popover { - left: -6px; - right: auto; - padding: 3px 6px; - top: 100%; - margin-top: 0; - li.hidden { - display: none !important; - } - &:after { - left: 8px; - right: auto; - } -} - -.popovermenu .datepicker { - margin-left: 35px; -} - -.popovermenu .passwordField { - margin-left: 35px; - width: inherit !important; -} - -.ui-datepicker { - z-index: 1111 !important; -} diff --git a/core/img/actions/public-white.svg b/core/img/actions/public-white.svg new file mode 100644 index 00000000000..d85defb6a09 --- /dev/null +++ b/core/img/actions/public-white.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" height="16" width="16"><path fill="#fff" d="m9.2363 2.166-3.1816 3.1836c-0.7071 0.7072-1.0378 1.6182-0.9883 2.457 0.05 0.8389 0.4333 1.5841 0.9883 2.1387l1.4121-1.416c-0.5672-0.5672-0.5444-1.2192 0.002-1.7656l3.1812-3.1817c0.52536-0.52536 1.2507-0.52318 1.772-0.002 0.48245 0.5556 0.52732 1.2382-0.004 1.7695l-0.82 0.8203c0.555 0.785 0.645 1.3663 0.593 2.2344l1.641-1.6406c1.2374-1.2374 1.2371-3.3645 0-4.6016-1.236-1.2361-3.342-1.2113-4.5957 0.004zm0.7071 3.8848-1.4141 1.418c0 0 0.003-00 0.004 0 0.55 0.55 0.50736 1.2582-0.004 1.7695l-3.1816 3.1817c-0.696 0.59192-1.2985 0.47105-1.7696 0-0.62636-0.62636-0.5-1.2681 0-1.768l0.85-0.8473c-0.556-0.7835-0.6484-1.365-0.5976-2.2324l-1.666 1.666c-1.2393 1.2393-1.2357 3.36 0 4.5957 1.2353 1.2353 3.362 1.2356 4.5976 0l3.1817-3.182c0.7086-0.7083 1.0396-1.6184 0.9906-2.4586-0.048-0.8401-0.432-1.5864-0.9887-2.1407z"/></svg> diff --git a/core/js/sharedialoglinkshareview.js b/core/js/sharedialoglinkshareview.js index 5a78276a491..be2a89cd1b9 100644 --- a/core/js/sharedialoglinkshareview.js +++ b/core/js/sharedialoglinkshareview.js @@ -21,76 +21,106 @@ var TEMPLATE = '{{#if shareAllowed}}' + - '<span class="icon-loading-small hidden"></span>' + - '<input type="checkbox" name="linkCheckbox" id="linkCheckbox-{{cid}}" class="checkbox linkCheckbox" value="1" {{#if isLinkShare}}checked="checked"{{/if}} />' + - '<label for="linkCheckbox-{{cid}}">{{linkShareLabel}}</label>' + - '<br />' + - '<div class="oneline">' + - '<label for="linkText-{{cid}}" class="hidden-visually">{{urlLabel}}</label>' + - '<input id="linkText-{{cid}}" class="linkText {{#unless isLinkShare}}hidden{{/unless}}" type="text" readonly="readonly" value="{{shareLinkURL}}" />' + - '{{#if singleAction}}' + - '<a class="{{#unless isLinkShare}}hidden-visually{{/unless}} clipboardButton icon icon-clippy" data-clipboard-target="#linkText-{{cid}}"></a>' + - '{{else}}' + - '<a class="{{#unless isLinkShare}}hidden-visually{{/unless}}" href="#"><span class="linkMore icon icon-more"></span></a>' + - '{{{popoverMenu}}}' + - '{{/if}}' + - '</div>' + - '{{#if publicUpload}}' + - '<div>' + - '<span class="icon-loading-small hidden"></span>' + - '<input type="radio" name="publicUpload" value="{{publicUploadRValue}}" id="sharingDialogAllowPublicUpload-r-{{cid}}" class="radio publicUploadRadio" {{{publicUploadRChecked}}} />' + - '<label for="sharingDialogAllowPublicUpload-r-{{cid}}">{{publicUploadRLabel}}</label>' + - '</div>' + - '<div>' + - '<span class="icon-loading-small hidden"></span>' + - '<input type="radio" name="publicUpload" value="{{publicUploadRWValue}}" id="sharingDialogAllowPublicUpload-rw-{{cid}}" class="radio publicUploadRadio" {{{publicUploadRWChecked}}} />' + - '<label for="sharingDialogAllowPublicUpload-rw-{{cid}}">{{publicUploadRWLabel}}</label>' + - '</div>' + - '<div>' + - '<span class="icon-loading-small hidden"></span>' + - '<input type="radio" name="publicUpload" value="{{publicUploadWValue}}" id="sharingDialogAllowPublicUpload-w-{{cid}}" class="radio publicUploadRadio" {{{publicUploadWChecked}}} />' + - '<label for="sharingDialogAllowPublicUpload-w-{{cid}}">{{publicUploadWLabel}}</label>' + - '</div>' + - '{{/if}}' + - ' {{#if publicEditing}}' + - '<div id="allowPublicEditingWrapper">' + - ' <span class="icon-loading-small hidden"></span>' + - ' <input type="checkbox" value="1" name="allowPublicEditing" id="sharingDialogAllowPublicEditing-{{cid}}" class="checkbox publicEditingCheckbox" {{{publicEditingChecked}}} />' + - '<label for="sharingDialogAllowPublicEditing-{{cid}}">{{publicEditingLabel}}</label>' + - '</div>' + - ' {{/if}}' + - ' {{#if showPasswordCheckBox}}' + - '<input type="checkbox" name="showPassword" id="showPassword-{{cid}}" class="checkbox showPasswordCheckbox" {{#if isPasswordSet}}checked="checked"{{/if}} value="1" />' + - '<label for="showPassword-{{cid}}">{{enablePasswordLabel}}</label>' + - ' {{/if}}' + - '<div id="linkPass" class="oneline linkPass {{#unless isPasswordSet}}hidden{{/unless}}">' + - ' <label for="linkPassText-{{cid}}" class="hidden-visually">{{passwordLabel}}</label>' + - ' {{#if showPasswordCheckBox}}' + - ' <input id="linkPassText-{{cid}}" class="linkPassText" type="password" placeholder="{{passwordPlaceholder}}" autocomplete="new-password" />' + - ' {{else}}' + - ' <input id="linkPassText-{{cid}}" class="linkPassText" type="password" placeholder="{{passwordPlaceholderInitial}}" autocomplete="new-password" />' + - ' {{/if}}' + - ' <span class="icon icon-loading-small hidden"></span>' + - '</div>' + + '<ul id="shareWithList" class="shareWithList">' + + ' <li data-share-id="{{cid}}">' + + ' <div class="avatar icon-public-white"></div><span class="username" title="{{linkShareLabel}}">{{linkShareLabel}}</span>' + + ' <span class="sharingOptionsGroup">' + + ' <span class="shareOption"> ' + + ' <span class="icon-loading-small hidden"></span>' + + ' <input id="linkCheckbox-{{cid}}" {{#if isLinkShare}}checked="checked"{{/if}} type="checkbox" name="linkCheckbox" class="linkCheckbox permissions checkbox">' + + ' <label for="linkCheckbox-{{cid}}">{{linkShareEnableLabel}}</label>' + + ' </span>' + + ' {{#if isLinkShare}}' + + ' <div class="share-menu" tabindex="0"><span class="icon icon-more"></span>' + + ' {{{popoverMenu}}}' + + ' </div>' + + ' {{/if}}' + + ' </span>' + + ' </li>' + + '</ul>' + '{{else}}' + // FIXME: this doesn't belong in this view '{{#if noSharingPlaceholder}}<input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{noSharingPlaceholder}}" disabled="disabled"/>{{/if}}' + '{{/if}}' ; var TEMPLATE_POPOVER_MENU = - '<div class="popovermenu bubble hidden menu socialSharingMenu">' + + '<div class="popovermenu menu">' + '<ul>' + '<li>' + - '<a href="#" class="shareOption menuitem clipboardButton" data-clipboard-target="#linkText-{{cid}}">' + + '<a href="#" class="menuitem clipboardButton" data-clipboard-text="{{shareLinkURL}}">' + '<span class="icon icon-clippy" ></span>' + '<span>{{copyLabel}}</span>' + '</a>' + '</li>' + + '<li class="hidden linkTextMenu">' + + '<span class="menuitem icon-link-text">' + + '<input id="linkText-{{cid}}" class="linkText" type="text" readonly="readonly" value="{{shareLinkURL}}" />' + + '</span>' + + '</li>' + + '{{#if publicUpload}}' + + '<li><span class="shareOption menuitem">' + + '<span class="icon-loading-small hidden"></span>' + + '<input type="radio" name="publicUpload" value="{{publicUploadRValue}}" id="sharingDialogAllowPublicUpload-r-{{cid}}" class="radio publicUploadRadio" {{{publicUploadRChecked}}} />' + + '<label for="sharingDialogAllowPublicUpload-r-{{cid}}">{{publicUploadRLabel}}</label>' + + '</span></li>' + + '<li><span class="shareOption menuitem">' + + '<span class="icon-loading-small hidden"></span>' + + '<input type="radio" name="publicUpload" value="{{publicUploadRWValue}}" id="sharingDialogAllowPublicUpload-rw-{{cid}}" class="radio publicUploadRadio" {{{publicUploadRWChecked}}} />' + + '<label for="sharingDialogAllowPublicUpload-rw-{{cid}}">{{publicUploadRWLabel}}</label>' + + '</span></li>' + + '<li><span class="shareOption menuitem">' + + '<span class="icon-loading-small hidden"></span>' + + '<input type="radio" name="publicUpload" value="{{publicUploadWValue}}" id="sharingDialogAllowPublicUpload-w-{{cid}}" class="radio publicUploadRadio" {{{publicUploadWChecked}}} />' + + '<label for="sharingDialogAllowPublicUpload-w-{{cid}}">{{publicUploadWLabel}}</label>' + + '</span></li>' + + '{{/if}}' + + '{{#if publicEditing}}' + + ' <li id="allowPublicEditingWrapper"><span class="shareOption menuitem">' + + ' <span class="icon-loading-small hidden"></span>' + + ' <input type="checkbox" name="allowPublicEditing" id="sharingDialogAllowPublicEditing-{{cid}}" class="checkbox publicEditingCheckbox" {{{publicEditingChecked}}} />' + + ' <label for="sharingDialogAllowPublicEditing-{{cid}}">{{publicEditingLabel}}</label>' + + ' </span></li>' + + '{{/if}}' + + '{{#if showPasswordCheckBox}}' + + ' <li><span class="shareOption menuitem">' + + ' <input type="checkbox" name="showPassword" id="showPassword-{{cid}}" class="checkbox showPasswordCheckbox" {{#if isPasswordSet}}checked="checked"{{/if}} value="1" />' + + ' <label for="showPassword-{{cid}}">{{enablePasswordLabel}}</label>' + + ' </span></li>' + + ' <li class="{{#unless isPasswordSet}}hidden{{/unless}} linkPassMenu"><span class="shareOption menuitem icon-share-pass">' + + ' <input id="linkPassText-{{cid}}" class="linkPassText" type="password" placeholder="{{passwordPlaceholder}}" autocomplete="new-password" />' + + ' <span class="icon icon-loading-small hidden"></span>' + + ' </span></li>' + + '{{/if}}' + + '<li>' + + '<span class="shareOption menuitem">' + + '<input id="expireDate-{{cid}}" type="checkbox" name="expirationDate" class="expireDate checkbox" {{#if hasExpireDate}}checked="checked"{{/if}}" />' + + '<label for="expireDate-{{cid}}">{{expireDateLabel}}</label>' + + '</li>' + + '<li class="{{#unless hasExpireDate}}hidden{{/unless}}">' + + '<span class="menuitem icon-expiredate expirationDateContainer-{{cid}}">' + + ' <label for="expirationDatePicker-{{cid}}" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' + + ' <input id="expirationDatePicker-{{cid}}" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{#if hasExpireDate}}{{expireDate}}{{else}}{{defaultExpireDate}}{{/if}}" />' + + '</span>' + + '</span>' + + '</li>' + + '<li>' + + '<a href="#" class="share-add"><span class="icon-loading-small hidden"></span>' + + ' <span class="icon icon-edit"></span>' + + ' <span>{{addNoteLabel}}</span>' + + ' <input type="button" class="share-note-delete icon-delete">' + + '</a>' + + '</li>' + + '<li class="share-note-form share-note-link hidden">' + + '<span class="menuitem icon-note">' + + ' <textarea class="share-note">{{shareNote}}</textarea>' + + ' <input type="submit" class="icon-confirm share-note-submit" value="" id="add-note-{{shareId}}" />' + + '</span>' + + '</li>' + '{{#each social}}' + '<li>' + '<a href="#" class="shareOption menuitem pop-up" data-url="{{url}}" data-window="{{newWindow}}">' + '<span class="icon {{iconClass}}"' + - '></span><span>{{label}}' + + '></inpu><span>{{label}}' + '</span>' + '</a>' + '</li>' + @@ -131,9 +161,15 @@ 'click .linkText': 'onLinkTextClick', 'change .publicEditingCheckbox': 'onAllowPublicEditingChange', 'click .showPasswordCheckbox': 'onShowPasswordClick', - 'click .icon-more': 'onToggleMenu', + 'click .share-menu .icon-more': 'onToggleMenu', 'click .pop-up': 'onPopUpClick', - 'change .publicUploadRadio': 'onPublicUploadChange' + 'change .publicUploadRadio': 'onPublicUploadChange', + 'click .expireDate' : 'onExpireDateChange', + 'change .datepicker': 'onChangeExpirationDate', + 'click .datepicker' : 'showDatePicker', + 'click .share-add': 'showNoteForm', + 'click .share-note-delete': 'deleteNote', + 'click .share-note-submit': 'updateNote' }, initialize: function(options) { @@ -165,37 +201,26 @@ throw 'missing OC.Share.ShareConfigModel'; } - _.bindAll( - this, - 'onLinkCheckBoxChange', - 'onPasswordEntered', - 'onPasswordKeyUp', - 'onLinkTextClick', - 'onShowPasswordClick', - 'onAllowPublicEditingChange', - 'onPublicUploadChange' - ); - var clipboard = new Clipboard('.clipboardButton'); clipboard.on('success', function(e) { - var $input = $(e.trigger); - $input.tooltip('hide') + var $menu = $(e.trigger); + var $linkTextMenu = $menu.parent().next('li.linkTextMenu') + + $menu.tooltip('hide') .attr('data-original-title', t('core', 'Copied!')) .tooltip('fixTitle') .tooltip({placement: 'bottom', trigger: 'manual'}) .tooltip('show'); _.delay(function() { - $input.tooltip('hide'); - if (OC.Share.Social.Collection.size() == 0) { - $input.attr('data-original-title', t('core', 'Copy')) - .tooltip('fixTitle'); - } else { - $input.tooltip("destroy"); - } + $menu.tooltip('hide'); + $menu.tooltip('destroy'); }, 3000); }); clipboard.on('error', function (e) { - var $input = $(e.trigger); + var $menu = $(e.trigger); + var $linkTextMenu = $menu.parent().next('li.linkTextMenu') + var $input = $linkTextMenu.find('.linkText'); + var actionMsg = ''; if (/iPhone|iPad/i.test(navigator.userAgent)) { actionMsg = t('core', 'Not supported!'); @@ -205,6 +230,8 @@ actionMsg = t('core', 'Press Ctrl-C to copy.'); } + $linkTextMenu.removeClass('hidden'); + $input.select(); $input.tooltip('hide') .attr('data-original-title', actionMsg) .tooltip('fixTitle') @@ -212,15 +239,10 @@ .tooltip('show'); _.delay(function () { $input.tooltip('hide'); - if (OC.Share.Social.Collection.size() == 0) { - $input.attr('data-original-title', t('core', 'Copy')) - .tooltip('fixTitle'); - } else { - $input.tooltip("destroy"); - } + $input.attr('data-original-title', t('core', 'Copy')) + .tooltip('fixTitle'); }, 3000); }); - }, onLinkCheckBoxChange: function() { @@ -257,6 +279,7 @@ onShowPasswordClick: function() { this.$el.find('.linkPass').slideToggle(OC.menuSpeed); + this.$el.find('.linkPassMenu').toggleClass('hidden'); if(!this.$el.find('.showPasswordCheckbox').is(':checked')) { this.model.saveLinkShare({ password: '' @@ -275,7 +298,7 @@ }, onPasswordEntered: function() { - var $loading = this.$el.find('.linkPass .icon-loading-small'); + var $loading = this.$el.find('.linkPassMenu .icon-loading-small'); if (!$loading.hasClass('hidden')) { // still in process return; @@ -334,12 +357,94 @@ }, - onPublicUploadChange: function(e) { + onPublicUploadChange: function(e) { var permissions = e.currentTarget.value; this.model.saveLinkShare({ permissions: permissions }); }, + + showNoteForm(event) { + event.preventDefault(); + event.stopPropagation(); + var self = this; + var $element = $(event.target); + var $li = $element.closest('li[data-share-id]'); + var $menu = $element.closest('li'); + var $form = $menu.next('li.share-note-form'); + + // show elements + $menu.find('.share-note-delete').toggle(); + $form.toggleClass('hidden'); + }, + + deleteNote(event) { + event.preventDefault(); + event.stopPropagation(); + var self = this; + var $element = $(event.target); + var $li = $element.closest('li[data-share-id]'); + var shareId = $li.data('share-id'); + var $menu = $element.closest('li'); + var $form = $menu.next('li.share-note-form'); + + console.log($form.find('.share-note')); + $form.find('.share-note').val(''); + + $form.addClass('hidden'); + $menu.find('.share-note-delete').hide(); + + self.sendNote('', shareId, $menu); + }, + + updateNote(event) { + event.preventDefault(); + event.stopPropagation(); + var self = this; + var $element = $(event.target); + var $li = $element.closest('li[data-share-id]'); + var shareId = $li.data('share-id'); + var $form = $element.closest('li.share-note-form'); + var $menu = $form.prev('li'); + var message = $form.find('.share-note').val().trim(); + + if (message.length < 1) { + return; + } + + self.sendNote(message, shareId, $menu); + }, + + sendNote(note, shareId, $menu) { + var $form = $menu.next('li.share-note-form'); + var $submit = $form.find('input.share-note-submit'); + var $error = $form.find('input.share-note-error'); + + $submit.prop('disabled', true); + $menu.find('.icon-loading-small').removeClass('hidden'); + $menu.find('.icon-edit').hide(); + + var complete = function() { + $submit.prop('disabled', false); + $menu.find('.icon-loading-small').addClass('hidden'); + $menu.find('.icon-edit').show(); + }; + var error = function() { + $error.show(); + setTimeout(function() { + $error.hide(); + }, 3000); + }; + + // send data + $.ajax({ + method: 'PUT', + url: OC.linkToOCS('apps/files_sharing/api/v1/shares',2) + shareId + '?' + OC.buildQueryString({format: 'json'}), + data: { note: note }, + complete : complete, + error: error + }); + }, render: function() { var linkShareTemplate = this.template(); @@ -412,18 +517,20 @@ }); }); + var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced'); + var hasExpireDate = !!this.model.get('linkShare').expiration || isExpirationEnforced; + + var expireDate; + if (hasExpireDate) { + expireDate = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY'); + } + var popover = this.popoverMenuTemplate({ - cid: this.cid, - copyLabel: t('core', 'Copy'), - social: social - }); + cid: this.model.get('linkShare').id, + copyLabel: t('core', 'Copy URL'), + social: social, - this.$el.html(linkShareTemplate({ - cid: this.cid, - shareAllowed: true, - isLinkShare: isLinkShare, shareLinkURL: this.model.get('linkShare').link, - linkShareLabel: t('core', 'Share link'), urlLabel: t('core', 'Link'), enablePasswordLabel: t('core', 'Password protect'), passwordLabel: t('core', 'Password'), @@ -437,8 +544,6 @@ publicEditingLabel: t('core', 'Allow editing'), mailPrivatePlaceholder: t('core', 'Email link to person'), mailButtonText: t('core', 'Send'), - singleAction: OC.Share.Social.Collection.size() == 0, - popoverMenu: popover, publicUploadRWLabel: t('core', 'Allow upload and editing'), publicUploadRLabel: t('core', 'Read only'), publicUploadWLabel: t('core', 'File drop (upload only)'), @@ -447,16 +552,26 @@ publicUploadWValue: OC.PERMISSION_CREATE, publicUploadRWChecked: publicUploadRWChecked, publicUploadRChecked: publicUploadRChecked, - publicUploadWChecked: publicUploadWChecked - })); + publicUploadWChecked: publicUploadWChecked, + expireDateLabel: t('core', 'Set expiration date'), + expirationLabel: t('core', 'Expiration'), + expirationDatePlaceholder: t('core', 'Expiration date'), + hasExpireDate: hasExpireDate, + isExpirationEnforced: isExpirationEnforced, + expireDate: expireDate, + defaultExpireDate: moment().add(1, 'day').format('DD-MM-YYYY'), // Can't expire today + shareNote: this.model.get('linkShare').note, + addNoteLabel: t('core', 'Set share note'), + }); - if (OC.Share.Social.Collection.size() == 0) { - this.$el.find('.clipboardButton').tooltip({ - placement: 'bottom', - title: t('core', 'Copy'), - trigger: 'hover' - }); - } + this.$el.html(linkShareTemplate({ + cid: this.model.get('linkShare').id, + shareAllowed: true, + isLinkShare: isLinkShare, + linkShareLabel: t('core', 'Share link'), + linkShareEnableLabel: t('core', 'Enable'), + popoverMenu: popover, + })); this.delegateEvents(); @@ -467,8 +582,8 @@ event.preventDefault(); event.stopPropagation(); var $element = $(event.target); - var $li = $element.closest('.oneline'); - var $menu = $li.find('.popovermenu'); + var $li = $element.closest('li[data-share-id]'); + var $menu = $li.find('.sharingOptionsGroup .popovermenu'); OC.showMenu(null, $menu); this._menuOpen = $li.data('share-id'); @@ -517,7 +632,45 @@ window.location.href = url; } } - } + }, + + onExpireDateChange: function(event) { + var $element = $(event.target); + var datePickerClass = '.expirationDateContainer-' + this.cid; + var datePicker = $(datePickerClass); + var state = $element.prop('checked'); + datePicker.toggleClass('hidden', !state); + + if (!state) { + // disabled, let's hide the input and + // set the expireDate to nothing + $element.closest('li').next('li').addClass('hidden'); + this.setExpirationDate(''); + } else { + // enabled, show the input and the datepicker + $element.closest('li').next('li').removeClass('hidden'); + this.showDatePicker(event); + + } + }, + + showDatePicker: function(event) { + var expirationDatePicker = '#expirationDatePicker-' + this.cid; + var self = this; + + $(expirationDatePicker).datepicker({ + dateFormat : 'dd-mm-yy', + onSelect: function (expireDate) { + self.setExpirationDate(expireDate); + } + }); + $(expirationDatePicker).focus(); + + }, + + setExpirationDate: function(expireDate) { + this.model.saveLinkShare({expireDate: expireDate}); + }, }); diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js index 88f116e8301..cdf6972a940 100644 --- a/core/js/sharedialogshareelistview.js +++ b/core/js/sharedialogshareelistview.js @@ -34,8 +34,9 @@ '<label for="canEdit-{{cid}}-{{shareId}}">{{canEditLabel}}</label>' + '</span>' + '{{/if}}' + - '<a href="#"><span class="icon icon-more"></span></a>' + - '{{{popoverMenu}}}' + + '<div tabindex="0" class="share-menu"><span class="icon icon-more"></span>' + + '{{{popoverMenu}}}' + + '</div>' + '</span>' + '</li>' + '{{/each}}' + @@ -167,14 +168,12 @@ /** @type {boolean|number} **/ _renderPermissionChange: false, - _noteView: undefined, - events: { 'click .unshare': 'onUnshare', 'click .share-add': 'showNoteForm', 'click .share-note-delete': 'deleteNote', 'click .share-note-submit': 'updateNote', - 'click .icon-more': 'onToggleMenu', + 'click .share-menu .icon-more': 'onToggleMenu', 'click .permissions': 'onPermissionChange', 'click .expireDate' : 'onExpireDateChange', 'click .password' : 'onMailSharePasswordProtectChange', @@ -196,8 +195,6 @@ this.model.on('change:shares', function() { view.render(); }); - - this._noteView = options.parent.noteView; }, /** @@ -498,10 +495,8 @@ showNoteForm(event) { event.preventDefault(); event.stopPropagation(); - var self = this; var $element = $(event.target); var $li = $element.closest('li[data-share-id]'); - var shareId = $li.data('share-id'); var $menu = $element.closest('li'); var $form = $menu.next('li.share-note-form'); @@ -522,6 +517,9 @@ console.log($form.find('.share-note')); $form.find('.share-note').val(''); + + $form.addClass('hidden'); + $menu.find('.share-note-delete').hide(); self.sendNote('', shareId, $menu); }, @@ -599,8 +597,6 @@ self.model.removeShare(shareId) .done(function() { $li.remove(); - // remove note field on sucess - self._noteView.hide(); }) .fail(function() { $loading.addClass('hidden'); diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js index b69bc5026c3..60e9211752c 100644 --- a/core/js/sharedialogview.js +++ b/core/js/sharedialogview.js @@ -27,7 +27,6 @@ '{{/if}}' + '<div class="shareeListView subView"></div>' + '<div class="linkShareView subView"></div>' + - '<div class="expirationView subView"></div>' + '<div class="loading hidden" style="height: 50px"></div>'; /** |
