Commit Graph

56 Commits

Author SHA1 Message Date
Mateusz Czapliński
b7cf493f7d
Component Group View colors parametrization (#3434)
Parametrize the colors used in a Component Group view based on a single color passed to an FRP input.

Customizing the colors of a Component Group will be needed for the larger Component Group List panel. This customization will work as a visual hint for the User, helping them to distinguish different Component Groups in the panel. A single input color will be configured for every Component Group in the `package.yaml` file (see the Design Doc). Therefore, all shades of the color required by the Component Group view must be calculated from this single input color.

https://www.pivotaltracker.com/story/show/181725039

#### Visuals

The following screencast of the `component_group` debug scene shows how all required shades of color are calculated from a single input color. It also shows a new "dimmed" display mode of the Component Group. The debug scene does not support selecting entries in a "dimmed" Component Group, as this is not required by the Design Doc.


https://user-images.githubusercontent.com/273837/168074651-bf3d5ea5-99b0-4b69-9934-ad8565ffc54e.mov






The following is a screenshot of the Node Searcher, to demonstrate that it still works correctly:

<img width="623" alt="Screenshot 2022-05-09 at 17 13 01" src="https://user-images.githubusercontent.com/273837/167441109-e9a47b5a-45a2-4172-85ed-c593e43e02d6.png">

# Important Notes
- A new type `Params` was added in the `list_view::entry::Entry` trait. This was needed to allow passing FRP information to entries separately for every ListView instance.
- Note: `style_prefix` and `max_width_px` parameters of the `list_view::entry::Entry::new` function may get moved into the new `Params` type in the future. To save time, this was not attempted in this PR, as agreed with @farmaazon.

[ci no changelog needed]
2022-05-13 08:38:43 +00:00
Ilya Bogdanov
1c8aa26f90
Wide Componet Group List (#3409)
[ci no changelog needed]

[Task link](https://www.pivotaltracker.com/story/show/181414466)

This PR brings a new UI component: Wide Component Group. This is a three-column headerless container similar to Component Group. See the updated `component-group` demo scene:


https://user-images.githubusercontent.com/6566674/166933866-e5bee142-5176-4a02-bc18-a5bfd96ccbe2.mp4
2022-05-12 09:30:00 +00:00
Mateusz Czapliński
ffe6700901
Parametrize font in List View via styles (#3427)
Make it possible to parametrize the font in different instances of `ListView` via styles. This makes it possible for the Component Group view to use a `ListView` with `list_view::entry::Label` underneath with a different visual style than the default `ListView` used in other places in the IDE.

https://www.pivotaltracker.com/story/show/182033743

#### Visuals

This feature allows the Component Group visual component to use a proportional font for its entries, as seen in the `component_group` debug scene:

<img width="180" alt="Screenshot 2022-05-02 at 14 50 46" src="https://user-images.githubusercontent.com/273837/166236411-1d139114-b099-4a10-8d44-48713d155d1e.png">


The other instances of ListView still use a monospaced font as before:

<img width="152" alt="Screenshot 2022-04-29 at 14 45 57" src="https://user-images.githubusercontent.com/273837/165950535-6cffd0df-d84e-4f74-8d48-3114aea9fc68.png">

<img width="629" alt="Screenshot 2022-04-29 at 14 46 35" src="https://user-images.githubusercontent.com/273837/165950578-0439d078-0224-4138-b38f-4bb799b004aa.png">

The `text_area` debug scene works correctly:

<img width="340" alt="Screenshot 2022-04-29 at 14 46 12" src="https://user-images.githubusercontent.com/273837/165950564-fbbde201-c5ad-448e-af3d-8a7494757932.png">

# Important Notes
- Parsing `String` values into `style::Data` should now be done through the `FromStr` trait, instead of the `TryFrom<String>` trait as previously. (Note: the `String::parse` function in the Rust standard library uses the `FromStr` trait underneath.)

[ci no changelog needed]
2022-05-04 10:44:57 +00:00
Adam Obuchowicz
8041fe0e49
Selectable Header in Component Group View. (#3418)
* The List View component was refactored: it allows for hiding the internal selection widget, and exposes information where the widget should be placed. This allows us to create selection widget in component list panel, so it can be animated between component groups and sections.
* Fixed some warnings when checking WASM code.
* Adjusted the style of Component Group View a little, so it better reflects the design doc. Still not ideal, because the list_view has some weird design regarding padding, but I don't want to stuck in some bigger refactoring.

I will add a video in a few minutes.

# Important Notes
https://user-images.githubusercontent.com/3919101/165507826-60329f9e-7de3-4eb2-9271-292e45568cb2.mov
2022-04-30 14:48:52 +00:00
Wojciech Daniło
d5d5d3aac5
Render on demand. (#3397) 2022-04-14 22:28:38 +02:00
Mateusz Czapliński
e75df61b2c
Component Group View with static header and without icons (#3373)
Add an initial version of the visual component for displaying the Component Group View. The component contains a header (for displaying the Group Name) and a list of labels (for displaying the component names).

https://www.pivotaltracker.com/story/show/181724889


#### Visuals

A screenshot from a debug scene demonstrating the component:

<img width="251" alt="Screenshot 2022-04-13 at 20 07 56" src="https://user-images.githubusercontent.com/273837/163243304-21c3ad78-4813-4368-b3bb-844d979da699.png">



Screenshots from other debug scenes (`list_view` and `text_area`), demonstrating that the other components still display correctly:

<img width="202" alt="Screenshot 2022-04-13 at 20 08 56" src="https://user-images.githubusercontent.com/273837/163243428-de9dc1c7-5a9f-45e0-9325-db60cece9768.png">


<img width="403" alt="Screenshot 2022-04-13 at 20 08 48" src="https://user-images.githubusercontent.com/273837/163243432-895061d9-5bd9-4349-8679-eb63b0f6724d.png">


A screenshot of the Node Searcher's list, showing that long entries in a ListView are now truncated, and an ellipsis character is added in place of removed characters:


<img width="651" alt="Screenshot 2022-04-13 at 20 10 16" src="https://user-images.githubusercontent.com/273837/163243664-5b671969-7aa0-4bef-8fd2-825602d85848.png">

# Important Notes
- Adding support for the text truncation feature in `ListView` required some changes in the`list_view::Entry`-related APIs.
- An embedded font was added (DejaVuSans-Bold) for use in the Component Group View debug scene, and 5 unused embedded fonts were removed.
2022-04-14 10:37:40 +00:00