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

RFE: two more options for a "Round Rect" Border #2350

Closed
jsfan3 opened this Issue Mar 1, 2018 · 7 comments

Comments

Projects
None yet
3 participants
@jsfan3
Copy link
Contributor

jsfan3 commented Mar 1, 2018

At the moment, in the Codename One Designer, in a Style it's possible to create a Border "Round Rect" with the options "Standard", "Top only", "Bottom only". It could be nice to have also the option "Top-left and Bottom-right only" and "Top-Right and Bottom-Left only".

Thank you

@codenameone

This comment has been minimized.

Copy link
Owner

codenameone commented Mar 1, 2018

Can you point out a use case for that?

I can think of a use case for "Left-Only" and "Right Only" with a label that has an effect of peeking out from the side of the screen.

I can think of a use case for everything other than one corner which can be used to "point" at an element but I can't think of a case where I'd only want one corner to be rounded.

Either way I think it's valid to say there are more use cases than originally envisioned so we should probably have 4 checkboxes that provide an "ignore" option to a specific corner leaving it effectively at a 90 degree angle.

@codenameone codenameone self-assigned this Mar 1, 2018

@codenameone codenameone added this to the Version 5.0 milestone Mar 1, 2018

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

jsfan3 commented Mar 10, 2018

I'm sorry for the late response.
My use case is to create buttons like the ones in the following image.

corners

@codenameone

This comment has been minimized.

Copy link
Owner

codenameone commented Mar 10, 2018

Thanks. I'll try to do that for 5.0 but it would need some work on the designer tool.

codenameone added a commit that referenced this issue Mar 21, 2018

Fix for regression due to partial work I committed before for #2350 I…
… mislabeled the partial work in the commit comment but it's just the previous commit so should be easy to track...

@codenameone codenameone modified the milestones: Version 5.0, Version 6.0 Aug 9, 2018

@codenameone

This comment has been minimized.

Copy link
Owner

codenameone commented Aug 9, 2018

I'll move the second portion of this issue (the designer changes) to 6.0. I think we need to re-evaluate designer changes with changing focus on CSS and the GUI builder.

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

jsfan3 commented Aug 9, 2018

I agree that the CSS support is a great innovation for Codename One: starting from its recent ufficial integration in Codename One, I stopped at all to use the Codename One Designer with new apps. I feel that working with CSS is easier, better and faster.

@codenameone

This comment has been minimized.

Copy link
Owner

codenameone commented Feb 11, 2019

@shannah can we add this to CSS?
Is this reasonable for 6.0? If not push it to 7.0.

shannah added a commit that referenced this issue Feb 11, 2019

Improved support for round rect border in CSS. Previously CSS would u…
…se 9-piece borders for if the it couldn't reproduce it with a round rect border in normal, top-only, or bottom-only mode. E.g. if only the top left and bottom right corners have a radius defined, then it would fall back to a 9-piece border. This change allows roundrectborder to be used for any combination of corners being rounded. It still doesn't allow you to have different non-zero radiuses in different corners. All of the corners need to either have the same radius, or zero. If one corner has, for examle, a radius of 3mm and another has 2mm, then it will fall back to a 9-piece border still. #2350
@shannah

This comment has been minimized.

Copy link
Collaborator

shannah commented Feb 11, 2019

This is done. Now RoundRectBorder will be used for borders where one or more corners have a radius (and all other conditions can be met by the RoundRectBorder). E.g. You can now do:

RoundRectTest {
    background-color: red;
    border-radius: 2mm;
    border-top-right-radius: 0;
    border-bottom-left-radius:0;
}

image

Previously this would have used a 9-piece border because it couldn't be achieved with RoundRectBorder in regular, top-only, or bottom-only mode. Now it will use RoundRectBorder.

There are still circumstances that would cause it to use a 9-piece border. For example, if two corners have different non-zero radii. E.g.

RoundRectTest {
    background-color: red;
    border-radius: 2mm;
    border-top-right-radius: 0;
    border-bottom-left-radius:3mm;
}

This would use a 9-pice border because the bottom-left radius is 3mm, and the bottom-right radius is 2mm.

@shannah shannah closed this Feb 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.