REFACTOR: composer to use flexbox

app/assets/javascripts/discourse/components/composer-body.js.es6

@@ -15,6 +15,7 @@ export default Ember.Component.extend(KeyEnterEscape, {
                       'composer.createdPost:created-post',
                       'composer.creatingTopic:topic',
                       'composer.whisper:composing-whisper',
+                      'showPreview:show-preview:hide-preview',
                       'currentUserPrimaryGroupClass'],
 
   @computed("currentUser.primary_group_name")
@@ -41,19 +42,6 @@ export default Ember.Component.extend(KeyEnterEscape, {
 
       const h = $('#reply-control').height() || 0;
       this.movePanels(h + "px");
-
-      // Figure out the size of the fields
-      const $fields = this.$('.composer-fields');
-      const fieldPos = $fields.position();
-      if (fieldPos) {
-        this.$('.wmd-controls').css('top', $fields.height() + fieldPos.top + 5);
-      }
-
-      // get the submit panel height
-      const submitPos = this.$('.submit-panel').position();
-      if (submitPos) {
-        this.$('.wmd-controls').css('bottom', h - submitPos.top + 7);
-      }
     });
   },
 

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -1,5 +1,5 @@
 import userSearch from 'discourse/lib/user-search';
-import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
+import { default as computed, on } from 'ember-addons/ember-computed-decorators';
 import { linkSeenMentions, fetchUnseenMentions } from 'discourse/lib/link-mentions';
 import { linkSeenCategoryHashtags, fetchUnseenCategoryHashtags } from 'discourse/lib/link-category-hashtags';
 import { linkSeenTagHashtags, fetchUnseenTagHashtags } from 'discourse/lib/link-tag-hashtag';
@@ -18,11 +18,9 @@ import { lookupCachedUploadUrl,
          cacheShortUploadUrl } from 'pretty-text/image-short-url';
 
 export default Ember.Component.extend({
-  classNames: ['wmd-controls'],
-  classNameBindings: ['showToolbar:toolbar-visible', ':wmd-controls', 'showPreview', 'showPreview::hide-preview'],
+  classNameBindings: ['showToolbar:toolbar-visible', ':wmd-controls'],
 
   uploadProgress: 0,
-  showPreview: true,
   _xhr: null,
 
   @computed
@@ -30,35 +28,6 @@ export default Ember.Component.extend({
     return `[${I18n.t('uploading')}]() `;
   },
 
-  @on('init')
-  _setupPreview() {
-    const val = (this.site.mobileView ? false : (this.keyValueStore.get('composer.showPreview') || 'true'));
-    this.set('showPreview', val === 'true');
-
-    this.appEvents.on('composer:show-preview', () => {
-      this.set('showPreview', true);
-    });
-
-    this.appEvents.on('composer:hide-preview', () => {
-      this.set('showPreview', false);
-    });
-  },
-
-  @computed('site.mobileView', 'showPreview')
-  forcePreview(mobileView, showPreview) {
-    return mobileView && showPreview;
-  },
-
-  @computed('showPreview')
-  toggleText: function(showPreview) {
-    return showPreview ? I18n.t('composer.hide_preview') : I18n.t('composer.show_preview');
-  },
-
-  @observes('showPreview')
-  showPreviewChanged() {
-      this.keyValueStore.set({ key: 'composer.showPreview', value: this.get('showPreview') });
-  },
-
   @computed
   markdownOptions() {
     return {
@@ -363,7 +332,7 @@ export default Ember.Component.extend({
     });
 
     if (this.site.mobileView) {
-      this.$(".mobile-file-upload").on("click.uploader", function () {
+      $("#reply-control .mobile-file-upload").on("click.uploader", function () {
         // redirect the click on the hidden file input
         $("#mobile-uploader").click();
       });
@@ -373,29 +342,28 @@ export default Ember.Component.extend({
   },
 
   _optionsLocation() {
-    // long term we want some smart positioning algorithm in popup-menu
-    // the problem is that positioning in a fixed panel is a nightmare
-    // cause offsetParent can end up returning a fixed element and then
-    // using offset() is not going to work, so you end up needing special logic
-    // especially since we allow for negative .top, provided there is room on screen
-    const myPos = this.$().position();
-    const buttonPos = this.$('.options').position();
+    const composer = $("#reply-control");
+    const composerOffset = composer.offset();
+    const composerPosition = composer.position();
 
-    const popupHeight = $('#reply-control .popup-menu').height();
-    const popupWidth = $('#reply-control .popup-menu').width();
+    const buttonBarOffset = $('#reply-control .d-editor-button-bar').offset();
+    const optionsButton = $('#reply-control .d-editor-button-bar .options');
 
-    var top = myPos.top + buttonPos.top - 15;
-    var left = myPos.left + buttonPos.left - (popupWidth/2);
+    const popupMenu = $("#reply-control .popup-menu");
+    const popupWidth = popupMenu.outerWidth();
+    const popupHeight = popupMenu.outerHeight();
 
-    const composerPos = $('#reply-control').position();
+    const headerHeight = $(".d-header").outerHeight();
 
-    if (composerPos.top + top - popupHeight < 0) {
-      top = top + popupHeight + this.$('.options').height() + 50;
+    let left = optionsButton.offset().left - composerOffset.left;
+    let top = buttonBarOffset.top - composerOffset.top - popupHeight + popupMenu.innerHeight();
+
+    if (top + composerPosition.top - headerHeight - popupHeight < 0) {
+      top += popupHeight + optionsButton.outerHeight();
     }
 
-    var replyWidth = $('#reply-control').width();
-    if (left + popupWidth > replyWidth) {
-      left = replyWidth - popupWidth - 40;
+    if (left + popupWidth > composer.width()) {
+      left -= popupWidth - optionsButton.outerWidth();
     }
 
     return { position: "absolute", left, top };
@@ -493,7 +461,7 @@ export default Ember.Component.extend({
   @on('willDestroyElement')
   _unbindUploadTarget() {
     this._validUploads = 0;
-    this.$(".mobile-file-upload").off("click.uploader");
+    $("#reply-control .mobile-file-upload").off("click.uploader");
     this.messageBus.unsubscribe("/uploads/composer");
     const $uploadTarget = this.$();
     try { $uploadTarget.fileupload("destroy"); }
@@ -504,8 +472,6 @@ export default Ember.Component.extend({
   @on('willDestroyElement')
   _composerClosed() {
     this.appEvents.trigger('composer:will-close');
-    this.appEvents.off('composer:show-preview');
-    this.appEvents.off('composer:hide-preview');
     Ember.run.next(() => {
       $('#main-outlet').css('padding-bottom', 0);
       // need to wait a bit for the "slide down" transition of the composer
@@ -541,12 +507,12 @@ export default Ember.Component.extend({
       }
     },
 
-    showUploadModal(toolbarEvent) {
-      this.sendAction('showUploadSelector', toolbarEvent);
+    togglePreview() {
+      this.sendAction('togglePreview');
     },
 
-    togglePreview() {
-      this.toggleProperty('showPreview');
+    showUploadModal(toolbarEvent) {
+      this.sendAction('showUploadSelector', toolbarEvent);
     },
 
     extraButtons(toolbar) {