Context Selector #1857
Context Selector #1857
Conversation
| const currentCluster = clusters.clusters[clusters.currentCluster]; | ||
| const namespaceSelected = currentCluster.currentNamespace || defaultNamespace; | ||
| const [cluster, setCluster] = useState(clusters.currentCluster); | ||
| const [namespace, setNS] = useState(namespaceSelected); |
There was a problem hiding this comment.
I'd be consistent with the naming:
| const [namespace, setNS] = useState(namespaceSelected); | |
| const [namespace, setNamespace] = useState(namespaceSelected); |
There was a problem hiding this comment.
setNamespace is already used (by a function of the props)
| className={`dropdown kubeapps-align-center kubeapps-dropdown ${open ? "open" : ""}`} | ||
| ref={ref} | ||
| > | ||
| <button className="kubeapps-nav-link" onClick={toggleOpen} aria-expanded={open}> |
There was a problem hiding this comment.
Glad to see aria-expanded here :). I'm missing here the other aria property to link this button with the content: aria-haspopup. This property must use the same value as the role of the element with the content that it's placed next to the button:
| <button className="kubeapps-nav-link" onClick={toggleOpen} aria-expanded={open}> | |
| <button className="kubeapps-nav-link" onClick={toggleOpen} aria-expanded={open} aria-haspopup="menu"> |
| <Column span={10}> | ||
| <span>Current Context</span> | ||
| <div> | ||
| <CdsIcon size="sm" shape="cluster" inverse={true} /> | ||
| <span className="kubeapps-dropdown-text">{clusters.currentCluster}</span> | ||
| <CdsIcon size="sm" shape="file-group" inverse={true} /> | ||
| <span className="kubeapps-dropdown-text">{namespaceSelected}</span> | ||
| </div> | ||
| </Column> | ||
| <Column span={2}> | ||
| <div | ||
| className={`kubeapps-align-center angle ${open ? "angle-opened" : "angle-closed"}`} | ||
| > | ||
| <CdsIcon shape="angle" inverse={true} /> | ||
| </div> | ||
| </Column> |
There was a problem hiding this comment.
Based on the design, I'm missing here some alignment and spacing between the items:
Also, any of the items is highlighted. I'd use a slightly bolder font for the selected items and a bit smaller font for the title.
| </span> | ||
| <div className="dropdown-menu-padding" role="menuitem"> | ||
| <CdsIcon size="sm" shape="cluster" inverse={true} /> | ||
| <span className="kubeapps-dropdown-text">Cluster</span> |
There was a problem hiding this comment.
Set this span as a label and link it with the select via htmlFor
| </div> | ||
| <div className="dropdown-menu-padding" role="menuitem"> | ||
| <CdsIcon size="sm" shape="file-group" inverse={true} /> | ||
| <span className="kubeapps-dropdown-text">Namespace</span> |
| &-closed { | ||
| transform: rotate(180deg); | ||
| margin-left: -1rem; | ||
| } | ||
| &-opened { | ||
| position: relative; | ||
| left: 10px; | ||
| } |
There was a problem hiding this comment.
Did you try to use the rotate property of the icon component?
There was a problem hiding this comment.
mmh, I tried but there was no rotate property, turns out it's called direction
| <select name="clusters" className="clr-page-size-select" onChange={selectCluster}> | ||
| {Object.keys(clusters.clusters).map(c => { | ||
| return ( | ||
| <option key={`kubeapps-dropdown-cluster-${c}`} value={c}> | ||
| {c} | ||
| </option> | ||
| ); | ||
| })} | ||
| </select> |
There was a problem hiding this comment.
The style of the selector options is not the correct one. Clarity lefts the browser to apply their own style on those selectors:
There was a problem hiding this comment.
I don't understand what you are proposing, maybe it's a confusion? Note that I'm in linux so the style here is different:
There was a problem hiding this comment.
Ohh I see! Completely forgot that
Description of the change
Context Selector for Clarity UI. It allows to select the cluster and the namespace used.
Applicable issues
Additional information
Note that the
clusterselector is still not working. That's a WIP in a different branch.