Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Adjustments to topic admin menu on mobile (#9945)

This commit is contained in:
Penar Musaraj 2020-06-01 09:39:38 -04:00 committed by GitHub
parent 921751f128
commit c2abf88a61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 38 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/topic-admin-menu-button.js
View File

@ -6,6 +6,6 @@ export default MountWidget.extend({
widget: "topic-admin-menu-button",
buildArgs() {
return this.getProperties("topic", "fixed", "openUpwards", "rightSide");
return this.getProperties("topic", "openUpwards", "rightSide");
}
});

10
app/assets/javascripts/discourse/app/components/topic-navigation.js
View File

@ -30,10 +30,7 @@ export default Component.extend(PanEvents, {
let info = this.info;
if (info.get("topicProgressExpanded")) {
info.setProperties({
renderTimeline: true,
renderAdminMenuButton: true
});
info.set("renderTimeline", true);
} else {
let renderTimeline = !this.site.mobileView;
@ -51,10 +48,7 @@ export default Component.extend(PanEvents, {
}
}
info.setProperties({
renderTimeline,
renderAdminMenuButton: !renderTimeline
});
info.set("renderTimeline", renderTimeline);
}
},

52
app/assets/javascripts/discourse/app/templates/topic.hbs
View File

@ -127,24 +127,6 @@
{{#topic-navigation topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
{{#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=(route-action "showTopicStatusUpdate")
showFeatureTopic=(route-action "showFeatureTopic")
showChangeTimestamp=(route-action "showChangeTimestamp")
resetBumpDate=(action "resetBumpDate")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/if}}
{{topic-timeline
topic=model
notificationLevel=model.details.notification_level
@ -178,24 +160,22 @@
expanded=info.topicProgressExpanded
jumpToPost=(action "jumpToPost")}}
{{plugin-outlet name="before-topic-progress" args=(hash model=model 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=(route-action "showTopicStatusUpdate")
showFeatureTopic=(route-action "showFeatureTopic")
showChangeTimestamp=(route-action "showChangeTimestamp")
resetBumpDate=(action "resetBumpDate")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/if}}
{{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=(route-action "showTopicStatusUpdate")
showFeatureTopic=(route-action "showFeatureTopic")
showChangeTimestamp=(route-action "showChangeTimestamp")
resetBumpDate=(action "resetBumpDate")
convertToPublicTopic=(action "convertToPublicTopic")
convertToPrivateMessage=(action "convertToPrivateMessage")}}
{{/topic-progress}}
{{/if}}
{{/topic-navigation}}

19
app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js
View File

@ -38,7 +38,6 @@ createWidget("topic-admin-menu-button", {
const menu = this.attach("topic-admin-menu", {
position: state.position,
fixed: attrs.fixed,
topic: attrs.topic,
openUpwards: attrs.openUpwards,
rightSide: !this.site.mobileView && attrs.rightSide,
@ -54,7 +53,6 @@ createWidget("topic-admin-menu-button", {
this.attach("button", {
className:
"popup-menu-button toggle-admin-menu" +
(attrs.fixed ? " show-topic-admin" : "") +
(attrs.addKeyboardTargetClass ? " keyboard-target-admin-menu" : ""),
title: "topic_admin_menu",
icon: "wrench",
@ -74,10 +72,6 @@ createWidget("topic-admin-menu-button", {
hideAdminMenu() {
this.state.expanded = false;
this.state.position = null;
if (this.site.mobileView && !this.attrs.rightSide) {
$(".header-cloak").css("display", "");
}
},
showAdminMenu(e) {
@ -101,10 +95,6 @@ createWidget("topic-admin-menu-button", {
position.left -= MENU_WIDTH - $button.outerWidth();
}
if (this.attrs.fixed) {
position.left += $button.width() - 203;
}
if (this.attrs.openUpwards) {
if (rtl) {
position.left -= $button[0].offsetWidth + SPACING;
@ -115,11 +105,6 @@ createWidget("topic-admin-menu-button", {
position.top += $button[0].offsetHeight + SPACING;
}
if (this.site.mobileView && !this.attrs.rightSide) {
const headerCloak = document.querySelector(".header-cloak");
if (headerCloak) headerCloak.style.display = "block";
}
this.state.position = position;
},
@ -273,7 +258,7 @@ export default createWidget("topic-admin-menu", {
buildAttributes(attrs) {
let { top, left, outerHeight } = attrs.position;
const position = attrs.fixed || this.site.mobileView ? "fixed" : "absolute";
const position = this.site.mobileView ? "fixed" : "absolute";
if (attrs.rightSide) {
return;
@ -289,7 +274,7 @@ export default createWidget("topic-admin-menu", {
}
if (this.site.mobileView) {
bottom = 0;
bottom = 50;
left = 0;
}

9
app/assets/javascripts/discourse/app/widgets/topic-timeline.js
View File

@ -396,6 +396,15 @@ createWidget("timeline-footer-controls", {
["notificationLevel"]
)
);
if (this.site.mobileView) {
controls.push(
this.attach("topic-admin-menu-button", {
topic,
addKeyboardTargetClass: true,
openUpwards: true
})
);
}
}
return controls;

8
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -24,14 +24,6 @@
}
}
.show-topic-admin {
position: fixed;
top: 120px;
right: 10px;
z-index: z("dropdown");
height: 35px;
}
.modal-body.feature-topic {
max-height: 500px;
input.date-picker {

1
app/assets/stylesheets/common/printer-friendly.scss
View File

@ -13,7 +13,6 @@
#topic-progress-wrapper,
div.nums,
._flyout,
.show-topic-admin,
#topic-progress,
.quote-controls,
.topic-status-info,

13
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -33,6 +33,7 @@
&.timeline-fullscreen.show {
max-height: 700px;
transition: max-height 0.4s ease-out;
@media screen and (max-height: 425px) {
max-height: 75vh;
}
@ -58,7 +59,7 @@
right: 0;
border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
box-shadow: shadow("composer");
padding-top: 20px;
padding: 20px 0px;
z-index: z("fullscreen");
@media screen and (max-height: 425px) {
padding-top: 10px;
@ -119,21 +120,21 @@
.timeline-footer-controls {
display: none;
position: absolute;
bottom: 10px;
bottom: 20px;
left: 10px;
button,
.btn-group {
float: none;
display: inline-block;
margin-bottom: 0;
margin-right: 15px;
position: static;
}
.widget-component-connector {
vertical-align: top;
}
}
.timeline-scrollarea-wrapper {
display: table-cell;
padding-bottom: 20px;
padding-right: 1.5em;
width: 100px;
}

1
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -11,6 +11,7 @@
left: 0;
display: none;
touch-action: pan-y pinch-zoom;
&.animate {
transition: opacity 0.2s ease-out;
}