Skip to content

Revealable text fields, both expanding and masking #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Revealable text fields, both expanding and masking #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ Theme

The example theme used in `index.html` is based on bootstrap, however bootstrap is not required as a bower dependency and you can change the theme however you want.

Certain functionality requires CSS, and CSS snippets have been provided. These are generally style agnostic.

Optional Features
-----------------

Expand All @@ -98,4 +100,4 @@ There are several enhancements being considered for future implementation.
Contributing
------------

Git clone this repo and run `grunt serve`. While the server is running, any time changes are made to the JS or HTML files the build will run automatically. Before committing any changes run the `grunt build` task to make sure dist/object-describer.js has been updated and include the updated file in your commit.
Git clone this repo and run `grunt serve`. While the server is running, any time changes are made to the JS or HTML files the build will run automatically. Before committing any changes run the `grunt build` task to make sure dist/object-describer.js has been updated and include the updated file in your commit.
57 changes: 23 additions & 34 deletions dist/object-describer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,12 @@ angular.module('kubernetesUI')
scope: {
containers: '='
},
templateUrl: 'views/containers.html'
templateUrl: 'views/containers.html',
link: function($scope, element, attrs) {
$scope.shouldMask = function(name) {
Copy link

@smarterclayton smarterclayton Jun 2, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this also include the previous collapse check for length?

Copy link
Contributor Author

@stefwalter stefwalter Jun 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

return name.toLowerCase().indexOf('password') !== -1;
};
}
}
})
.directive("kubernetesObjectDescribeContainerStatuses", function() {
Expand All @@ -162,26 +167,19 @@ angular.module('kubernetesUI')
templateUrl: 'views/container-state.html'
};
})
.directive("collapseLongText", function() {
.directive("revealableText", function() {
return {
restrict: 'A',
scope: {
value: '@',
enableCollapse: '=?' // not intended to be passed in, it will be set depending on jquery availability
},
controller: ["$scope", function($scope) {
// If jquery is available
$scope.enableCollapse = !!window.$;
}],
link: function($scope, element, attrs) {
if ($scope.enableCollapse) {
$('.reveal-contents-link', element).click(function (evt) {
$(this).hide();
$('.reveal-contents', element).show();
});
}
},
templateUrl: 'views/_collapse-long-text.html'
element.addClass('revealable');
$(element).on("mouseover", function() {
var clickable = element[0].scrollWidth > element[0].clientWidth || element.find(".masked")[0];
element.toggleClass("clickable", clickable);
});
$(element).on("click", function() {
element.toggleClass("revealed");
});
}
}
})
.filter("isEmptyObj", function() {
Expand All @@ -193,28 +191,19 @@ angular.module('kubernetesUI')
angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
'use strict';

$templateCache.put('views/_collapse-long-text.html',
"<span ng-hide=\"enableCollapse && value.length > 120\">{{value}}</span>\n" +
"<span ng-show=\"enableCollapse && value.length > 120\">\n" +
" <span class=\"reveal-contents-link\" style=\"cursor: pointer;\" title=\"Expand\">{{value.substring(0, 120)}}<a href=\"javascript:;\">...</a></span>\n" +
" <span style=\"display: none;\" class=\"reveal-contents\">{{value}}</span>\n" +
"</span>"
);


$templateCache.put('views/annotations.html',
" <h3>Annotations</h3>\n" +
" <span ng-if=\"!resource.metadata.annotations\"><em>none</em></span>\n" +
" <dl class=\"dl-horizontal\" ng-if=\"resource.metadata.annotations\">\n" +
" <dt ng-repeat-start=\"(annotationKey, annotationValue) in resource.metadata.annotations\" title=\"{{annotationKey}}\">{{annotationKey}}</dt>\n" +
" <dd ng-repeat-end collapse-long-text value=\"{{annotationValue}}\"></dd>\n" +
" </dl>"
" <dd ng-repeat-end revealable-text>{{annotationValue}}</dd>\n" +
" </dl>\n"
);


$templateCache.put('views/container-state.html',
"<span ng-if=\"containerState | isEmptyObj\"><em>none</em></span>\n" +
"<span ng-repeat=\"(state, stateDescription) in containerState | limitTo: 1\">\n" +
"<span ng-repeat=\"(state, stateDescription) in containerState | limitTo: 1\" revealable-text>\n" +
" <span ng-switch=\"state\">\n" +
" <span ng-switch-when=\"waiting\">\n" +
" Waiting\n" +
Expand All @@ -240,7 +229,7 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
"<div ng-if=\"!containerStatuses\"><em>none</em></div>\n" +
"<dl ng-repeat=\"containerStatus in containerStatuses | orderBy:'name'\" class=\"dl-horizontal\">\n" +
" <dt>Name</dt>\n" +
" <dd>{{containerStatus.name}}</dd>\n" +
" <dd revealable-text>{{containerStatus.name}}</dd>\n" +
" <dt>State</dt>\n" +
" <dd>\n" +
" <kubernetes-object-describe-container-state container-state=\"containerStatus.state\"></container-state>\n" +
Expand All @@ -261,9 +250,9 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
"<div ng-if=\"!containers.length\"><em>none</em></div>\n" +
"<dl class=\"dl-horizontal\" ng-repeat=\"container in containers\">\n" +
"<dt>Name</dt>\n" +
"<dd>{{container.name}}</dd>\n" +
"<dd revealable-text>{{container.name}}</dd>\n" +
"<dt>Image</dt>\n" +
"<dd ng-if=\"container.image\">{{container.image}}</dd>\n" +
"<dd revealable-text ng-if=\"container.image\">{{container.image}}</dd>\n" +
"<dd ng-if=\"!container.image\"><em>none</em></dd>\n" +
"<dt>Ports</dt>\n" +
"<dd>\n" +
Expand All @@ -275,7 +264,7 @@ angular.module('kubernetesUI').run(['$templateCache', function($templateCache) {
"<dt>Env vars</dt>\n" +
"<dd>\n" +
" <div ng-if=\"!container.env.length\"><em>none</em></div>\n" +
" <div ng-repeat=\"env in container.env | orderBy:'name'\" collapse-long-text value=\"{{env.name}}={{env.value}}\"></div>\n" +
" <div ng-repeat=\"env in container.env | orderBy:'name'\" revealable-text>{{env.name}}=<span ng-class=\"{masked: shouldMask(env.name)}\">{{env.value}}</span></div>\n" +
"</dd>\n" +
"</dl>\n" +
"<div ng-if=\"$index != 0\" style=\"margin-bottom: 10px;\"></div>\n"
Expand Down
34 changes: 16 additions & 18 deletions object-describer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,12 @@ angular.module('kubernetesUI')
scope: {
containers: '='
},
templateUrl: 'views/containers.html'
templateUrl: 'views/containers.html',
link: function($scope, element, attrs) {
$scope.shouldMask = function(name) {
return name.toLowerCase().indexOf('password') !== -1;
};
}
}
})
.directive("kubernetesObjectDescribeContainerStatuses", function() {
Expand All @@ -162,26 +167,19 @@ angular.module('kubernetesUI')
templateUrl: 'views/container-state.html'
};
})
.directive("collapseLongText", function() {
.directive("revealableText", function() {
return {
restrict: 'A',
scope: {
value: '@',
enableCollapse: '=?' // not intended to be passed in, it will be set depending on jquery availability
},
controller: ["$scope", function($scope) {
// If jquery is available
$scope.enableCollapse = !!window.$;
}],
link: function($scope, element, attrs) {
if ($scope.enableCollapse) {
$('.reveal-contents-link', element).click(function (evt) {
$(this).hide();
$('.reveal-contents', element).show();
});
}
},
templateUrl: 'views/_collapse-long-text.html'
element.addClass('revealable');
$(element).on("mouseover", function() {
var clickable = element[0].scrollWidth > element[0].clientWidth || element.find(".masked")[0];
element.toggleClass("clickable", clickable);
});
$(element).on("click", function() {
element.toggleClass("revealed");
});
}
}
})
.filter("isEmptyObj", function() {
Expand Down
46 changes: 46 additions & 0 deletions revealable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.revealable {
Copy link

@smarterclayton smarterclayton Jun 2, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there standard material CSS for this (i.e. are these canonical structural CSS types)?

Copy link
Contributor Author

@stefwalter stefwalter Jun 2, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

@smarterclayton smarterclayton Jun 2, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wanted to be sure.

white-space: nowrap !important;
Copy link
Contributor

@jwforres jwforres Aug 12, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is the !important needed, I prefer to avoid using that when possible

text-overflow: ellipsis;
overflow: hidden !important;
}

.revealable.clickable {
cursor: pointer;
}

.revealed {
white-space: normal !important;
overflow: visible !important;
cursor: pointer;
overflow-wrap: break-word;
}

.masked {
color: transparent;
position: relative;
text-ellipsis: none !important;
cursor: pointer;
max-width: 1;
display: inline-block;
}

.masked:after {
content: "●●●●";
position: absolute;
left: 0px;
font-weight: bold;
letter-spacing: 2px;
padding-left: 2px;
color: black;
cursor: pointer;
line-height: 1.5;
opacity: 0.5;
}

.revealed .masked:after {
display: none;
}

.revealed .masked {
color: black;
}
5 changes: 0 additions & 5 deletions views/_collapse-long-text.html
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions views/annotations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ <h3>Annotations</h3>
<span ng-if="!resource.metadata.annotations"><em>none</em></span>
<dl class="dl-horizontal" ng-if="resource.metadata.annotations">
<dt ng-repeat-start="(annotationKey, annotationValue) in resource.metadata.annotations" title="{{annotationKey}}">{{annotationKey}}</dt>
<dd ng-repeat-end collapse-long-text value="{{annotationValue}}"></dd>
</dl>
<dd ng-repeat-end revealable-text>{{annotationValue}}</dd>
</dl>
2 changes: 1 addition & 1 deletion views/container-state.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<span ng-if="containerState | isEmptyObj"><em>none</em></span>
<span ng-repeat="(state, stateDescription) in containerState | limitTo: 1">
<span ng-repeat="(state, stateDescription) in containerState | limitTo: 1" revealable-text>
<span ng-switch="state">
<span ng-switch-when="waiting">
Waiting
Expand Down
2 changes: 1 addition & 1 deletion views/container-statuses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div ng-if="!containerStatuses"><em>none</em></div>
<dl ng-repeat="containerStatus in containerStatuses | orderBy:'name'" class="dl-horizontal">
<dt>Name</dt>
<dd>{{containerStatus.name}}</dd>
<dd revealable-text>{{containerStatus.name}}</dd>
<dt>State</dt>
<dd>
<kubernetes-object-describe-container-state container-state="containerStatus.state"></container-state>
Expand Down
6 changes: 3 additions & 3 deletions views/containers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div ng-if="!containers.length"><em>none</em></div>
<dl class="dl-horizontal" ng-repeat="container in containers">
<dt>Name</dt>
<dd>{{container.name}}</dd>
<dd revealable-text>{{container.name}}</dd>
<dt>Image</dt>
<dd ng-if="container.image">{{container.image}}</dd>
<dd revealable-text ng-if="container.image">{{container.image}}</dd>
<dd ng-if="!container.image"><em>none</em></dd>
<dt>Ports</dt>
<dd>
Expand All @@ -15,7 +15,7 @@
<dt>Env vars</dt>
<dd>
<div ng-if="!container.env.length"><em>none</em></div>
<div ng-repeat="env in container.env | orderBy:'name'" collapse-long-text value="{{env.name}}={{env.value}}"></div>
<div ng-repeat="env in container.env | orderBy:'name'" revealable-text>{{env.name}}=<span ng-class="{masked: shouldMask(env.name)}">{{env.value}}</span></div>
</dd>
</dl>
<div ng-if="$index != 0" style="margin-bottom: 10px;"></div>