REPORT-107973 主页及组件视觉样式翻新

【问题原因】rt
【改动思路】滑块、文本框、文本域翻新

designer-base/src/main/java/com/fine/theme/light/ui/FineLightIconSet.java

@@ -151,7 +151,11 @@ public class FineLightIconSet extends AbstractIconSet {
                 new SvgIconSource("triangle_left", "com/fine/theme/icon/triangle/triangle_left.svg"),
                 new SvgIconSource("triangle_left_small", "com/fine/theme/icon/triangle/triangle_left_small.svg"),
                 new SvgIconSource("triangle_right", "com/fine/theme/icon/triangle/triangle_right.svg"),
-                new SvgIconSource("triangle_right_small", "com/fine/theme/icon/triangle/triangle_right_small.svg")
+                new SvgIconSource("triangle_right_small", "com/fine/theme/icon/triangle/triangle_right_small.svg"),
+
+                // 滚动条
+                new SvgIconSource("zoomIn", "com/fine/theme/icon/zoom/zoomIn.svg", true),
+                new SvgIconSource("zoomOut", "com/fine/theme/icon/zoom/zoomOut.svg", true)
         );
     }
 }

designer-base/src/main/java/com/fr/design/editor/editor/TextEditor.java

@@ -5,7 +5,6 @@ package com.fr.design.editor.editor;
 
 import com.fr.design.gui.itextfield.UITextField;
 import com.fr.design.layout.FRGUIPaneFactory;
-
 import com.fr.stable.StringUtils;
 
 import java.awt.BorderLayout;
@@ -40,7 +39,6 @@ public class TextEditor extends Editor<String> {
     public TextEditor(String value) {
         this.setLayout(FRGUIPaneFactory.createBorderLayout());
         textField = new UITextField();
-        textField.setBorder(null);
         this.add(textField, BorderLayout.CENTER);
         this.textField.addKeyListener(textKeyListener);
 

designer-base/src/main/java/com/fr/design/foldablepane/HeaderPane.java

@@ -91,7 +91,7 @@ public class HeaderPane extends JPanel {
         this.hGap = UIManager.getInt("ExpandablePane.HeaderPane.hGap");
         this.setPreferredSize(new Dimension(UIManager.getInt("HeaderPane.width"), UIManager.getInt("HeaderPane.height")));
         Insets insets = UIManager.getInsets("ExpandablePane.HeaderPane.borderInsets");
-        this.setForeground(UIManager.getColor("color.text.highlight"));
+        this.setForeground(UIManager.getColor("ExpandablePane.HeaderPane.foreground"));
         this.setFont(getFont().deriveFont(Font.BOLD));
         this.setBorder(BorderFactory.createEmptyBorder(insets.top, insets.left, insets.bottom, insets.right));
     }

designer-base/src/main/java/com/fr/design/gui/itextarea/UITextArea.java

@@ -1,18 +1,31 @@
 package com.fr.design.gui.itextarea;
 
 import com.fr.common.inputevent.InputEventBaseOnOS;
+import com.fr.design.event.HoverAware;
 import com.fr.design.event.UIObserver;
 import com.fr.design.event.UIObserverListener;
-import com.fr.design.utils.gui.GUICoreUtils;
-import com.fr.stable.Constants;
 
-import javax.swing.*;
+import javax.swing.JTextArea;
+import javax.swing.UIManager;
 import javax.swing.event.DocumentEvent;
 import javax.swing.event.DocumentListener;
-import java.awt.*;
+import java.awt.Dimension;
-
+import java.awt.EventQueue;
-public class UITextArea extends JTextArea implements UIObserver {
+import java.awt.event.MouseAdapter;
+import java.awt.event.MouseEvent;
+
+/**
+ * 文本域
+ *
+ * @author
+ * @create on 2016
+ * @since
+ */
+public class UITextArea extends JTextArea implements UIObserver, HoverAware {
     private UIObserverListener uiObserverListener;
+    private boolean hover;
+    private Dimension preferredSize;
+    private final int HEIGHT = UIManager.getInt("TextArea.height");
 
     public UITextArea(int i, int j) {
         super(i, j);
@@ -20,11 +33,6 @@ public class UITextArea extends JTextArea implements UIObserver {
         initComponents();
     }
 
-    @Override
-    public Insets getInsets() {
-        return new Insets(5, 5, 5, 5);
-    }
-
     public UITextArea() {
         super();
         InputEventBaseOnOS.addBasicEditInputMap(this);
@@ -40,6 +48,7 @@ public class UITextArea extends JTextArea implements UIObserver {
     private void initComponents() {
         setLineWrap(true);
         setWrapStyleWord(true);
+        setMinimumSize(new Dimension(getMinimumSize().width, HEIGHT));
         initListener();
     }
 
@@ -73,6 +82,20 @@ public class UITextArea extends JTextArea implements UIObserver {
                     });
                 }
             });
+
+            this.addMouseListener(new MouseAdapter() {
+                @Override
+                public void mouseEntered(MouseEvent e) {
+                    hover = true;
+                    repaint();
+                }
+
+                @Override
+                public void mouseExited(MouseEvent e) {
+                    hover = false;
+                    repaint();
+                }
+            });
         }
     }
 
@@ -83,32 +106,6 @@ public class UITextArea extends JTextArea implements UIObserver {
     }
 
     @Override
-    /**
-     *
-     */
-    public UITextAreaUI getUI() {
-        return (UITextAreaUI) ui;
-    }
-
-    @Override
-    /**
-     *
-     */
-    public void updateUI() {
-        this.setUI(new UITextAreaUI(this));
-    }
-
-    @Override
-    protected void paintBorder(Graphics g) {
-        if (getBorder() != null) {
-            getUI().paintBorder((Graphics2D) g, getWidth(), getHeight(), true, Constants.NULL);
-        }
-    }
-
-    @Override
-    /**
-     *
-     */
     public void registerChangeListener(UIObserverListener listener) {
         uiObserverListener = listener;
     }
@@ -120,18 +117,8 @@ public class UITextArea extends JTextArea implements UIObserver {
         return true;
     }
 
-    /**
+    @Override
-     * @param args
+    public boolean isHovered() {
-     */
+        return hover;
-    public static void main(String... args) {
-//        JFrame jf = new JFrame("test");
-//        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
-//        JPanel content = (JPanel) jf.getContentPane();
-//        content.setLayout(new BorderLayout());
-//        UITextArea bb = new UITextArea("123455weoijweio reiwj kewl jfejkfljds kl jfldk jfk jdskfjkdsfklj dkl jfsdjf");
-//        content.add(bb, BorderLayout.CENTER);
-//        GUICoreUtils.centerWindow(jf);
-//        jf.setSize(400, 400);
-//        jf.setVisible(true);
     }
 }

designer-base/src/main/java/com/fr/design/gui/itextfield/UITextField.java

@@ -3,6 +3,7 @@ package com.fr.design.gui.itextfield;
 import com.fr.common.inputevent.InputEventBaseOnOS;
 import com.fr.design.event.GlobalNameListener;
 import com.fr.design.event.GlobalNameObserver;
+import com.fr.design.event.HoverAware;
 import com.fr.design.event.UIObserver;
 import com.fr.design.event.UIObserverListener;
 import com.fr.design.utils.gui.GUICoreUtils;
@@ -12,22 +13,21 @@ import com.fr.stable.StringUtils;
 import javax.swing.JFrame;
 import javax.swing.JPanel;
 import javax.swing.JTextField;
+import javax.swing.UIManager;
 import javax.swing.event.DocumentEvent;
 import javax.swing.event.DocumentListener;
 import javax.swing.text.Document;
 import java.awt.Color;
 import java.awt.Dimension;
-import java.awt.Graphics;
-import java.awt.Graphics2D;
-import java.awt.Insets;
 import java.awt.LayoutManager;
-import java.awt.RenderingHints;
+import java.awt.event.MouseAdapter;
+import java.awt.event.MouseEvent;
 
 
 /**
  * @author Jerry
  */
-public class UITextField extends JTextField implements UIObserver, GlobalNameObserver {
+public class UITextField extends JTextField implements UIObserver, GlobalNameObserver, HoverAware {
     private boolean isBorderPainted = true;
     private boolean isRoundBorder = true;
     private int rectDirection = Constants.NULL;
@@ -36,10 +36,13 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
     private GlobalNameListener globalNameListener = null;
     private Dimension preferredSize = null;
     private String placeholder = StringUtils.EMPTY;
+    private final int HEIGHT = UIManager.getInt("TextField.height");
 
     //有些情况下setText的时候不希望触发attributeChange，添加一个属性标识
     private boolean isSetting = false;
 
+    private boolean hover = false;
+
     public UITextField() {
         super();
         init();
@@ -70,6 +73,7 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
      */
     public void init() {
         InputEventBaseOnOS.addBasicEditInputMap(this);
+        setPreferredSize(new Dimension(getPreferredSize().width, HEIGHT));
         initListener();
     }
 
@@ -91,6 +95,20 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
                     attributeChange();
                 }
             });
+
+            this.addMouseListener(new MouseAdapter() {
+                @Override
+                public void mouseEntered(MouseEvent e) {
+                    hover = true;
+                    repaint();
+                }
+
+                @Override
+                public void mouseExited(MouseEvent e) {
+                    hover = false;
+                    repaint();
+                }
+            });
         }
     }
 
@@ -111,10 +129,6 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
         isSetting = setting;
     }
 
-    public void setPreferredSize(Dimension preferredSize) {
-        this.preferredSize = preferredSize;
-    }
-
     public void setGlobalName(String name) {
         textFieldName = name;
     }
@@ -131,59 +145,11 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
         }
     }
 
-    @Override
-    public Insets getInsets() {
-        return new Insets(0, 4, 0, 4);
-    }
-
-    @Override
-    public Dimension getPreferredSize() {
-        if (preferredSize == null) {
-            return new Dimension(super.getPreferredSize().width, 20);
-        }
-        return preferredSize;
-    }
-
-//    @Override
-//    public UITextFieldUI getUI() {
-//        return (UITextFieldUI) ui;
-//    }
-
     /**
      * 设置变化的背景颜色
      */
     public void setBackgroundUIColor(Color color) {
-        ((UITextFieldUI) this.ui).setBackgroundColor4NoGiveNumber(color);
+//        ((UITextFieldUI) this.ui).setBackgroundColor4NoGiveNumber(color);
-    }
-
-    /**
-     * 更新UI
-     */
-//    public void updateUI() {
-//        this.setUI(new UITextFieldUI(this));
-//    }
-
-    @Override
-    protected void paintComponent(final Graphics pG) {
-        super.paintComponent(pG);
-        if (placeholder.length() == 0 || getText().length() > 0) {
-            return;
-        }
-        final Graphics2D g = (Graphics2D) pG;
-        g.setRenderingHint(
-                RenderingHints.KEY_ANTIALIASING,
-                RenderingHints.VALUE_ANTIALIAS_ON);
-        g.setColor(getDisabledTextColor());
-        g.drawString(placeholder, getInsets().left, pG.getFontMetrics()
-                .getMaxAscent() + getInsets().top + 1);
-    }
-
-    @Override
-    protected void paintBorder(Graphics g) {
-        if (!isBorderPainted) {
-            return;
-        }
-//        getUI().paintBorder((Graphics2D) g, getWidth(), getHeight(), isRoundBorder, rectDirection);
     }
 
     /**
@@ -262,4 +228,8 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
         this.isBorderPainted = isBorderPainted;
     }
 
+    @Override
+    public boolean isHovered() {
+        return hover;
+    }
 }

designer-base/src/main/java/com/fr/design/mainframe/JFormSliderPane.java

@@ -1,5 +1,6 @@
 package com.fr.design.mainframe;
 
+import com.fine.theme.icon.LazyIcon;
 import com.formdev.flatlaf.FlatDarculaLaf;
 import com.fr.base.BaseUtils;
 import com.fr.design.gui.ibutton.UIButton;
@@ -47,7 +48,7 @@ public class JFormSliderPane extends JPanel {
     private static final int HUNDRED = 100;
     private static final int TWO_HUNDRED = 200;
     private static final int FOUR_HUNDRED = 400;
-    private static final int SHOWVALBUTTON_WIDTH = 35;
+    private static final int SHOWVALBUTTON_WIDTH = 40;
     private static final int SHOWVALBUTTON_HEIGHTH = 20;
     private static final String SUFFIX = "%";
     private static final int TOOLTIP_Y = 30;
@@ -91,7 +92,6 @@ public class JFormSliderPane extends JPanel {
             }
         };
         slider.setValue(HALF_HUNDRED);
-//        slider.setUI(new JSliderPaneUI(slider));
         slider.addChangeListener(listener);
         slider.setPreferredSize(new Dimension(220, 20));
         //去掉虚线框
@@ -101,21 +101,19 @@ public class JFormSliderPane extends JPanel {
 
 
     private void initDownUpButton() {
-        downButton = new UIButton(BaseUtils.readIcon("com/fr/design/images/data/source/normalDown20.png"), BaseUtils.readIcon("com/fr/design/images/data/source/hoverDown20.png"), BaseUtils.readIcon("com/fr/design/images/data/source/hoverDown20.png")) {
+        downButton = new UIButton(new LazyIcon("zoomOut")) {
             public Point getToolTipLocation(MouseEvent event) {
                 return new Point(event.getX(), event.getY() - TOOLTIP_Y);
             }
         };
-//        downButton.setOpaque(false);
         downButton.setBorderPainted(false);
         downButton.setToolTipText(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Basic_Scale_Down"));
-        upButton = new UIButton(BaseUtils.readIcon("com/fr/design/images/data/source/normalUp20.png"), BaseUtils.readIcon("com/fr/design/images/data/source/hoverUp20.png"), BaseUtils.readIcon("com/fr/design/images/data/source/hoverUp20.png")) {
+        upButton = new UIButton(new LazyIcon("zoomIn")) {
             public Point getToolTipLocation(MouseEvent event) {
                 return new Point(event.getX(), event.getY() - TOOLTIP_Y);
             }
         };
-//        upButton.setOpaque(false);
+        upButton.setBorderPainted(false);
-//        upButton.setBorderPainted(false);
         upButton.setToolTipText(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Basic_Scale_Up"));
         downButton.setActionCommand("less");
         upButton.setActionCommand("more");

designer-base/src/main/java/com/fr/design/mainframe/loghandler/LogMessageBar.java

@@ -41,7 +41,7 @@ public class LogMessageBar extends JPanel {
 		messageLabel = new UILabel();
 		setLayout(new BorderLayout());
 		add(messageLabel, BorderLayout.CENTER);
-		messageLabel.setForeground(UIManager.getColor("color.text.placeholder"));
+		messageLabel.setForeground(UIManager.getColor("North.messageLabel.foreground"));
 		addMouseListener(new MouseAdapter() {
 			@Override
 			public void mouseClicked(MouseEvent e) {

designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomIn.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.9999 4C15.4476 4 14.9999 4.44772 14.9999 5V15H5C4.44772 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17H14.9999V27C14.9999 27.5523 15.4476 28 15.9999 28C16.5522 28 16.9999 27.5523 16.9999 27V17H27C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15H16.9999V5C16.9999 4.44772 16.5522 4 15.9999 4Z"
+          fill="#0A1C38" fill-opacity="0.9"/>
+</svg>

designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomIn_disable.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.9999 4C15.4476 4 14.9999 4.44772 14.9999 5V15H5C4.44772 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17H14.9999V27C14.9999 27.5523 15.4476 28 15.9999 28C16.5522 28 16.9999 27.5523 16.9999 27V17H27C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15H16.9999V5C16.9999 4.44772 16.5522 4 15.9999 4Z"
+          fill="#0A1C38" fill-opacity="0.29"/>
+</svg>

designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomOut.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27 15C27.5523 15 28 15.4477 28 16C28 16.5523 27.5523 17 27 17H5C4.44772 17 4 16.5523 4 16C4 15.4477 4.44772 15 5 15H27Z"
+          fill="#0A1C38" fill-opacity="0.9"/>
+</svg>

designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomOut_disable.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27 15C27.5523 15 28 15.4477 28 16C28 16.5523 27.5523 17 27 17H5C4.44772 17 4 16.5523 4 16C4 15.4477 4.44772 15 5 15H27Z"
+          fill="#0A1C38" fill-opacity="0.29"/>
+</svg>

designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties

@@ -89,15 +89,11 @@ ViewportUI = com.formdev.flatlaf.ui.FlatViewportUI
 
 
 #---- variables ----
-color.brand.normal=#2576EF
+Component.defaultHeight=24
-color.text.white=#ffffff
-color.text.placeholder=#0A1C3878
-color.text.highlight=#0A1C38E6
-
 
 # general background and foreground (text color)
 @background = #F6F8FA
-@foreground = #0B1B39
+@foreground=#0A1C38
 @disabledBackground = @background
 @disabledForeground = tint(@foreground,55%)
 
@@ -165,6 +161,14 @@ defaultBorderColor = #DADEE7
 defaultHighlightBorderColor = #2576EF
 defaultBorderFocusShadow = #2576ef19
 defaultBorderFocusWidth = 1
+brand.normal=#2576EF
+background.normal=#FFFFFF
+text.white=#ffffff
+text.placeholder=fade(@foreground, 40%)
+text.highlight=fade(@foreground, 90%)
+fill.hover=#E6E9EF
+fill.normal=#FFFFFF
+border.divider=#DADEE7
 
 #---- Button ----
 
@@ -697,13 +701,14 @@ Slider.focusInsets = 0,0,0,0
 Slider.trackWidth = 2
 Slider.thumbSize = 12,12
 Slider.focusWidth = 4
-Slider.trackValueColor = @accentSliderColor
+Slider.trackValueColor=$brand.normal
-Slider.trackColor = darken(@background,18%)
+Slider.trackColor=$border.divider
-Slider.thumbColor = $Slider.trackValueColor
+Slider.thumbColor=$fill.normal
+Slider.thumbBorderColor=$border.divider
 Slider.tickColor = @disabledForeground
 Slider.focusedColor = fade(changeLightness($Component.focusColor,75%,derived),50%,derived)
-Slider.hoverThumbColor = darken($Slider.thumbColor,5%,derived)
+Slider.hoverThumbColor=$fill.hover
-Slider.pressedThumbColor = darken($Slider.thumbColor,8%,derived)
+Slider.pressedThumbColor=$fill.hover
 Slider.disabledTrackColor = darken(@background,13%)
 Slider.disabledThumbColor = $Slider.disabledTrackColor
 
@@ -864,10 +869,10 @@ TableHeader.bottomSeparatorColor = $TableHeader.separatorColor
 
 
 #---- TextArea ----
-
+TextArea.border=com.fine.theme.light.ui.FineRoundBorder
-TextArea.border = com.formdev.flatlaf.ui.FlatMarginBorder
 TextArea.margin = @componentMargin
-TextArea.background = @componentBackground
+TextArea.background=$background.normal
+TextArea.height=$Component.defaultHeight
 
 
 #---- TextComponent ----
@@ -875,16 +880,17 @@ TextArea.background = @componentBackground
 # allowed values: never, once or always
 TextComponent.selectAllOnFocusPolicy = once
 TextComponent.selectAllOnMouseClick = false
-TextComponent.arc = 0
+TextComponent.arc=$Component.arc
 
 
 #---- TextField ----
-
+TextField.border=com.fine.theme.light.ui.FineRoundBorder
-TextField.border = com.formdev.flatlaf.ui.FlatTextBorder
 TextField.margin = @componentMargin
-TextField.background = @componentBackground
+TextField.background=$background.normal
 TextField.placeholderForeground = @disabledForeground
 TextField.iconTextGap = 4
+TextField.height=$Component.defaultHeight
+
 
 
 #---- TextPane ----
@@ -1069,9 +1075,10 @@ West.border = $defaultBorderColor
 #---- ExpandablePane ----
 ExpandablePane.HeaderPane.borderInsets=0, 6, 0, 6
 ExpandablePane.HeaderPane.hGap=2
-ExpandablePane.vGap=10
+ExpandablePane.HeaderPane.foreground=$text.highlight
+ExpandablePane.vGap=5
 HeaderPane.width=248
-HeaderPane.height=24
+HeaderPane.height=$Component.defaultHeight
 
 #---- East ----
 East.border = $defaultBorderColor
@@ -1091,6 +1098,9 @@ North.userinfoLabel.borderMargins=2, 16, 2, 16
 North.userinfoLabel.width=80
 North.userinfoLabel.height=24
 North.border = $defaultBorderColor
+North.userinfoLabel.foreground=$text.white
+North.userinfoLabel.background=$brand.normal
+North.messageLabel.foreground=$text.placeholder
 North.coverPane.background = #0a1c38
 North.coverPane.radius = 8
 

designer-realize/src/main/java/com/fr/design/mainframe/bbs/UserInfoPane.java

@@ -102,9 +102,9 @@ public class UserInfoPane extends BasicPane {
      */
     public void markUnSignIn() {
         this.userInfoLabel.setText(com.fr.design.i18n.Toolkit.i18nText("Fine-Designer_Login_Onclick"));
-        this.userInfoLabel.setForeground(UIManager.getColor("color.text.white"));
+        this.userInfoLabel.setForeground(UIManager.getColor("North.userinfoLabel.foreground"));
         this.userInfoLabel.setOpaque(true);
-        this.userInfoLabel.setBackground(UIManager.getColor("color.brand.normal"));
+        this.userInfoLabel.setBackground(UIManager.getColor("North.userinfoLabel.background"));
         this.userInfoLabel.resetUserName();
     }