Skip to content

DIALOG_STYLE_GUIDE.md

Latest commit

 

History

History
119 lines (83 loc) · 3.38 KB

DIALOG_STYLE_GUIDE.md

File metadata and controls

119 lines (83 loc) · 3.38 KB

Dialog Style Guide

All new dialogs using CustomDialog should follow these patterns for consistent appearance. CSS classes are defined in /src/main/webapp/styles/grapheditor.css.

Auto-Height

Pass null for the height parameter in showDialog(). The Dialog constructor measures elt.scrollHeight after the element is in the DOM and sizes the dialog automatically. Never compute dialog heights manually with height += N increments.

var dlg = new CustomDialog(this, div, okFn, null, mxResources.get('export'), helpLink);
this.showDialog(dlg.container, 360, null, true, true);

Spacing (handled by CustomDialog and Dialog)

  • Dialog padding: 24px on all sides (.geDialog CSS)
  • Buttons margin-top: 34px (default in CustomDialog)
  • Container padding-bottom: 10px (CustomDialog adds this to prevent margin collapse)
  • Dialog chrome: Dialog constructor adds 48px to both width and height for padding

These produce equal visual spacing above (34px) and below (34px = 10px + 24px) the button row. Do not override these values in individual dialogs.

Sections (geDialogSection)

Group related controls in rounded section containers:

var section = document.createElement('div');
section.className = 'geDialogSection';
// ... add rows to section ...
div.appendChild(section);

Form Rows (geDialogFormRow)

Use for label + input pairs (text fields, selects):

var row = document.createElement('div');
row.className = 'geDialogFormRow';

var lbl = document.createElement('span');
lbl.className = 'geDialogFormLabel';
mxUtils.write(lbl, mxResources.get('zoom') + ':');
row.appendChild(lbl);

var input = document.createElement('input');
input.setAttribute('type', 'text');
row.appendChild(input);

section.appendChild(row);

Checkbox Rows (geDialogCheckRow)

Use addCheckbox with useCheckRow=true (9th parameter) for consistent checkbox layout with flex alignment:

var cb = this.addCheckbox(section, mxResources.get('shadow'),
    false, null, null, null, null, null, true);

For indented sub-options (e.g., "Layers" under "Lightbox"):

cb.checkRow.style.paddingLeft = '24px';

Inline Fields (geDialogInlineFields / geDialogInlineField)

Use for side-by-side fields (e.g., Width + Height):

var row = document.createElement('div');
row.className = 'geDialogInlineFields';

var field = document.createElement('div');
field.className = 'geDialogInlineField';
// ... add label + input to field ...
row.appendChild(field);

section.appendChild(row);

Dialog Title

Center-aligned <h3> with standard margins:

var hd = document.createElement('h3');
mxUtils.write(hd, title);
hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:10px';
div.appendChild(hd);

Edit Button (Lightbox Dialogs)

Use addEditButton which creates a geDialogCheckRow with an indented select:

var editSection = this.addEditButton(optSection, lightbox);
var edit = editSection.getEditInput();

Dark Mode

All CSS uses light-dark() for color values. Never hardcode colors in JS — use the CSS classes which handle both modes automatically.

Testing Dialogs

Use ?dev=1&ui=classic to keep the menubar visible regardless of window size. Test with both single-page and multi-page diagrams, as extra controls appear when multiple pages exist.