From 038a5a0767f7c485420b9df9af0e15b0a114962f Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 8 Apr 2016 15:25:52 -0400
Subject: [PATCH] UX: Show the selected posts controls at the bottom of mobile
topics too
---
app/assets/javascripts/discourse/controllers/topic.js.es6 | 5 +++++
app/assets/javascripts/discourse/templates/topic.hbs | 4 ++++
.../javascripts/discourse/views/selected-posts.js.es6 | 7 +------
app/assets/stylesheets/desktop/topic-post.scss | 2 +-
app/assets/stylesheets/mobile/topic-post.scss | 4 ++--
5 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index bee65a301..f70f8877b 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -34,6 +34,11 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
}
}.observes('model.title', 'category'),
+ @computed('site.mobileView', 'model.posts_count')
+ showSelectedPostsAtBottom(mobileView, postsCount) {
+ return mobileView && (postsCount > 3);
+ },
+
@computed('model.postStream.posts')
postsToRender() {
return this.capabilities.isAndroid ? this.get('model.postStream.posts')
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index b772d14a0..97d749886 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -130,6 +130,10 @@
</div>
{{/if}}
+ {{#if showSelectedPostsAtBottom}}
+ {{view "selected-posts"}}
+ {{/if}}
+
{{plugin-outlet "topic-above-suggested"}}
{{#if model.details.suggested_topics.length}}
diff --git a/app/assets/javascripts/discourse/views/selected-posts.js.es6 b/app/assets/javascripts/discourse/views/selected-posts.js.es6
index f54618bab..28f4375f3 100644
--- a/app/assets/javascripts/discourse/views/selected-posts.js.es6
+++ b/app/assets/javascripts/discourse/views/selected-posts.js.es6
@@ -1,9 +1,4 @@
export default Ember.View.extend({
- elementId: 'selected-posts',
- classNameBindings: ['customVisibility'],
+ classNameBindings: ['controller.multiSelect::hidden', ':selected-posts'],
templateName: "selected-posts",
-
- customVisibility: function() {
- if (!this.get('controller.multiSelect')) return 'hidden';
- }.property('controller.multiSelect')
});
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index f148d4817..fb9cdb36b 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -805,7 +805,7 @@ $topic-avatar-width: 45px;
clear: both;
}
-#selected-posts {
+.selected-posts {
width: 200px;
position: fixed;
z-index: 1000;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index a9f9be388..8042ef257 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -417,9 +417,9 @@ iframe {
right: 4px;
}
-#selected-posts {
+.selected-posts {
width: 97%;
- padding-left: 3%;
+ padding: 0.1em 0.7em;
background-color: srgb-scale($tertiary, $secondary, 15%);
.btn {
margin-bottom: 10px;