Skip to content

Improve UX when entering email addresses for share link #30645

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

Merged
lordelix merged 1 commit into from
Mar 28, 2018
Merged

Improve UX when entering email addresses for share link #30645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion apps/systemtags/appinfo/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ function() {
// FIXME: no public API for these ?
\OC_Util::addVendorScript('select2/select2');
\OC_Util::addVendorStyle('select2/select2');

\OCP\Util::addScript('select2-toggleselect');
\OCP\Util::addScript('oc-backbone-webdav');
\OCP\Util::addScript('systemtags/systemtags');
Expand Down Expand Up @@ -85,4 +86,4 @@ function() {
'order' => 25,
'name' => $l->t('Tags')
];
});
});
2 changes: 1 addition & 1 deletion build/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@bower_components/jsTimezoneDetect": "HenningM/jstimezonedetect#1.0.5",
"@bower_components/jstzdetect": "HenningM/jstimezonedetect#1.0.6",
"@bower_components/moment": "moment/moment#2.19.4",
"@bower_components/select2": "ivaynberg/select2#3.5.3",
"@bower_components/select2": "ivaynberg/select2#3.5.4",
"@bower_components/showdown": "showdownjs/showdown#1.8.5",
"@bower_components/snapjs": "jakiestfu/Snap.js#2.0.0-rc1",
"@bower_components/strengthify": "MorrisJobke/strengthify#0.5.2",
Expand Down
6 changes: 3 additions & 3 deletions build/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@
version "2.19.4"
resolved "https://codeload.github.com/moment/moment/tar.gz/fea48bb69eda8c0459915d6aa66a910a4d43a55b"

"@bower_components/select2@ivaynberg/select2#3.5.3":
version "3.5.3"
resolved "https://codeload.github.com/ivaynberg/select2/tar.gz/a0ddc8c9466cb94a026e80b20264e8feacc4345b"
"@bower_components/select2@ivaynberg/select2#3.5.4":
version "3.5.4"
resolved "https://codeload.github.com/ivaynberg/select2/tar.gz/95a977f674b6938af55ec5f28b7772df93786c5c"

"@bower_components/showdown@showdownjs/showdown#1.8.5":
version "1.8.5"
Expand Down
9 changes: 7 additions & 2 deletions core/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
transform: translate(-50%, -50%);
}

.full-width {
width: 100%;
max-width: 100%;
}

.pull-left {
float: left;
}
Expand All @@ -39,15 +44,15 @@

.hidden-visually {
position: absolute;
left:-10000px;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

.bold {
font-weight:600;
font-weight: 600;
}

.text-small {
Expand Down
104 changes: 68 additions & 36 deletions core/css/share.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,18 @@
margin-top: 1px;
}

.shareTabView .shareWithLoading,
.shareTabView .linkShare .icon-loading-small {
.shareTabView .linkShare .icon-loading-small,
.shareTabView .shareWithLoading {
display: inline-block !important;
padding-left: 10px;
}

.shareTabView .shareWithLoading {
position: relative;
right: 70px;
top: 2px;
}

.shareTabView .icon-loading-small.hidden {
display: none !important;
}
Expand Down Expand Up @@ -79,14 +81,14 @@
flex-shrink: 0;
}

.share-autocomplete-item .autocomplete-item-additional-info,
#shareWithList .user-additional-info {
#shareWithList .user-additional-info,
.share-autocomplete-item .autocomplete-item-additional-info {
color: #888;
}

#shareWithList {
list-style-type:none;
padding:8px;
list-style-type: none;
padding: 8px;
}

#shareWithList li {
Expand All @@ -102,15 +104,18 @@
display: inline-block;
}

#shareWithList .unshare img, #shareWithList .showCruds img {
vertical-align:text-bottom; /* properly align icons */
#shareWithList .showCruds img,
#shareWithList .unshare img {
vertical-align: text-bottom;
/* properly align icons */
}

#shareWithList label input[type=checkbox]{
#shareWithList label input[type=checkbox] {
margin-left: 0;
position: relative;
}
#shareWithList .username{

#shareWithList .username {
padding-right: 8px;
white-space: nowrap;
text-overflow: ellipsis;
Expand All @@ -119,36 +124,38 @@
overflow: hidden;
vertical-align: middle;
}
#shareWithList li label{

#shareWithList li label {
margin-right: 8px;
}

.shareTabView label {
font-weight:400;
font-weight: 400;
white-space: nowrap;
}

.shareTabView input[type="checkbox"] {
margin:0 3px 0 8px;
margin: 0 3px 0 8px;
vertical-align: middle;
}

a.showCruds {
display:inline;
opacity:.5;
display: inline;
opacity: 0.5;
}

a.unshare {
display:inline;
float:right;
opacity:.5;
display: inline;
float: right;
opacity: 0.5;
padding: 10px;
margin-top: -5px;
margin-right: -10px;
}

#link {
border-top:1px solid #ddd;
padding-top:8px;
border-top: 1px solid #ddd;
padding-top: 8px;
}

.shareTabView input[type="submit"] {
Expand All @@ -167,41 +174,48 @@ a.unshare {
box-shadow: 0 0 6px #f8b9b7;
}

.shareTabView .localShareView, .shareTabView .linkShareView {
.shareTabView .linkShareView,
.shareTabView .localShareView {
clear: left;
}

#link #showPassword img {
padding-left:5px;
width:12px;
padding-left: 5px;
width: 12px;
}

.fileowner,.reshare,#link label,
#expiration label {
#expiration label,
#link label,
.fileowner,
.reshare {
display: inline-block;
padding: 6px 4px;
}

a.showCruds:hover,a.unshare:hover {
opacity:1;
a.showCruds:hover,
a.unshare:hover {
opacity: 1;
}

#defaultExpireMessage, /* fix expire message going out of box */
.reshare { /* fix shared by text going out of box */
white-space:normal;
#defaultExpireMessage,
/* fix expire message going out of box */
.reshare {
/* fix shared by text going out of box */
white-space: normal;
}

#defaultExpireMessage { /* show message on new line */
#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:103px;
overflow-y:auto;
overflow-x:hidden;
Copy link
Contributor

@PVince81 PVince81 Mar 6, 2018

Choose a reason for hiding this comment

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

I predict conflicts during backport... that's what automatic formatting does. can you disable it in the future ?

if you want to reformat files let's do that in a separate PR only for formatting, because usually reformatting can make small changes invisible for the reviewer...

Copy link
Contributor Author

@lordelix lordelix Mar 6, 2018

Choose a reason for hiding this comment

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

Did it break? Told Atom to do it on save. :-|

.ui-autocomplete {
/* limit dropdown height to 4 1/2 entries */
max-height: 103px;
overflow-y: auto;
overflow-x: hidden;
}

.notCreatable {
Expand Down Expand Up @@ -229,3 +243,21 @@ a.showCruds:hover,a.unshare:hover {
z-index: 1;
color: #999;
}

.emailPrivateLinkForm--dropDown > .select2-choices {
border-color: #ddd;
background-image: none;
}

.select2-search-choice {
text-transform: lowercase;
}

.select2-container-multi .select2-search-choice-close {
left: inherit;
right: 3px;
}

.select2-container-multi .select2-choices .select2-search-choice {
padding: 3px 18px 3px 5px;
}
70 changes: 56 additions & 14 deletions core/js/sharedialogmailview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
'<form id="emailPrivateLink" class="emailPrivateLinkForm">' +
' <span class="emailPrivateLinkForm--send-indicator success-message-global absolute-center hidden">{{sending}}</span>' +
' <label class="public-link-modal--label" for="emailPrivateLinkField-{{cid}}">{{mailLabel}}</label>' +
' <input class="public-link-modal--input emailPrivateLinkForm--emailField" autocomplete="off" id="emailPrivateLinkField-{{cid}}" value="" placeholder="{{mailPlaceholder}}" type="email" />' +
' <input class="emailPrivateLinkForm--emailField full-width" id="emailPrivateLinkField-{{cid}}" />' +
' <div class="emailPrivateLinkForm--elements hidden">' +
' {{#if userHasEmail}}' +
' <label class="public-link-modal--bccSelf">' +
Expand All @@ -44,14 +44,24 @@
id: 'shareDialogMailView',

events: {
"keyup .emailPrivateLinkForm--emailField" : "toggleMailElements",
"keydown .emailPrivateLinkForm--emailBodyField" : "expandMailBody"
},

/** @type {array} **/
_addresses: [],

/** @type {Function} **/
_template: undefined,

initialize: function(options) {
_.bindAll(this, 'render', '_afterRender');
var _this = this;
this.render = _.wrap(this.render, function(render) {
render();
_this._afterRender();
return _this;
});

if (!_.isUndefined(options.itemModel)) {
this.itemModel = options.itemModel;
} else {
Expand All @@ -60,12 +70,11 @@
},

toggleMailElements: function() {
var $email = this.$el.find('.emailPrivateLinkForm--emailField');
var $emailElements = this.$el.find('.emailPrivateLinkForm--elements');

if ($email.val().length > 0 && $emailElements.is(":hidden")) {
if (this._addresses.length > 0 && $emailElements.is(":hidden")) {
$emailElements.slideDown();
} else if ($email.val().length === 0 && $emailElements.is(":visible")) {
} else if (this._addresses.length === 0 && $emailElements.is(":visible")) {
$emailElements.slideUp();
}
},
Expand All @@ -89,15 +98,9 @@
var itemType = this.itemModel.get('itemType');
var itemSource = this.itemModel.get('itemSource');

if (!this.validateEmail(mail.to)) {
return deferred.reject({
message: t('core', '{email} is not a valid address!', {email: mail.to})
});
}

var params = {
action : 'email',
toAddress : mail.to,
toAddress : this._addresses.join(','),
emailBody : mail.body,
bccSelf : mail.bccSelf,
link : this.model.getLink(),
Expand Down Expand Up @@ -135,7 +138,7 @@
var $formItems = this.$el.find('.emailPrivateLinkForm input, .emailPrivateLinkForm textarea');
var $formSendIndicator = this.$el.find('.emailPrivateLinkForm--send-indicator');
var mail = {
to : this.$el.find('.emailPrivateLinkForm--emailField').val().toLowerCase(),
to : this._addresses.join(','),
bccSelf : this.$el.find('.emailPrivateLinkForm--emailBccSelf').is(':checked'),
body : this.$el.find('.emailPrivateLinkForm--emailBodyField').val()
};
Expand All @@ -158,6 +161,9 @@
},

render: function() {
// make sure this is empty
this._addresses = [];

this.$el.html(this.template({
cid : this.cid,
userHasEmail : !!OC.getCurrentUser().email,
Expand All @@ -169,8 +175,44 @@
}));

this.delegateEvents();

return this;

},

_afterRender: function () {
var _this = this;

this.$el.find('.emailPrivateLinkForm--emailField').select2({
containerCssClass: 'emailPrivateLinkForm--dropDown',
tags: true,
tokenSeparators:[","],
query: function(query) {
// directly from search
query.callback({
results: [{
"id" : query.term,
"text" : query.term,
"disabled" : !_this.validateEmail(query.term)
}]
});
}
}).on("change", function(e) {
if (e.added)
_this._addAddress(e.added.id);

if (e.removed)
_this._removeAddress(e.removed.id);

_this.toggleMailElements();
});
},

_addAddress: function( email ) {
this._addresses.push( email.toLowerCase() )
},

_removeAddress: function( email ) {
this._addresses = _.without(this._addresses, email.toLowerCase() )
},

/**
Expand Down
Loading