From ca626efee15081760a05dc660fed102ed2c88149 Mon Sep 17 00:00:00 2001 From: John Lewin Date: Fri, 9 Feb 2018 22:51:18 -0800 Subject: [PATCH] Improve styling of GCode details panels - Issue MatterHackers/MCCentral#2812 --- ApplicationView/ThemeConfig.cs | 11 ++++-- Library/Widgets/ExpandCheckboxButton.cs | 44 +++++++++++++++------- PartPreviewWindow/GCode3DWidget.cs | 12 +++--- PartPreviewWindow/SectionWidget.cs | 37 +++++++----------- SlicerConfiguration/SliceSettingsWidget.cs | 2 +- 5 files changed, 61 insertions(+), 45 deletions(-) diff --git a/ApplicationView/ThemeConfig.cs b/ApplicationView/ThemeConfig.cs index fa04c5dfa..fe9857768 100644 --- a/ApplicationView/ThemeConfig.cs +++ b/ApplicationView/ThemeConfig.cs @@ -428,10 +428,15 @@ namespace MatterHackers.MatterControl { public static SectionWidget ApplyBoxStyle(this SectionWidget sectionWidget) { - return ApplyBoxStyle(sectionWidget, ApplicationController.Instance.Theme.MinimalShade); + return ApplyBoxStyle(sectionWidget, ApplicationController.Instance.Theme.MinimalShade, new BorderDouble(10, 0, 10, 10)); } - public static SectionWidget ApplyBoxStyle(this SectionWidget sectionWidget, Color backgroundColor) + public static SectionWidget ApplyBoxStyle(this SectionWidget sectionWidget, BorderDouble borderDouble) + { + return ApplyBoxStyle(sectionWidget, ApplicationController.Instance.Theme.MinimalShade, borderDouble); + } + + public static SectionWidget ApplyBoxStyle(this SectionWidget sectionWidget, Color backgroundColor, BorderDouble borderDouble) { // Enforce panel padding // sectionWidget.ContentPanel.Padding = new BorderDouble(10, 0, 10, 2); @@ -439,7 +444,7 @@ namespace MatterHackers.MatterControl sectionWidget.SeperatorColor = Color.Transparent; sectionWidget.BorderRadius = 5; - sectionWidget.Margin = new BorderDouble(10, 0, 10, 10); + sectionWidget.Margin = borderDouble; sectionWidget.BackgroundColor = backgroundColor; return sectionWidget; diff --git a/Library/Widgets/ExpandCheckboxButton.cs b/Library/Widgets/ExpandCheckboxButton.cs index b7046651f..15e289a9c 100644 --- a/Library/Widgets/ExpandCheckboxButton.cs +++ b/Library/Widgets/ExpandCheckboxButton.cs @@ -40,30 +40,33 @@ namespace MatterHackers.MatterControl.CustomWidgets private ImageWidget imageWidget; - private ImageBuffer arrowRight; + private GuiWidget imageButton; - private ImageBuffer arrowDown; + private ImageBuffer arrowRight = AggContext.StaticData.LoadIcon("fa-angle-right_12.png", IconColor.Theme); + + private ImageBuffer arrowDown = AggContext.StaticData.LoadIcon("fa-angle-down_12.png", IconColor.Theme); private TextWidget textWidget; - public ExpandCheckboxButton(string text, int pointSize = 11) + public ExpandCheckboxButton(string text, int pointSize = 11, bool expandable = true) { - arrowRight = AggContext.StaticData.LoadIcon("fa-angle-right_12.png", IconColor.Theme); - arrowDown = AggContext.StaticData.LoadIcon("fa-angle-down_12.png", IconColor.Theme); - var theme = ApplicationController.Instance.Theme; - var button = new GuiWidget() + imageButton = new GuiWidget() { - MinimumSize = new VectorMath.Vector2(theme.ButtonHeight, 20), - VAnchor = VAnchor.Center + MinimumSize = new VectorMath.Vector2((expandable) ? theme.ButtonHeight : 10, 20), + VAnchor = VAnchor.Center, }; - button.AddChild(imageWidget = new ImageWidget(arrowRight) + imageButton.AddChild(imageWidget = new ImageWidget(arrowRight) { VAnchor = VAnchor.Center, - HAnchor = HAnchor.Center + HAnchor = HAnchor.Center, + Visible = expandable }); - this.AddChild(button); + this.AddChild(imageButton); + + _expandable = expandable; + this.AddChild(textWidget = new TextWidget(text, pointSize: pointSize, textColor: ActiveTheme.Instance.PrimaryTextColor) { VAnchor = VAnchor.Center, @@ -76,6 +79,21 @@ namespace MatterHackers.MatterControl.CustomWidgets } } + private bool _expandable = true; + public bool Expandable + { + get => _expandable; + set + { + if (_expandable != value) + { + _expandable = value; + imageWidget.Visible = _expandable; + this.MinimumSize = new VectorMath.Vector2((_expandable) ? this.MinimumSize.X : 10, this.MinimumSize.Y); + } + } + } + public override string Text { get => textWidget.Text; @@ -103,7 +121,7 @@ namespace MatterHackers.MatterControl.CustomWidgets { _checked = value; - imageWidget.Image = value ? arrowDown: arrowRight; + imageWidget.Image = value ? arrowDown : arrowRight; Invalidate(); diff --git a/PartPreviewWindow/GCode3DWidget.cs b/PartPreviewWindow/GCode3DWidget.cs index 3ecdf583c..d999b3fb1 100644 --- a/PartPreviewWindow/GCode3DWidget.cs +++ b/PartPreviewWindow/GCode3DWidget.cs @@ -76,8 +76,6 @@ namespace MatterHackers.MatterControl.PartPreviewWindow var gcodeResultsPanel = new FlowLayoutWidget(FlowDirection.TopToBottom) { Margin = new BorderDouble(0, 0, 35, 0), - Padding = new BorderDouble(10, 10, 10, 8), - BackgroundColor = theme.InteractionLayerOverlayColor, HAnchor = HAnchor.Absolute | HAnchor.Right, VAnchor = VAnchor.Top | VAnchor.Fit, Width = 175 @@ -90,9 +88,11 @@ namespace MatterHackers.MatterControl.PartPreviewWindow new GCodeDetailsView(new GCodeDetails(printer, printer.Bed.LoadedGCode), theme.FontSize12, theme.FontSize9) { HAnchor = HAnchor.Fit, - Margin = new BorderDouble(bottom: 3) + Margin = new BorderDouble(bottom: 3), + Padding = new BorderDouble(15, 4) }, - theme)); + theme, + expandingContent: false).ApplyBoxStyle(new BorderDouble(top: 10))); gcodeResultsPanel.AddChild( speedsWidget = new SectionWidget( @@ -101,8 +101,10 @@ namespace MatterHackers.MatterControl.PartPreviewWindow { HAnchor = HAnchor.Stretch, Visible = sceneContext.RendererOptions.RenderSpeeds, + Padding = new BorderDouble(15, 4) }, - theme)); + theme, + expandingContent: false).ApplyBoxStyle(new BorderDouble(top: 10))); speedsWidget.Visible = printer.Bed.RendererOptions.RenderSpeeds; } diff --git a/PartPreviewWindow/SectionWidget.cs b/PartPreviewWindow/SectionWidget.cs index e2d89bc72..921f5755c 100644 --- a/PartPreviewWindow/SectionWidget.cs +++ b/PartPreviewWindow/SectionWidget.cs @@ -25,31 +25,22 @@ namespace MatterHackers.MatterControl.CustomWidgets // Add heading var pointSize = (headingPointSize) == -1 ? theme.DefaultFontSize : headingPointSize; - GuiWidget heading; - - if (expandingContent) + checkbox = new ExpandCheckboxButton(sectionTitle, pointSize: pointSize, expandable: expandingContent) { - checkbox = new ExpandCheckboxButton(sectionTitle, pointSize: pointSize) - { - HAnchor = HAnchor.Stretch, - Checked = expanded, - }; - checkbox.CheckedStateChanged += (s, e) => - { - ContentPanel.Visible = checkbox.Checked; - // TODO: Remove this Height = 10 and figure out why the layout engine is not sizing these corretly without this. - ContentPanel.Height = 10; - this.BorderColor = (checkbox.Checked) ? Color.Transparent : SeperatorColor; - }; - - this.BorderColor = BorderColor = (expanded) ? Color.Transparent : SeperatorColor; - - heading = checkbox; - } - else + HAnchor = HAnchor.Stretch, + Checked = expanded, + }; + checkbox.CheckedStateChanged += (s, e) => { - heading = new TextWidget(sectionTitle, pointSize: pointSize, textColor: theme.Colors.PrimaryTextColor); - } + ContentPanel.Visible = checkbox.Checked; + // TODO: Remove this Height = 10 and figure out why the layout engine is not sizing these corretly without this. + ContentPanel.Height = 10; + this.BorderColor = (checkbox.Checked) ? Color.Transparent : SeperatorColor; + }; + + this.BorderColor = BorderColor = (expanded) ? Color.Transparent : SeperatorColor; + + GuiWidget heading = checkbox; heading.Padding = new BorderDouble(0, 5, 0, 6); if (rightAlignedContent == null) diff --git a/SlicerConfiguration/SliceSettingsWidget.cs b/SlicerConfiguration/SliceSettingsWidget.cs index a2620995a..2824fe09c 100644 --- a/SlicerConfiguration/SliceSettingsWidget.cs +++ b/SlicerConfiguration/SliceSettingsWidget.cs @@ -437,7 +437,7 @@ namespace MatterHackers.MatterControl.SlicerConfiguration }; var sectionWidget = new SectionWidget(group.Name, groupPanel, theme).ApplyBoxStyle(); - + foreach (var subGroup in group.SubGroups) { var subGroupPanel = this.AddSettingRowsForSubgroup(subGroup);