swing-intellij-dialog-style

star 667

Use when modifying EasyPostman Swing dialogs, popups, wizards, or modal flows to better match IntelliJ IDEA or FlatLaf settings-style visual hierarchy, especially when read-only panels, editable inputs, steps, scroll panes, footers, or action choices are visually unclear.

lakernote By lakernote schedule Updated 6/10/2026

name: swing-intellij-dialog-style description: Use when modifying EasyPostman Swing dialogs, popups, wizards, or modal flows to better match IntelliJ IDEA or FlatLaf settings-style visual hierarchy, especially when read-only panels, editable inputs, steps, scroll panes, footers, or action choices are visually unclear.

Swing IntelliJ Dialog Style

Use this skill for EasyPostman Swing dialogs that should feel closer to IntelliJ IDEA: quiet, dense, readable, and clearly separated by behavior rather than decoration.

Use With

  • Read swing-flatlaf-miglayout-principles first when the change touches form layout, focus rings, clipping, nested panels, scroll panes, or section borders.
  • Read fontsutil-font-usage when changing any label, title, option, table, renderer, or dialog font size.
  • Keep reusable controls, icons, fonts, and colors in easy-postman-ui; keep host dialog composition in easy-postman-app.

Core Style

  • Prefer dialog-surface backgrounds plus thin separators over large banner headers or heavy cards.
  • Treat dialog chrome as separate from app frame/tool-window chrome:
    • Use ModernColors.getDialogChromeBackgroundColor() through ToolWindowSurfaceStyle.applyDialogWindowChrome(...), applyDialogSurface(...), applyDialogSection(...), and applyDialogFooter(...).
    • Do not use or change ModernColors.getWindowChromeBackgroundColor() for dialogs; that belongs to the main frame/menu/title chrome.
    • Light dialog chrome is expected to read near 247,248,249; dark dialog chrome near 25,26,28.
  • Do not force full dialog window chrome on sidebar pop-out managers that already own their content header, such as Globals or Cookies. Use ToolWindowSurfaceStyle.skipDialogWindowChrome(dialog) and set the content panel directly; avoid ToolWindowChrome.wrapDialogToolWindow(...) there because it adds an extra titlebar/card shell.
  • Keep the split of responsibility clear:
    • FlatLaf .properties and ModernColors own theme tokens and standard component defaults.
    • ToolWindowSurfaceStyle owns reusable styling for custom composite dialog surfaces, scroll panes, list blank areas, headers, and footers.
    • Individual dialog classes should only express layout or renderer behavior that is local to that dialog.
  • Keep headers compact: small icon or no icon, title at FontsUtil.getDefaultFontWithOffset(Font.BOLD, +1) or lower, secondary metadata at -1.
  • Use one outer border strategy per content region. For IDEA-like sections, use a light line border plus modest inner padding such as 8,10,8,10.
  • Avoid nested card-in-card layouts. Use rows, split content, or thin MatteBorder separators.
  • Use ModernButtonFactory for dialog footer buttons so Cancel/OK/Apply/primary actions match settings dialogs.
  • Use ToolWindowSurfaceStyle.applyDialogFooter(...) for the footer and applyDialogSurface(...) for outer containers.
  • Use ToolWindowSurfaceStyle.applyDialogSection(...) for bordered non-edit sections instead of applyCard(...) or applySectionCard(...).
  • Use ToolWindowSurfaceStyle.applyTextComponentDialogSurface(...) for read-only text viewers inside dialogs.

Read-Only vs Editable

Make editable controls visibly different from read-only output.

  • Read-only output areas:
    • JEditorPane or viewer components should usually use dialog-surface background, no strong input border, and secondary text where appropriate.
    • Add bottom padding inside scroll content so text does not collide with separators or fixed bottom sections.
    • Keep scrollbars narrow and low-contrast when the content is informational.
  • Non-edit dialog content:
    • Do not paint large white cards just to group content. Match the dialog chrome background and use separators or applyDialogSection(...) when grouping is necessary.
    • Dialog JList blank areas and read-only list rows should use ToolWindowSurfaceStyle.applyDialogList(...) or applyDialogListScrollPane(...); do not restyle them with applyListCard(...) inside dialogs.
    • Reserve white/light input color for actual editable controls such as JTextField, JTextArea, JPasswordField, JComboBox, and editable table cells.
  • Editable inputs:
    • Use input background, visible medium border, and inner padding.
    • Add focus feedback, usually primary-color border on focus.
    • If the surrounding area contains mostly read-only content, label editable sections with a small edit icon such as icons/edit.svg.
    • Preserve FlatLaf focus visibility; do not hide focus rings with wrapper borders.

Typical editable text-area pattern:

ToolWindowSurfaceStyle.applyDialogScrollPane(scrollPane);
textArea.setBorder(new EmptyBorder(5, 8, 5, 8));
scrollPane.setBorder(BorderFactory.createCompoundBorder(
        BorderFactory.createLineBorder(focused ? ModernColors.getPrimary() : ModernColors.getBorderMediumColor()),
        BorderFactory.createEmptyBorder(1, 1, 1, 1)
));

Wizard/Step Areas

  • Keep step indicators compact and secondary to the content.
  • Use small circular badges, muted inactive labels, and a clear active state.
  • Do not let the step strip consume the vertical space needed by the main content.
  • If current progress is not actionable, keep it visually quieter than form inputs and action choices.

Scroll And Fixed Sections

  • When a scrollable read-only area sits above a fixed editable section, separate them with a thin MatteBorder and add top padding to the fixed section.
  • Add bottom padding to the scrollable content so the final line is not visually clipped by the separator.
  • Use a modest scrollbar width, for example 8px, for compact informational panes.
  • Avoid making scrollbars or empty gutters the strongest visual element in the dialog.
  • If a scroll pane contains an editable text area, style the scroll pane as an input border; if it contains read-only content, use dialog-surface scroll styling plus a subtle separator/border only when needed.
  • Use JSplitPane only when the user needs to resize sections. For fixed two-column dialog layouts, prefer MigLayout columns and gaps so the split divider does not become a visible artifact.

Action Choices

  • For radio-button strategy sections, use a light bordered section with compact title, radio label, and muted description.
  • Keep option descriptions smaller with FontsUtil.getDefaultFontWithOffset(Font.ITALIC, -3) or similar.
  • Dangerous options can use ModernColors.getError() for the radio label, but avoid large warning blocks unless the action is destructive and easy to trigger.

I18n And Icons

  • User-visible text must use I18nUtil.getMessage(...) or the appropriate shared i18n helper.
  • Remove decorative emoji from dialog status text; use structure, color, and icons instead.
  • Use UI-owned generic icons such as icons/edit.svg through IconUtil.createThemed(...).

Verification

  • Compile the app module: mvn -q -pl easy-postman-app -am -DskipTests compile.
  • Run focused existing tests when a component has one, for example StepIndicatorTest.
  • For editable fields, manually reason or visually verify that the default state, focused state, and disabled state are distinguishable.
  • Check Chinese and English labels for truncation and excessive fixed-width assumptions.
Install via CLI
npx skills add https://github.com/lakernote/EasyPostman --skill swing-intellij-dialog-style
Repository Details
star Stars 667
call_split Forks 54
navigation Branch main
article Path SKILL.md
More from Creator