UX: Support for displaying wrench alongside progress bar

This commit is contained in:
Robin Ward 2017-06-23 14:37:49 -04:00
parent 814c8804d4
commit 34867a6e07
6 changed files with 93 additions and 37 deletions

View File

@ -1,10 +1,11 @@
import MountWidget from 'discourse/components/mount-widget';
export default MountWidget.extend({
classNames: 'topic-admin-menu-button-container',
tagName: 'span',
widget: "topic-admin-menu-button",
buildArgs() {
return this.getProperties('topic', 'fixed', 'openUpwards');
return this.getProperties('topic', 'fixed', 'openUpwards', 'rightSide');
}
});

View File

@ -1,3 +1,5 @@
{{yield}}
{{#if showBackButton}}
<div class='progress-back-container'>
{{d-button label="topic.timeline.back" class="btn-primary progress-back" action="goBack" icon="arrow-down"}}

View File

@ -71,24 +71,24 @@
</div>
{{#topic-navigation topic=model jumpToIndex=(action "jumpToIndex") as |info|}}
{{#if info.renderAdminMenuButton}}
{{topic-admin-menu-button
topic=model
fixed="true"
toggleMultiSelect=(action "toggleMultiSelect")
deleteTopic=(action "deleteTopic")
recoverTopic=(action "recoverTopic")
toggleClosed=(action "toggleClosed")
toggleArchived=(action "toggleArchived")
toggleVisibility=(action "toggleVisibility")
showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/if}}
{{#if info.renderTimeline}}
{{#if info.renderAdminMenuButton}}
{{topic-admin-menu-button
topic=model
fixed="true"
toggleMultiSelect=(action "toggleMultiSelect")
deleteTopic=(action "deleteTopic")
recoverTopic=(action "recoverTopic")
toggleClosed=(action "toggleClosed")
toggleArchived=(action "toggleArchived")
toggleVisibility=(action "toggleVisibility")
showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/if}}
{{topic-timeline
topic=model
prevEvent=info.prevEvent
@ -113,11 +113,29 @@
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{else}}
{{topic-progress
{{#topic-progress
prevEvent=info.prevEvent
topic=model
expanded=info.topicProgressExpanded
jumpToPost=(action "jumpToPost")}}
{{#if info.renderAdminMenuButton}}
{{topic-admin-menu-button
topic=model
openUpwards="true"
rightSide="true"
toggleMultiSelect=(action "toggleMultiSelect")
deleteTopic=(action "deleteTopic")
recoverTopic=(action "recoverTopic")
toggleClosed=(action "toggleClosed")
toggleArchived=(action "toggleArchived")
toggleVisibility=(action "toggleVisibility")
showTopicStatusUpdate=(action "topicRouteAction" "showTopicStatusUpdate")
showFeatureTopic=(action "topicRouteAction" "showFeatureTopic")
showChangeTimestamp=(action "topicRouteAction" "showChangeTimestamp")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/if}}
{{/topic-progress}}
{{/if}}
{{/topic-navigation}}

View File

@ -28,19 +28,26 @@ createWidget('topic-admin-menu-button', {
if (!this.currentUser || !this.currentUser.get('canManageTopic')) { return; }
const result = [];
result.push(this.attach('button', {
className: 'btn ' + (attrs.fixed ? " show-topic-admin" : ""),
title: 'topic_admin_menu',
icon: 'wrench',
action: 'showAdminMenu',
sendActionEvent: true
}));
// We don't show the button when expanded on the right side
if (!(attrs.rightSide && state.expanded)) {
result.push(this.attach('button', {
className: 'btn ' + (attrs.fixed ? " show-topic-admin" : ""),
title: 'topic_admin_menu',
icon: 'wrench',
action: 'showAdminMenu',
sendActionEvent: true
}));
}
if (state.expanded) {
result.push(this.attach('topic-admin-menu', { position: state.position,
fixed: attrs.fixed,
topic: attrs.topic,
openUpwards: attrs.openUpwards }));
result.push(this.attach('topic-admin-menu', {
position: state.position,
fixed: attrs.fixed,
topic: attrs.topic,
openUpwards: attrs.openUpwards,
rightSide: attrs.rightSide
}));
}
return result;
@ -69,10 +76,20 @@ createWidget('topic-admin-menu-button', {
export default createWidget('topic-admin-menu', {
tagName: 'div.popup-menu.topic-admin-popup-menu',
buildClasses(attrs) {
if (attrs.rightSide) {
return 'right-side';
}
},
buildAttributes(attrs) {
const { top, left, outerHeight } = attrs.position;
let { top, left, outerHeight } = attrs.position;
const position = attrs.fixed ? 'fixed' : 'absolute';
if (attrs.rightSide) {
return;
}
if (attrs.openUpwards) {
const documentHeight = $(document).height();
const mainHeight = $('#main').height();

View File

@ -21,6 +21,30 @@
}
}
#topic-progress-wrapper {
.topic-admin-menu-button-container {
position: relative;
right: 37px;
top: 35px;
.widget-button {
height: 35px;
}
}
.topic-admin-popup-menu.right-side {
position: relative;
right: 35px;
}
}
#topic-progress-wrapper.docked {
.topic-admin-popup-menu.right-side {
right: 40px;
}
}
#topic-title {
.title-wrapper {
float: left;

View File

@ -211,9 +211,3 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
margin-right: 0;
}
}
.show-topic-admin {
bottom: 0px;
right: 150px;
top: inherit;
}