https://linen.dev logo
Powered by
# haxe-ui
  • m
    the absolute is needed to gt the second group of buttons to align correctly
  • b
    so its probably that ive missed the point, but this is what i came up with:
  • b
    Copy code
    xml
<vbox style="padding: 5px;">
    <grid columns="2">
        <custom-button text="Button 1" />
        <custom-button text="Button 2" indicate="true" />
        
        <custom-button text="Button 3" />
        <custom-button text="Button 4" />
        
        <custom-button text="Button 5" indicate="true" />
        <custom-button text="Button 6" />
    </grid>
</vbox>
  • b
    custom-button.xml:
  • b
    Copy code
    xml
<hbox style="spacing: 0">
    <style>
        #indicator {
            background-color: none;
        }
        #indicator.indicate {
            background-color: green;
        }
    </style>
    <box id="indicator" height="100%" width="5" />
    <button id="theButton" />
</hbox>
  • b
    CustomButton.hx:
  • b
    Copy code
    haxe
@:build(haxe.ui.macros.ComponentMacros.build("assets/custom-button.xml"))
class CustomButton extends HBox {
    public function new() {
        super();
    }
    
    public override function get_text():String {
        return theButton.text;
    }
    
    public override function set_text(value:String):String {
        theButton.text = value;
        return value;
    }
    
    public var indicate(get, set):Bool;
    private function get_indicate():Bool {
        return indicator.hasClass("indicate");
    }
    private function set_indicate(value:Bool):Bool {
        if (value == true) {
            indicator.addClass("indicate");
        } else {
            indicator.removeClass("indicate");
        }
        return value; 
    }
}
  • b
    module.xml:
  • b
    Copy code
    xml
<module>
    <components>
        <class package="custom" />
    </components>
</module>
  • b
    but im not sure if thats what you are trying to do? But i really doubt you need an absolute in there
  • m
    so it looks like the buttons can't be put side by side without a space? http://haxeui.org/builder/?nunddd
  • b
    spacing: 0
  • m
    not that it would cause the world to end
  • b
    and Senk Ju said
  • m
    got it!
  • b
    vertical-spacing
    , 
    horizontal-spacing
    or 
    spacing
    for both
  • b
    it would consider revising your layout though... i still dont think its right... but who am i to say? 🙂
  • m
    it's not finalized yet - I was trying to get the layout ok b4 moving to customs - btw all the rest of the "screens" are now custom-components
  • b
    righyo
  • m
    decided I didn't need animations - wasn't looking right to me - so switched to show/hide which simplified thing quite a bit
  • b
    So actually, messing around with the existing focus manager and its not that bad at all really... ive hacked in "actions" in it (which is just a test at this point)... but it all seems to work and feel pretty good tbh
  • m
    @User I seem to be missing something here - getting an error about different property class:
    Copy code
    public override function onClick(e:MouseEvent) {
        return(theButton.onClick);
    }
  • m
    I want to expose the button click from the custom component
  • b
    it'll probably bubble up, but if it doesnt, 
    theButton.onClick = function(e) { this.dispatch(e) }
  • b
    or
    Copy code
    @:bind(theButton, MouseEvent.CLICK)
function onTheButton(e) {
    this.dispatch(e)
}
  • b
    ... ... ... not quite sure what your override is trying to achieve
  • m
    custom-button.onClick = function(e) {} gives no field - so I was thinking maybe I had to override the HBox onClick
  • b
    ah right, i follow now
  • b
    this worked fine for me btw:
  • b
    Copy code
    haxe
            var custom2 = mainView.findComponent("custom2", CustomButton);
            custom2.onClick = function(e) {
                trace("bob");
            }
1...571572573...1687Latest