mirror of
https://github.com/discourse/discourse.git
synced 2025-01-30 17:14:59 +08:00
UI: Footer nav fixes
- moves footer nav to the header on iPads - disables scrolling events for iPads - removes footer nav entirely on Chrome PWAs - toggles DiscourseHub iOS app status bar styling (dark/light) when opening/closing lightboxes and modals
This commit is contained in:
parent
fca3044b10
commit
de10bd7fb4
|
@ -22,6 +22,7 @@ export default Ember.Component.extend({
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
this.appEvents.off("modal-body:flash", this, "_flash");
|
this.appEvents.off("modal-body:flash", this, "_flash");
|
||||||
this.appEvents.off("modal-body:clearFlash", this, "_clearFlash");
|
this.appEvents.off("modal-body:clearFlash", this, "_clearFlash");
|
||||||
|
this.appEvents.trigger("modal:body-dismissed");
|
||||||
},
|
},
|
||||||
|
|
||||||
_afterFirstRender() {
|
_afterFirstRender() {
|
||||||
|
|
|
@ -2,6 +2,8 @@ import MountWidget from "discourse/components/mount-widget";
|
||||||
import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction";
|
import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction";
|
||||||
import Scrolling from "discourse/mixins/scrolling";
|
import Scrolling from "discourse/mixins/scrolling";
|
||||||
import { observes } from "ember-addons/ember-computed-decorators";
|
import { observes } from "ember-addons/ember-computed-decorators";
|
||||||
|
import { isiPad } from "discourse/lib/utilities";
|
||||||
|
import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
|
||||||
|
|
||||||
const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150;
|
const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150;
|
||||||
|
|
||||||
|
@ -28,22 +30,40 @@ const FooterNavComponent = MountWidget.extend(
|
||||||
|
|
||||||
didInsertElement() {
|
didInsertElement() {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
this.bindScrolling({ name: "footer-nav" });
|
|
||||||
$(window).on("resize.footer-nav-on-scroll", () => this.scrolled());
|
|
||||||
this.appEvents.on("page:changed", this, "_routeChanged");
|
this.appEvents.on("page:changed", this, "_routeChanged");
|
||||||
this.appEvents.on("composer:opened", this, "_composerOpened");
|
|
||||||
this.appEvents.on("composer:closed", this, "_composerClosed");
|
if (isAppWebview()) {
|
||||||
$("body").addClass("with-footer-nav");
|
this.appEvents.on("modal:body-shown", this, "_modalOn");
|
||||||
|
this.appEvents.on("modal:body-dismissed", this, "_modalOff");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isiPad()) {
|
||||||
|
$("body").addClass("footer-nav-ipad");
|
||||||
|
} else {
|
||||||
|
this.bindScrolling({ name: "footer-nav" });
|
||||||
|
$(window).on("resize.footer-nav-on-scroll", () => this.scrolled());
|
||||||
|
this.appEvents.on("composer:opened", this, "_composerOpened");
|
||||||
|
this.appEvents.on("composer:closed", this, "_composerClosed");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
willDestroyElement() {
|
willDestroyElement() {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
this.unbindScrolling("footer-nav");
|
|
||||||
$(window).unbind("resize.footer-nav-on-scroll");
|
|
||||||
this.appEvents.off("page:changed", this, "_routeChanged");
|
this.appEvents.off("page:changed", this, "_routeChanged");
|
||||||
this.appEvents.off("composer:opened", this, "_composerOpened");
|
|
||||||
this.appEvents.off("composer:closed", this, "_composerClosed");
|
if (isAppWebview()) {
|
||||||
$("body").removeClass("with-footer-nav");
|
this.appEvents.off("modal:body-shown", this, "_modalOn");
|
||||||
|
this.appEvents.off("modal:body-removed", this, "_modalOff");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isiPad()) {
|
||||||
|
$("body").removeClass("footer-nav-ipad");
|
||||||
|
} else {
|
||||||
|
this.unbindScrolling("footer-nav");
|
||||||
|
$(window).unbind("resize.footer-nav-on-scroll");
|
||||||
|
this.appEvents.off("composer:opened", this, "_composerOpened");
|
||||||
|
this.appEvents.off("composer:closed", this, "_composerClosed");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// The user has scrolled the window, or it is finished rendering and ready for processing.
|
// The user has scrolled the window, or it is finished rendering and ready for processing.
|
||||||
|
@ -105,6 +125,17 @@ const FooterNavComponent = MountWidget.extend(
|
||||||
this.set("scrollEventDisabled", false);
|
this.set("scrollEventDisabled", false);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_modalOn() {
|
||||||
|
postRNWebviewMessage(
|
||||||
|
"headerBg",
|
||||||
|
$(".modal-backdrop").css("background-color")
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
_modalOff() {
|
||||||
|
postRNWebviewMessage("headerBg", $(".d-header").css("background-color"));
|
||||||
|
},
|
||||||
|
|
||||||
goBack() {
|
goBack() {
|
||||||
this.set("currentRouteIndex", this.get("currentRouteIndex") - 1);
|
this.set("currentRouteIndex", this.get("currentRouteIndex") - 1);
|
||||||
this.backForwardClicked = true;
|
this.backForwardClicked = true;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import computed from "ember-addons/ember-computed-decorators";
|
import computed from "ember-addons/ember-computed-decorators";
|
||||||
import { isAppWebview, isiOSPWA, isChromePWA } from "discourse/lib/utilities";
|
import { isAppWebview, isiOSPWA } from "discourse/lib/utilities";
|
||||||
|
|
||||||
export default Ember.Controller.extend({
|
export default Ember.Controller.extend({
|
||||||
showTop: true,
|
showTop: true,
|
||||||
|
@ -21,10 +21,6 @@ export default Ember.Controller.extend({
|
||||||
|
|
||||||
@computed
|
@computed
|
||||||
showFooterNav() {
|
showFooterNav() {
|
||||||
return (
|
return isAppWebview() || isiOSPWA();
|
||||||
isAppWebview() ||
|
|
||||||
isiOSPWA() ||
|
|
||||||
(!this.site.isMobileDevice && isChromePWA())
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import Mobile from "discourse/lib/mobile";
|
import Mobile from "discourse/lib/mobile";
|
||||||
import { setResolverOption } from "discourse-common/resolver";
|
import { setResolverOption } from "discourse-common/resolver";
|
||||||
|
import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
|
||||||
|
|
||||||
// Initializes the `Mobile` helper object.
|
// Initializes the `Mobile` helper object.
|
||||||
export default {
|
export default {
|
||||||
|
@ -15,11 +16,11 @@ export default {
|
||||||
|
|
||||||
setResolverOption("mobileView", Mobile.mobileView);
|
setResolverOption("mobileView", Mobile.mobileView);
|
||||||
|
|
||||||
if (window.ReactNativeWebView) {
|
if (isAppWebview()) {
|
||||||
Ember.run.later(() => {
|
Ember.run.later(() => {
|
||||||
let headerBg = $(".d-header").css("background-color");
|
postRNWebviewMessage(
|
||||||
window.ReactNativeWebView.postMessage(
|
"headerBg",
|
||||||
JSON.stringify({ headerBg: headerBg })
|
$(".d-header").css("background-color")
|
||||||
);
|
);
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import loadScript from "discourse/lib/load-script";
|
import loadScript from "discourse/lib/load-script";
|
||||||
import { escapeExpression } from "discourse/lib/utilities";
|
import { escapeExpression } from "discourse/lib/utilities";
|
||||||
import { renderIcon } from "discourse-common/lib/icon-library";
|
import { renderIcon } from "discourse-common/lib/icon-library";
|
||||||
|
import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
|
||||||
|
|
||||||
export default function($elem) {
|
export default function($elem) {
|
||||||
if (!$elem) {
|
if (!$elem) {
|
||||||
|
@ -35,10 +36,23 @@ export default function($elem) {
|
||||||
wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight
|
wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (isAppWebview()) {
|
||||||
|
postRNWebviewMessage(
|
||||||
|
"headerBg",
|
||||||
|
$(".mfp-bg").css("background-color")
|
||||||
|
);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beforeClose() {
|
beforeClose() {
|
||||||
this.wrap.off("click.pinhandler");
|
this.wrap.off("click.pinhandler");
|
||||||
this.wrap.removeClass("mfp-force-scrollbars");
|
this.wrap.removeClass("mfp-force-scrollbars");
|
||||||
|
if (isAppWebview()) {
|
||||||
|
postRNWebviewMessage(
|
||||||
|
"headerBg",
|
||||||
|
$(".d-header").css("background-color")
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -654,12 +654,10 @@ export function isAppWebview() {
|
||||||
return window.ReactNativeWebView !== undefined;
|
return window.ReactNativeWebView !== undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isChromePWA() {
|
export function postRNWebviewMessage(prop, value) {
|
||||||
// Watch out: this doesn't distinguish between mobile or desktop PWAs
|
if (window.ReactNativeWebView !== undefined) {
|
||||||
return (
|
window.ReactNativeWebView.postMessage(JSON.stringify({ [prop]: value }));
|
||||||
window.matchMedia("(display-mode: standalone)").matches &&
|
}
|
||||||
navigator.userAgent.match(/(Chrome)/g)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// This prevents a mini racer crash
|
// This prevents a mini racer crash
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { createWidget } from "discourse/widgets/widget";
|
import { createWidget } from "discourse/widgets/widget";
|
||||||
import { isAppWebview, isChromePWA } from "discourse/lib/utilities";
|
import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
|
||||||
|
|
||||||
createWidget("footer-nav", {
|
createWidget("footer-nav", {
|
||||||
tagName: "div.footer-nav-widget",
|
tagName: "div.footer-nav-widget",
|
||||||
|
@ -43,29 +43,14 @@ createWidget("footer-nav", {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isChromePWA()) {
|
|
||||||
buttons.push(
|
|
||||||
this.attach("flat-button", {
|
|
||||||
action: "refresh",
|
|
||||||
icon: "sync",
|
|
||||||
className: "btn-large"
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return buttons;
|
return buttons;
|
||||||
},
|
},
|
||||||
|
|
||||||
dismiss() {
|
dismiss() {
|
||||||
window.ReactNativeWebView.postMessage(JSON.stringify({ dismiss: true }));
|
postRNWebviewMessage("dismiss", true);
|
||||||
},
|
},
|
||||||
|
|
||||||
share() {
|
share() {
|
||||||
window.ReactNativeWebView.postMessage(
|
postRNWebviewMessage("shareUrl", window.location.href);
|
||||||
JSON.stringify({ shareUrl: window.location.href })
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh() {
|
|
||||||
window.location.reload();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,7 +5,10 @@
|
||||||
$footer-nav-height: 55px;
|
$footer-nav-height: 55px;
|
||||||
|
|
||||||
body.footer-nav-visible {
|
body.footer-nav-visible {
|
||||||
padding-bottom: $footer-nav-height + 15;
|
#main-outlet {
|
||||||
|
padding-bottom: $footer-nav-height + 15;
|
||||||
|
}
|
||||||
|
|
||||||
#topic-progress-wrapper,
|
#topic-progress-wrapper,
|
||||||
#reply-control.draft {
|
#reply-control.draft {
|
||||||
bottom: $footer-nav-height;
|
bottom: $footer-nav-height;
|
||||||
|
@ -48,8 +51,22 @@ body.footer-nav-visible {
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (-webkit-backdrop-filter: blur(10px)) {
|
@supports (-webkit-backdrop-filter: blur(10px)) {
|
||||||
.footer-nav {
|
body:not(.footer-nav-ipad) .footer-nav {
|
||||||
background-color: rgba($header_background, 0.7);
|
background-color: rgba($header_background, 0.7);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.footer-nav-ipad {
|
||||||
|
padding-top: $footer-nav-height;
|
||||||
|
.footer-nav {
|
||||||
|
bottom: auto;
|
||||||
|
top: 0px;
|
||||||
|
background-color: $header_background;
|
||||||
|
z-index: z("ipad-header-nav");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.docked .d-header {
|
||||||
|
margin-top: $footer-nav-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -81,6 +81,7 @@ $z-layers: (
|
||||||
),
|
),
|
||||||
"fullscreen": 1150,
|
"fullscreen": 1150,
|
||||||
"mobile-composer": 1100,
|
"mobile-composer": 1100,
|
||||||
|
"ipad-header-nav": 1020,
|
||||||
"header": 1000,
|
"header": 1000,
|
||||||
"footer-nav": 900,
|
"footer-nav": 900,
|
||||||
"tooltip": 600,
|
"tooltip": 600,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user