scarpe-team / scarpe

Scarpe - shoes but running on webview
Other
162 stars 29 forks source link

Convert "border" to a Drawable, not a style #498

Open noahgibbs opened 8 months ago

noahgibbs commented 8 months ago

This would be a pretty big first issue -- but also a fun and useful one. There are a lot of steps here, but they're not hard steps. Feel free to ask for help if you take this on!

In Shoes3, "border" isn't a style on Stack or Flow. It's an object of its own. If you add it after text, it will cover it:

Shoes.app(width: 300, height: 50) do
  stack do
    para "This is partly covered by the border"
    border yellow, strokewidth: 10
    para "This shows through on top"
  end
end
Screenshot 2023-12-12 at 13 33 43

So when converted to HTML, the background is just a div with a color or gradient around the edges. Note that it's possible to have a gradient as the background. From example examples/stack/gradients.rb:

border "#090979".."#ac033d", strokewidth: 15

For this bug, we will need a "border" Drawable, both in lacci/lib/shoes/drawables and in lib/scarpe/wv. We should get rid of the "border" style on slot objects (like stacks and flows). You can find code for rendering a gradient to HTML in method border_style in scarpe-components/lib/scarpe/components/calzini/slots.rb -- Calzini is also where code to render the Border drawable to HTML should live. The rendering code should go away in calzini/slots.rb and instead be in whichever Calzini file you add border_element to.

The border should mostly be a div which defaults to height: 100% and width: 100%.

HUDASULTANA commented 8 months ago

Hello @noahgibbs How can I help you with this issue ?

noahgibbs commented 8 months ago

I've mostly set it aside as something interesting for newer folks to work on. It would be possible for me to work on it with you or walk you through it. But it touches a lot of different parts of Scarpe. You'll definitely at least want to watch a code walk-through video first.

(Also, time for me to make a new code walk-through video. The old one's not bad, but it's been a bit since last time I recorded one.)