UX: improve topic composition on mobile

- tighten up space used for composer body
- stop collapsing and expanding so much
This commit is contained in:
Sam 2016-12-02 17:42:27 +11:00
parent c04d4171ff
commit 2a19e8f239
2 changed files with 48 additions and 15 deletions

View File

@ -76,6 +76,13 @@ export default Ember.Component.extend({
} }
}, },
@observes('composeState')
disableFullscreen() {
if (this.get('composeState') !== Composer.OPEN) {
positioningWorkaround.blur();
}
},
didInsertElement() { didInsertElement() {
this._super(); this._super();
const $replyControl = $('#reply-control'); const $replyControl = $('#reply-control');

View File

@ -7,6 +7,8 @@ function applicable() {
} }
let workaroundActive = false; let workaroundActive = false;
let composingTopic = false;
export function isWorkaroundActive() { export function isWorkaroundActive() {
return workaroundActive; return workaroundActive;
} }
@ -22,12 +24,8 @@ function positioningWorkaround($fixedElement) {
var done = false; var done = false;
var originalScrollTop = 0; var originalScrollTop = 0;
var blurredNow = function(evt) { positioningWorkaround.blur = function(evt) {
if (!done && _.include($(document.activeElement).parents(), fixedElement)) { if (workaroundActive) {
// something in focus so skip
return;
}
done = true; done = true;
$('#main-outlet').show(); $('#main-outlet').show();
@ -43,6 +41,21 @@ function positioningWorkaround($fixedElement) {
evt.target.removeEventListener('blur', blurred); evt.target.removeEventListener('blur', blurred);
} }
workaroundActive = false; workaroundActive = false;
}
};
var blurredNow = function(evt) {
if (!done && _.include($(document.activeElement).parents(), fixedElement)) {
// something in focus so skip
return;
}
if (composingTopic) {
return false;
}
positioningWorkaround.blur(evt);
}; };
var blurred = _.debounce(blurredNow, 250); var blurred = _.debounce(blurredNow, 250);
@ -73,7 +86,20 @@ function positioningWorkaround($fixedElement) {
fixedElement.style.top = '0px'; fixedElement.style.top = '0px';
const height = Math.max(parseInt(window.innerHeight*0.6), 350); let ratio = 0.6;
let min = 350;
composingTopic = false;
if ($('#reply-control select.category-combobox').length > 0) {
composingTopic = true;
// creating a topic, less height
ratio = 0.54;
min = 300;
}
const height = Math.max(parseInt(window.innerHeight*ratio), min);
fixedElement.style.height = height + "px"; fixedElement.style.height = height + "px";
// I used to do this, but it seems like we don't need to with position // I used to do this, but it seems like we don't need to with position