Browse Source

Pull request #13349: REPORT-111566 【控件显示增强】设计面板视觉优化

Merge in DESIGN/design from ~OBO/design1:release/11.0 to release/11.0

* commit '1203dd585a0452409b7e787b096e3bba0d2f457a':
  改个默认颜色,把类中的去掉,不提代码了,就一行
  少提一个类
  改下注释
  设计面板视觉优化,调整了主题面板的实现,可以根据布局自适应宽高,不写死宽度
  REPORT-111566 【控件显示增强】设计面板视觉优化
release/11.0
Obo-王学仁 11 months ago
parent
commit
d54e21392c
  1. 12
      designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java
  2. 15
      designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java
  3. 18
      designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java
  4. 70
      designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetTextStylePane.java
  5. 40
      designer-base/src/main/java/com/fr/widgettheme/util/ThemeTextStylePaneCreator.java
  6. 35
      designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java
  7. 11
      designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java
  8. 11
      designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java
  9. 12
      designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java
  10. 2
      designer-realize/src/main/java/com/fr/design/webattr/EditToolBar.java

12
designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java

@ -5,12 +5,14 @@ import com.fr.base.theme.TemplateTheme;
import com.fr.design.style.color.NewColorSelectBox;
import com.fr.widgettheme.theme.widget.style.BorderStyle;
import com.fr.widgettheme.theme.widget.style.ButtonBackgroundStyle;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
import com.fr.design.gui.ibutton.UIRadioButton;
import com.fr.design.gui.ilable.UILabel;
import com.fr.design.i18n.Toolkit;
import com.fr.design.layout.FRGUIPaneFactory;
import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
import javax.swing.ButtonGroup;
import javax.swing.JPanel;
@ -52,7 +54,7 @@ public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetS
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Style")), stylePane},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Line")), lineComboBox},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Radius")), borderRadiusSpinner},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), textStylePane},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton)},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Background_Select_Box")), selectBackgroundColorBox}
};
}
@ -86,7 +88,8 @@ public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetS
colorSelectBox.setSelectObject(style.getThemeColor());
lineComboBox.setSelectedLineStyle(style.getBorderStyle().getLineType());
borderRadiusSpinner.setValue(style.getBorderStyle().getRadius());
textStylePane.setTextStyle(style.getTextStyle());
fontSizePane.setValue(style.getTextStyle().getFontSize());
fontColorButton.setColor(style.getTextStyle().getFontColor());
selectBackgroundColorBox.setSelectObject(style.getSelectBackgroundColor());
}
@ -102,7 +105,10 @@ public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetS
borderStyle.setLineType(lineComboBox.getSelectedLineStyle());
borderStyle.setRadius((int) borderRadiusSpinner.getValue());
style.setBorderStyle(borderStyle);
style.setTextStyle(textStylePane.getTextStyle());
ThemeTextStyle textStyle = new ThemeTextStyle();
textStyle.setFontSize(fontSizePane.getValue());
textStyle.setFontColor(fontColorButton.getColor());
style.setTextStyle(textStyle);
ButtonBackgroundStyle buttonBackgroundStyle = new ButtonBackgroundStyle();
ColorBackground buttonBackground = ColorBackground.getInstance(style.getThemeColor());
buttonBackgroundStyle.setInitialBackground(buttonBackground);

15
designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java

@ -1,10 +1,11 @@
package com.fr.widgettheme.theme.edit.widget;
import com.fr.base.theme.TemplateTheme;
import com.fr.widgettheme.theme.panel.WidgetTextStylePane;
import com.fr.design.gui.frpane.FontSizeComboPane;
import com.fr.widgettheme.theme.widget.style.BorderStyle;
import com.fr.widgettheme.theme.widget.style.MobileThemedWidgetStyle;
import com.fr.design.gui.icombobox.LineComboBox;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
import java.util.Arrays;
@ -38,8 +39,8 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
}
@Override
protected void initTextStylePane() {
textStylePane = new WidgetTextStylePane(FONT_SIZES, 140);
protected void initFontSizePane() {
fontSizePane = new FontSizeComboPane(FONT_SIZES);
}
@Override
@ -52,7 +53,8 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
colorSelectBox.setSelectObject(style.getThemeColor());
lineComboBox.setSelectedLineStyle(style.getBorderStyle().getLineType());
borderRadiusSpinner.setValue(style.getBorderStyle().getRadius());
textStylePane.setTextStyle(style.getTextStyle());
fontSizePane.setValue(style.getTextStyle().getFontSize());
fontColorButton.setColor(style.getTextStyle().getFontColor());
}
@Override
@ -67,7 +69,10 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
borderStyle.setLineType(lineComboBox.getSelectedLineStyle());
borderStyle.setRadius((int) borderRadiusSpinner.getValue());
style.setBorderStyle(borderStyle);
style.setTextStyle(textStylePane.getTextStyle());
ThemeTextStyle textStyle = new ThemeTextStyle();
textStyle.setFontSize(fontSizePane.getValue());
textStyle.setFontColor(fontColorButton.getColor());
style.setTextStyle(textStyle);
}
}

18
designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java

@ -3,6 +3,8 @@ package com.fr.widgettheme.theme.edit.widget;
import com.fr.base.theme.TemplateTheme;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.designer.IntervalConstants;
import com.fr.design.gui.frpane.FontSizeComboPane;
import com.fr.design.gui.ibutton.UIColorButton;
import com.fr.design.gui.icombobox.LineComboBox;
import com.fr.design.gui.ilable.UILabel;
import com.fr.design.gui.ispinner.UISpinner;
@ -13,8 +15,8 @@ import com.fr.design.layout.TableLayout;
import com.fr.design.layout.TableLayoutHelper;
import com.fr.design.style.color.NewColorSelectBox;
import com.fr.stable.StringUtils;
import com.fr.widgettheme.theme.panel.WidgetTextStylePane;
import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
import org.jetbrains.annotations.Nullable;
import javax.swing.BorderFactory;
@ -42,7 +44,9 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
/**
* 文本样式面板
*/
protected WidgetTextStylePane textStylePane;
protected FontSizeComboPane fontSizePane;
protected UIColorButton fontColorButton;
public WidgetStyleEditPane() {
initComponents();
@ -72,7 +76,7 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Color")), colorSelectBox},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Line")), lineComboBox},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Radius")), borderRadiusSpinner},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), textStylePane}
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton)}
};
}
@ -81,12 +85,12 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
colorSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_THEME_COLOR);
initLineBox();
borderRadiusSpinner = new UISpinner(0, Integer.MAX_VALUE, 1);
initTextStylePane();
textStylePane.setFontSizeValue(16);
initFontSizePane();
fontColorButton = new UIColorButton();
}
protected void initTextStylePane() {
textStylePane = new WidgetTextStylePane(FRFontPane.getFontSizes(), WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH);
protected void initFontSizePane() {
fontSizePane = new FontSizeComboPane(FRFontPane.getFontSizes());
}
/**

70
designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetTextStylePane.java

@ -1,70 +0,0 @@
package com.fr.widgettheme.theme.panel;
import com.fr.design.gui.ibutton.UIColorButton;
import com.fr.design.gui.frpane.FontSizeComboPane;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import javax.swing.BorderFactory;
import javax.swing.JPanel;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.util.Vector;
/**
* 控件文本样式配置面板
* 包含文本字体大小和字体颜色
*
* @author oBo
* @since 11.0
* Created on 2023/12/13
*/
public class WidgetTextStylePane extends JPanel {
private final FontSizeComboPane fontSizePane;
private final UIColorButton fontColorButton;
public WidgetTextStylePane(int preferredWidth) {
this(null, preferredWidth);
}
public WidgetTextStylePane(Vector<Integer> fontSizes, int preferredWidth) {
this.setLayout(new FlowLayout(FlowLayout.LEFT));
this.setBorder(BorderFactory.createEmptyBorder());
fontSizePane = new FontSizeComboPane(fontSizes);
fontColorButton = new UIColorButton();
fontSizePane.setPreferredSize(new Dimension(preferredWidth, fontSizePane.getPreferredSize().height));
this.add(fontSizePane);
this.add(fontColorButton);
}
public void setTextStyle(ThemeTextStyle themeTextStyle) {
this.fontSizePane.setValue(themeTextStyle.getFontSize());
this.fontColorButton.setColor(themeTextStyle.getFontColor());
}
public ThemeTextStyle getTextStyle() {
ThemeTextStyle themeTextStyle = new ThemeTextStyle();
themeTextStyle.setFontSize(this.fontSizePane.getValue());
themeTextStyle.setFontColor(this.fontColorButton.getColor());
return themeTextStyle;
}
public void setFontSizeValue(int fontSize) {
this.fontSizePane.setValue(fontSize);
}
public void setFontColorValue(Color fontColor) {
this.fontColorButton.setColor(fontColor);
}
public int getFontSizeValue() {
return this.fontSizePane.getValue();
}
public Color getFontColorValue() {
return this.fontColorButton.getColor();
}
}

40
designer-base/src/main/java/com/fr/widgettheme/util/ThemeTextStylePaneCreator.java

@ -0,0 +1,40 @@
package com.fr.widgettheme.util;
import com.fr.design.gui.frpane.FontSizeComboPane;
import com.fr.design.gui.ibutton.UIColorButton;
import com.fr.design.layout.TableLayout;
import com.fr.design.layout.TableLayoutHelper;
import javax.swing.Box;
import javax.swing.JPanel;
import java.awt.Component;
/**
* 创建主题文本样式的工具类
*
* @author obo
* @since 11.0
* Created on 2023/12/21
*/
public class ThemeTextStylePaneCreator {
private ThemeTextStylePaneCreator() {}
/**
* 创建主题文本样式配置面板
* 包含字体大小下拉框和字体颜色按钮
* 可以自适应布局
*
* @param fontSizePane 字体大小配置
* @param fontColorButton 字体颜色配置
* @return 文本样式面板
*/
public static JPanel create(FontSizeComboPane fontSizePane, UIColorButton fontColorButton) {
Component[][] components = {{fontSizePane, Box.createHorizontalStrut(5), fontColorButton}};
double f = TableLayout.FILL;
double p = TableLayout.PREFERRED;
double[] rowSize = {f};
double[] columnSize = {f, p, p};
int[][] rowCount = {{1, 1, 1}};
return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, 0, 0);
}
}

35
designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java

@ -1,7 +1,8 @@
package com.fr.design.widgettheme;
import com.fr.base.theme.TemplateTheme;
import com.fr.widgettheme.theme.panel.WidgetTextStylePane;
import com.fr.design.gui.frpane.FontSizeComboPane;
import com.fr.design.gui.ibutton.UIColorButton;
import com.fr.widgettheme.theme.widget.style.BorderStyle;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
@ -25,11 +26,13 @@ import com.fr.form.ui.Widget;
import com.fr.general.FRFont;
import com.fr.widgettheme.theme.panel.ButtonStyleDefinedPane;
import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
import javax.swing.BorderFactory;
import javax.swing.ButtonGroup;
import javax.swing.JPanel;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.util.HashMap;
import java.util.List;
@ -63,12 +66,18 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
protected FRFontPane frFontPane;
// 按钮背景设置
protected ButtonStyleDefinedPane buttonStyleDefinedPane;
protected NewColorSelectBox selectBgColorBox;
/**
* 文本样式
* 包含字体大小字体颜色
* 主题文本样式的字体大小
*/
protected WidgetTextStylePane textStylePane;
protected NewColorSelectBox selectBgColorBox;
protected FontSizeComboPane fontSizePane;
/**
* 主题文本样式的字体颜色
*/
protected UIColorButton fontColorButton;
private final Map<StyleSetting, UILabel> labelMap = new HashMap<>();
private final Map<StyleSetting, Component> paneMap = new HashMap<>();
@ -94,12 +103,13 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
borderRadiusSpinner = new UIBoundSpinner(0, Integer.MAX_VALUE, 1);
frFontPane = new FRFontPane();
buttonStyleDefinedPane = new ButtonStyleDefinedPane();
textStylePane = new WidgetTextStylePane(100);
selectBgColorBox = new NewColorSelectBox(160, true);
fontSizePane = new FontSizeComboPane();
fontColorButton = new UIColorButton();
paneMap.put(StyleSetting.STYLE_TYPE, createStyleTypePane());
paneMap.put(StyleSetting.THEME_COLOR, colorSelectBox);
paneMap.put(StyleSetting.LINE_TYPE, lineComboBox);
paneMap.put(StyleSetting.TEXT_STYLE, textStylePane);
paneMap.put(StyleSetting.TEXT_STYLE, ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton));
paneMap.put(StyleSetting.BORDER_RADIUS, borderRadiusSpinner);
paneMap.put(StyleSetting.FONT, frFontPane);
paneMap.put(StyleSetting.BTN_BACKGROUND, buttonStyleDefinedPane);
@ -242,7 +252,9 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
}
private void setTextStylePane(ThemedWidgetStyle widgetStyle) {
this.textStylePane.setTextStyle(widgetStyle.getTextStyle());
ThemeTextStyle textStyle = widgetStyle.getTextStyle();
this.fontSizePane.setValue(textStyle.getFontSize());
this.fontColorButton.setColor(textStyle.getFontColor());
}
private void setFrFontPane() {
@ -269,8 +281,11 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
if (borderRadiusSpinner != null) {
borderRadiusSpinner.setValue(BorderStyle.DEFAULT_BORDER_RADIUS);
}
if (textStylePane != null) {
textStylePane.setTextStyle(new ThemeTextStyle());
if (fontSizePane != null) {
fontSizePane.setValue(ThemeTextStyle.DEFAULT_FONT_SIZE);
}
if (fontColorButton != null) {
fontColorButton.setColor(Color.BLACK);
}
if (frFontPane != null) {
frFontPane.populateBean(FRFont.getInstance());

11
designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java

@ -2,6 +2,7 @@ package com.fr.design.widgettheme;
import com.fr.design.widgettheme.common.ButtonSettingPane;
import com.fr.form.ui.Widget;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.theme.ParaButtonTheme;
import com.fr.widgettheme.theme.widget.theme.cell.ButtonTheme;
@ -32,14 +33,18 @@ public class ParaButtonSettingPane<T extends Widget> extends ButtonSettingPane<T
@Override
protected void assignFontSizePane(ButtonTheme buttonTheme) {
ParaButtonTheme paraButtonTheme = (ParaButtonTheme) buttonTheme;
textStylePane.setTextStyle(paraButtonTheme.getTextStyle());
ThemeTextStyle textStyle = ((ParaButtonTheme) buttonTheme).getTextStyle();
fontSizePane.setValue(textStyle.getFontSize());
fontColorButton.setColor(textStyle.getFontColor());
}
@Override
protected void assignFontSizeStyle(ButtonTheme buttonTheme) {
ParaButtonTheme paraButtonTheme = (ParaButtonTheme) buttonTheme;
paraButtonTheme.setTextStyle(textStylePane.getTextStyle());
ThemeTextStyle textStyle = new ThemeTextStyle();
textStyle.setFontSize(fontSizePane.getValue());
textStyle.setFontColor(fontColorButton.getColor());
paraButtonTheme.setTextStyle(textStyle);
}
}

11
designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java

@ -2,6 +2,7 @@ package com.fr.design.widgettheme;
import com.fr.design.widgettheme.common.EditorSettingPane;
import com.fr.form.ui.Widget;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.theme.ParaEditorTheme;
import com.fr.widgettheme.theme.widget.theme.cell.EditorTheme;
@ -35,14 +36,18 @@ public class ParaEditorSettingPane<T extends Widget> extends EditorSettingPane<T
@Override
protected void assignFontSizePane(EditorTheme widgetTheme) {
ParaEditorTheme paraEditorTheme= (ParaEditorTheme) widgetTheme;
textStylePane.setTextStyle(paraEditorTheme.getTextStyle());
ThemeTextStyle textStyle = ((ParaEditorTheme) widgetTheme).getTextStyle();
fontSizePane.setValue(textStyle.getFontSize());
fontColorButton.setColor(textStyle.getFontColor());
}
@Override
protected void assignFontSizeStyle(EditorTheme widgetTheme) {
ParaEditorTheme paraEditorTheme= (ParaEditorTheme) widgetTheme;
paraEditorTheme.setTextStyle(textStylePane.getTextStyle());
ThemeTextStyle textStyle = new ThemeTextStyle();
textStyle.setFontSize(fontSizePane.getValue());
textStyle.setFontColor(fontColorButton.getColor());
paraEditorTheme.setTextStyle(textStyle);
}
@Override

12
designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java

@ -2,6 +2,7 @@ package com.fr.design.widgettheme;
import com.fr.design.widgettheme.common.TreeEditorSettingPane;
import com.fr.form.ui.TreeEditor;
import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
import com.fr.widgettheme.theme.widget.theme.ParaTreeTheme;
import com.fr.widgettheme.theme.widget.theme.cell.TreeTheme;
@ -32,13 +33,16 @@ public class ParaTreeEditorSettingPane<T extends TreeEditor> extends TreeEditorS
@Override
protected void assignFontSizePane(TreeTheme widgetTheme) {
ParaTreeTheme paraTreeTheme= (ParaTreeTheme) widgetTheme;
textStylePane.setTextStyle(paraTreeTheme.getTextStyle());
ThemeTextStyle textStyle = widgetTheme.getTextStyle();
fontSizePane.setValue(textStyle.getFontSize());
fontColorButton.setColor(textStyle.getFontColor());
}
@Override
protected void assignFontSizeStyle(TreeTheme widgetTheme) {
ParaTreeTheme paraTreeTheme= (ParaTreeTheme) widgetTheme;
paraTreeTheme.setTextStyle(textStylePane.getTextStyle());
ThemeTextStyle textStyle = new ThemeTextStyle();
textStyle.setFontSize(fontSizePane.getValue());
textStyle.setFontColor(fontColorButton.getColor());
widgetTheme.setTextStyle(textStyle);
}
}

2
designer-realize/src/main/java/com/fr/design/webattr/EditToolBar.java

@ -182,7 +182,7 @@ public class EditToolBar extends BasicPane {
if(WidgetThemeDesignerUtils.enableWidgetEnhance()) {
backgroundPane.add(createButtonColorGroup());
}
backgroundPane.setBorder(BorderFactory.createTitledBorder(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Set_Background")));
backgroundPane.setBorder(BorderFactory.createTitledBorder(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_ToolBar_Style_Setting")));
this.add(backgroundPane, BorderLayout.SOUTH);
}

Loading…
Cancel
Save