UX: add notification level button to mobile

This commit is contained in:
Sam Saffron 2016-12-08 17:47:34 +11:00
parent b9b4b0c175
commit b4cafc5e78
4 changed files with 29 additions and 7 deletions

View File

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

View File

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

View File

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

View File

@ -118,8 +118,9 @@
button { button {
float: none; float: none;
display: block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 15px;
} }
} }
.timeline-scrollarea-wrapper { .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 { .topic-timeline {
margin-left: 3em; margin-left: 3em;
width: 150px; width: 150px;