From c28dd826fec5ba6963cd0dc64e1efb745079a5dd Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 22 Jul 2016 13:56:17 -0400
Subject: [PATCH] UX: Focus on usernames if creating a PM from your user page
---
.../discourse/components/composer-title.js.es6 | 8 ++++----
.../components/composer-user-selector.js.es6 | 8 ++++++++
.../discourse/controllers/composer.js.es6 | 15 +++++++++++++++
.../javascripts/discourse/templates/composer.hbs | 8 ++++----
4 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/composer-title.js.es6 b/app/assets/javascripts/discourse/components/composer-title.js.es6
index 8ede0fd3d..3d806ca0f 100644
--- a/app/assets/javascripts/discourse/components/composer-title.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-title.js.es6
@@ -1,12 +1,12 @@
-import { default as computed, on } from 'ember-addons/ember-computed-decorators';
+import computed from 'ember-addons/ember-computed-decorators';
import InputValidation from 'discourse/models/input-validation';
export default Ember.Component.extend({
classNames: ['title-input'],
- @on('didInsertElement')
- _focusOnTitle() {
- if (!this.capabilities.isIOS) {
+ didInsertElement() {
+ this._super();
+ if (this.get('focusTarget') === 'title') {
this.$('input').putCursorAtEnd();
}
},
diff --git a/app/assets/javascripts/discourse/components/composer-user-selector.js.es6 b/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
index d977d6e30..4d440091f 100644
--- a/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
@@ -5,6 +5,14 @@ export default Ember.Component.extend({
shouldHide: false,
defaultUsernameCount: 0,
+ didInsertElement() {
+ this._super();
+
+ if (this.get('focusTarget') === 'usernames') {
+ this.$('input').putCursorAtEnd();
+ }
+ },
+
@observes('usernames')
_checkWidth() {
let width = 0;
diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6
index 0903a2747..f896464a1 100644
--- a/app/assets/javascripts/discourse/controllers/composer.js.es6
+++ b/app/assets/javascripts/discourse/controllers/composer.js.es6
@@ -64,6 +64,21 @@ export default Ember.Controller.extend({
topic: null,
linkLookup: null,
+ @computed('model.replyingToTopic', 'model.creatingPrivateMessage', 'model.targetUsernames')
+ focusTarget(replyingToTopic, creatingPM, usernames) {
+ if (this.capabilities.isIOS) { return "none"; }
+
+ if (creatingPM && usernames === this.currentUser.get('username')) {
+ return 'usernames';
+ }
+
+ if (replyingToTopic) {
+ return 'reply';
+ }
+
+ return 'title';
+ },
+
showToolbar: Em.computed({
get(){
const keyValueStore = this.container.lookup('key-value-store:main');
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 0680e931a..acb26b185 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -49,9 +49,9 @@
<div class='form-element clearfix'>
{{#if model.creatingPrivateMessage}}
{{composer-user-selector topicId=topicModel.id
- usernames=model.targetUsernames
- hasGroups=model.hasTargetGroups
- }}
+ usernames=model.targetUsernames
+ hasGroups=model.hasTargetGroups
+ focusTarget=focusTarget}}
{{#if showWarning}}
<div class='add-warning'>
<label>
@@ -62,7 +62,7 @@
{{/if}}
{{/if}}
- {{composer-title composer=model lastValidatedAt=lastValidatedAt}}
+ {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
{{#if model.showCategoryChooser}}
<div class="category-input">