fly/fgdata
1
0
Fork 0
Code Activity

GUI style: make sizes parametric

Browse source
This commit is contained in:
James Turner 2023-01-24 18:49:32 +00:00
parent 7dd431cbbd
commit b3b2871523
4 changed files with 93 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
Nasal/canvas/gui/Style.nas
View file

@ -11,16 +11,57 @@ gui.Style = {
_path: style_path,
_dir_icons: gui_path ~ "/icons/" ~ name_icon_theme,
_node: io.read_properties(style_path ~ "/style.xml", root_node),
_colors: {}
_colors: {},
_sizes: {}
};
# parse theme colors
var comp_names = ["red", "green", "blue", "alpha"];
var colors = m._node.getChild("colors");
if( colors != nil )
{
foreach(var color; colors.getChildren())
{
var tintNode = color.getChild("tint");
var shadeNode = color.getChild("shade");
var baseNode = color.getChild("base");
if (tintNode and baseNode) {
} elsif (shadeNode and baseNode) {
} else {
# todo : support a CSS style color as a direct text child,
# instead of seperate RGBA components
m._colors[ color.getName() ] = m._parseRGBANodes(color);
}
}
}
var sizes = m._node.getChild("sizes");
if (sizes) {
foreach(var sizeNode; sizes.getChildren()) {
var factorNode = sizeNode.getChild("factor");
var baseNode = sizeNode.getChild("base");
if (factorNode or baseNode) {
var f = factorNode.getValue() or 1.0;
m._sizes[sizeNode.getName()] = f * m.getSize(baseNode.getValue(), 1.0);
} else {
# simple literal value, easy
m._sizes[sizeNode.getName()] = sizeNode.getValue();
}
} # of sizes iteration
}
m._dir_decoration =
m._path ~ "/" ~ (m._node.getValue("folders/decoration") or "decoration");
m._dir_widgets =
m._path ~ "/" ~ (m._node.getValue("folders/widgets") or "widgets");
return m;
},
_parseRGBANodes: func(color)
{
var comp_names = ["red", "green", "blue", "alpha"];
var str = "rgba(";
for(var i = 0; i < size(comp_names); i += 1)
{
@ -34,19 +75,15 @@ gui.Style = {
else
str ~= int(val * 100) / 100;
}
m._colors[ color.getName() ] = str ~ ")";
}
}
m._dir_decoration =
m._path ~ "/" ~ (m._node.getValue("folders/decoration") or "decoration");
m._dir_widgets =
m._path ~ "/" ~ (m._node.getValue("folders/widgets") or "widgets");
return m;
return str ~ ")";
},
getColor: func(name, def = "#00ffff")
{
return me._colors[name] or def;
},
getSize: func(name, def = 1.0)
{
return me._sizes[name] or def;
}
};

33
Nasal/canvas/gui/styles/DefaultStyle.nas
View file

@ -1063,8 +1063,11 @@ DefaultStyle.widgets["combo-box"] = {
setSize: func(model, w, h)
{
var halfWidth = int(w * 0.5);
var m = me._style.getSize("margin");
var inset = me._style.getSize("text-inset");
me._bg.reset()
.rect(3, 3, w - 6, h - 6, {"border-radius": 5});
.rect(m, m, w - (m * 2), h - (m * 2), {"border-radius": me._style.getSize("frame-radius")});
# we split the two pieces
me._border.setSize(halfWidth, h);
@ -1072,15 +1075,15 @@ DefaultStyle.widgets["combo-box"] = {
me._buttonBorder.setSize(w - halfWidth, h);
var arrowSize = me._arrowIcon.imageSize();
me._arrowIcon.setTranslation(w - (arrowSize[0] + 20), (h - arrowSize[1]) * 0.5);
me._arrowIcon.setTranslation(w - (arrowSize[0] + inset), (h - arrowSize[1]) * 0.5);
me._label.setTranslation(20, h * 0.5);
me._label.setTranslation(inset, h * 0.5);
},
setText: func(model, text)
{
me._label.setText(text);
var min_width = math.max(80, me._label.maxWidth() + 16 + me._arrowIcon.imageSize()[0]);
var inset = me._style.getSize("text-inset");
var min_width = math.max(80, me._label.maxWidth() + inset + me._arrowIcon.imageSize()[0]);
model.setLayoutMinimumSize([min_width, 16]);
model.setLayoutSizeHint([min_width, 28]);
@ -1142,23 +1145,26 @@ DefaultStyle.widgets["list-item"] = {
new: func(parent, cfg) {
me._root = parent.createChild("group", "list-item");
me._bg = me._root.createChild("path");
me._itemHeight = me._style.getSize("list-item-height");
me._label = me._root.createChild("text")
.set("font", "LiberationFonts/LiberationSans-Regular.ttf")
.set("character-size", 14)
.set("character-size", me._style.getSize("list-font-size"))
.set("alignment", "left-baseline");
},
setSize: func(model, w, h) {
me._bg.reset().rect(0, 0, w, 24);
me._label.setTranslation(5, int(h / 2) + 4);
me._bg.reset().rect(0, 0, w, me._itemHeight);
var m = me._style.getSize("margin");
me._label.setTranslation(m, int(h / 2) + m);
return me;
},
_updateLayoutSizes: func(model) {
var min_width = 5 + me._label.maxWidth() + 5;
model.setLayoutMinimumSize([min_width, 24]);
model.setLayoutSizeHint([min_width, 24]);
var m = me._style.getSize("margin");
var min_width = m + me._label.maxWidth() + m;
model.setLayoutMinimumSize([min_width, me._itemHeight]);
model.setLayoutSizeHint([min_width, me._itemHeight]);
return me;
},
@ -1195,6 +1201,11 @@ DefaultStyle.widgets.list = {
me._bg.set("fill", me._style.getColor("bg_color"));
return me;
},
_updateLayoutSizes: func(model) {
model.setLayoutMinimumSize([me._itemHeight * 2, me._itemHeight]);
model.setLayoutMaximumSize([model._MAX_SIZE, me._itemHeight]);
}
};

4
Nasal/canvas/gui/widgets/List.nas
View file

@ -16,9 +16,7 @@ gui.widgets.ListItem = {
m._list = nil;
m._setView(style.createWidget(parent, "list-item", m._cfg));
m.setLayoutMinimumSize([48, 24]);
m.setLayoutMaximumSize([m._MAX_SIZE, 24]);
m._view._updateLayoutSizes(m);
m.setText(m._text);
m.setSelected(m._selected);

16
gui/styles/AmbianceClassic/style.xml
View file

@ -258,4 +258,20 @@
<blue type="float">1</blue>
</radio_button_selected_indicator_color_disabled>
</colors>
<sizes>
<margin type="int">5</margin>
<frame-radius type="int">5</frame-radius>
<!-- inset is 4x the margin-->
<text-inset>
<base>margin</base>
<factor type="double">3.0</factor>
</text-inset>
<base-font-size type="int">14</base-font-size>
<list-font-size type="int">14</list-font-size>
<list-item-height type="int">24</list-item-height>
</sizes>
</PropertyList>