Textbox Redesign

[LeonCheung]

I've been feeling that the textbox section deserves a retouch to solve some issues like what @abc16361 mentioned in #7370, and hopefully bring something good to the future potential.

Basically, two options, move all to one side or to the top. Here is a quick visualization, playing in different modes and layouts:

Presenting order in the GIF below:

1. Current version.
2. Move all to the left side.
3. Move all to the left side in translation mode using layout 3.
4. Move all to the top.
5. Move all to the top in translation mode.

Both ways have PROS and CONS.

For the Left-side version:

PROS:
The "Text" column in the List view might be visually aligned well with the textbox.

CONS:

1. Too crowded on that side;
2. Very hard to have a proper arrangement of elements.
3. Not user-friendly in R-to-L mode.
4. The amount of visible elements may have to depend on the height of the textbox.

For the Top bar version:

PROS:

1. Maximize the textbox width, especially a great advantage for translation mode;
2. It looks tidy and pretty under List view since they have both left and right borders aligned;
3. The visible elements don't have to depend on the textbox height;
4. Great potential for adding more stuff because obviously there is some space for more extensions, toolings, or even icons.

CONS:
The new bar would take up some UI space. (fairly acceptable, however)

[abc16361]

For the Top bar version
Putting them on the top is a good idea. If it needs to save space, text labels could be set on the same line, and buttons can be resized or use icon buttons.

[LeonCheung]

Yep, either top or bottom. :) But top is the best option because it would shorten mouse movement between the textbox and waveform, which is the most frequent movement among all.