Skip to content

Improving display of <status-icon>s #1035

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

Merged
merged 1 commit into from
Dec 14, 2016
Merged

Improving display of <status-icon>s #1035

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
3 changes: 1 addition & 2 deletions app/scripts/directives/statusIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ angular.module('openshiftConsole')
templateUrl: 'views/directives/_status-icon.html',
scope: {
status: '=',
disableAnimation: "@",
fixedWidth: "=?"
disableAnimation: "@"
},
link: function($scope, $elem, $attrs) {
$scope.spinning = !angular.isDefined($attrs.disableAnimation);
Expand Down
42 changes: 30 additions & 12 deletions app/styles/_core.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,6 @@ mark {
}
.last-status {
margin-right: 5px;
.status-icon {
width: 20px;
}
}
// Indent icon width to align with text above.
.last-timestamp {
Expand Down Expand Up @@ -1047,12 +1044,39 @@ a.disabled-link {

.status {
min-width: 130px;
.status-icon {
margin-right: 6px;
width: 13px;
}

status-icon {
// when status-icon is child of [row], add margin-right to the icon
// because the space resulting from display: inline-block collapses
[row] > & {
margin-right: 3px;
}
// so that status-icons have a fixed width (like .fa-fw, but better sized)
// this ensures when the icons change, the text that follows doesn't shift
.fa, .pficon {
text-align: center;
width: 1.230769em; // ~16px at 13px font size
.latest-build-status & {
width: 20px;
}
}
// fixes wobble that occurs when status-icons utilize fa-spin (see https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-249591495)
.fa-spin {
font-size: 14px;
line-height: normal;
}
// so that spinners match width of .fa/.pficon (16px or 20px)
.spinner.spinner-inline {
margin-left: 0.153846em; // ~2px at 13px font size
margin-right: 0.153846em; // ~2px at 13px font size
.latest-build-status & {
margin-left: 4px;
margin-right: 4px;
}
}
}

pre.clipped {
display: inline-block;
margin-top: 10px;
Expand Down Expand Up @@ -1192,9 +1216,3 @@ copy-to-clipboard .input-group.limit-width {
width: 100%;
}
}

// fixes wobble that occurs when status-icons utilize fa-spin (see https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-249591495)
.status-icon > .fa-spin {
font-size: 14px;
line-height: normal;
}
7 changes: 0 additions & 7 deletions app/styles/_pipeline.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,13 +229,6 @@
.small();
}

.build-phase .status-icon {
margin-right: 2px;
.spinner.spinner-inline {
margin-right: 0;
}
}

.build-summary, .stage {
.text-center();
}
Expand Down
2 changes: 1 addition & 1 deletion app/views/browse/build-config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ <h2>No builds.</h2>
</td>
<td data-title="Status">
<div row class="status">
<status-icon status="build.status.phase" disable-animation fixed-width="true"></status-icon>
<status-icon status="build.status.phase" disable-animation></status-icon>
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
<span ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/browse/deployment-config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ <h1>
</td>
<td data-title="Status">
<div row class="status">
<status-icon status="deployment | deploymentStatus" disable-animation fixed-width="true"></status-icon>
<status-icon status="deployment | deploymentStatus" disable-animation></status-icon>
<span flex>
{{deployment | deploymentStatus}}<span ng-if="(deployment | deploymentStatus) == 'Active' || (deployment | deploymentStatus) == 'Running'">,
<span ng-if="deployment.spec.replicas !== deployment.status.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span></span>
Expand Down
2 changes: 1 addition & 1 deletion app/views/browse/route.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h1>
<span ng-if="!route.status.ingress">
{{route | routeLabel : null : true}}
<span data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
<status-icon status="'Pending'" disable-animation></status-icon>
<status-icon status="'Pending'"></status-icon>
<span class="sr-only">Pending</span>
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/views/browse/routes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h1>
{{route | routeLabel}}
</span>
<span ng-if="!route.status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
<status-icon status="'Pending'" disable-animation></status-icon>
<status-icon status="'Pending'"></status-icon>
<span class="sr-only">Pending</span>
</span>
</td>
Expand Down
2 changes: 1 addition & 1 deletion app/views/builds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ <h1>
<td data-title="Status">
<div row class="status">
<!-- <build-status build="build"></build-status> -->
<status-icon status="latestBuild.status.phase" disable-animation fixed-width="true"></status-icon>
<status-icon status="latestBuild.status.phase" disable-animation></status-icon>
<span ng-if="!latestBuild.status.reason || latestBuild.status.phase === 'Cancelled'">{{latestBuild.status.phase}}</span>
<span ng-if="latestBuild.status.reason && latestBuild.status.phase !== 'Cancelled'">{{latestBuild.status.reason | sentenceCase}}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/deployments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Conf
</td>
<td data-title="Status">
<div row class="status">
<status-icon status="replicationController | deploymentStatus" disable-animation fixed-width="true"></status-icon>
<status-icon status="replicationController | deploymentStatus" disable-animation></status-icon>
<span flex>
{{replicationController | deploymentStatus}}<span ng-if="(replicationController | deploymentStatus) == 'Active' || (replicationController | deploymentStatus) == 'Running'">,
<span ng-if="replicationController.spec.replicas !== replicationController.status.replicas">{{replicationController.status.replicas}}/</span>{{replicationController.spec.replicas}} replica<span ng-if="replicationController.spec.replicas != 1">s</span></span>
Expand Down
4 changes: 2 additions & 2 deletions app/views/directives/_build-pipeline-expanded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<span class="status-icon" ng-class="build.status.phase">
<span ng-switch="build.status.phase" class="hide-ng-leave">
<span ng-switch-when="Complete" aria-hidden="true">
<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle fa-fw"></i>
</span>
<span ng-switch-when="Failed" aria-hidden="true">
<i class="fa fa-times-circle"></i>
<i class="fa fa-times-circle fa-fw"></i>
</span>
<span ng-switch-default>
<status-icon status="build.status.phase"></status-icon>
Expand Down
56 changes: 28 additions & 28 deletions app/views/directives/_status-icon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<span ng-switch="status" class="hide-ng-leave status-icon">
<span ng-switch-when="Cancelled" class="fa fa-ban text-muted" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Complete" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Completed" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Active" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Error" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Failed" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="New" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Pending" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Running" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-spin' : spinning, 'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Succeeded" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Bound" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Terminating" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Terminated" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Unknown" class="fa fa-question text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="Cancelled" class="fa fa-ban text-muted" aria-hidden="true"></span>
<span ng-switch-when="Complete" class="fa fa-check text-success" aria-hidden="true"></span>
<span ng-switch-when="Completed" class="fa fa-check text-success" aria-hidden="true"></span>
<span ng-switch-when="Active" class="fa fa-refresh" aria-hidden="true"></span>
<span ng-switch-when="Error" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="Failed" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="New" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
<span ng-switch-when="Pending" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
<span ng-switch-when="Running" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-spin' : spinning}"></span>
<span ng-switch-when="Succeeded" class="fa fa-check text-success" aria-hidden="true"></span>
<span ng-switch-when="Bound" class="fa fa-check text-success" aria-hidden="true"></span>
<span ng-switch-when="Terminating" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="Terminated" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="Unknown" class="fa fa-question text-danger" aria-hidden="true"></span>

<!-- Container Runtime States -->
<span ng-switch-when="ContainerCreating" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="CrashLoopBackOff" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="ImagePullBackOff" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="ImageInspectError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="ErrImagePull" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="ErrImageNeverPull" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="no matching container" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="RegistryUnavailable" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="RunContainerError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="KillContainerError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="VerifyNonRootError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="SetupNetworkError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="TeardownNetworkError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="DeadlineExceeded" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
<span ng-switch-when="ContainerCreating" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
<span ng-switch-when="CrashLoopBackOff" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="ImagePullBackOff" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="ImageInspectError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="ErrImagePull" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="ErrImageNeverPull" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="no matching container" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="RegistryUnavailable" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="RunContainerError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="KillContainerError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="VerifyNonRootError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="SetupNetworkError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="TeardownNetworkError" class="fa fa-times text-danger" aria-hidden="true"></span>
<span ng-switch-when="DeadlineExceeded" class="fa fa-times text-danger" aria-hidden="true"></span>
</span>
2 changes: 1 addition & 1 deletion app/views/directives/build-status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<status-icon status="build.status.phase" disable-animation fixed-width="true"></status-icon>
<status-icon status="build.status.phase" disable-animation></status-icon>
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
<span ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span><span
ng-switch="build.status.phase" class="hide-ng-leave" ng-if="build.status.startTimestamp"><span
Expand Down
4 changes: 2 additions & 2 deletions app/views/directives/traffic-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
{{routes[routeName] | routeLabel}}
</span>
<span ng-if="!routes[routeName].status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
<status-icon status="'Pending'" disable-animation></status-icon>
<status-icon status="'Pending'"></status-icon>
<span class="sr-only">Pending</span>
</span>
</td>
Expand Down Expand Up @@ -75,4 +75,4 @@
</td>
</tr>
</tbody>
</table>
</table>
4 changes: 2 additions & 2 deletions app/views/monitoring.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ <h2>Pods</h2>
<small>created <span am-time-ago="pod.metadata.creationTimestamp"></span></small>
</div>
<div class="list-group-item-text">
<status-icon status="pod | podStatus" disable-animation fixed-width="true"></status-icon>
<status-icon status="pod | podStatus" disable-animation></status-icon>
{{pod | podStatus | sentenceCase}}
</div>
</div>
Expand Down Expand Up @@ -180,7 +180,7 @@ <h2>Deployments</h2>
<small>created <span am-time-ago="replicationController.metadata.creationTimestamp"></span></small>
</div>
<div class="list-group-item-text">
<status-icon status="replicationController | deploymentStatus" disable-animation fixed-width="true"></status-icon>
<status-icon status="replicationController | deploymentStatus" disable-animation></status-icon>
{{replicationController | deploymentStatus | sentenceCase}}<span ng-if="(replicationController | deploymentStatus) === 'Active'">, {{replicationController.status.replicas}} replica<span ng-if="replicationController.status.replicas !== 1">s</span></span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/overview/_dc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ <h2>No deployments.</h2>

</div>
<div ng-if="orderedReplicationControllers.length === 1" class="deployment-status-msg">
<status-icon status="orderedReplicationControllers[0] | deploymentStatus" class="mar-right-xs"></status-icon>
<status-icon status="orderedReplicationControllers[0] | deploymentStatus"></status-icon>
Deployment&nbsp;#{{orderedReplicationControllers[0] | annotation : 'deploymentVersion'}}
{{orderedReplicationControllers[0] | deploymentStatus | lowercase}}
</div>
Expand Down
3 changes: 1 addition & 2 deletions dist/scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11716,8 +11716,7 @@ restrict:"E",
templateUrl:"views/directives/_status-icon.html",
scope:{
status:"=",
disableAnimation:"@",
fixedWidth:"=?"
disableAnimation:"@"
},
link:function(a, b, c) {
a.spinning = !angular.isDefined(c.disableAnimation);
Expand Down
Loading