From 56cbfa2611bbc9dc0a34ba62936dd68a5a1d8eb5 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 17 Apr 2018 14:45:01 +1000 Subject: [PATCH] UX: Require an extra click to open topic draft When there is a topic draft in place instead of showing "+ New Topic" we will show "+ Open Draft", this allows topic drafts to be much less intrusive. Also, fixes draft handling of tags --- .../components/create-topic-button.js.es6 | 5 ++- .../discourse/components/d-navigation.js.es6 | 6 +++ .../discourse/controllers/composer.js.es6 | 26 ++++++------ .../controllers/navigation/categories.js.es6 | 9 +++- .../controllers/navigation/default.js.es6 | 5 +++ .../discourse/controllers/tags-show.js.es6 | 4 ++ .../discourse/models/composer.js.es6 | 6 ++- .../routes/build-category-route.js.es6 | 2 - .../discourse/routes/build-topic-route.js.es6 | 2 - .../discourse/routes/discourse.js.es6 | 41 ++++++++++++++----- .../routes/discovery-categories.js.es6 | 9 ++-- .../discourse/routes/discovery.js.es6 | 7 +++- .../discourse/routes/tags-show.js.es6 | 28 +++++++------ .../components/create-topic-button.hbs | 2 +- .../templates/components/d-navigation.hbs | 4 +- .../templates/navigation/categories.hbs | 1 + .../templates/navigation/category.hbs | 1 + .../templates/navigation/default.hbs | 1 + .../discourse/templates/tags/show.hbs | 1 + config/locales/client.en.yml | 1 + 20 files changed, 112 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/discourse/components/create-topic-button.js.es6 b/app/assets/javascripts/discourse/components/create-topic-button.js.es6 index a792b83a291..c450bf72069 100644 --- a/app/assets/javascripts/discourse/components/create-topic-button.js.es6 +++ b/app/assets/javascripts/discourse/components/create-topic-button.js.es6 @@ -1 +1,4 @@ -export default Ember.Component.extend({ tagName: '' }); +export default Ember.Component.extend({ + tagName: '', + label: 'topic.create' +}); diff --git a/app/assets/javascripts/discourse/components/d-navigation.js.es6 b/app/assets/javascripts/discourse/components/d-navigation.js.es6 index ff1e6ef40aa..313386c6219 100644 --- a/app/assets/javascripts/discourse/components/d-navigation.js.es6 +++ b/app/assets/javascripts/discourse/components/d-navigation.js.es6 @@ -13,6 +13,12 @@ export default Ember.Component.extend({ return this.site.get('categoriesList'); }, + @computed('hasDraft') + createTopicLabel(hasDraft) + { + return hasDraft ? 'topic.open_draft': 'topic.create'; + }, + @computed('category.can_edit') showCategoryEdit: canEdit => canEdit, diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6 index b91e0d40da5..bc64c7e3bfa 100644 --- a/app/assets/javascripts/discourse/controllers/composer.js.es6 +++ b/app/assets/javascripts/discourse/controllers/composer.js.es6 @@ -41,7 +41,8 @@ function loadDraft(store, opts) { composerState: Composer.DRAFT, composerTime: draft.composerTime, typingTime: draft.typingTime, - whisper: draft.whisper + whisper: draft.whisper, + tags: draft.tags }); return composer; } @@ -730,25 +731,26 @@ export default Ember.Controller.extend({ destroyDraft() { const key = this.get('model.draftKey'); if (key) { + if (key === 'new_topic') { + this.send('clearTopicDraft'); + } Draft.clear(key, this.get('model.draftSequence')); } }, cancelComposer() { - const self = this; - - return new Ember.RSVP.Promise(function (resolve) { - if (self.get('model.hasMetaData') || self.get('model.replyDirty')) { + return new Ember.RSVP.Promise((resolve) => { + if (this.get('model.hasMetaData') || this.get('model.replyDirty')) { bootbox.dialog(I18n.t("post.abandon.confirm"), [ { label: I18n.t("post.abandon.no_value") }, { label: I18n.t("post.abandon.yes_value"), 'class': 'btn-danger', - callback(result) { + callback: (result) => { if (result) { - self.destroyDraft(); - self.get('model').clearState(); - self.close(); + this.destroyDraft(); + this.get('model').clearState(); + this.close(); resolve(); } } @@ -756,9 +758,9 @@ export default Ember.Controller.extend({ ]); } else { // it is possible there is some sort of crazy draft with no body ... just give up on it - self.destroyDraft(); - self.get('model').clearState(); - self.close(); + this.destroyDraft(); + this.get('model').clearState(); + this.close(); resolve(); } }); diff --git a/app/assets/javascripts/discourse/controllers/navigation/categories.js.es6 b/app/assets/javascripts/discourse/controllers/navigation/categories.js.es6 index 8276b094c14..5a8a32c5d3e 100644 --- a/app/assets/javascripts/discourse/controllers/navigation/categories.js.es6 +++ b/app/assets/javascripts/discourse/controllers/navigation/categories.js.es6 @@ -1,3 +1,10 @@ import NavigationDefaultController from 'discourse/controllers/navigation/default'; -export default NavigationDefaultController.extend(); +export default NavigationDefaultController.extend({ + + discoveryCategories: Ember.inject.controller('discovery/categories'), + + draft: function() { + return this.get('discoveryCategories.model.draft'); + }.property('discoveryCategories.model', 'discoveryCategories.model.draft') +}); diff --git a/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 b/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 index 1fa8eedcc7a..e56e4dd5f16 100644 --- a/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 +++ b/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 @@ -1,4 +1,9 @@ + export default Ember.Controller.extend({ discovery: Ember.inject.controller(), discoveryTopics: Ember.inject.controller('discovery/topics'), + + draft: function() { + return this.get('discoveryTopics.model.draft'); + }.property('discoveryTopics.model', 'discoveryTopics.model.draft') }); diff --git a/app/assets/javascripts/discourse/controllers/tags-show.js.es6 b/app/assets/javascripts/discourse/controllers/tags-show.js.es6 index dbf92517366..643d1095b22 100644 --- a/app/assets/javascripts/discourse/controllers/tags-show.js.es6 +++ b/app/assets/javascripts/discourse/controllers/tags-show.js.es6 @@ -61,6 +61,10 @@ export default Ember.Controller.extend(BulkTopicSelection, { categories: Ember.computed.alias('site.categoriesList'), + createTopicLabel: function() { + return this.get('list.draft') ? 'topic.open_draft' : 'topic.create'; + }.property('list', 'list.draft'), + @computed('canCreateTopic', 'category', 'canCreateTopicOnCategory') createTopicDisabled(canCreateTopic, category, canCreateTopicOnCategory) { return !canCreateTopic || (category && !canCreateTopicOnCategory); diff --git a/app/assets/javascripts/discourse/models/composer.js.es6 b/app/assets/javascripts/discourse/models/composer.js.es6 index 8e4c6b60aed..cefd6df7ddf 100644 --- a/app/assets/javascripts/discourse/models/composer.js.es6 +++ b/app/assets/javascripts/discourse/models/composer.js.es6 @@ -518,7 +518,8 @@ const Composer = RestModel.extend({ targetUsernames: opts.usernames, composerTotalOpened: opts.composerTime, typingTime: opts.typingTime, - whisper: opts.whisper + whisper: opts.whisper, + tags: opts.tags }); if (opts.post) { @@ -836,7 +837,8 @@ const Composer = RestModel.extend({ metaData: this.get('metaData'), usernames: this.get('targetUsernames'), composerTime: this.get('composerTime'), - typingTime: this.get('typingTime') + typingTime: this.get('typingTime'), + tags: this.get('tags') }; this.set('draftStatus', I18n.t('composer.saving_draft_tip')); diff --git a/app/assets/javascripts/discourse/routes/build-category-route.js.es6 b/app/assets/javascripts/discourse/routes/build-category-route.js.es6 index 4b29783e565..fb4f1b7fe83 100644 --- a/app/assets/javascripts/discourse/routes/build-category-route.js.es6 +++ b/app/assets/javascripts/discourse/routes/build-category-route.js.es6 @@ -118,8 +118,6 @@ export default (filterArg, params) => { this.controllerFor('discovery/topics').setProperties(topicOpts); this.searchService.set('searchContext', category.get('searchContext')); this.set('topics', null); - - this.openTopicDraft(topics); }, renderTemplate() { diff --git a/app/assets/javascripts/discourse/routes/build-topic-route.js.es6 b/app/assets/javascripts/discourse/routes/build-topic-route.js.es6 index a7c1dc00eeb..198ab74e49f 100644 --- a/app/assets/javascripts/discourse/routes/build-topic-route.js.es6 +++ b/app/assets/javascripts/discourse/routes/build-topic-route.js.es6 @@ -106,8 +106,6 @@ export default function(filter, extras) { } } this.controllerFor('discovery/topics').setProperties(topicOpts); - - this.openTopicDraft(model); this.controllerFor('navigation/default').set('canCreateTopic', model.get('can_create_topic')); }, diff --git a/app/assets/javascripts/discourse/routes/discourse.js.es6 b/app/assets/javascripts/discourse/routes/discourse.js.es6 index 42595a0956b..f726cb5d8f1 100644 --- a/app/assets/javascripts/discourse/routes/discourse.js.es6 +++ b/app/assets/javascripts/discourse/routes/discourse.js.es6 @@ -52,7 +52,25 @@ const DiscourseRoute = Ember.Route.extend({ refreshTitle() { Ember.run.once(this, this._refreshTitleOnce); + }, + + clearTopicDraft() { + // perhaps re-delegate this to root controller in all cases? + // TODO also poison the store so it does not come back from the + // dead + if (this.get('controller.list.draft')) { + this.set('controller.list.draft', null); + } + + if (this.controllerFor("discovery/categories").get('model.draft')) { + this.controllerFor("discovery/categories").set('model.draft', null); + } + + if (this.controllerFor("discovery/topics").get('model.draft')) { + this.controllerFor("discovery/topics").set('model.draft', null); + } } + }, redirectIfLoginRequired() { @@ -63,17 +81,18 @@ const DiscourseRoute = Ember.Route.extend({ }, openTopicDraft(model){ - // If there's a draft, open the create topic composer - if (model.draft) { - const composer = this.controllerFor('composer'); - if (!composer.get('model.viewOpen')) { - composer.open({ - action: Composer.CREATE_TOPIC, - draft: model.draft, - draftKey: model.draft_key, - draftSequence: model.draft_sequence - }); - } + const composer = this.controllerFor('composer'); + + if (composer.get('model.action') === Composer.CREATE_TOPIC && + composer.get('model.draftKey') === model.draft_key) { + composer.set('model.composeState', Composer.OPEN); + } else { + composer.open({ + action: Composer.CREATE_TOPIC, + draft: model.draft, + draftKey: model.draft_key, + draftSequence: model.draft_sequence + }); } }, diff --git a/app/assets/javascripts/discourse/routes/discovery-categories.js.es6 b/app/assets/javascripts/discourse/routes/discovery-categories.js.es6 index 9753a776eb6..a85c0743f66 100644 --- a/app/assets/javascripts/discourse/routes/discovery-categories.js.es6 +++ b/app/assets/javascripts/discourse/routes/discovery-categories.js.es6 @@ -89,8 +89,6 @@ const DiscoveryCategoriesRoute = Discourse.Route.extend(OpenComposer, { showCategoryAdmin: model.get("can_create_category"), canCreateTopic: model.get("can_create_topic"), }); - - this.openTopicDraft(model); }, actions: { @@ -133,7 +131,12 @@ const DiscoveryCategoriesRoute = Discourse.Route.extend(OpenComposer, { }, createTopic() { - this.openComposer(this.controllerFor("discovery/categories")); + const model = this.controllerFor("discovery/categories").get('model'); + if (model.draft) { + this.openTopicDraft(model); + } else { + this.openComposer(this.controllerFor("discovery/categories")); + } }, didTransition() { diff --git a/app/assets/javascripts/discourse/routes/discovery.js.es6 b/app/assets/javascripts/discourse/routes/discovery.js.es6 index a77806d1a4d..b8b05fe35e6 100644 --- a/app/assets/javascripts/discourse/routes/discovery.js.es6 +++ b/app/assets/javascripts/discourse/routes/discovery.js.es6 @@ -45,7 +45,12 @@ export default Discourse.Route.extend(OpenComposer, { }, createTopic() { - this.openComposer(this.controllerFor("discovery/topics")); + const model = this.controllerFor("discovery/topics").get('model'); + if (model.draft) { + this.openTopicDraft(model); + } else { + this.openComposer(this.controllerFor("discovery/topics")); + } }, dismissReadTopics(dismissTopics) { diff --git a/app/assets/javascripts/discourse/routes/tags-show.js.es6 b/app/assets/javascripts/discourse/routes/tags-show.js.es6 index eec3a6b3623..68e37e44eff 100644 --- a/app/assets/javascripts/discourse/routes/tags-show.js.es6 +++ b/app/assets/javascripts/discourse/routes/tags-show.js.es6 @@ -129,18 +129,22 @@ export default Discourse.Route.extend({ var controller = this.controllerFor("tags.show"), self = this; - this.controllerFor('composer').open({ - categoryId: controller.get('category.id'), - action: Composer.CREATE_TOPIC, - draftKey: controller.get('list.draft_key'), - draftSequence: controller.get('list.draft_sequence') - }).then(function() { - // Pre-fill the tags input field - if (controller.get('model.id')) { - var c = self.controllerFor('composer').get('model'); - c.set('tags', _.flatten([controller.get('model.id')], controller.get('additionalTags'))); - } - }); + if (controller.get('list.draft')) { + this.openTopicDraft(controller.get('list')); + } else { + this.controllerFor('composer').open({ + categoryId: controller.get('category.id'), + action: Composer.CREATE_TOPIC, + draftKey: controller.get('list.draft_key'), + draftSequence: controller.get('list.draft_sequence') + }).then(function() { + // Pre-fill the tags input field + if (controller.get('model.id')) { + var c = self.controllerFor('composer').get('model'); + c.set('tags', _.flatten([controller.get('model.id')], controller.get('additionalTags'))); + } + }); + } }, didTransition() { diff --git a/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs b/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs index ee1172ffe23..e99673f9cb4 100644 --- a/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs +++ b/app/assets/javascripts/discourse/templates/components/create-topic-button.hbs @@ -5,5 +5,5 @@ action=action icon="plus" disabled=disabled - label="topic.create"}} + label=label}} {{/if}} diff --git a/app/assets/javascripts/discourse/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/templates/components/d-navigation.hbs index 6f8c71f5249..2d1b956b610 100644 --- a/app/assets/javascripts/discourse/templates/components/d-navigation.hbs +++ b/app/assets/javascripts/discourse/templates/components/d-navigation.hbs @@ -15,7 +15,9 @@ {{create-topic-button canCreateTopic=canCreateTopic action=createTopic - disabled=createTopicDisabled}} + disabled=createTopicDisabled + label=createTopicLabel +}} {{#if showCategoryEdit}} {{d-button diff --git a/app/assets/javascripts/discourse/templates/navigation/categories.hbs b/app/assets/javascripts/discourse/templates/navigation/categories.hbs index 30495333df2..4dba68da5ca 100644 --- a/app/assets/javascripts/discourse/templates/navigation/categories.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/categories.hbs @@ -5,5 +5,6 @@ createCategory=(route-action "createCategory") reorderCategories=(route-action "reorderCategories") canCreateTopic=canCreateTopic + hasDraft=draft createTopic=(route-action "createTopic")}} {{/d-section}} diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs index 55c7e7ef849..9bffcd46dc6 100644 --- a/app/assets/javascripts/discourse/templates/navigation/category.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/category.hbs @@ -18,6 +18,7 @@ canCreateTopic=canCreateTopic createTopic=(route-action "createTopic") createTopicDisabled=cannotCreateTopicOnCategory + hasDraft=draft editCategory=(route-action "editCategory" category)}} {{plugin-outlet name="category-navigation" args=(hash category=category)}} diff --git a/app/assets/javascripts/discourse/templates/navigation/default.hbs b/app/assets/javascripts/discourse/templates/navigation/default.hbs index b9d9854295f..d1bf784c4fd 100644 --- a/app/assets/javascripts/discourse/templates/navigation/default.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/default.hbs @@ -2,5 +2,6 @@ {{d-navigation filterMode=filterMode canCreateTopic=canCreateTopic + hasDraft=draft createTopic=(route-action "createTopic")}} {{/d-section}} diff --git a/app/assets/javascripts/discourse/templates/tags/show.hbs b/app/assets/javascripts/discourse/templates/tags/show.hbs index 33b3508a8ac..95865c66f3f 100644 --- a/app/assets/javascripts/discourse/templates/tags/show.hbs +++ b/app/assets/javascripts/discourse/templates/tags/show.hbs @@ -19,6 +19,7 @@ {{create-topic-button canCreateTopic=canCreateTopic disabled=createTopicDisabled + label=createTopicLabel action=(route-action "createTopic")}} {{#if showTagFilter}} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 69cd0f1a798..829650b154a 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1600,6 +1600,7 @@ en: other: "{{count}} posts in topic" create: 'New Topic' create_long: 'Create a new Topic' + open_draft: "Open Draft" private_message: 'Start a message' archive_message: help: 'Move message to your archive'