Approach to UI adjustments - yumunet/WoditorTranslationGallery GitHub Wiki

This page provides advice and tips on UI adjustments.

I strongly recommend using Visual Studio to edit dialog boxes: Edit dialog boxes with Visual Studio

Advice

The most important thing when adjusting the UI is to preserve the original UI design as much as possible.

The original UI has meaning. Related controls are adjacent to each other, and each control is aligned to the left for easy viewing. If you change this carelessly, the UI will become difficult to understand.

Steps

Basically, follow the steps below to make adjustments:

  1. Use the space around the control to widen its width as much as possible.
  2. If that's not enough, calculate the amount needed, widen the dialog box by that amount, and shift the controls on the right side of the expanded control to the right by the same amount.
  3. If the dialog box becomes too wide or the UI balance is poor:
    1. If it's a button or check box, consider making it multi-line.
    2. Consider whether controls arranged horizontally can be rearranged vertically.

Regarding 3-2, the Effects command insertion window in the English version is a good example:

Effects comparison

Also, consider shortening the translated text itself.

Resizing the command insertion window

The command insertion window is based on dialog box 204, and the dialog boxes for each command are incorporated into it.

To change the size of the insertion window, resize dialog box 204 and its control 1624, and then resize the dialog boxes for each command to the same size (otherwise, gray margins will be displayed).

For the dialog box IDs of the command insertion windows, see Dialog box list#commands.