github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-30 22:23:00 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Full height composer on mobile Android (#12709)

Browse Source
This commit is contained in:
Penar Musaraj 2021-04-15 09:02:24 -04:00 committed by GitHub
parent bfa301bd7b
commit c54609bfcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/discourse/app/components/composer-body.js
View File

@ -1,12 +1,14 @@
import { cancel, later, run, schedule, throttle } from "@ember/runloop"; import { cancel, later, run, schedule, throttle } from "@ember/runloop";
import discourseComputed, { observes } from "discourse-common/utils/decorators"; import discourseComputed, {
bind,
observes,
} from "discourse-common/utils/decorators";
import Component from "@ember/component"; import Component from "@ember/component";
import Composer from "discourse/models/composer"; import Composer from "discourse/models/composer";
import KeyEnterEscape from "discourse/mixins/key-enter-escape"; import KeyEnterEscape from "discourse/mixins/key-enter-escape";
import afterTransition from "discourse/lib/after-transition"; import afterTransition from "discourse/lib/after-transition";
import discourseDebounce from "discourse-common/lib/debounce"; import discourseDebounce from "discourse-common/lib/debounce";
import { headerHeight } from "discourse/components/site-header"; import { headerHeight } from "discourse/components/site-header";
import { iOSWithVisualViewport } from "discourse/lib/utilities";
import positioningWorkaround from "discourse/lib/safari-hacks"; import positioningWorkaround from "discourse/lib/safari-hacks";
const START_EVENTS = "touchstart mousedown"; const START_EVENTS = "touchstart mousedown";
@ -146,12 +148,13 @@ export default Component.extend(KeyEnterEscape, {
this.appEvents.trigger("composer:resize-started"); this.appEvents.trigger("composer:resize-started");
}); });
if (iOSWithVisualViewport()) { if (this._visualViewportResizing()) {
this.viewportResize(); this.viewportResize();
window.visualViewport.addEventListener("resize", this.viewportResize); window.visualViewport.addEventListener("resize", this.viewportResize);
} }
}, },
@bind
viewportResize() { viewportResize() {
const composerVH = window.visualViewport.height * 0.01, const composerVH = window.visualViewport.height * 0.01,
doc = document.documentElement; doc = document.documentElement;
@ -159,26 +162,34 @@ export default Component.extend(KeyEnterEscape, {
doc.style.setProperty("--composer-vh", `${composerVH}px`); doc.style.setProperty("--composer-vh", `${composerVH}px`);
const viewportWindowDiff = const viewportWindowDiff =
window.innerHeight - window.visualViewport.height; this.windowInnerHeight - window.visualViewport.height;
viewportWindowDiff viewportWindowDiff
? doc.classList.add("keyboard-visible") ? doc.classList.add("keyboard-visible")
: doc.classList.remove("keyboard-visible"); : doc.classList.remove("keyboard-visible");
// adds bottom padding when using a hardware keyboard and the accessory bar is visible // adds bottom padding when using a hardware keyboard and the accessory bar is visible
// accessory bar height is 55px, using 75 allows a small buffer // accessory bar height is 55px, using 75 allows a small buffer
doc.style.setProperty(
"--composer-ipad-padding",
`${viewportWindowDiff < 75 ? viewportWindowDiff : 0}px`
);
},
if (viewportWindowDiff < 75) { _visualViewportResizing() {
doc.style.setProperty( return (
"--composer-ipad-padding", (this.capabilities.isIpadOS || this.site.mobileView) &&
`${viewportWindowDiff}px` window.visualViewport !== undefined
); );
} else {
doc.style.setProperty("--composer-ipad-padding", "0px");
}
}, },
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
if (this._visualViewportResizing()) {
this.set("windowInnerHeight", window.innerHeight);
}
this.setupComposerResizeEvents(); this.setupComposerResizeEvents();
const resize = () => run(() => this.resize()); const resize = () => run(() => this.resize());
@ -199,7 +210,7 @@ export default Component.extend(KeyEnterEscape, {
willDestroyElement() { willDestroyElement() {
this._super(...arguments); this._super(...arguments);
this.appEvents.off("composer:resize", this, this.resize); this.appEvents.off("composer:resize", this, this.resize);
if (iOSWithVisualViewport()) { if (this._visualViewportResizing()) {
window.visualViewport.removeEventListener("resize", this.viewportResize); window.visualViewport.removeEventListener("resize", this.viewportResize);
} }
}, },

2
app/assets/stylesheets/mobile/compose.scss
View File

@ -24,7 +24,7 @@
} }
} }
body.ios-safari-composer-hacks &.open { .keyboard-visible &.open {
height: calc(var(--composer-vh, 1vh) * 100); height: calc(var(--composer-vh, 1vh) * 100);
} }