Add question containers to basic structure of monitoring setup #37hg3wd
This issue is a sub issue of #240+
It's probably a good idea to take a look at #240 first to get some context for this issue.
The goal here is prepare the question containers, that will later contain questions that are part of the SymptomCheck during the Monitoring setup, building on the basic structure laid out in #247+.
This issue is only concerned with the looks, actual functionality comes later.
What is to be done
- Add the six boxes in the center of the screen alongside their respective titles.
- Clicking the organge button in one of the boxes should spawn another white box left of the white box with the button just clicked.
- Each row should be horizontally scrollable.
- All boxes in one row should have the same height as the largest one of them
Context
On the layouts we only see single boxes stacked vertically. But – in the end – each box that we see is placed in a container that is meant to be scrolled horizontally. Each of these containers is supposed to eventually contain multiple cards representing questions next to the box with the orange button in it. So, there will be multiple horizontally scrollable containers, each containing multiple white boxes, some with questions and one white box with an orange button.
Boxes
All boxes should be RccCardComponents (see !179 if not already merged ).
I do not know how to properly set up the box with the orange button. It looks so much like a full-sized RccActionButton expect the corners are round and there is no background color or shadow on the container. At the same time the icon and the button seem to be placed exactly like in an RccActionButton. So there might be a DRYer way to do things than just styling the box specifically for this issue. But I leave it up to you and ad-hoc styles for just this issue are also fine for the time being :)
What does this button do?
Clicking the orange button in one of the white boxes (RccCardComponent), should spawn an empty RccCardComponent to its left.
You can click a button as many times as you like, and it should spawn another new box every time.
Every new empty RccCardComponent should make use of the 'removeClick'-Output. If this output is in use, the RccCardComponent will show a remove button. Clicking the button will emit on(?) the output.
When the remove button on an empty RccCardComponent ist clicked remove the RccCardComponent from the row.
Scrolling
There are already a RccSliderComponent and RccSlideComponent (look for the 'r') that are well suited for handling horizontal scrolls and managing scrolls-snaps. It might be helpful here, but it might also be over the top.
Color
If you decide to create an extra component for the white box with orange button, make the color configurable.
In any case for this screen use the 'create'-color. See lib/themes/theming-mechanics/colors/example-colors.css for names of css variables – or use RccColorServiceto fetch the color values or variable names in ts.
Icons
Use RccIconComponent. Only a few icons are already available. A couple of new ones lie in /lib/common/src/assets/icons/icon_lrg_data.svg. In order to use these new ones you have to add their svg markup to this file: /lib/common/src/ui-components/icons/ready-icons.ts. Adding at least one size variant for an icon will make it usable; if somewhere the same icon with another size is requested it will probably get scaled and maybe not look as good, but it will show :)
If the proper icon is unavailable, just pick some/any suitable [name] on the RccIconComponent and a missing-icon will show up.
Requirements
- Screen starts with six vertically stacked boxed with respective headings
- Each box with orange button can spawn new boxes to the left
- Multiple boxes in a row are scrollable
- Empty boxes have a remove button, that will remove these boxes
Layouts
Here's what the the final screens should look like; This issue is only concerned with the boxes with the orange buttons in the middle.
Screen layout normal and hovered/tapped:
