Merge "Make file list more useful on mobile"
This commit is contained in:
commit
b148a81817
@ -145,6 +145,12 @@ limitations under the License.
|
||||
.patchSetSelect {
|
||||
max-width: 8em;
|
||||
}
|
||||
.truncatedFileName {
|
||||
display: none;
|
||||
}
|
||||
.expanded .fullFileName {
|
||||
white-space: normal;
|
||||
}
|
||||
@media screen and (max-width: 50em) {
|
||||
.row.selected {
|
||||
background-color: transparent;
|
||||
@ -159,6 +165,14 @@ limitations under the License.
|
||||
.comments {
|
||||
min-width: initial;
|
||||
}
|
||||
.expanded .fullFileName,
|
||||
.truncatedFileName {
|
||||
display: block;
|
||||
}
|
||||
.expanded .truncatedFileName,
|
||||
.fullFileName {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
@ -217,11 +231,16 @@ limitations under the License.
|
||||
<div class$="[[_computeClass('status', file.__path)]]">
|
||||
[[_computeFileStatus(file.status)]]
|
||||
</div>
|
||||
<a class="path"
|
||||
<a class$="[[_computePathClass(file.__expanded)]]"
|
||||
href$="[[_computeDiffURL(changeNum, patchRange, file.__path)]]">
|
||||
<div title$="[[_computeFileDisplayName(file.__path)]]">
|
||||
<div title$="[[_computeFileDisplayName(file.__path)]]"
|
||||
class="fullFileName">
|
||||
[[_computeFileDisplayName(file.__path)]]
|
||||
</div>
|
||||
<div title$="[[_computeFileDisplayName(file.__path)]]"
|
||||
class="truncatedFileName">
|
||||
[[_computeTruncatedFileDisplayName(file.__path)]]
|
||||
</div>
|
||||
<div class="oldPath" hidden$="[[!file.old_path]]" hidden
|
||||
title$="[[file.old_path]]">
|
||||
[[file.old_path]]
|
||||
|
@ -521,6 +521,11 @@
|
||||
return path === COMMIT_MESSAGE_PATH ? 'Commit message' : path;
|
||||
},
|
||||
|
||||
_computeTruncatedFileDisplayName: function(path) {
|
||||
return path === COMMIT_MESSAGE_PATH ?
|
||||
'Commit message' : util.truncatePath(path);
|
||||
},
|
||||
|
||||
_formatBytes: function(bytes) {
|
||||
if (bytes == 0) return '+/-0 B';
|
||||
var bits = 1024;
|
||||
@ -554,6 +559,10 @@
|
||||
return classes.join(' ');
|
||||
},
|
||||
|
||||
_computePathClass: function(expanded) {
|
||||
return expanded ? 'path expanded' : 'path';
|
||||
},
|
||||
|
||||
_computeShowHideText: function(expanded) {
|
||||
return expanded ? '▼' : '◀';
|
||||
},
|
||||
|
@ -611,5 +611,20 @@ limitations under the License.
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('expanded attribute not set on path when not expanded', function() {
|
||||
element._files = [
|
||||
{__path: '/COMMIT_MSG', __expanded: false},
|
||||
];
|
||||
assert.isNotOk(element.$$('.expanded'));
|
||||
});
|
||||
|
||||
test('expanded attribute set on path when expanded', function() {
|
||||
element._files = [
|
||||
{__path: '/COMMIT_MSG', __expanded: true},
|
||||
];
|
||||
flushAsynchronousOperations();
|
||||
assert.isOk(element.$$('.expanded'));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
@ -504,17 +504,7 @@
|
||||
|
||||
_computeTruncatedFileDisplayName: function(path) {
|
||||
return path === COMMIT_MESSAGE_PATH ?
|
||||
'Commit message' : this._shortenPath(path);
|
||||
},
|
||||
|
||||
_shortenPath: function(path) {
|
||||
var pathPieces = path.split('/');
|
||||
|
||||
if (pathPieces.length < 2) {
|
||||
return path;
|
||||
}
|
||||
// Character is an ellipsis.
|
||||
return '\u2026/' + pathPieces.pop();
|
||||
'Commit message' : util.truncatePath(path);
|
||||
},
|
||||
|
||||
_computeFileSelected: function(path, currentPath) {
|
||||
|
@ -558,20 +558,20 @@ limitations under the License.
|
||||
test('_shortenPath with long path should add ellipsis', function() {
|
||||
var path =
|
||||
'level1/level2/level3/level4/file.js';
|
||||
var shortenedPath = element._shortenPath(path);
|
||||
var shortenedPath = util.truncatePath(path);
|
||||
// The expected path is truncated with an ellipsis.
|
||||
var expectedPath = '\u2026/file.js';
|
||||
assert.equal(shortenedPath, expectedPath);
|
||||
|
||||
var path = 'level2/file.js';
|
||||
var shortenedPath = element._shortenPath(path);
|
||||
var shortenedPath = util.truncatePath(path);
|
||||
assert.equal(shortenedPath, expectedPath);
|
||||
});
|
||||
|
||||
test('_shortenPath with short path should not add ellipsis', function() {
|
||||
var path = 'file.js';
|
||||
var expectedPath = 'file.js';
|
||||
var shortenedPath = element._shortenPath(path);
|
||||
var shortenedPath = util.truncatePath(path);
|
||||
assert.equal(shortenedPath, expectedPath);
|
||||
});
|
||||
|
||||
|
@ -55,5 +55,25 @@
|
||||
return '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Truncates URLs to display filename only
|
||||
* @example
|
||||
* // returns '.../text.html'
|
||||
* util.truncatePath.('dir/text.html');
|
||||
* @example
|
||||
* // returns 'text.html'
|
||||
* util.truncatePath.('text.html');
|
||||
* @returns {String} Returns the truncated value of a URL.
|
||||
*/
|
||||
util.truncatePath = function(path) {
|
||||
var pathPieces = path.split('/');
|
||||
|
||||
if (pathPieces.length < 2) {
|
||||
return path;
|
||||
}
|
||||
// Character is an ellipsis.
|
||||
return '\u2026/' + pathPieces[pathPieces.length - 1];
|
||||
};
|
||||
|
||||
window.util = util;
|
||||
})(window);
|
||||
|
Loading…
Reference in New Issue
Block a user