move layout constants into separate class,

fix gradient behind sidebar, change layout of buttons and options panes, fix overlapping ui elements, fix scissor areas, make spacings and arrangement consistent
CaffeineMC · Oct 27, 2024 · 6788ca7 · 6788ca7
1 parent fe5b655
commit 6788ca7
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 62 deletions.
diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/Colors.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/Colors.java
@@ -8,12 +8,13 @@
 public class Colors {
     public static final int THEME = 0xFF94E4D3;
     public static final int THEME_LIGHTER = 0xFFCCFDEE;
-    public static final int THEME_DARKER = 0xF06f9090;
+    // public static final int THEME_DARKER = 0xF06f9090;
+    public static final int THEME_DARKER = 0xFF7A9E9E;
     public static final int FOREGROUND = 0xFFFFFFFF;
     public static final int FOREGROUND_DISABLED = 0xFFAAAAAA;
 
     private static final float LIGHTEN_FACTOR = 0.3f;
-    private static final float DARKEN_FACTOR = -0.3f;
+    private static final float DARKEN_FACTOR = -0.23f;
 
     public static int darken(int color) {
         return adjust(color, DARKEN_FACTOR);

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/Layout.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/Layout.java
@@ -0,0 +1,13 @@
+package net.caffeinemc.mods.sodium.client.gui;
+
+public class Layout {
+    public static final int BUTTON_SHORT = 20;
+    public static final int BUTTON_LONG = 65;
+    public static final int OUTER_MARGIN = 10;
+    public static final int BUTTON_SHORT_BOTTOM_Y = BUTTON_SHORT + OUTER_MARGIN;
+    public static final int INNER_MARGIN = 5;
+    public static final int SCROLLBAR_WIDTH = 5;
+    public static final int TEXT_LEFT_PADDING = 8;
+    public static final int TEXT_PARAGRAPH_SPACING = 8;
+    public static final int TEXT_LINE_SPACING = 2;
+}
diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/VideoSettingsScreen.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/VideoSettingsScreen.java
@@ -9,7 +9,6 @@
 import net.caffeinemc.mods.sodium.client.data.fingerprint.HashedFingerprint;
 import net.caffeinemc.mods.sodium.client.console.Console;
 import net.caffeinemc.mods.sodium.client.console.message.MessageLevel;
-import net.caffeinemc.mods.sodium.client.gui.options.control.Control;
 import net.caffeinemc.mods.sodium.client.gui.options.control.ControlElement;
 import net.caffeinemc.mods.sodium.client.gui.prompt.ScreenPrompt;
 import net.caffeinemc.mods.sodium.client.gui.prompt.ScreenPromptable;
@@ -41,14 +40,13 @@
 import java.util.List;
 import java.util.stream.Stream;
 
-// TODO: scrolling in the page list, the options themselves, and the tooltip if necessary
-// TODO: make the search bar work
 // TODO: constrain the tooltip to its safe area if it's too big, then show a scroll bar if it's still too big
+// TODO: scrolling the tooltip?
+// TODO: make the search bar work
 // TODO: wrap options within groups in two columns
-// TODO: stop the options from overlapping the bottom or top buttons
 // TODO: make the mod config headers interactive: only show one mod's pages at a time, click on a mod header to open that mod's first settings page and close the previous mod's page list
-// TODO: the donation button is gone when the search button is clicked?
-// TODO: display each mod's version somewhere (truncate if too long?)
+// TODO: truncate mod names and version numbers if too long
+// TODO: change the scroll bar colors to make it look better against a lighter gray background
 public class VideoSettingsScreen extends Screen implements ScreenPromptable {
     private final List<ControlElement<?>> controls = new ArrayList<>();
 
@@ -193,14 +191,17 @@ private void rebuildGUI() {
         this.rebuildGUIOptions();
 
         this.pageList = new PageListWidget(this, new Dim2i(0, 0, 125, this.height));
-        this.undoButton = new FlatButtonWidget(new Dim2i(270, this.height - 30, 65, 20), Component.translatable("sodium.options.buttons.undo"), this::undoChanges, true, false);
-        this.applyButton = new FlatButtonWidget(new Dim2i(130, this.height - 30, 65, 20), Component.translatable("sodium.options.buttons.apply"), this::applyChanges, true, false);
-        this.closeButton = new FlatButtonWidget(new Dim2i(200, this.height - 30, 65, 20), Component.translatable("gui.done"), this::onClose, true, false);
-        this.donateButton = new FlatButtonWidget(new Dim2i(this.width - 128, 6, 100, 20), Component.translatable("sodium.options.buttons.donate"), this::openDonationPage, true, false);
-        this.hideDonateButton = new FlatButtonWidget(new Dim2i(this.width - 26, 6, 20, 20), Component.literal("x"), this::hideDonationButton, true, false);
+
+        this.undoButton = new FlatButtonWidget(new Dim2i(270, Layout.INNER_MARGIN, Layout.BUTTON_LONG, Layout.BUTTON_SHORT), Component.translatable("sodium.options.buttons.undo"), this::undoChanges, true, false);
+        this.applyButton = new FlatButtonWidget(new Dim2i(130, Layout.INNER_MARGIN, Layout.BUTTON_LONG, Layout.BUTTON_SHORT), Component.translatable("sodium.options.buttons.apply"), this::applyChanges, true, false);
+        this.closeButton = new FlatButtonWidget(new Dim2i(200, Layout.INNER_MARGIN, Layout.BUTTON_LONG, Layout.BUTTON_SHORT), Component.translatable("gui.done"), this::onClose, true, false);
+
+        this.donateButton = new FlatButtonWidget(new Dim2i(this.width - 128, Layout.INNER_MARGIN, 100, Layout.BUTTON_SHORT), Component.translatable("sodium.options.buttons.donate"), this::openDonationPage, true, false);
+        this.hideDonateButton = new FlatButtonWidget(new Dim2i(this.width - 26, Layout.INNER_MARGIN, Layout.BUTTON_SHORT, Layout.BUTTON_SHORT), Component.literal("x"), this::hideDonationButton, true, false);
 
         if (SodiumClientMod.options().notifications.hasClearedDonationButton) {
-            this.setDonationButtonVisibility(false);
+            // TODO: fix, this is for debugging
+            // this.setDonationButtonVisibility(false);
         }
 
         this.addRenderableWidget(this.pageList);
@@ -231,7 +232,7 @@ private void hideDonationButton() {
 
     private void rebuildGUIOptions() {
         this.removeWidget(this.optionList);
-        this.optionList = this.addRenderableWidget(new OptionListWidget(new Dim2i(130, 0, 210, this.height), this.currentPage, this.currentMod.theme()));
+        this.optionList = this.addRenderableWidget(new OptionListWidget(new Dim2i(130, Layout.INNER_MARGIN * 2 + Layout.BUTTON_SHORT, 210, this.height - (Layout.INNER_MARGIN * 2 + Layout.OUTER_MARGIN + Layout.BUTTON_SHORT)), this.currentPage, this.currentMod.theme()));
     }
 
     @Override
@@ -378,11 +379,6 @@ public boolean mouseClicked(double mouseX, double mouseY, int button) {
         return true;
     }
 
-    @Override
-    public boolean mouseScrolled(double d, double e, double f, double g) {
-        return super.mouseScrolled(d, e, f, g);
-    }
-
     @Override
     public boolean shouldCloseOnEsc() {
         return !this.hasPendingChanges;

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/prompt/ScreenPrompt.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/prompt/ScreenPrompt.java
@@ -2,6 +2,7 @@
 
 import net.caffeinemc.mods.sodium.client.gui.ButtonTheme;
 import net.caffeinemc.mods.sodium.client.gui.Colors;
+import net.caffeinemc.mods.sodium.client.gui.Layout;
 import net.caffeinemc.mods.sodium.client.gui.widgets.AbstractWidget;
 import net.caffeinemc.mods.sodium.client.gui.widgets.FlatButtonWidget;
 import net.caffeinemc.mods.sodium.client.util.Dim2i;
@@ -44,9 +45,9 @@ public void init() {
         int boxX = (parentDimensions.width() / 2) - (this.width / 2);
         int boxY = (parentDimensions.height() / 2) - (this.height / 2);
 
-        this.closeButton = new FlatButtonWidget(new Dim2i((boxX + this.width) - 84, (boxY + this.height) - 24, 80, 20), Component.literal("Close"), this::close, true, false, PROMPT_THEME);
+        this.closeButton = new FlatButtonWidget(new Dim2i((boxX + this.width) - 84, (boxY + this.height) - 24, 80, Layout.BUTTON_SHORT), Component.literal("Close"), this::close, true, false, PROMPT_THEME);
 
-        this.actionButton = new FlatButtonWidget(new Dim2i((boxX + this.width) - 198, (boxY + this.height) - 24, 110, 20), this.action.label, this::runAction, true, false, PROMPT_THEME);
+        this.actionButton = new FlatButtonWidget(new Dim2i((boxX + this.width) - 198, (boxY + this.height) - 24, 110, Layout.BUTTON_SHORT), this.action.label, this::runAction, true, false, PROMPT_THEME);
     }
 
     public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
@@ -86,7 +87,7 @@ public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
                 textY += font.lineHeight + 2;
             }
 
-            textY += 8;
+            textY += Layout.TEXT_PARAGRAPH_SPACING;
         }
 
         for (var button : getWidgets()) {

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/AbstractParentWidget.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/AbstractParentWidget.java
@@ -45,6 +45,11 @@ protected void clearChildren() {
         this.renderableChildren.clear();
     }
 
+    protected void verticalScrollScissorGradient(GuiGraphics graphics, int y) {
+        var gradientHeight = 10;
+        graphics.fillGradient(this.getX(), y - gradientHeight, this.getLimitX(), y, 0xFFFF0000, 0xFF00FF00);
+    }
+
     @Override
     public void render(@NotNull GuiGraphics graphics, int mouseX, int mouseY, float delta) {
         for (Renderable element : this.renderableChildren) {

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/CenteredFlatWidget.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/CenteredFlatWidget.java
@@ -3,6 +3,7 @@
 import net.caffeinemc.mods.sodium.client.gui.ButtonTheme;
 import net.caffeinemc.mods.sodium.client.gui.ColorTheme;
 import net.caffeinemc.mods.sodium.client.gui.Colors;
+import net.caffeinemc.mods.sodium.client.gui.Layout;
 import net.caffeinemc.mods.sodium.client.util.Dim2i;
 import net.minecraft.client.gui.ComponentPath;
 import net.minecraft.client.gui.GuiGraphics;
@@ -12,8 +13,7 @@
 import net.minecraft.network.chat.Component;
 import org.jetbrains.annotations.Nullable;
 
-public class CenteredFlatWidget extends AbstractWidget implements Renderable {
-    private final Runnable action;
+public abstract class CenteredFlatWidget extends AbstractWidget implements Renderable {
     private final boolean isSelectable;
     private final ButtonTheme theme;
 
@@ -22,15 +22,20 @@ public class CenteredFlatWidget extends AbstractWidget implements Renderable {
     private boolean visible = true;
 
     private final Component label;
+    private final Component subtitle;
 
-    public CenteredFlatWidget(Dim2i dim, Component label, Runnable action, boolean isSelectable, ColorTheme theme) {
+    public CenteredFlatWidget(Dim2i dim, Component label, Component subtitle, boolean isSelectable, ColorTheme theme) {
         super(dim);
         this.label = label;
-        this.action = action;
+        this.subtitle = subtitle;
         this.isSelectable = isSelectable;
         this.theme = new ButtonTheme(theme, 0x05FFFFFF, 0x90000000, 0x40000000);
     }
 
+    public CenteredFlatWidget(Dim2i dim, Component label, boolean isSelectable, ColorTheme theme) {
+        this(dim, label, null, isSelectable, theme);
+    }
+
     @Override
     public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
         if (!this.visible) {
@@ -58,7 +63,13 @@ public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
             this.drawRect(graphics, x2 - 3, y1, x2, y2, this.theme.themeLighter);
         }
 
-        this.drawString(graphics, text, x1 + 8, (int) Math.ceil(((y1 + (this.getHeight() - this.font.lineHeight) * 0.5f))), textColor);
+        if (this.subtitle == null) {
+            this.drawString(graphics, text, x1 + Layout.TEXT_LEFT_PADDING, (int) Math.ceil(((y1 + (this.getHeight() - this.font.lineHeight) * 0.5f))), textColor);
+        } else {
+            var center = y1 + this.getHeight() * 0.5f;
+            this.drawString(graphics, text, x1 + Layout.TEXT_LEFT_PADDING, (int) Math.ceil(center - (this.font.lineHeight + Layout.TEXT_LINE_SPACING * 0.5f)), textColor);
+            this.drawString(graphics, this.subtitle, x1 + Layout.TEXT_LEFT_PADDING, (int) Math.ceil(center + Layout.TEXT_LINE_SPACING * 0.5f), textColor);
+        }
 
         if (this.enabled && this.isFocused()) {
             this.drawBorder(graphics, x1, y1, x2, y2, Colors.FOREGROUND);
@@ -97,8 +108,10 @@ public boolean keyPressed(int keyCode, int scanCode, int modifiers) {
         return false;
     }
 
+    abstract void onAction();
+
     private void doAction() {
-        this.action.run();
+        this.onAction();
         this.playClickSound();
     }
 

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/FlatButtonWidget.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/FlatButtonWidget.java
@@ -2,6 +2,7 @@
 
 import net.caffeinemc.mods.sodium.client.gui.ButtonTheme;
 import net.caffeinemc.mods.sodium.client.gui.Colors;
+import net.caffeinemc.mods.sodium.client.gui.Layout;
 import net.caffeinemc.mods.sodium.client.util.Dim2i;
 import net.minecraft.client.gui.ComponentPath;
 import net.minecraft.client.gui.GuiGraphics;
@@ -57,7 +58,7 @@ public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
             this.drawRect(graphics, this.getX(), this.getY(), this.getLimitX(), this.getLimitY(), backgroundColor);
         }
 
-        this.drawString(graphics, this.label, this.leftAlign ? this.getX() + 5 : (this.getCenterX() - (strWidth / 2)), this.getCenterY() - 4, textColor);
+        this.drawString(graphics, this.label, this.leftAlign ? this.getX() + Layout.TEXT_LEFT_PADDING : (this.getCenterX() - (strWidth / 2)), this.getCenterY() - 4, textColor);
 
         if (this.enabled && this.selected) {
             this.drawRect(graphics, this.getX(), this.getLimitY() - 1, this.getLimitX(), this.getLimitY(), Colors.THEME);

diff --git a/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/OptionListWidget.java b/common/src/main/java/net/caffeinemc/mods/sodium/client/gui/widgets/OptionListWidget.java
@@ -4,6 +4,7 @@
 import net.caffeinemc.mods.sodium.client.config.structure.OptionGroup;
 import net.caffeinemc.mods.sodium.client.config.structure.OptionPage;
 import net.caffeinemc.mods.sodium.client.gui.ColorTheme;
+import net.caffeinemc.mods.sodium.client.gui.Layout;
 import net.caffeinemc.mods.sodium.client.gui.options.control.Control;
 import net.caffeinemc.mods.sodium.client.gui.options.control.ControlElement;
 import net.caffeinemc.mods.sodium.client.util.Dim2i;
@@ -24,10 +25,10 @@ public OptionListWidget(Dim2i dim, OptionPage page, ColorTheme theme) {
         this.page = page;
         this.theme = theme;
         this.controls = new ArrayList<>();
-        this.init();
+        this.rebuild();
     }
 
-    private void init() {
+    private void rebuild() {
         int x = this.getX();
         int y = this.getY();
         int width = this.getWidth();
@@ -36,10 +37,10 @@ private void init() {
         int maxWidth = 0;
 
         this.clearChildren();
-        this.scrollbar = this.addRenderableChild(new ScrollbarWidget(new Dim2i(x + width - 5, y, 5, height)));
+        this.scrollbar = this.addRenderableChild(new ScrollbarWidget(new Dim2i(x + width - Layout.SCROLLBAR_WIDTH, y, Layout.SCROLLBAR_WIDTH, height)));
 
         int entryHeight = 18;
-        int listHeight = 23;
+        int listHeight = 0;
         for (OptionGroup group : this.page.groups()) {
             // Add each option's control element
             for (Option<?> option : group.options()) {
@@ -56,16 +57,19 @@ private void init() {
             }
 
             // Add padding beneath each option group
-            listHeight += 4;
+            listHeight += Layout.INNER_MARGIN;
         }
 
-        this.scrollbar.setScrollbarContext(height, listHeight + 5);
+        this.scrollbar.setScrollbarContext(listHeight - Layout.INNER_MARGIN);
     }
 
     @Override
     public void render(@NotNull GuiGraphics graphics, int mouseX, int mouseY, float delta) {
         graphics.enableScissor(this.getX(), this.getY(), this.getLimitX(), this.getLimitY());
         super.render(graphics, mouseX, mouseY, delta);
+
+//        this.verticalScrollScissorGradient(graphics, this.getLimitY());
+
         graphics.disableScissor();
     }