Skip to content

Commit 8e2d748

Browse files
rhamiltorhamilto
committed
Changing display of expand/collapse links when inside .table-responsive
so that the links always appear above or below the text rather than at the end of the line, which could be very long resulting in the links not being visible. Supports openshift/origin-web-console#2002
1 parent d5ae6b4 commit 8e2d748

File tree

8 files changed

+69
-24
lines changed

8 files changed

+69
-24
lines changed

‎dist/less/_core.less

+19-4
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,33 @@ mark {
3737
}
3838
}
3939

40+
.pretty-json {
41+
font-family: @font-family-monospace;
42+
white-space: pre-wrap;
43+
}
44+
4045
// Within truncation directive controls spacing between content and toggle link
4146
.truncation-block {
4247
margin-right: 10px;
4348
}
4449

4550
.truncation-collapse-link {
51+
float: right;
4652
margin-left: 10px;
4753
white-space: nowrap;
54+
.table-responsive & {
55+
display: block;
56+
float: none;
57+
margin-left: 0;
58+
}
59+
.well & {
60+
margin-top: -10px;
61+
}
4862
}
4963

50-
.pretty-json {
51-
font-family: @font-family-monospace;
52-
white-space: pre-wrap;
64+
.truncation-expand-link {
65+
white-space: nowrap;
66+
.table-responsive & {
67+
display: block;
68+
}
5369
}
54-

‎dist/origin-web-common-ui.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -450,15 +450,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
450450
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
451451
" <span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
452452
" </span>\n" +
453-
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"nowrap\">See All</a>\n" +
453+
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
454454
" </span>\n" +
455455
" <span ng-if=\"toggles.expanded\">\n" +
456456
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
457-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
457+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
458458
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
459459
" </div>\n" +
460460
" <span ng-if=\"!prettifyJson\">\n" +
461-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
461+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
462462
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
463463
" </span>\n" +
464464
" </span>\n" +

‎dist/origin-web-common.css

+18-3
Original file line numberDiff line numberDiff line change
@@ -121,16 +121,31 @@ mark {
121121
.ui-select-choices-row.active > span mark {
122122
background-color: rgba(252, 248, 160, 0.75);
123123
}
124+
.pretty-json {
125+
font-family: Menlo, Monaco, Consolas, monospace;
126+
white-space: pre-wrap;
127+
}
124128
.truncation-block {
125129
margin-right: 10px;
126130
}
127131
.truncation-collapse-link {
132+
float: right;
128133
margin-left: 10px;
129134
white-space: nowrap;
130135
}
131-
.pretty-json {
132-
font-family: Menlo, Monaco, Consolas, monospace;
133-
white-space: pre-wrap;
136+
.table-responsive .truncation-collapse-link {
137+
display: block;
138+
float: none;
139+
margin-left: 0;
140+
}
141+
.well .truncation-collapse-link {
142+
margin-top: -10px;
143+
}
144+
.truncation-expand-link {
145+
white-space: nowrap;
146+
}
147+
.table-responsive .truncation-expand-link {
148+
display: block;
134149
}
135150
label.required:before {
136151
content: '*';

‎dist/origin-web-common.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -621,15 +621,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
621621
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
622622
" <span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
623623
" </span>\n" +
624-
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"nowrap\">See All</a>\n" +
624+
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
625625
" </span>\n" +
626626
" <span ng-if=\"toggles.expanded\">\n" +
627627
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
628-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
628+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
629629
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
630630
" </div>\n" +
631631
" <span ng-if=\"!prettifyJson\">\n" +
632-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
632+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
633633
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
634634
" </span>\n" +
635635
" </span>\n" +

‎dist/origin-web-common.min.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ $templateCache.put("src/components/create-project/createProject.html", '<form na
9292
$templateCache.put("src/components/delete-project/delete-project-button.html", '<div class="actions">\n <!-- Avoid whitespace inside the link -->\n <a href=""\n ng-click="$event.stopPropagation(); openDeleteModal()"\n role="button"\n class="action-button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n ><i class="fa fa-trash-o" aria-hidden="true"\n ></i><span class="sr-only">Delete Project {{projectName}}</span></a>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-modal.html", '<div class="delete-resource-modal">\n <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n <form>\n <div class="modal-body">\n <h1>Are you sure you want to delete the project \'<strong>{{project | displayName}}</strong>\'?</h1>\n <p>\n This will <strong>delete all resources</strong> associated with\n the project {{project | displayName}} and <strong>cannot be\n undone</strong>. Make sure this is something you really want to do!\n </p>\n <div ng-show="typeNameToConfirm">\n <p>Type the name of the project to confirm.</p>\n <p>\n <label class="sr-only" for="resource-to-delete">project to delete</label>\n <input\n ng-model="confirmName"\n id="resource-to-delete"\n type="text"\n class="form-control input-lg"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n autofocus>\n </p>\n </div>\n </div>\n <div class="modal-footer">\n <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-lg btn-danger" type="submit" ng-click="delete()">Delete</button>\n <button class="btn btn-lg btn-default" type="button" ng-click="cancel()">Cancel</button>\n </div>\n </form>\n</div>\n'),
9393
$templateCache.put("src/components/delete-project/delete-project.html", '<a href="javascript:void(0)"\n ng-click="openDeleteModal()"\n role="button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n>{{label || \'Delete\'}}</a>\n'), $templateCache.put("src/components/edit-project/editProject.html", '<form name="editProjectForm">\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="editableFields.displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="editableFields.description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="update()"\n ng-disabled="editProjectForm.$invalid || disableInputs"\n value="">{{submitButtonLabel}}</button>\n <button\n class="btn btn-default"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelEditProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'),
9494
$templateCache.put("src/components/origin-modal-popup/origin-modal-popup.html", '<div class="origin-modal-popup tile-click-prevent" ng-if="$ctrl.shown" ng-style="$ctrl.positionStyle"\n ng-class="{\'position-above\': $ctrl.showAbove, \'position-left\': $ctrl.showLeft}">\n <h4 class="origin-modal-popup-title">\n {{$ctrl.modalTitle}}\n </h4>\n <div ng-transclude></div>\n <a href="" class="origin-modal-popup-close" ng-click="$ctrl.onClose()">\n <span class="pficon pficon-close"></span>\n </a>\n</div>\n'), $templateCache.put("src/components/toast-notifications/toast-notifications.html", '<div class="toast-notifications-list-pf">\n <div ng-repeat="(notificationID, notification) in notifications track by (notificationID + (notification.message || notification.details))" ng-if="!notification.hidden || notification.isHover"\n ng-mouseenter="setHover(notification, true)" ng-mouseleave="setHover(notification, false)">\n <div class="toast-pf alert {{notification.type | alertStatus}}" ng-class="{\'alert-dismissable\': !hideCloseButton}">\n <button ng-if="!hideCloseButton" type="button" class="close" ng-click="close(notification)">\n <span class="pficon pficon-close" aria-hidden="true"></span>\n <span class="sr-only">Close</span>\n </button>\n <span class="{{notification.type | alertIcon}}" aria-hidden="true"></span>\n <span class="sr-only">{{notification.type}}</span>\n <span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span>\n <div ng-if="notification.details" class="toast-notification-details">\n <truncate-long-text\n limit="200"\n content="notification.details"\n use-word-boundary="true"\n expandable="true"\n hide-collapse="true">\n </truncate-long-text>\n </div>\n <span ng-repeat="link in notification.links">\n <a ng-if="!link.href" href="" ng-click="onClick(notification, link)" role="button">{{link.label}}</a>\n <a ng-if="link.href" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a>\n <span ng-if="!$last" class="toast-action-divider">|</span>\n </span>\n </div>\n </div>\n</div>\n'),
95-
$templateCache.put("src/components/truncate-long-text/truncateLongText.html", '<!--\n Do not remove class `truncated-content` (here or below) even though it\'s not\n styled directly in origin-web-common. `truncated-content` is used by\n origin-web-console in certain contexts.\n-->\n<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n<span ng-if="truncated">\n <span ng-if="!toggles.expanded">\n <span ng-attr-title="{{content}}" class="truncation-block">\n <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;\n </span>\n <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="nowrap">See All</a>\n </span>\n <span ng-if="toggles.expanded">\n <div ng-if="prettifyJson" class="well">\n <span ng-if="!hideCollapse" class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>\n <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>\n </div>\n <span ng-if="!prettifyJson">\n <span ng-if="!hideCollapse" class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>\n <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n </span>\n </span>\n</span>\n');
95+
$templateCache.put("src/components/truncate-long-text/truncateLongText.html", '<!--\n Do not remove class `truncated-content` (here or below) even though it\'s not\n styled directly in origin-web-common. `truncated-content` is used by\n origin-web-console in certain contexts.\n-->\n<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n<span ng-if="truncated">\n <span ng-if="!toggles.expanded">\n <span ng-attr-title="{{content}}" class="truncation-block">\n <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;\n </span>\n <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a>\n </span>\n <span ng-if="toggles.expanded">\n <div ng-if="prettifyJson" class="well">\n <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>\n <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>\n </div>\n <span ng-if="!prettifyJson">\n <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>\n <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n </span>\n </span>\n</span>\n');
9696
} ]), angular.module("openshiftCommonUI").component("bindApplicationForm", {
9797
controllerAs:"ctrl",
9898
bindings:{

‎dist/scripts/templates.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -421,15 +421,15 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
421421
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
422422
" <span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
423423
" </span>\n" +
424-
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"nowrap\">See All</a>\n" +
424+
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
425425
" </span>\n" +
426426
" <span ng-if=\"toggles.expanded\">\n" +
427427
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
428-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
428+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
429429
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
430430
" </div>\n" +
431431
" <span ng-if=\"!prettifyJson\">\n" +
432-
" <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
432+
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
433433
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
434434
" </span>\n" +
435435
" </span>\n" +

‎src/components/truncate-long-text/truncateLongText.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
<span ng-attr-title="{{content}}" class="truncation-block">
1010
<span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;
1111
</span>
12-
<a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="nowrap">See All</a>
12+
<a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a>
1313
</span>
1414
<span ng-if="toggles.expanded">
1515
<div ng-if="prettifyJson" class="well">
16-
<span ng-if="!hideCollapse" class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
16+
<a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>
1717
<span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
1818
</div>
1919
<span ng-if="!prettifyJson">
20-
<span ng-if="!hideCollapse" class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
20+
<a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>
2121
<span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
2222
</span>
2323
</span>

‎src/styles/_core.less

+19-4
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,33 @@ mark {
3737
}
3838
}
3939

40+
.pretty-json {
41+
font-family: @font-family-monospace;
42+
white-space: pre-wrap;
43+
}
44+
4045
// Within truncation directive controls spacing between content and toggle link
4146
.truncation-block {
4247
margin-right: 10px;
4348
}
4449

4550
.truncation-collapse-link {
51+
float: right;
4652
margin-left: 10px;
4753
white-space: nowrap;
54+
.table-responsive & {
55+
display: block;
56+
float: none;
57+
margin-left: 0;
58+
}
59+
.well & {
60+
margin-top: -10px;
61+
}
4862
}
4963

50-
.pretty-json {
51-
font-family: @font-family-monospace;
52-
white-space: pre-wrap;
64+
.truncation-expand-link {
65+
white-space: nowrap;
66+
.table-responsive & {
67+
display: block;
68+
}
5369
}
54-

0 commit comments

Comments
 (0)