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));
     }