Use one button style and an icon-only dock

Buttons no longer have a primary style: every button is the translucent
outlined surface that brightens on hover, and only an icon button's icon
takes the accent color. The title screen's dock shows just its icons.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
2026-09-27 19:06:01 +02:00
co-authored by claude
parent 2f4ea77e6f
commit f0971ff128
5 changed files with 32 additions and 62 deletions
@@ -7,8 +7,7 @@ import org.saturnclient.ui.RenderScope;
import org.saturnclient.ui.resources.Fonts;
/**
* A text button: primary (filled with the accent color) for the main action,
* or secondary (a translucent, outlined surface) for the rest.
* A text button: a translucent, outlined surface that brightens on hover.
*/
public class Button extends Element {
public static final int HEIGHT = 40;
@@ -16,12 +15,10 @@ public class Button extends Element {
private static final float TEXT_SCALE = 0.72f;
private final String text;
private final boolean primary;
private final Runnable onClick;
public Button(String text, boolean primary, Runnable onClick) {
public Button(String text, Runnable onClick) {
this.text = text;
this.primary = primary;
this.onClick = onClick;
this.width = (int) (Fonts.getWidth(text, Theme.FONT.value) * TEXT_SCALE) + 48;
this.height = HEIGHT;
@@ -30,28 +27,20 @@ public class Button extends Element {
@Override
public void render(RenderScope renderScope, ElementContext ctx) {
boolean hovered = ctx.isHovering();
drawSurface(renderScope, width, height, primary, hovered);
drawSurface(renderScope, width, height, hovered);
int textX = (width - (int) (Fonts.getWidth(text, Theme.FONT.value) * TEXT_SCALE)) / 2;
renderScope.drawText(TEXT_SCALE, text, textX, Field.textY(height, TEXT_SCALE), Theme.FONT.value,
primary ? Theme.ACCENT_FG.value : hovered ? Theme.FOREGROUND.value : Theme.PRIMARY_FG.value);
hovered ? Theme.FOREGROUND.value : Theme.PRIMARY_FG.value);
}
/**
* The button's surface, shared with {@link IconButton}.
*/
static void drawSurface(RenderScope renderScope, int width, int height, boolean primary, boolean hovered) {
if (primary) {
// Lighten the accent on hover by laying white over it
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, Theme.ACCENT.value);
if (hovered) {
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 0x26FFFFFF);
}
} else {
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
hovered ? Theme.withAlpha(0.9f, Theme.PRIMARY.value) : Theme.getPanelBg(),
Theme.withAlpha(hovered ? 0.25f : 0.1f, Theme.FOREGROUND.value));
}
static void drawSurface(RenderScope renderScope, int width, int height, boolean hovered) {
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
hovered ? Theme.withAlpha(0.9f, Theme.PRIMARY.value) : Theme.getPanelBg(),
Theme.withAlpha(hovered ? 0.25f : 0.1f, Theme.FOREGROUND.value));
}
@Override
@@ -7,8 +7,8 @@ import org.saturnclient.ui.ElementContext;
import org.saturnclient.ui.RenderScope;
/**
* A square secondary {@link Button} showing an icon, which turns the accent
* color on hover.
* A square {@link Button} showing an icon, which turns the accent color on
* hover.
*/
public class IconButton extends Element {
private static final float ICON_RATIO = 0.48f;
@@ -26,7 +26,7 @@ public class IconButton extends Element {
@Override
public void render(RenderScope renderScope, ElementContext ctx) {
boolean hovered = ctx.isHovering();
Button.drawSurface(renderScope, width, height, false, hovered);
Button.drawSurface(renderScope, width, height, hovered);
int size = (int) (Math.min(width, height) * ICON_RATIO);
renderScope.drawTexture(icon, (width - size) / 2, (height - size) / 2, 0, 0, size, size,