Bootstrap Changes to Advanced Editor and Attachments Form

I changed the CSS and Javascript in the "Advanced Editor" to clean it up. This is also the editor seen in "New Thread" and "New Reply". Basically I got rid of the mouseover style changes which were messed up due to vB legacy JS code from a decade ago.

While doing this change, I then completed the first phase toward changing the attachment form to a Bootstrap Modal, but did not complete the change because I need to get rid of all the table elements first (there are quite a few). However, I did manage to add some Bootstrap classes and cleaned this form up as well:

999×769 165 KB

I don't want to spend too much time on this, because I plan to change this entire method of uploading attachments to the forums, but this does clean it up a bit.

In addition, while I was at this "editor project".. I made a lot of Bootstrap-related changes to all editors (new thread, quick reply, advanced and edit post).

It's still not so great; but it is much better than it was (had not really updated these editors in around eight years, LOL)

Looking good, Neo.
BTW, the AdvancedEditor is missing a Colors drop-down icon.

Thanks! Will look into it!

Yeah, that color picker works in the "Quick Reply Editor" but not the "Advanced Editor" ... the code is the same and there are no Javascript errors, so it is disabled until I get around to fixing it.

I have on idea why it works in one editor and not the other with the same code with no errors. Will have to put it on the TODO list.

Just use the Quick Editor when you need colors, or just add them by hand if you really need them blah blah

<if condition="$show['color_bbcode'] AND FALSE">
  <td>
    <img
      src="$stylevar[imgdir_editor]/separator.gif"
      width="6"
      height="20"
      alt="Editor Icon"
    />
  </td>
  <td>
    <div
      class="imagebutton"
      id="{$editorid}_popup_forecolor"
      title="$vbphrase[colors]"
    >
      <table style="border-spacing:0;border:0">
        <tr>
          <td>
            <div id="{$editorid}_color_out">
              <span
                ><img
                  src="$vboptions[cleargifurl]"
                  id="{$editorid}_color_bar"
                  alt="Color Bar"
                  style="background-color:black"
                  width="21"
                  height="16"
              /></span>
            </div>
          </td>
          <td class="alt_pickbutton">
            <img
              src="$stylevar[imgdir_editor]/menupop.gif"
              alt="Menu"
              width="11"
              height="16"
            />
          </td>
        </tr>
      </table>
    </div>
  </td>
</if>

OBTW, I forgot to mention.....

The new formats for the attachments are drag and drop, so you can drag into each one of the attachment areas from your desktop and drop into the form.

I am working on the next phase of this to create a Bootstrap modal for uploading.

Looks like this and is close to working well enough to make it available. Soon, I will be an "expert" a Bootstrap modals, LOL

1000×794 61.6 KB

Have been working for a day on getting the "manage attachment" popup to work perfectly as a Bootstrap modal; but I cannot get it to work perfectly 100% as a modal, so I have modified the popup to look like a modal, but it is really just a page popup for now:

735×638 44.8 KB

This works for "new reply" and "edit post" and "advanced editor" but does not work (yet) in the quick reply editor (QRE).

However, it is much better than before, not perfect as modal or working in QRE yet, but drag and drop from the desktop works well.

A bit bored with this for now; I will move on to another modal, perhaps the color picker or smilie picker, or maybe something else.

Have a great weekend!

OBTW, here is what the "not working 100% modal looks like" ....

1072×794 65.2 KB

The reason it does not work perfectly, is that the editor page does not immediately update when a new attachment is added via the modal. This will require more reactive code (like VueJS) or maybe some additional jQuery; but since it works perfectly fine as "not a modal" right now, I'm going to let it stay as it for the time being until I get better at modal development.

Compare the image in the last post of "the modal" with the "non-modal modal" (the current implementation of the attachment popup) below:

972×780 157 KB

It's quite similar, but the modal looks better but since the modal does not play perfectly with the editor page, will stay with the "modal-looking popup window" for now.....