diff --git a/app/assets/javascripts/discourse/app/components/topic-admin-menu-button.js b/app/assets/javascripts/discourse/app/components/topic-admin-menu-button.js index 95dbcebcac2..3d5ad4d3fc4 100644 --- a/app/assets/javascripts/discourse/app/components/topic-admin-menu-button.js +++ b/app/assets/javascripts/discourse/app/components/topic-admin-menu-button.js @@ -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"); } }); diff --git a/app/assets/javascripts/discourse/app/components/topic-navigation.js b/app/assets/javascripts/discourse/app/components/topic-navigation.js index 0f420607a58..4ffa6ce1aae 100644 --- a/app/assets/javascripts/discourse/app/components/topic-navigation.js +++ b/app/assets/javascripts/discourse/app/components/topic-navigation.js @@ -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); } }, diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs index d5e22f54379..e6968f11b76 100644 --- a/app/assets/javascripts/discourse/app/templates/topic.hbs +++ b/app/assets/javascripts/discourse/app/templates/topic.hbs @@ -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}} diff --git a/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js b/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js index 2ba85dabc8d..7c9683069f5 100644 --- a/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js @@ -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; } diff --git a/app/assets/javascripts/discourse/app/widgets/topic-timeline.js b/app/assets/javascripts/discourse/app/widgets/topic-timeline.js index cc3785accaa..32f9aa2617c 100644 --- a/app/assets/javascripts/discourse/app/widgets/topic-timeline.js +++ b/app/assets/javascripts/discourse/app/widgets/topic-timeline.js @@ -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; diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss index a12e65fe0cd..4a698c9c830 100644 --- a/app/assets/stylesheets/common/base/topic-admin-menu.scss +++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss @@ -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 { diff --git a/app/assets/stylesheets/common/printer-friendly.scss b/app/assets/stylesheets/common/printer-friendly.scss index e3ae895760b..ce0d4687d36 100644 --- a/app/assets/stylesheets/common/printer-friendly.scss +++ b/app/assets/stylesheets/common/printer-friendly.scss @@ -13,7 +13,6 @@ #topic-progress-wrapper, div.nums, ._flyout, - .show-topic-admin, #topic-progress, .quote-controls, .topic-status-info, diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index 80d3ab37e8e..ccbdbcede1f 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -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; } diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index d3cb727d86f..1966954317f 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -11,6 +11,7 @@ left: 0; display: none; touch-action: pan-y pinch-zoom; + &.animate { transition: opacity 0.2s ease-out; }