Browse Source

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

【问题原因】rt
【改动思路】可折叠面板翻新
newui
Leo.Qin 1 year ago
parent
commit
b7c2ce4c0e
  1. 9
      designer-base/src/main/java/com/fine/theme/light/ui/FineLightIconSet.java
  2. 64
      designer-base/src/main/java/com/fr/design/foldablepane/HeaderPane.java
  3. 9
      designer-base/src/main/java/com/fr/design/foldablepane/UIExpandablePane.java
  4. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_down.svg
  5. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_down_small.svg
  6. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_left.svg
  7. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_left_small.svg
  8. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_right.svg
  9. 4
      designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_right_small.svg
  10. 7
      designer-base/src/main/resources/com/fine/theme/light/ui/laf/FineLightLaf.properties
  11. 21
      designer-realize/src/main/java/com/fr/design/mainframe/cell/settingpane/CellOtherSetPane.java

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

@ -142,8 +142,15 @@ public class FineLightIconSet extends AbstractIconSet {
new SvgIconSource("param_view", "com/fine/theme/icon/param/view.svg", true, 18),
// 北区菜单栏
new SvgIconSource("notification", "com/fine/theme/icon/notification/notification.svg")
new SvgIconSource("notification", "com/fine/theme/icon/notification/notification.svg"),
// 三角
new SvgIconSource("triangle_down", "com/fine/theme/icon/triangle/triangle_down.svg"),
new SvgIconSource("triangle_down_small", "com/fine/theme/icon/triangle/triangle_down_small.svg"),
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")
);
}
}

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

@ -1,39 +1,42 @@
package com.fr.design.foldablepane;
import com.fine.theme.icon.LazyIcon;
import com.fr.base.GraphHelper;
import com.fr.design.constants.UIConstants;
import javax.swing.BorderFactory;
import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Insets;
/**
* Created by MoMeak on 2017/7/5.
*/
public class HeaderPane extends JPanel {
private static final long serialVersionUID = 1L;
private static final int TITLE_X = 5;
private static final int LEFT_X = 16;
private static final int LEFT_Y = 6;
private static final int NORMAL_FONTSIZE = 12;
private int headWidth;
private int headHeight;
private Color bgColor;
private boolean isShow;
private boolean isPressed = false;
private String title;
private Image image;
private int fontSize;
private final Icon triangleDown;
private final Icon triangleRight;
private final int hGap;
public void setPressed(boolean pressed) {
this.isPressed = pressed;
}
public void setShow(boolean isShow) {
this.isShow = isShow;
}
@ -58,45 +61,44 @@ public class HeaderPane extends JPanel {
@Override
protected void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D) g.create();
// g2d.setColor(isPressed ? UIConstants.POPUP_TITLE_BACKGROUND : UIConstants.COMPONENT_BACKGROUND_COLOR);
headWidth = this.getWidth();
g2d.setColor(getBackground());
g2d.fillRect(0, 0, headWidth, headHeight);
// g2d.setFont(new Font("SimSun", 0, fontSize));
g2d.setPaint(getForeground());
int leftWdith = headWidth - LEFT_X;
g2d.fillRect(0, 0, this.getWidth(), this.getHeight());
int iconY = (this.getHeight() - triangleDown.getIconHeight()) / 2;
if (this.isShow) {
image = UIConstants.DRAG_DOWN_SELECTED_SMALL;
g2d.drawImage(image, leftWdith, LEFT_Y, null);
triangleDown.paintIcon(this, g2d, 0, iconY);
} else {
image = UIConstants.DRAG_LEFT_NORMAL_SMALL;
g2d.drawImage(image, leftWdith, LEFT_Y, null);
triangleRight.paintIcon(this, g2d, 0, iconY);
}
GraphHelper.drawString(g2d, this.title, TITLE_X, headHeight - fontSize / 2 - 1);
}
g2d.setFont(getFont());
g2d.setPaint(getForeground());
g2d.setComposite(AlphaComposite.SrcOver.derive((float) getForeground().getAlpha() / 255));
@Override
public Dimension getPreferredSize() {
return new Dimension(this.getWidth(), headHeight);
}
FontMetrics metrics = g2d.getFontMetrics();
int ascent = metrics.getAscent();
int descent = metrics.getDescent();
@Override
public Dimension getSize() {
return new Dimension(this.getWidth(), headHeight);
double titleY = (double) (getHeight() - (ascent + descent)) / 2 + ascent;
GraphHelper.drawString(g2d, this.title, triangleDown.getIconWidth() + this.hGap, titleY);
g2d.dispose();
}
public HeaderPane(Color bgColor) {
this.bgColor = bgColor;
this.isShow = true;
triangleDown = new LazyIcon("triangle_down");
triangleRight = new LazyIcon("triangle_right");
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.setFont(getFont().deriveFont(Font.BOLD));
this.setBorder(BorderFactory.createEmptyBorder(insets.top, insets.left, insets.bottom, insets.right));
}
public HeaderPane(Color bgColor, String title, int headHeight) {
this(bgColor);
this.title = title;
this.headHeight = headHeight;
this.fontSize = NORMAL_FONTSIZE;
}
public static void main(String[] args) {

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

@ -1,7 +1,10 @@
package com.fr.design.foldablepane;
import javax.swing.*;
import java.awt.*;
import javax.swing.BorderFactory;
import javax.swing.JPanel;
import javax.swing.UIManager;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
@ -42,7 +45,7 @@ public class UIExpandablePane extends JPanel {
}
private void initComponents() {
this.setLayout(new BorderLayout());
this.setLayout(new BorderLayout(0, UIManager.getInt("ExpandablePane.vGap")));
headerPanel = new HeaderPane(color, title, headHeight);
headerPanel.addMouseListener(new PanelAction());

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_down.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="M10.2265 11.6887L21.7729 11.6887C22.2722 11.6887 22.5531 12.263 22.2465 12.6571L16.4733 20.0798C16.2331 20.3886 15.7663 20.3886 15.5261 20.0798L9.75287 12.6571C9.44633 12.263 9.72719 11.6887 10.2265 11.6887Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 371 B

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_down_small.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="M10.4715 13L19.5285 13C19.9201 13 20.1404 13.3996 19.9 13.6738L15.3715 18.8388C15.1831 19.0537 14.8169 19.0537 14.6285 18.8388L10.1 13.6738C9.85957 13.3996 10.0799 13 10.4715 13Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 342 B

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_left.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="M19.3115 10.2267L19.3115 21.7732C19.3115 22.2724 18.7373 22.5533 18.3432 22.2468L10.9205 16.4736C10.6116 16.2333 10.6116 15.7665 10.9205 15.5263L18.3432 9.75311C18.7373 9.44658 19.3115 9.72744 19.3115 10.2267Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 373 B

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_left_small.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="M19 20.5285V11.4715C19 11.0799 18.6004 10.8596 18.3262 11.1L13.1612 15.6285C12.9463 15.8169 12.9463 16.1831 13.1612 16.3715L18.3262 20.9C18.6004 21.1404 19 20.9201 19 20.5285Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 339 B

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_right.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="M12.6885 21.7733V10.2268C12.6885 9.72755 13.2627 9.4467 13.6568 9.75323L21.0795 15.5264C21.3884 15.7667 21.3884 16.2335 21.0795 16.4737L13.6568 22.2469C13.2627 22.5534 12.6885 22.2726 12.6885 21.7733Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 364 B

4
designer-base/src/main/resources/com/fine/theme/icon/triangle/triangle_right_small.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="M13 20.5285V11.4715C13 11.0799 13.3996 10.8596 13.6738 11.1L18.8388 15.6285C19.0537 15.8169 19.0537 16.1831 18.8388 16.3715L13.6738 20.9C13.3996 21.1404 13 20.9201 13 20.5285Z"
fill="#0A1C38" fill-opacity="0.9"/>
</svg>

After

Width:  |  Height:  |  Size: 339 B

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

@ -92,6 +92,7 @@ ViewportUI = com.formdev.flatlaf.ui.FlatViewportUI
color.brand.normal=#2576EF
color.text.white=#ffffff
color.text.placeholder=#0A1C3878
color.text.highlight=#0A1C38E6
# general background and foreground (text color)
@ -1061,6 +1062,12 @@ Tree.hash = darken($Tree.background,10%)
#---- West ----
West.border = #DADEE7
#---- ExpandablePane ----
ExpandablePane.HeaderPane.borderInsets=0, 6, 0, 6
ExpandablePane.HeaderPane.hGap=2
ExpandablePane.vGap=10
HeaderPane.width=248
HeaderPane.height=24
#---- East ----
East.border = #DADEE7

21
designer-realize/src/main/java/com/fr/design/mainframe/cell/settingpane/CellOtherSetPane.java

@ -141,17 +141,18 @@ public class CellOtherSetPane extends AbstractCellAttrPane {
* @return 面板
*/
public JPanel createContentPane() {
JPanel contentPane = FRGUIPaneFactory.createVerticalFlowLayout_F_Pane(true, VerticalFlowLayout.TOP, 0, 0, true);
contentPane.add(new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Basic"), HEAD_WDITH, HEAD_HEIGTH, basicPane()));
contentPane.add(new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Advaced"), HEAD_WDITH, HEAD_HEIGTH, seniorPane()));
contentPane.add(new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Pagination"), HEAD_WDITH, HEAD_HEIGTH, pagePane()));
contentPane.add(new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Desensitization"), HEAD_WDITH, HEAD_HEIGTH, desensitizePane()));
// VerticalFlowLayout 与 实现的滚动条有冲突,因此再加一层panel
JPanel jPanel = new JPanel();
jPanel.add(contentPane);
Component[][] components = new Component[][]{
new Component[]{new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Basic"), HEAD_WDITH, HEAD_HEIGTH, basicPane())},
new Component[]{new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Advaced"), HEAD_WDITH, HEAD_HEIGTH, seniorPane())},
new Component[]{new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Pagination"), HEAD_WDITH, HEAD_HEIGTH, pagePane())},
new Component[]{new UIExpandablePane(Toolkit.i18nText("Fine-Design_Report_Desensitization"), HEAD_WDITH, HEAD_HEIGTH, desensitizePane())}
};
JPanel tableLayoutPane = TableLayoutHelper.createTableLayoutPane(components, new double[]{p, p, p, p}, new double[]{f});
initAllNames();
return jPanel;
return tableLayoutPane;
}
private JPanel desensitizePane() {

Loading…
Cancel
Save