Browse Source

Pull request #13274: REPORT-107973 主页及组件视觉样式翻新

Merge in DESIGN/design from ~LEO.QIN/design:newui to newui

* commit '470b3d6e2131c3b9835ca5afe09b4a478f2fcdcb':
  REPORT-107973 主页及组件视觉样式翻新 【问题原因】rt 【改动思路】滑块、文本框、文本域翻新
  REPORT-107973 主页及组件视觉样式翻新 【问题原因】rt 【改动思路】滑块、文本框、文本域翻新
newui
Leo.Qin-覃宇攀 12 months ago
parent
commit
a6120c8c5c
  1. 6
      designer-base/src/main/java/com/fine/theme/light/ui/FineLightIconSet.java
  2. 2
      designer-base/src/main/java/com/fr/design/editor/editor/TextEditor.java
  3. 2
      designer-base/src/main/java/com/fr/design/foldablepane/HeaderPane.java
  4. 87
      designer-base/src/main/java/com/fr/design/gui/itextarea/UITextArea.java
  5. 90
      designer-base/src/main/java/com/fr/design/gui/itextfield/UITextField.java
  6. 12
      designer-base/src/main/java/com/fr/design/mainframe/JFormSliderPane.java
  7. 2
      designer-base/src/main/java/com/fr/design/mainframe/loghandler/LogMessageBar.java
  8. 5
      designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomIn.svg
  9. 5
      designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomIn_disable.svg
  10. 4
      designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomOut.svg
  11. 4
      designer-base/src/main/resources/com/fine/theme/icon/zoom/zoomOut_disable.svg
  12. 50
      designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties
  13. 4
      designer-realize/src/main/java/com/fr/design/mainframe/bbs/UserInfoPane.java

6
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)
);
}
}

2
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);

2
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));
}

87
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.*;
public class UITextArea extends JTextArea implements UIObserver {
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
/**
* 文本域
*
* @author anonymous
* @Created on 2016
* @since 11.0
*/
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;
}
/**
* @param args
*/
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);
@Override
public boolean isHovered() {
return hover;
}
}

90
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,25 @@ 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
* @Created on 2016
* @since xxx
*/
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 +40,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 +77,7 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
*/
public void init() {
InputEventBaseOnOS.addBasicEditInputMap(this);
setPreferredSize(new Dimension(getPreferredSize().width, HEIGHT));
initListener();
}
@ -91,6 +99,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 +133,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 +149,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);
}
/**
* 更新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);
// ((UITextFieldUI) this.ui).setBackgroundColor4NoGiveNumber(color);
}
/**
@ -262,4 +232,8 @@ public class UITextField extends JTextField implements UIObserver, GlobalNameObs
this.isBorderPainted = isBorderPainted;
}
@Override
public boolean isHovered() {
return hover;
}
}

12
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");

2
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) {

5
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>

After

Width:  |  Height:  |  Size: 513 B

5
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>

After

Width:  |  Height:  |  Size: 514 B

4
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>

After

Width:  |  Height:  |  Size: 284 B

4
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>

After

Width:  |  Height:  |  Size: 285 B

50
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
color.text.white=#ffffff
color.text.placeholder=#0A1C3878
color.text.highlight=#0A1C38E6
Component.defaultHeight=24
# 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.trackColor = darken(@background,18%)
Slider.thumbColor = $Slider.trackValueColor
Slider.trackValueColor=$brand.normal
Slider.trackColor=$border.divider
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.pressedThumbColor = darken($Slider.thumbColor,8%,derived)
Slider.hoverThumbColor=$fill.hover
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.formdev.flatlaf.ui.FlatMarginBorder
TextArea.border=com.fine.theme.light.ui.FineRoundBorder
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.formdev.flatlaf.ui.FlatTextBorder
TextField.border=com.fine.theme.light.ui.FineRoundBorder
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

4
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();
}

Loading…
Cancel
Save