UX: add notification level button to mobile

app/assets/javascripts/discourse/components/topic-navigation.js.es6

@@ -52,8 +52,16 @@ export default Ember.Component.extend({
   _expanded() {
     if (this.get('info.topicProgressExpanded')) {
       $(window).on('click.hide-fullscreen', (e) => {
-        if ( $(e.target).is('.topic-timeline') ||
-             !$(e.target).parents().is('#topic-progress-wrapper')) {
+        let $target = $(e.target);
+        let $parents = $target.parents();
+        if ( !$target.is('.widget-button') &&
+             !$parents.is('.widget-button') &&
+             !$parents.is('.dropdown-menu') &&
+             (
+              $target.is('.topic-timeline') ||
+             !$parents.is('#topic-progress-wrapper')
+             )
+          ) {
           this._collapseFullscreen();
         }
       });

app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6

@@ -12,7 +12,7 @@ createWidget('notification-option', {
         h('span.icon', { className: `fa fa-${attrs.icon} ${attrs.key}`}),
         h('div', [
           h('span.title', I18n.t(`topic.notifications.${attrs.key}.title`)),
-          h('span', I18n.t(`topic.notifications.${attrs.key}.description`)),
+          h('span.desc', I18n.t(`topic.notifications.${attrs.key}.description`)),
         ])
     ]);
   },

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -334,9 +334,6 @@ export default createWidget('topic-timeline', {
         }));
       }
 
-      if (currentUser) {
-        controls.push(this.attach('topic-notifications-button', { topic }));
-      }
     }
 
     if (attrs.fullScreen) {
@@ -348,6 +345,10 @@ export default createWidget('topic-timeline', {
       }));
     }
 
+    if (currentUser) {
+      controls.push(this.attach('topic-notifications-button', { topic }));
+    }
+
     if (controls.length > 0) {
       result.push(h('div.timeline-footer-controls', controls));
     }

app/assets/stylesheets/common/topic-timeline.scss

@@ -118,8 +118,9 @@
 
         button {
           float: none;
-          display: block;
+          display: inline-block;
           margin-bottom: 10px;
+          margin-right: 15px;
         }
       }
       .timeline-scrollarea-wrapper {
@@ -164,6 +165,18 @@
 
   }
 
+  &.timeline-fullscreen .topic-timeline .timeline-footer-controls ul.dropdown-menu {
+    width: auto;
+    min-width: 250px;
+    right: auto;
+    .desc {
+      display: none;
+    }
+    .title {
+      padding-left: 0;
+    }
+  }
+
   .topic-timeline {
     margin-left: 3em;
     width: 150px;