slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
17.54k stars 601 forks source link

LineEdit add border-width,border-radius,border-color properties #3173

Closed osenberg-x closed 1 year ago

osenberg-x commented 1 year ago

why don't have border-width,border-radius,border-color properlies on LineEdit/Text etc?

i try to add these properlies, it can be implemented easily.

Is there any special consideration?

image

image image

FloVanGH commented 1 year ago

Hi,

thank you for your input.

At the moment the best possibility to do custom styling in Slint is to create a custom widget library like: https://codeberg.org/flovansl/co_sl/src/branch/main/widgets/coop_widgets.

In the last meeting we've discussed about different possible ways to add styling capabilities to the std-widgets. One idea for example is to have a specific std-widget style that, can be styled from outside, e.g. by providing global style properties through StyleMetrics.

Our priority with the std-widgets at the moment is to provide different styles for different platforms that look as close as possible to the native ones. And I see there two problems with that, if we start to add styling properties to widgets of the std-widgets in general. For example if you start to change style related properties of a widget e.g. from the fluent style, you end up with an a set of widgets that is no more consistence with the corresponding design guidelines and the native look and feel. An other issue I see there is, that if you want e.g. to add border-width to a button, there are maybe some styles there have no border definitions for a button. To make it work for all styles it would make the code of widgets more complex and harder to develop.

In short. We are interested to add styling capabilities for the std-widgets in the future, but I think it's important to think about it carefully and find a good way to implement it without causing trouble to the native looking styles. And input, ideas and feedback are always welcome ;-).

On what I'm working right now is the possibility to change the accent/ primary color of a style. This will add a minimum styling feature.

osenberg-x commented 1 year ago

@FloVanGH thank you very much for your reply, this answered my question.

ogoffart commented 1 year ago

As FloVanGH said, we can't configure the appareance of our default widgets right now more than the style. So you have to re-implement line edit for that. You can also just put a Reectangle on Top of that LineEdit. The general styling issue is tracked in https://github.com/slint-ui/slint/issues/45 So i'm closing this issue.

May I ask what is your use case?
Are you trying to have a different border for some specific LineEdit, or for all LineEdit?

osenberg-x commented 1 year ago

@ogoffart Yes, I want something like Microsoft-Remote-Desktop, which I'm going to do in a custom way.

image

bjorn commented 1 year ago

@osenberg-x A bit of a late reply, but I just thought I'd note that this looks like the standard macOS focus rectangle, which is something that probably should be covered by the recently introduced cupertino style (issue #3084). This style is currently experimental, but it's already quite far along:

image

I guess most notably, the LineEdit doesn't use rounded corners yet.

osenberg-x commented 1 year ago

@bjorn thanks for your reply, which platform in your image show, i have ran example "gallery", but isn't same as your. image

bjorn commented 1 year ago

@osenberg-x I'm on Linux, but I don't think this style is platform-dependent. Probably that's just because I tested it on master instead of 1.2.0 release, and there have been some further changes to this style in the meantime.

osenberg-x commented 1 year ago

@bjorn I tested it on the lastest master branch, it indeed don't have this style. My platform is windows.

bjorn commented 1 year ago

@osenberg-x These styles ship with Slint on all platforms. See https://slint.dev/releases/1.2.0/docs/slint/src/advanced/style regarding how to make your application (or the gallery example) use a specific style, like the cupertino one that uses this kind of thick blue focus rectangles.

osenberg-x commented 1 year ago

@bjorn thank you very much, i'll try it