Comments (5)
WG: in order to have this in Vanilla there is a lot of work that is required. Exploring similar solutions in other products, detail the way in which we want to do expand and collapse behaviour (including the side nav). For now, this will be implemented as designed in Anbox, but in order to include it in Vanilla there needs to be more detailed explorations.
from vanilla-framework.
Currently panels can be opened/closed fully. A button that triggers it could be in the main panel.
Is there any benefit of having the panel constantly there, but in collapsed state? It doesn't seem to show any information in collapsed mode, apart from the button to open it.
from vanilla-framework.
Thank you for the quick reply @bartaz
I believe that having the collapsed state instead of a button trigger creates a more integrated experience. With the collapsed state, the fact that "controls are an integrated part of the AOOS streaming" is conveyed better IMO. I also think that native state actions for a design element should live inside that element whenever possible. In our example:
- Element : side panel
- Native actions: expand/collapse, widen/shrink (the buttons next to expand/collapse on the screen record)
When you consider this, it makes sense that expand/collapse is together with widen/shrink inside the panel itself, as both actions are related to the panel state.
While reflecting on my choice and considering your button proposal these were my additional thoughts:
- As you can see we have the possible actions for the stream page under a contextual menu. One of those actions (show statistics) opens its side panel. So one argument can be why don't we put it there in a similar fashion then? The answer to that is putting AAOS controls as a button in the contextual menu isn't viable because it defeats the purpose of quick and easy access. To open the panel the user has to perform 2 clicks, but what is worse is that if they close the panel they have to perform two clicks again just to reopen it. That is too much hassle.
- The second argument could be putting a button next to the actions contextual menu which would solve the quick and easy problem. However, that is hierarchically wrong to me because the purpose of a contextual menu is to gather all the button actions in one place. It doesn't sit right if we have a contextual menu and a single button next to it.
Lmk what you think!
from vanilla-framework.
Thanks @acarege for more context.
My suggestion was just to show a similar functionality may currently work with what's in Vanilla.
If there are reasons to extend it to have collapsible panels (and you clearly show that there are) I think the next step would be to bring this up on next Vanilla Working Group, to decide if that's something that should go to Vanilla directly, or should that be developed in your project only for now.
from vanilla-framework.
Thank you for the suggestion, I find them very helpful because they might point to a more feasible direction that we haven't thought of, or they might not be suitable but still allow us to reflect on our decision and push us to provide logical reasons for them π€
I will attend the next Vanilla WG meeting to extend the discussion as you mentioned. Looking forward!
from vanilla-framework.
Related Issues (20)
- Side bar items with sub pages are not clickable HOT 5
- Slider shows white background on paper theme with Firefox HOT 2
- Improve the way React component can extend Vanilla %placeholders
- Latest Vanilla turns white links in global nav black HOT 1
- row--25-75 - col containers do not set grid context properly HOT 1
- Grid: provide 3 levels of nesting HOT 9
- Unclear usage of horizontal lines between old hr docs and new rule component
- Adding grid usage explanation to app layout when l-nav is in is-collapsed state. HOT 2
- Heading anchor links styling HOT 13
- (Firefox) Holding shift while clicking a checkbox causes the click to not be registered HOT 7
- Sliding navigation: "Back" button chevron points to right instead of left
- Make dark theme hrs consistent with light theme HOT 1
- Dividers in equal heights component don't work well when items are hidden on smaller screens HOT 1
- p-equal-height-row: remove padding-bottom, make separators muted HOT 3
- Add left and right chevrons to vanilla icon set HOT 5
- Implement Expand and Copy functionality for Code snippets HOT 1
- Parent background highlights when clicking on child button in navigation dropdown item HOT 1
- Examples theme picker does not reflect selected theme HOT 2
- grid bug - default span of elements without col-* class inside row is hard-coded to 12 for desktop HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vanilla-framework.