Revealable text fields, both expanding and masking #21
Conversation
|
Password screenshots. First masked
And by clicking to unmask
|
This manually cherry-picks: kubernetes-ui/object-describer#21
| @@ -0,0 +1,46 @@ | |||
| .revealable { | |||
There was a problem hiding this comment.
Is there standard material CSS for this (i.e. are these canonical structural CSS types)?
There was a problem hiding this comment.
This CSS is meant to be agnostic to the toolkit.
I'm not sure there is any such thing as canonical CSS types, unless you're talking in the context of things like bootstrap. I couldn't find these concepts in bootstrap.
|
I'd be happy to integrate the revealable text into openshift-origin if this generally looks good. |
| templateUrl: 'views/containers.html' | ||
| templateUrl: 'views/containers.html', | ||
| link: function($scope, element, attrs) { | ||
| $scope.shouldMask = function(name) { |
There was a problem hiding this comment.
Shouldn't this also include the previous collapse check for length?
There was a problem hiding this comment.
Hmmm, the masking is just about masking something with bullets (ie: a password), not about the length. So if I'm understanding your comment right, then no, it shouldn't.
|
Rebased. |
This manually cherry-picks: kubernetes-ui/object-describer#21 Closes cockpit-project#2383
This manually cherry-picks: kubernetes-ui/object-describer#21 Closes #2383 Reviewed-by: Marius Vollmer <[email protected]>
|
@stefwalter is this still something you want to get merged? |
|
Likely so, I just hadn't convinced myself I liked the overflow detection yet. I also felt like the masked and revealable bits were a little tangled, but hadn't dug into them yet. |
Certain fields in the details pane must be ellipsized and then expand themselves when clicked on. The ellipsizing should be driven by the width of the field, not the number of characters. Certain fields in the details pane should be masked as a courtesy, such as password environment variables. Note that this does not substitute for real security such as use of kubernetes secrets, instead of environment variables. Both ellipsized and masked fields are revealed in full when clicked on. This patch includes an implementation of this behavior. Some parts of this behavior are CSS driven, and an example CSS file is included. Fixes #16 Closes #21
|
Rebased. Would be happy for more review. The CSS styles for masking and revealable text are tricky to get right across browsers. So in the end tackling them together was the way I approached this. |
| @@ -0,0 +1,46 @@ | |||
| .revealable { | |||
| white-space: nowrap !important; | |||
There was a problem hiding this comment.
why is the !important needed, I prefer to avoid using that when possible
|
As far as this new css, since it is purely functional and platform agnostic I think we should put it into an object-describer.css, produce a dist/object-describer.css in the build (simple copy for now, but lets do it in case we ever want to introduce additional build steps, like switching to sass or less for the source files) and add it to the main list in the bower.json |
|
@stefwalter see my previous comment about the CSS, do you have time to address that this week? if not @spadgett could possibly work on it and do a PR to your branch as this will help resolve a couple open issues we have |
|
@spadgett @jwforress I had hoped to get to this, but it'll probably be a few days yet. If you would like to take it over, please do. Otherwise I'll come back around to it when I get a chance. |
Certain fields in the details pane must be ellipsized and then
expand themselves when clicked on. The ellipsizing should be
driven by the width of the field, not the number of characters.
Certain fields in the details pane should be masked as a courtesy,
such as password environment variables. Note that this does not
substitute for real security such as use of kubernetes secrets,
instead of environment variables.
Both ellipsized and masked fields are revealed in full when clicked on.
This patch includes an implementation of this behavior.
Some parts of this behavior are CSS driven, and an example CSS
file is included.