codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 09:36:19 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Collapse users when composing a private message.

Browse source
This commit is contained in:
Guo Xiang Tan 2016-06-28 16:14:06 +08:00
parent 83b08b87d5
commit 41842460b4
No known key found for this signature in database
GPG key ID: 19C321C8952B0F72
8 changed files with 135 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
app/assets/javascripts/discourse/components/composer-user-selector.js.es6 Normal file
View file

@ -0,0 +1,74 @@
import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({
showSelector: true,
shouldHide: false,
defaultUsernameCount: 0,
@observes('usernames')
_checkWidth() {
let width = 0;
const $acWrap = this.$().find('.ac-wrap');
const limit = $acWrap.width();
this.set('defaultUsernameCount', 0);
$acWrap.find('.item').toArray().forEach(item => {
width += $(item).outerWidth(true);
const result = (width < limit);
if (result) this.incrementProperty('defaultUsernameCount');
return result;
});
if (width >= limit) {
this.set('shouldHide', true);
} else {
this.set('shouldHide', false);
};
},
@observes('shouldHide')
_setFocus() {
const selector = '#reply-control #reply-title, #reply-control .d-editor-input';
if (this.get('shouldHide')) {
$(selector).on('focus.composer-user-selector', () => {
this.set('showSelector', false);
this.appEvents.trigger("composer:resize");
});
} else {
$(selector).off('focus.composer-user-selector');
}
},
@computed('usernames')
splitUsernames(usernames) {
return usernames.split(',');
},
@computed('splitUsernames', 'defaultUsernameCount')
limitedUsernames(splitUsernames, count) {
return splitUsernames.slice(0, count).join(", ");
},
@computed('splitUsernames', 'defaultUsernameCount')
hiddenUsersCount(splitUsernames, count) {
return `${splitUsernames.length - count} ${I18n.t('more')}`;
},
actions: {
toggleSelector() {
this.set("showSelector", true);
Ember.run.schedule('afterRender', () => {
this.$().find('input').focus();
});
},
triggerResize() {
this.appEvents.trigger("composer:resize");
const $this = this.$().find('.ac-wrap');
if ($this.height() >= 150) $this.scrollTop($this.height());
},
}
});

15
app/assets/javascripts/discourse/components/user-selector.js.es6
View file

@ -1,9 +1,11 @@
import { observes } from 'ember-addons/ember-computed-decorators';
import TextField from 'discourse/components/text-field';
import userSearch from 'discourse/lib/user-search';
export default TextField.extend({
_initializeAutocomplete: function() {
didInsertElement() {
this._super();
var self = this,
selected = [],
groups = [],
@ -63,6 +65,7 @@ export default TextField.extend({
self.set('hasGroups', hasGroups);
selected = items;
if (self.get('onChangeCallback')) self.sendAction('onChangeCallback');
},
reverseTransform: function(i) {
@ -70,19 +73,21 @@ export default TextField.extend({
}
});
}.on('didInsertElement'),
},
_removeAutocomplete: function() {
willDestroyElement() {
this._super();
this.$().autocomplete('destroy');
}.on('willDestroyElement'),
},
// THIS IS A HUGE HACK TO SUPPORT CLEARING THE INPUT
@observes('usernames')
_clearInput: function() {
if (arguments.length > 1) {
if (Em.isEmpty(this.get("usernames"))) {
this.$().parent().find("a").click();
}
}
}.observes("usernames")
}
});

7
app/assets/javascripts/discourse/lib/autocomplete.js.es6
View file

@ -101,13 +101,16 @@ export default function(options) {
transformed = _.isArray(transformedItem) ? transformedItem : [transformedItem || item];
var divs = transformed.map(function(itm) {
var d = $("<div class='item'><span>" + itm + "<a class='remove' href><i class='fa fa-times'></i></a></span></div>");
var prev = me.parent().find('.item:last');
let d = $(`<div class='item'><span>${itm}<a class='remove' href><i class='fa fa-times'></i></a></span></div>`);
const $parent = me.parent();
const prev = $parent.find('.item:last');
if (prev.length === 0) {
me.parent().prepend(d);
} else {
prev.after(d);
}
inputSelectedItems.push(itm);
return d[0];
});

17
app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs Normal file
View file

@ -0,0 +1,17 @@
{{#if showSelector}}
{{user-selector topicId=topicId
excludeCurrentUser='true'
onChangeCallback='triggerResize'
id="private-message-users"
includeMentionableGroups='true'
class="span8"
placeholderKey="composer.users_placeholder"
tabindex="1"
usernames=usernames
hasGroups=hasGroups}}
{{else}}
<div class='ac-wrap composer-user-selector-limited' {{action "toggleSelector"}}>
<span>{{limitedUsernames}}</span>
<span class='btn-small btn-primary'>{{hiddenUsersCount}}</span>
</div>
{{/if}}

8
app/assets/javascripts/discourse/templates/composer.hbs
View file

@ -48,13 +48,7 @@
{{#if model.canEditTitle}}
<div class='form-element clearfix'>
{{#if model.creatingPrivateMessage}}
{{user-selector topicId=topicModel.id
excludeCurrentUser="true"
id="private-message-users"
includeMentionableGroups="true"
class="span8"
placeholderKey="composer.users_placeholder"
tabindex="1"
{{composer-user-selector topicId=topicModel.id
usernames=model.targetUsernames
hasGroups=model.hasTargetGroups
}}

7
app/assets/javascripts/discourse/views/composer.js.es6
View file

@ -103,6 +103,13 @@ const ComposerView = Ember.View.extend({
triggerOpen();
});
positioningWorkaround(this.$());
this.appEvents.on('composer:resize', this, this.resize);
},
willDestroyElement() {
this._super();
this.appEvents.off('composer:resize', this, this.resize);
},
click() {

11
app/assets/stylesheets/common/base/compose.scss
View file

@ -97,6 +97,8 @@ div.ac-wrap div.item a.remove, .remove-link {
}
div.ac-wrap {
overflow: auto;
max-height: 150px;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
padding: 5px 4px 1px 4px;
@ -110,6 +112,15 @@ div.ac-wrap {
line-height: 20px;
}
}
.ac-collapsed-button {
float: left;
border-radius: 20px;
position: relative;
top: -2px;
margin-right: 10px;
}
input[type="text"] {
float: left;
margin-bottom: 4px;

10
app/assets/stylesheets/common/base/composer-user-selector.scss Normal file
View file

@ -0,0 +1,10 @@
div.ac-wrap.composer-user-selector-limited {
width: 400px;
.btn-small {
border-radius: 10px;
position: relative;
top: -2px;
float: none;
}
}