Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change border and shadow type to allow a "none" option #51

Open
passiomatic opened this issue Mar 8, 2022 · 0 comments
Open

Change border and shadow type to allow a "none" option #51

passiomatic opened this issue Mar 8, 2022 · 0 comments
Assignees
Labels
enhancement New feature or request schema change The issue will need a database schema change

Comments

@passiomatic
Copy link
Owner

passiomatic commented Mar 8, 2022

Currently we have a sloppy way to figure out if a border or shadow style is specified:

  • Shadow: check if blur or size values are /= 0
  • Border: check if width or corner values are /= 0

When the user, after tweaking the shadow or border fields, set them back to a zero value the panel collapses unexpectedly.

This is caused by the way types are currently written, e.g.:

type alias BorderWidth =
    { locked : Bool
    , top : Int
    , right : Int
    , bottom : Int
    , left : Int
    }

Compare these with the Background type which has a None variant which precisely turns off the background style.

Border

So a first step would be to unify the BorderWidth, BorderStyle , BorderCorner and Node.borderColor values, since it makes no sense to have separate records for them. I can see something like this could work better:

type alias BorderData =
    { locked : Bool
    , top : Int
    , topLeftCorner: Int
    , right : Int
    , topRightCorner: Int
    ...
    , style: BorderStyle
    , color: Color
    }

Then we need to add the Border type to the mix, adding a None variant:

type Border 
   = None
   | Solid BorderData
   | Dashed BorderData
   | Dotted BorderData

This way to define an element border one needs to set at least a color and a width. Elm Designer can always generate some defaults: 1px border width, solid style, dark gray color and square corners (radius with 0px).

Shadow

We could change the Shadow type in the same way:

type alias ShadowData =
    { offsetX : Float
    , offsetY : Float
    , size : Float
    , blur : Float
    , color : Color    
    }

type Shadow
    = None 
    | Inner ShadowData
    | Outer ShadowData

With these changes None in the UI is then set only by the click on the panel trash can icon, make it more obvious that user is gonna to delete some styles. On the contrary, when switching from Inner to Outer style we copy the ShadowData record from one variant to another.

Note: This change causes a MAJOR schema change and it needs to be handled accordingly. We need to bump the schema version and create a decoder which reads back old JSON data serialized with v4.

@passiomatic passiomatic added the enhancement New feature or request label Mar 8, 2022
@passiomatic passiomatic self-assigned this Mar 8, 2022
@passiomatic passiomatic added the schema change The issue will need a database schema change label Dec 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request schema change The issue will need a database schema change
Projects
None yet
Development

No branches or pull requests

1 participant