Teammates: Rich text boxes: make the toolbar appear over existing content

[damithc]

Currently, when the user clicks on a rich text form field, the formatting toolbar is inserted above the form field, shifting all elements below it. When the user clicks outside the form field after editing it, the toolbar disappears and elements below it shifts again. This jumping of page content gets in the way of a smooth user user experience. It can also result in 'mishit clicks' i.e. user tries to click a button but ends up clicking something else because content moves with the click.

Options:

1. make the toolbar stay fixed all the time
2. make the toolbar appear on top of the existing content above the form field (I believe this is the default mode but we changed it to the current behavior in a misguided attempt to improve user experience -- my bad 😢 )

Before clicking:

After clicking:

[HirdayGupta]

@damithc Github isn't tracking changes in src/main/webapp/js/instructorFeedbackEdit.js.
When I tried to add using git add it says the file is part of .gitignore. Why is this so? And should I use the git add -f command to override this?

[wkurniawan07]

@HirdayGupta you need to override the .es6 file.

[amarlearning]

@damithc can I work on this issue?

[damithc]

@HirdayGupta are you working on this?

[HirdayGupta]

@damithc yes I am. I'm working on the method 1 (make the toolbar fixed all the time).

[damithc]

@damithc yes I am. I'm working on the method 1 (make the toolbar fixed all the time).

@amarlearning in that case you can try to other alternative if you want. We can compare the two approaches and choose the better one.

[amarlearning]

@damithc make the toolbar appear on top of the existing content above the form field (I believe this is the default mode but we changed it to the current behavior in a misguided attempt to improve user experience -- my bad :cry: )

Not able to understand, can you please a little more descriptive.

[damithc]

Not able to understand, can you please a little more descriptive.

Like this:

[HirdayGupta]

@damithc referring to the screenshot you posted above, is it a mock-up? or did you code it up? If it is the latter, would you be able to share your approach with me? I ask as I am finding it tricky to implement the second functionality correctly.

My current approach is to use JavaScript to override the CSS Position property for the div that contains the editor. However, I am unable to figure out the correct combination of position properties that would make this possible.

[damithc]

@HirdayGupta It is a mockup, but it's also how the code worked when rich text support was introduced (by @belyabl9 last summer). So you should be able to find the code if you look through the git history of a relevant file or dig up the original PR by @belyabl9 I believe the library already has support for this mode without you having to write a lot of extra code yourself.

[damithc]

See https://github.com/TEAMMATES/teammates/issues/5775
That is the change I'm trying to reverse now :-p

[HirdayGupta]

@damithc Thanks! simply removing fixed_toolbar_container implements the desired behaviour! 😆

Will submit a PR with the fix soon.

EDIT: Attached GIF is what the hovering behaviour looks like. You can compare it with the fixed behaviour I have implemented in #7421 and let me know what you think? Or would you rather I submitted a PR for the hover behaviour first?