Canvas: rule lines working with styling
PUI uses these a lot, so good to have them working
This commit is contained in:
parent
d00c983429
commit
aa57b7992f
5 changed files with 73 additions and 39 deletions
|
@ -24,6 +24,11 @@ var WidgetsFactoryDialog = {
|
||||||
.setText("A label")
|
.setText("A label")
|
||||||
.setBackground("#ffaaaa");
|
.setBackground("#ffaaaa");
|
||||||
m.tab_1.addItem(m.label);
|
m.tab_1.addItem(m.label);
|
||||||
|
|
||||||
|
var r = gui.widgets.HorizontalRule.new(m.tabsContent, style, {});
|
||||||
|
r.setText("Checkboxes!");
|
||||||
|
m.tab_1.addItem(r);
|
||||||
|
|
||||||
m.checkbox_left = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
|
m.checkbox_left = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"})
|
||||||
.setText("Wanna check something ?");
|
.setText("Wanna check something ?");
|
||||||
m.tab_1.addItem(m.checkbox_left);
|
m.tab_1.addItem(m.checkbox_left);
|
||||||
|
@ -34,6 +39,9 @@ var WidgetsFactoryDialog = {
|
||||||
.setText("Nav lights");
|
.setText("Nav lights");
|
||||||
m.tab_1.addItem(m.property_checkbox);
|
m.tab_1.addItem(m.property_checkbox);
|
||||||
|
|
||||||
|
var r2 = gui.widgets.HorizontalRule.new(m.tabsContent, style, {});
|
||||||
|
m.tab_1.addItem(r2);
|
||||||
|
|
||||||
m.tab_2 = VBoxLayout.new();
|
m.tab_2 = VBoxLayout.new();
|
||||||
m.tabs.addTab("tab-2", "Tab 2", m.tab_2);
|
m.tabs.addTab("tab-2", "Tab 2", m.tab_2);
|
||||||
m.button = gui.widgets.Button.new(m.tabsContent, style, {})
|
m.button = gui.widgets.Button.new(m.tabsContent, style, {})
|
||||||
|
|
|
@ -546,37 +546,52 @@ DefaultStyle.widgets.rule = {
|
||||||
new: func(parent, cfg)
|
new: func(parent, cfg)
|
||||||
{
|
{
|
||||||
me._root = parent.createChild("group", "rule");
|
me._root = parent.createChild("group", "rule");
|
||||||
me._createElement("bg", "image");
|
var bgColor = me._style.getColor("fg_color");
|
||||||
|
var shadowColor = me._style.getColor("fg_color_shadow");
|
||||||
|
|
||||||
|
me._bg = me._root.createChild("path")
|
||||||
|
.set("fill", bgColor)
|
||||||
|
.set("stroke", bgColor)
|
||||||
|
.set("stroke-width", 1);
|
||||||
|
me._shadow = me._root.createChild("path")
|
||||||
|
.set("fill", shadowColor)
|
||||||
|
.set("stroke", shadowColor)
|
||||||
|
.set("stroke-width", 1);
|
||||||
|
|
||||||
me._isVertical = cfg.get("isVertical");
|
me._isVertical = cfg.get("isVertical");
|
||||||
if (me._isVertical) {
|
|
||||||
me._bg.set("slice", "0 20");
|
|
||||||
me._baseFile = "vrule";
|
|
||||||
} else {
|
|
||||||
me._bg.set("slice", "10 0");
|
|
||||||
me._baseFile = "hrule";
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
setSize: func(model, w, h)
|
setSize: func(model, w, h)
|
||||||
{
|
{
|
||||||
|
var firstWidth = w;
|
||||||
|
var firstHeight = h;
|
||||||
|
var hh = h * 0.5;
|
||||||
|
|
||||||
if( me['_text'] != nil )
|
if( me['_text'] != nil )
|
||||||
{
|
{
|
||||||
# first 20 px
|
firstHeight = firstWidth = 20; # TODO make this settable in Style.xml
|
||||||
me._bg.setTranslation(2, 0);
|
|
||||||
me._bg.setSize(20, h);
|
|
||||||
|
|
||||||
# TODO handle eliding for translations?
|
# TODO handle eliding for translations?
|
||||||
me._text.setTranslation(22, 2 + h / 2);
|
me._text.setTranslation(firstWidth + 3, hh);
|
||||||
var maxW = model._cfg.get("maxTextWidth", -1);
|
var maxW = model._cfg.get("maxTextWidth", -1);
|
||||||
if (maxW > 0) {
|
if (maxW > 0) {
|
||||||
me._text.set("max-width", maxW);
|
me._text.set("max-width", maxW);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
# assume horizontal for now, with a label
|
||||||
var bg2Left = maxW > 0 ? maxW : me._text.maxWidth() + 22;
|
var bg2Left = maxW > 0 ? maxW : me._text.maxWidth() + 22;
|
||||||
me._bg2.setTranslation(bg2Left, 0);
|
var bg2Width = w - bg2Left;
|
||||||
me._bg2.setSize(w - bg2Left, h);
|
me._bg2.reset().rect(bg2Left, hh - 1, bg2Width, 2);
|
||||||
} else {
|
me._shadow2.reset().moveTo(bg2Left + 1, hh).horiz(bg2Width - 1);
|
||||||
me._bg.setSize(w, h);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (me._isVertical ) {
|
||||||
|
me._bg.reset().rect(0, 0, 2, firstHeight);
|
||||||
|
me._shadow.reset().moveTo(1, 1).vert(firstHeight - 1);
|
||||||
|
} else {
|
||||||
|
me._bg.reset().rect(0, hh - 1, firstWidth, 2);
|
||||||
|
me._shadow.reset().moveTo(1, hh).horiz(firstWidth - 1);
|
||||||
|
}
|
||||||
|
|
||||||
return me;
|
return me;
|
||||||
},
|
},
|
||||||
setText: func(model, text)
|
setText: func(model, text)
|
||||||
|
@ -585,6 +600,7 @@ DefaultStyle.widgets.rule = {
|
||||||
{
|
{
|
||||||
# force a resize?
|
# force a resize?
|
||||||
me._deleteElement('bg2');
|
me._deleteElement('bg2');
|
||||||
|
me._deleteElement('shadow2');
|
||||||
return me._deleteElement('text');
|
return me._deleteElement('text');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -597,8 +613,19 @@ DefaultStyle.widgets.rule = {
|
||||||
.setText(text);
|
.setText(text);
|
||||||
|
|
||||||
var width_hint = me._text.maxWidth() + 40;
|
var width_hint = me._text.maxWidth() + 40;
|
||||||
me._createElement("bg2", "image")
|
|
||||||
.set("slice", "10 0");
|
|
||||||
|
var bgColor = me._style.getColor("fg_color");
|
||||||
|
var shadowColor = me._style.getColor("fg_color_shadow");
|
||||||
|
|
||||||
|
me._bg2 = me._root.createChild("path")
|
||||||
|
.set("fill", bgColor)
|
||||||
|
.set("stroke", bgColor)
|
||||||
|
.set("stroke-width", 1);
|
||||||
|
me._shadow2 = me._root.createChild("path")
|
||||||
|
.set("fill", shadowColor)
|
||||||
|
.set("stroke", shadowColor)
|
||||||
|
.set("stroke-width", 1);
|
||||||
|
|
||||||
model.setLayoutMinimumSize([40, 14]);
|
model.setLayoutMinimumSize([40, 14]);
|
||||||
# TODO mark as expanding?
|
# TODO mark as expanding?
|
||||||
|
@ -608,16 +635,7 @@ DefaultStyle.widgets.rule = {
|
||||||
},
|
},
|
||||||
update: func(model)
|
update: func(model)
|
||||||
{
|
{
|
||||||
var file = me._style._dir_widgets ~ "/";
|
|
||||||
file ~= me._baseFile;
|
|
||||||
|
|
||||||
if( !model._enabled )
|
|
||||||
file ~= "-disabled";
|
|
||||||
|
|
||||||
me._bg.set("src", file ~ ".png");
|
|
||||||
if ( me['_bg2'] != nil)
|
|
||||||
me._bg2.set("src", file ~ ".png");
|
|
||||||
|
|
||||||
# different color if disabled?
|
# different color if disabled?
|
||||||
if( me['_text'] != nil )
|
if( me['_text'] != nil )
|
||||||
{
|
{
|
||||||
|
@ -661,7 +679,7 @@ DefaultStyle.widgets.frame = {
|
||||||
{
|
{
|
||||||
me._root = parent.createChild("group", "frame-box");
|
me._root = parent.createChild("group", "frame-box");
|
||||||
me._createElement("bg", "image")
|
me._createElement("bg", "image")
|
||||||
.set("slice", "10 10");
|
.set("slice", "8 8");
|
||||||
me.content = me._root.createChild("group", "frame-content");
|
me.content = me._root.createChild("group", "frame-content");
|
||||||
|
|
||||||
# handle label + checkable flag
|
# handle label + checkable flag
|
||||||
|
@ -670,14 +688,14 @@ DefaultStyle.widgets.frame = {
|
||||||
update: func(model)
|
update: func(model)
|
||||||
{
|
{
|
||||||
var file = me._style._dir_widgets ~ "/";
|
var file = me._style._dir_widgets ~ "/";
|
||||||
file ~= "backdrop-";
|
file ~= "frame";
|
||||||
|
|
||||||
if( !model._enabled )
|
# if( !model._enabled )
|
||||||
file ~= "-disabled";
|
# file ~= "-disabled";
|
||||||
|
|
||||||
me._bg.set("src", file ~ ".png");
|
me._bg.set("src", file ~ ".png");
|
||||||
|
|
||||||
|
me._bg.setSize(model._size[0], model._size[1]);
|
||||||
},
|
},
|
||||||
# protected:
|
# protected:
|
||||||
_createElement: func(name, type)
|
_createElement: func(name, type)
|
||||||
|
|
|
@ -13,9 +13,9 @@ gui.widgets.HorizontalRule = {
|
||||||
m._setView( style.createWidget(parent, "rule", m._cfg) );
|
m._setView( style.createWidget(parent, "rule", m._cfg) );
|
||||||
|
|
||||||
# should ask Style the rule height, not hard-code 1px
|
# should ask Style the rule height, not hard-code 1px
|
||||||
m.setLayoutMinimumSize([16, 1]);
|
m.setLayoutMinimumSize([16, 2]);
|
||||||
m.setLayoutSizeHint([m._MAX_SIZE, 1]); # expand to fill
|
m.setLayoutSizeHint([m._MAX_SIZE, 2]); # expand to fill
|
||||||
m.setLayoutMaximumSize([m._MAX_SIZE, 1]);
|
m.setLayoutMaximumSize([m._MAX_SIZE, 2]);
|
||||||
return m;
|
return m;
|
||||||
},
|
},
|
||||||
setText: func(text)
|
setText: func(text)
|
||||||
|
@ -34,9 +34,9 @@ gui.widgets.VerticalRule = {
|
||||||
m._setView( style.createWidget(parent, "rule", m._cfg) );
|
m._setView( style.createWidget(parent, "rule", m._cfg) );
|
||||||
|
|
||||||
# should ask Style the rule height, not hard-code 1px
|
# should ask Style the rule height, not hard-code 1px
|
||||||
m.setLayoutMinimumSize([1, 16]);
|
m.setLayoutMinimumSize([2, 16]);
|
||||||
m.setLayoutSizeHint([1, m._MAX_SIZE]); # expand to fill
|
m.setLayoutSizeHint([2, m._MAX_SIZE]); # expand to fill
|
||||||
m.setLayoutMaximumSize([1, m._MAX_SIZE]);
|
m.setLayoutMaximumSize([2, m._MAX_SIZE]);
|
||||||
return m;
|
return m;
|
||||||
},
|
},
|
||||||
setText: func(text)
|
setText: func(text)
|
||||||
|
|
|
@ -46,12 +46,20 @@
|
||||||
<blue type="float">0.941</blue>
|
<blue type="float">0.941</blue>
|
||||||
</bg_color>
|
</bg_color>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<fg_color>
|
<fg_color>
|
||||||
<red type="float">0.298</red>
|
<red type="float">0.298</red>
|
||||||
<green type="float">0.298</green>
|
<green type="float">0.298</green>
|
||||||
<blue type="float">0.298</blue>
|
<blue type="float">0.298</blue>
|
||||||
</fg_color>
|
</fg_color>
|
||||||
|
|
||||||
|
<fg_color_shadow>
|
||||||
|
<red type="float">0.398</red>
|
||||||
|
<green type="float">0.38</green>
|
||||||
|
<blue type="float">0.398</blue>
|
||||||
|
</fg_color_shadow>
|
||||||
|
|
||||||
<text_color>
|
<text_color>
|
||||||
<red type="float">0.235</red>
|
<red type="float">0.235</red>
|
||||||
<green type="float">0.235</green>
|
<green type="float">0.235</green>
|
||||||
|
|
BIN
gui/styles/AmbianceClassic/widgets/frame.png
Normal file
BIN
gui/styles/AmbianceClassic/widgets/frame.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 673 B |
Loading…
Add table
Reference in a new issue