From 5f7224158344bb238585ba27948dd5c56dcfbcfd Mon Sep 17 00:00:00 2001 From: vito Date: Thu, 14 Dec 2023 17:23:02 +0800 Subject: [PATCH] =?UTF-8?q?REPORT-99485=20RadioButton=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icon/icons/AnimatedRadioButtonIcon.java | 75 +++++++++++++++++++ .../fine/theme/light/ui/laf/FineDarkLaf.java | 5 ++ .../fr/design/gui/ibutton/UIRadioButton.java | 11 +-- .../light/ui/laf/FineLightLaf.properties | 35 +++++---- 4 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 designer-base/src/main/java/com/fine/theme/icon/icons/AnimatedRadioButtonIcon.java diff --git a/designer-base/src/main/java/com/fine/theme/icon/icons/AnimatedRadioButtonIcon.java b/designer-base/src/main/java/com/fine/theme/icon/icons/AnimatedRadioButtonIcon.java new file mode 100644 index 0000000000..6449dc5261 --- /dev/null +++ b/designer-base/src/main/java/com/fine/theme/icon/icons/AnimatedRadioButtonIcon.java @@ -0,0 +1,75 @@ +package com.fine.theme.icon.icons; + +import com.formdev.flatlaf.icons.FlatAnimatedIcon; +import com.formdev.flatlaf.util.ColorFunctions; +import org.jetbrains.annotations.Nullable; + +import javax.swing.AbstractButton; +import javax.swing.ButtonModel; +import javax.swing.JRadioButton; +import javax.swing.UIManager; +import java.awt.Color; +import java.awt.Component; +import java.awt.Graphics; +import java.awt.Graphics2D; +import java.awt.geom.Ellipse2D; + +/** + * RadioButton 图标，带动画 + * + * @author vito + * @since 11.0 + * Created on 2023/11/22 + */ +public class AnimatedRadioButtonIcon + extends FlatAnimatedIcon { + private static final int SIZE = 16; + private static final int BORDER_SIZE = 2; + private static final int ON_SIZE = 8; + + private final Color offColor = UIManager.getColor("CheckBox.icon.borderColor"); + private final Color onColor = UIManager.getColor("CheckBox.icon.checkmarkColor"); + + public AnimatedRadioButtonIcon() { + super(SIZE, SIZE, null); + } + + @Override + public void paintIconAnimated(Component c, Graphics g, int x, int y, float animatedValue) { + Color color = ColorFunctions.mix(onColor, offColor, animatedValue); + + // border + g.setColor(getBorderColor(c, color, onColor)); + g.fillOval(0, 0, SIZE, SIZE); + + // background + g.setColor(c.getBackground()); + float onDiameter = SIZE - (BORDER_SIZE + (ON_SIZE - BORDER_SIZE) * (animatedValue)); + float xy = (SIZE - onDiameter) / 2f; + ((Graphics2D) g).fill(new Ellipse2D.Float(xy, xy, onDiameter, onDiameter)); + + } + + @Nullable + private Color getBorderColor(Component c, Color enableColor, Color hoverColor) { + if (c instanceof AbstractButton) { + ButtonModel model = ((AbstractButton) c).getModel(); + + if (model.isRollover()) { + return hoverColor; + } + } + return enableColor; + } + + + @Override + public float getValue(Component c) { + return ((JRadioButton) c).isSelected() ? 1 : 0; + } + + @Override + public int getAnimationDuration() { + return 200; + } +} diff --git a/designer-base/src/main/java/com/fine/theme/light/ui/laf/FineDarkLaf.java b/designer-base/src/main/java/com/fine/theme/light/ui/laf/FineDarkLaf.java index 062e818a74..600d5a52bc 100644 --- a/designer-base/src/main/java/com/fine/theme/light/ui/laf/FineDarkLaf.java +++ b/designer-base/src/main/java/com/fine/theme/light/ui/laf/FineDarkLaf.java @@ -18,6 +18,11 @@ public class FineDarkLaf extends FlatDarkLaf { private static final String USER_SCALE_FACTOR = "userScaleFactor"; + /** + * 安装外观 + * + * @return 是否安装成功 + */ public static boolean setup() { IconManager.addSet(new FineLightIconSet("fine-light")); Layouts.setScaleFactor(UIScale.getUserScaleFactor()); diff --git a/designer-base/src/main/java/com/fr/design/gui/ibutton/UIRadioButton.java b/designer-base/src/main/java/com/fr/design/gui/ibutton/UIRadioButton.java index 4f6114028b..1b110ccfd2 100644 --- a/designer-base/src/main/java/com/fr/design/gui/ibutton/UIRadioButton.java +++ b/designer-base/src/main/java/com/fr/design/gui/ibutton/UIRadioButton.java @@ -1,13 +1,14 @@ package com.fr.design.gui.ibutton; -import com.fine.theme.icon.LazyIcon; import com.fr.design.event.GlobalNameListener; import com.fr.design.event.GlobalNameObserver; import com.fr.design.event.UIObserver; import com.fr.design.event.UIObserverListener; import com.fr.stable.StringUtils; -import javax.swing.*; +import javax.swing.Action; +import javax.swing.Icon; +import javax.swing.JRadioButton; import java.awt.event.ItemEvent; import java.awt.event.ItemListener; @@ -20,9 +21,6 @@ import java.awt.event.ItemListener; */ public class UIRadioButton extends JRadioButton implements UIObserver, GlobalNameObserver { - private static final Icon RADIO_SELECTED = new LazyIcon("radio_selected"); - private static final Icon RADIO_UNSELECTED = new LazyIcon("radio_unselected"); - private static final int RADIO_V_GAP = UIManager.getInt("RadioButton.vGap"); private UIObserverListener uiObserverListener; private GlobalNameListener globalNameListener = null; @@ -112,9 +110,6 @@ public class UIRadioButton extends JRadioButton implements UIObserver, GlobalNam private void initComponent() { this.setFocusPainted(false); - this.setIcon(RADIO_UNSELECTED); - this.setSelectedIcon(RADIO_SELECTED); - this.setBorder(BorderFactory.createEmptyBorder(RADIO_V_GAP, 0, RADIO_V_GAP, 0)); } /** diff --git a/designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties b/designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties index f312588b0c..11f861fcc9 100644 --- a/designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties +++ b/designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties @@ -91,6 +91,13 @@ ViewportUI = com.formdev.flatlaf.ui.FlatViewportUI #---- variables ---- Component.defaultHeight=24 Component.defaultVGap=10 +# ---- Brand ---- +@BrandColor = #2576EF +@BrandHoverColor = #5493F2 +@BrandPressedColor = #105DD1 +@BrandHoverColorSP = #2576EF 12% +@marginSmall = 4 +@marginLarge = 10 # general background and foreground (text color) @background = #F6F8FA @@ -125,8 +132,8 @@ Component.defaultVGap=10 # accent colors (blueish) # set @accentColor to use single accent color or # modify @accentBaseColor to use variations of accent base color -@accentColor = systemColor(accent,null) -@accentBaseColor = #2675BF +@accentColor = @BrandColor +@accentBaseColor = @BrandColor @accentBase2Color = lighten(saturate(@accentBaseColor,10%),6%) # accent color variations @accentCheckmarkColor = if(@accentColor, @accentColor, tint(@accentBase2Color,20%)) @@ -239,7 +246,7 @@ CheckBox.rollover = true CheckBox.icon.focusWidth = 1 # enabled -CheckBox.icon.borderColor = shade($Component.borderColor,10%) +CheckBox.icon.borderColor = #B8BFCB CheckBox.icon.background = @buttonBackground CheckBox.icon.selectedBorderColor = $CheckBox.icon.checkmarkColor CheckBox.icon.selectedBackground = $CheckBox.icon.background @@ -628,14 +635,14 @@ ProgressBar.selectionForeground = contrast($ProgressBar.foreground, @foreground, #---- RadioButton ---- -#RadioButton.border = com.formdev.flatlaf.ui.FlatMarginBorder -#RadioButton.icon = com.formdev.flatlaf.icons.FlatRadioButtonIcon -#RadioButton.icon.centerDiameter = 8 -#RadioButton.icon[filled].centerDiameter = 5 -#RadioButton.margin = 2,2,2,2 +RadioButton.border = com.formdev.flatlaf.ui.FlatMarginBorder +RadioButton.icon = com.fine.theme.icon.icons.AnimatedRadioButtonIcon +RadioButton.icon.centerDiameter = 8 +RadioButton.icon[filled].centerDiameter = 5 +RadioButton.margin = 2,2,2,2 RadioButton.iconTextGap = 4 RadioButton.vGap = 4 -#RadioButton.rollover = true +RadioButton.rollover = true #---- RadioButtonMenuItem ---- @@ -1022,11 +1029,14 @@ ToggleButton.iconTextGap = $Button.iconTextGap ToggleButton.rollover = $Button.rollover ToggleButton.background = $Button.background -ToggleButton.pressedBackground = $Button.pressedBackground +ToggleButton.pressedBackground = @BrandPressedColor +ToggleButton.selectedBackground = @BrandColor ToggleButton.selectedForeground = $ToggleButton.foreground +ToggleButton.disabledSelectedBackground = darken($ToggleButton.background,13%,derived) ToggleButton.toolbar.hoverBackground = $Button.toolbar.hoverBackground ToggleButton.toolbar.pressedBackground = $Button.toolbar.pressedBackground +ToggleButton.toolbar.selectedBackground = $ToggleButton.selectedBackground # button type "tab" ToggleButton.tab.underlineHeight = 0 @@ -1038,11 +1048,6 @@ ToggleButton.tab.hoverBackground = $TabbedPane.hoverColor ToggleButton.tab.focusBackground = #FFFFFF ToggleButton.tab.arc = $Component.arc -ToggleButton.selectedBackground = darken($ToggleButton.background,20%,derived) -ToggleButton.disabledSelectedBackground = darken($ToggleButton.background,13%,derived) - -ToggleButton.toolbar.selectedBackground = $ToggleButton.selectedBackground - #---- HeadGroup ---- HeadGroup.background= #E9ECF1 HeadGroup.arc= $Component.arc