Improve styling of GCode details panels

- Issue MatterHackers/MCCentral#2812
This commit is contained in:
John Lewin 2018-02-09 22:51:18 -08:00
parent 5c76436fb5
commit ca626efee1
5 changed files with 61 additions and 45 deletions

View file

@ -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;

View file

@ -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();

View file

@ -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;
}

View file

@ -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)

View file

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