Merge "Allow some sections of the change list to overflow" into stable-2.15
diff --git a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
index f3db039..d3491c7 100644
--- a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
+++ b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
@@ -93,16 +93,20 @@
* Example
* // returns 'text.html'
* util.truncatePath.('text.html');
+ *
+ * @param {string} path
+ * @param {number=} opt_threshold
* @return {string} Returns the truncated value of a URL.
*/
- truncatePath(path) {
+ truncatePath(path, opt_threshold) {
+ const threshold = opt_threshold || 1;
const pathPieces = path.split('/');
- if (pathPieces.length < 2) {
- return path;
- }
+ if (pathPieces.length <= threshold) { return path; }
+
+ const index = pathPieces.length - threshold;
// Character is an ellipsis.
- return '\u2026/' + pathPieces[pathPieces.length - 1];
+ return `\u2026/${pathPieces.slice(index).join('/')}`;
},
};
})(window);
diff --git a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
index e0b1b7e..f48fb98 100644
--- a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
+++ b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
@@ -66,6 +66,19 @@
assert.equal(shortenedPath, expectedPath);
});
+ test('truncatePath with opt_threshold', () => {
+ const truncatePath = Gerrit.PathListBehavior.truncatePath;
+ let path = 'level1/level2/level3/level4/file.js';
+ let shortenedPath = truncatePath(path, 2);
+ // The expected path is truncated with an ellipsis.
+ const expectedPath = '\u2026/level4/file.js';
+ assert.equal(shortenedPath, expectedPath);
+
+ path = 'level2/file.js';
+ shortenedPath = truncatePath(path, 2);
+ assert.equal(shortenedPath, path);
+ });
+
test('truncatePath with short path should not add ellipsis', () => {
const truncatePath = Gerrit.PathListBehavior.truncatePath;
const path = 'file.js';
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index a2c7853..0fab4af 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -15,6 +15,7 @@
-->
<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
<link rel="import" href="../../../behaviors/gr-change-table-behavior/gr-change-table-behavior.html">
+<link rel="import" href="../../../behaviors/gr-path-list-behavior/gr-path-list-behavior.html">
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
@@ -145,7 +146,12 @@
</td>
<td class="cell project"
hidden$="[[isColumnHidden('Project', visibleChangeTableColumns)]]">
- <a href$="[[_computeProjectURL(change.project)]]">[[change.project]]</a>
+ <a class="fullProject" href$="[[_computeProjectURL(change.project)]]">
+ [[change.project]]
+ </a>
+ <a class="truncatedProject" href$="[[_computeProjectURL(change.project)]]">
+ [[_computeTruncatedProject(change.project)]]
+ </a>
</td>
<td class="cell branch"
hidden$="[[isColumnHidden('Branch', visibleChangeTableColumns)]]">
@@ -154,7 +160,7 @@
</a>
<template is="dom-if" if="[[change.topic]]">
(<a href$="[[_computeTopicURL(change)]]"><!--
- --><gr-limited-text limit="30" text="[[change.topic]]">
+ --><gr-limited-text limit="50" text="[[change.topic]]">
</gr-limited-text><!--
--></a>)
</template>
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
index 79f06fe..d8fced2 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
@@ -39,6 +39,7 @@
behaviors: [
Gerrit.BaseUrlBehavior,
Gerrit.ChangeTableBehavior,
+ Gerrit.PathListBehavior,
Gerrit.RESTClientBehavior,
Gerrit.URLEncodingBehavior,
],
@@ -115,5 +116,10 @@
if (!change.topic) { return ''; }
return Gerrit.Nav.getUrlForTopic(change.topic);
},
+
+ _computeTruncatedProject(project) {
+ if (!project) { return ''; }
+ return this.truncatePath(project, 2);
+ },
});
})();
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index e082aab..a0bba90 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -62,6 +62,24 @@
.label {
text-align: center;
}
+ .truncatedProject {
+ display: none;
+ }
+ @media only screen and (max-width: 90em) {
+ .assignee,
+ .branch,
+ .owner {
+ overflow: hidden;
+ max-width: 10rem;
+ text-overflow: ellipsis;
+ }
+ .truncatedProject {
+ display: inline-block;
+ }
+ .fullProject {
+ display: none;
+ }
+ }
@media only screen and (max-width: 50em) {
:host {
font-size: 14px;
