https://linen.dev logo
Join Discord
Powered by
# haxe-ui
  • b
    take the kenny ui one above, the only reason thats easy for me is because its essentially already done
  • b
    i can spend hours (even days) pissing about with colours and never fully happy, and usually the effect is worse (and blue! 😄 ) - so imo its better for me to expose an api that does allow customisation while not spending too much time actually customising... thats the method to the madness anyway
  • o
    A blog post on how you skinned kenny ui, step by step with insight would likely be quite a good way to create interest in skinning haxe-ui, but these sorts of things absorb a lot of time.
  • o
    I mean explaining the approach is easy to say but likely takes a lot of time to write and add images etc..
  • o
    But case studies are sometimes easier than full documentation
  • b
    well, i think (hope) that once i put the relevant styles on the explorer on haxeui.org that will serve as a poor mans reference
  • b
    in reality, all i did i copied the default style and added a slice-9
  • b
    eg, the buttons:
  • b
    Copy code
    css
        .button {
            background-image: "kenny_ui/blue_button00.png";
            background-image-slice: 10px 10px 39px 180px;
            background-color: none;
            border: none;
            padding: 14px 30px;
            color: white;
            font-name: "kevin-font-thin";
        }
        
        .button .label {
            margin-top: -3px;
        }
        
        .button .image {
            margin-top: -2px;
        }
        
        .button:hover {
            background-image: "kenny_ui/blue_button00.png";
            background-image-slice: 10px 10px 39px 180px;
        }
        
        .button:down {
            background-image: "kenny_ui/blue_button02.png";
            background-image-slice: 10px 10px 39px 180px;
        }
  • c
    tbh i think this is a great move (using Kenny assets) , it is so much more visually appealing vs the default styling
  • b
    Really exciting.
  • b
    true enough i guess, but the "standard" style is important too... its not bitmap based (as kennys is) so tests other really important areas of the system
  • b
    also, maybe selfishly, i have zero interest in my UI actually looking like that
  • b
    but haxeui has always had the ability to slice-9 stuff, i guess i either a) didnt express that clearly or b) didnt knock up an example of it
  • b
    or c) a + b
  • b
    😄
  • b
    its all personal pref and target audience i guess... so i guess its worth maybe working on a "kenny theme"... or, as i mentioned, showing how the styles work for individual components on the explorer
  • b
    (i wont argue that it looks nice though - it does - but thats due to kennys assets i would say)
  • b
    fyi, heres another button from the (eventually) upcoming 1.1 release with a new style engine:
  • b
    and so thats not bitmap images anymore, all drawn (of course, you ca still use images)
  • b
    i think both methods are as important as each other (personally)
  • b
    also:
  • a
    Ian, I see so many good posts from you showcasing stuff!
  • a
    Feel free to post a thing or two in #162664383082790912 every now and then, more people may see it if they mass-mute server channels and only go to places they care/know about
  • b
    Fair enough, ill keep it in mind... dont really want to flood other channels either 🙂
  • c
    are there any docs showing how to use/load css in code?
  • c
    does haxeui css has a different convention in the order of directions? e.g. in web css "margin" with 4 values, the order of direction is "top, right, bottom, left" but haxeui seems to be "top left right bottom"?
  • c
    :down
    psuedo selector doesn't trigger a re-calculation of the sizes in openfl? continuing your kenny example I changed the followings, note the additional margin/padding rules. But the button doesn't resize/reposition accordingly when clicked. Though I noticed they will be respected when button is down + the button text content changes (b/c that invalidates the button size?)
    Copy code
    .button:down {
    background-image: "assets/kenny_ui/blue_button01.png";
    margin-top: 4px;
    padding: 10px 30px;
    background-image-slice: 10px 10px 35px 180px;
}
  • h
    @User Oooooh I like the Kenney Test!!!
  • b
    @User - the invalidation one is interesting, ill check it out. The margin format may very well be wrong, this is something that is fixed in the 1.1 version which is certainly not ready yet (im gonna make sure it is indeed fixed in 1.1). Also, not that it helps you now but styles from code are alot more user friendly, they are all typedefs + abstracts
1...196197198...1687Latest