Design - collapsedTabsPopover

[Mehrabbruno]

@todo

114

• [x] Design - Collapsed Tabs pop-over (toggles on onClick)
  • @input 📦 popOvers_v0.0.1 (Deprecated) from #113
  • [x] pop-over header (fixed to the top and contains title, total number of collapsed tabs and close button)
  • [x] Collapsed Tabs container
    • [x] Singular tabs (contains application logo, title, and close button)
    • [x] Multiple tabs (contains application logo, title, toggle icon, total no of children tabs and close button)
      • [x] When clicked user gets a dropdown list of children tabs
    • [x] Search input (contains search icon, inputField and close icon when added text)
  • [x] Record an explanatory video for Collapsed Tabs Popover and add it in the header description
  • @output 📦 collapsedTabsPopover_v0.0.1 from comment
• [x] Design - collapsedTabsPopover_v0.0.2
  • @input 📦 collapsedTabsPopover_v0.0.1
  • @input 📦 popoverContainer_v0.0.1 from #125
  • [x] remove header, and footer from the component.
  • [x] place the content inside the #125's content body
  • @output 📦 collapsedTabsPopover_v0.0.2 from comment
    • next #114

@info

This pop-over is designed for to be placed in component tabContainer_v0.0.1

[Mehrabbruno]

Worklog

Worklog 1 2022.10.21

---

Tasks

• done Design - Collapsed Tabs pop-over (toggles on onClick) - 1min
  • done pop-over header (fixed to the top and contains title, total number of collapsed tabs and close button) - 1min
  • done Collapsed Tabs container - 1min
    • done Singular tabs (contains application logo, title, and close button) - 1min
    • done Multiple tabs (contains application logo, title, toggle icon, total no of children tabs and close button) - 1min
      • done When clicked user gets a dropdown list of children tabs - 1min
  • done Search input (contains search icon, inputField and close icon when added text) - 1min
  • done Record an explanatory video for Collapsed Tabs Popover and add it in the header de - 1minscription
  • @output 📦 collapsedTabsPopover_v0.0.1

[serapath]

feedback 2022.10.14

similar feedback to probably most issues

1. missing worklog video link
2. no times behind each task ...

It is true, that a worklog video is always an output, but while the content is task specific, the worklog video and worklog comment is generic and part of our project management, so we treat it specially - it also will never be an input into any other future task. A video recording will only be an @output if we have agreed on a specific task to make a presentational video for example that we work towards for let's say playing it in front of an audience at an event (e.g. like your recording for the codecamp in case you would not have a good internet connectivity during your speaker slot time) ...but otherwise, it is just a regular worklog video :-)

---

otherwise - content wise the collapsedTabsPopover seems fine :-)

[serapath]

feedback 2022.10.22

quick feedback. If i did not click on a tab yet, how would i know it has a list of sub tabs? is it always expanded? i would prefer that it is not, so therfore - similar to a "file explorer", it would be good to be able to expand/collapse a tab if it has sub tabs. also, it is possible that a sub tab has more sub tabs, so basically, that get's us to a tree situation similar to a file explorer.

Maybe that should be represented somehow :-) otherwise i think it is pretty ok the way it is.

[Mehrabbruno]

Feedback 2022.10.24

If i did not click on a tab yet, how would i know it has a list of sub tabs? is it always expanded?

I think you are confusing this popover name with something else. A tab will never have sub-tabs. Their can only be 1 tab itself but a tile can have multiple tabs. This popover only represents the group of tabs each tile contains. This is only for smaller screens. When there is no space to house all the tiles and we only view 1 tile at a time.

[serapath]

feedback 2022.10.26

If i did not click on a tab yet, how would i know it has a list of sub tabs? is it always expanded?

I think you are confusing this popover name with something else. A tab will never have sub-tabs. Their can only be 1 tab itself but a tile can have multiple tabs. This popover only represents the group of tabs each tile contains. This is only for smaller screens. When there is no space to house all the tiles and we only view 1 tile at a time.

Are you sure? If one of the tabs is a "tile json file" so it is actually opening a sub tiling window with lots of sub tabs in there, then maybe i would want to click and jump and focus directly on one of those sub tiles in that tab instead of focusing only the main tab that contains all the sub tiles/tabs. ...so if a tab is opening a sub tile grid, then it kinda has sub tabs.

To put it differntly. If i split my screen horizontally and then the upper and lower tab each have 3 tiles in them. Now imagine i save that as a tile json file and then i open that on the mobile phone. So those 2x3 = 6 tiles are now collapsed, because we are on mobile and can only see one tile. now if i click the popover i would like to quickly jump and switch the focus to any of those 6 tiles, but if the popover would not show also the "sub tabs", i would need to click many times to actually navigate to the correct tab.

Showing the tabs and "sub tabs" (if a tab happens to be a sub tile grid) would make it much easier when scrolling but also when autocomplete searching for the right one to jump to it directly :-)

[Mehrabbruno]

Worklog

worklog-1 2022.10.31

---

Tasks

• done Design - collapsedTabsPopover_v0.0.2 - 20min
  • done remove header, and footer from the component.
  • done place the content inside the #125 content body
  • @output 📦 collapsedTabsPopover_v0.0.2