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

UX: Auto size the height of the drop down panel

This commit is contained in:
Robin Ward 2015-08-27 14:29:35 -04:00
parent 96c23d51a2
commit 7de03f837e
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/javascripts/discourse/components/menu-panel.js.es6
View File

@ -1,14 +1,20 @@
import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators'; import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
const PANEL_BODY_MARGIN = 30;
export default Ember.Component.extend({ export default Ember.Component.extend({
classNameBindings: [':menu-panel', 'visible::hidden', 'viewMode'], classNameBindings: [':menu-panel', 'visible::hidden', 'viewMode'],
attributeBindings: ['style'],
showClose: Ember.computed.equal('viewMode', 'slide-in'), showClose: Ember.computed.equal('viewMode', 'slide-in'),
@computed('viewMode', 'visible') _resizeComponent() {
style(viewMode) { if (!this.get('visible')) { return; }
const viewMode = this.get('viewMode');
const $panelBody = this.$('.panel-body');
if (viewMode === 'drop-down') { if (viewMode === 'drop-down') {
// adjust panel position
const $buttonPanel = $('header ul.icons'); const $buttonPanel = $('header ul.icons');
if ($buttonPanel.length === 0) { return; } if ($buttonPanel.length === 0) { return; }
@ -18,19 +24,27 @@ export default Ember.Component.extend({
const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top); const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth); const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth);
return `left: ${posLeft}px; top: ${posTop}px`.htmlSafe(); this.$().css({ left: posLeft + "px", top: posTop + "px" });
// adjust panel height
let contentHeight = parseInt($('.panel-body-contents').height());
const fullHeight = parseInt($(window).height());
const offsetTop = this.$().offset().top;
if (contentHeight + offsetTop + PANEL_BODY_MARGIN > fullHeight) {
contentHeight = fullHeight - (offsetTop - $(window).scrollTop()) - PANEL_BODY_MARGIN;
}
$panelBody.height(contentHeight);
} else { } else {
$panelBody.height('auto');
const headerHeight = parseInt($('header.d-header').height() + 3); const headerHeight = parseInt($('header.d-header').height() + 3);
return `top: ${headerHeight}px`.htmlSafe(); this.$().css({ left: "auto", top: headerHeight + "px" });
} }
}, },
@computed('viewMode', 'visible') _needsResize() {
bodyStyle(viewMode) { Ember.run.scheduleOnce('afterRender', this, this._resizeComponent);
if (viewMode === 'drop-down') {
const height = parseInt($(window).height() * 0.8)
return `height: ${height}px`.htmlSafe();
}
}, },
@computed('force') @computed('force')
@ -65,6 +79,7 @@ export default Ember.Component.extend({
} }
$('html').off('click.close-menu-panel'); $('html').off('click.close-menu-panel');
} }
this._needsResize();
}, },
@computed() @computed()
@ -104,6 +119,7 @@ export default Ember.Component.extend({
// Recompute styles on resize // Recompute styles on resize
$(window).on('resize.discourse-menu-panel', () => { $(window).on('resize.discourse-menu-panel', () => {
this.propertyDidChange('viewMode'); this.propertyDidChange('viewMode');
this._needsResize();
}); });
}, },

6
app/assets/javascripts/discourse/templates/components/menu-panel.hbs
View File

@ -4,7 +4,9 @@
<a href {{action "close"}} class='close-panel'>{{fa-icon 'times'}}</a> <a href {{action "close"}} class='close-panel'>{{fa-icon 'times'}}</a>
</div> </div>
{{/if}} {{/if}}
<div class='panel-body' style={{bodyStyle}}> <div class='panel-body'>
{{yield}} <div class='panel-body-contents'>
{{yield}}
</div>
</div> </div>
{{/if}} {{/if}}