codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2025-02-17 04:01:29 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Have menu panels show up on top of the composer, stop composer at header

Browse source
This commit is contained in:
Robin Ward 2015-09-01 17:33:37 -04:00
parent 1bd0f5b015
commit f5cbaf5609
4 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/assets/javascripts/discourse/views/composer.js.es6
View file

@ -60,23 +60,22 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
},
resize: function() {
const self = this;
Ember.run.scheduleOnce('afterRender', function() {
const h = $('#reply-control').height() || 0;
self.movePanels.apply(self, [h + "px"]);
Ember.run.scheduleOnce('afterRender', () => {
let h = $('#reply-control').height() || 0;
this.movePanels(h + "px");
// Figure out the size of the fields
const $fields = self.$('.composer-fields');
const $fields = this.$('.composer-fields');
let pos = $fields.position();
if (pos) {
self.$('.wmd-controls').css('top', $fields.height() + pos.top + 5);
this.$('.wmd-controls').css('top', $fields.height() + pos.top + 5);
}
// get the submit panel height
pos = self.$('.submit-panel').position();
pos = this.$('.submit-panel').position();
if (pos) {
self.$('.wmd-controls').css('bottom', h - pos.top + 7);
this.$('.wmd-controls').css('bottom', h - pos.top + 7);
}
});
@ -117,20 +116,25 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
},
_enableResizing: function() {
const $replyControl = $('#reply-control'),
self = this;
const $replyControl = $('#reply-control');
const resizer = function() {
Ember.run(function() {
self.resize();
});
const runResize = () => {
Ember.run(() => this.resize());
};
$replyControl.DivResizer({
resize: resizer,
onDrag(sizePx) { self.movePanels.apply(self, [sizePx]); }
maxHeight(winHeight) {
const $header = $('header.d-header');
const headerOffset = $header.offset();
const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
const headerHeight = parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 5);
return winHeight - headerHeight;
},
resize: runResize,
onDrag: (sizePx) => this.movePanels(sizePx)
});
afterTransition($replyControl, resizer);
afterTransition($replyControl, runResize);
this.set('controller.view', this);
positioningWorkaround(this.$());

4
app/assets/stylesheets/common/base/menu-panel.scss
View file

@ -24,6 +24,10 @@
padding: 0.5em;
width: 300px;
hr {
margin: 3px 0;
}
.panel-header {
position: absolute;
right: 20px;

2
app/assets/stylesheets/desktop/compose.scss
View file

@ -112,7 +112,7 @@
}
transition: height 0.4s ease;
width: 100%;
z-index: 1039;
z-index: 999;
height: 0;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
bottom: 0;

7
vendor/assets/javascripts/div_resizer.js vendored
View file

@ -42,7 +42,12 @@ performDrag = function(e, opts) {
thisMousePos = mousePosition(e).y;
size = originalDivHeight + (originalPos - thisMousePos);
lastMousePos = thisMousePos;
size = Math.min(size, $(window).height());
var maxHeight = $(window).height();
if (opts.maxHeight) {
maxHeight = opts.maxHeight(maxHeight);
}
size = Math.min(size, maxHeight);
size = Math.max(min, size);
sizePx = size + "px";
if (typeof opts.onDrag === "function") {