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