Fix hashtag display
This updates gr-limited-text to handle cases where there is no limit provided. Previously, the parent element handled this case in a dom-if, however, the dom-if was not evaluated because the value was undefined. Change-Id: Iae598c6afe4be7ca1fe96a2baf02ec13629bd962
This commit is contained in:
@@ -29,7 +29,10 @@
|
|||||||
text: String,
|
text: String,
|
||||||
|
|
||||||
/** The maximum length for the text to display before truncating. */
|
/** The maximum length for the text to display before truncating. */
|
||||||
limit: Number,
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
value: null,
|
||||||
|
},
|
||||||
|
|
||||||
/** Boolean property used by Gerrit.TooltipBehavior. */
|
/** Boolean property used by Gerrit.TooltipBehavior. */
|
||||||
hasTooltip: {
|
hasTooltip: {
|
||||||
@@ -51,7 +54,7 @@
|
|||||||
* enabled.
|
* enabled.
|
||||||
*/
|
*/
|
||||||
_updateTitle(text, limit) {
|
_updateTitle(text, limit) {
|
||||||
this.hasTooltip = text.length > limit;
|
this.hasTooltip = !!limit && text.length > limit;
|
||||||
if (this.hasTooltip) {
|
if (this.hasTooltip) {
|
||||||
this.setAttribute('title', text);
|
this.setAttribute('title', text);
|
||||||
} else {
|
} else {
|
||||||
@@ -60,7 +63,7 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
_computeDisplayText(text, limit) {
|
_computeDisplayText(text, limit) {
|
||||||
if (text.length > limit) {
|
if (!!limit && text.length > limit) {
|
||||||
return text.substr(0, limit - 1) + '…';
|
return text.substr(0, limit - 1) + '…';
|
||||||
}
|
}
|
||||||
return text;
|
return text;
|
||||||
|
|||||||
@@ -50,25 +50,31 @@ limitations under the License.
|
|||||||
const updateSpy = sandbox.spy(element, '_updateTitle');
|
const updateSpy = sandbox.spy(element, '_updateTitle');
|
||||||
element.text = 'abc 123';
|
element.text = 'abc 123';
|
||||||
flushAsynchronousOperations();
|
flushAsynchronousOperations();
|
||||||
assert.isFalse(updateSpy.called);
|
assert.isTrue(updateSpy.calledOnce);
|
||||||
assert.isNotOk(element.getAttribute('title'));
|
assert.isNotOk(element.getAttribute('title'));
|
||||||
assert.isFalse(element.hasTooltip);
|
assert.isFalse(element.hasTooltip);
|
||||||
|
|
||||||
element.limit = 10;
|
element.limit = 10;
|
||||||
flushAsynchronousOperations();
|
flushAsynchronousOperations();
|
||||||
assert.isTrue(updateSpy.calledOnce);
|
assert.isTrue(updateSpy.calledTwice);
|
||||||
assert.isNotOk(element.getAttribute('title'));
|
assert.isNotOk(element.getAttribute('title'));
|
||||||
assert.isFalse(element.hasTooltip);
|
assert.isFalse(element.hasTooltip);
|
||||||
|
|
||||||
element.limit = 3;
|
element.limit = 3;
|
||||||
flushAsynchronousOperations();
|
flushAsynchronousOperations();
|
||||||
assert.isTrue(updateSpy.calledTwice);
|
assert.isTrue(updateSpy.calledThrice);
|
||||||
assert.equal(element.getAttribute('title'), 'abc 123');
|
assert.equal(element.getAttribute('title'), 'abc 123');
|
||||||
assert.isTrue(element.hasTooltip);
|
assert.isTrue(element.hasTooltip);
|
||||||
|
|
||||||
element.limit = 100;
|
element.limit = 100;
|
||||||
flushAsynchronousOperations();
|
flushAsynchronousOperations();
|
||||||
assert.isTrue(updateSpy.calledThrice);
|
assert.equal(updateSpy.callCount, 4);
|
||||||
|
assert.isNotOk(element.getAttribute('title'));
|
||||||
|
assert.isFalse(element.hasTooltip);
|
||||||
|
|
||||||
|
element.limit = null;
|
||||||
|
flushAsynchronousOperations();
|
||||||
|
assert.equal(updateSpy.callCount, 5);
|
||||||
assert.isNotOk(element.getAttribute('title'));
|
assert.isNotOk(element.getAttribute('title'));
|
||||||
assert.isFalse(element.hasTooltip);
|
assert.isFalse(element.hasTooltip);
|
||||||
});
|
});
|
||||||
@@ -76,6 +82,7 @@ limitations under the License.
|
|||||||
test('_computeDisplayText', () => {
|
test('_computeDisplayText', () => {
|
||||||
assert.equal(element._computeDisplayText('foo bar', 100), 'foo bar');
|
assert.equal(element._computeDisplayText('foo bar', 100), 'foo bar');
|
||||||
assert.equal(element._computeDisplayText('foo bar', 4), 'foo…');
|
assert.equal(element._computeDisplayText('foo bar', 4), 'foo…');
|
||||||
|
assert.equal(element._computeDisplayText('foo bar', null), 'foo bar');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -63,14 +63,9 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class$="container [[_getBackgroundClass(transparentBackground)]]">
|
<div class$="container [[_getBackgroundClass(transparentBackground)]]">
|
||||||
<template is="dom-if" if="[[limit]]">
|
|
||||||
<a href$="[[href]]">
|
<a href$="[[href]]">
|
||||||
<gr-limited-text limit="[[limit]]" text="[[text]]"></gr-limited-text>
|
<gr-limited-text limit="[[limit]]" text="[[text]]"></gr-limited-text>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[!limit]]">
|
|
||||||
<a href$="[[href]]">[[text]]</a>
|
|
||||||
</template>
|
|
||||||
<gr-button
|
<gr-button
|
||||||
id="remove"
|
id="remove"
|
||||||
hidden$="[[!removable]]"
|
hidden$="[[!removable]]"
|
||||||
|
|||||||
Reference in New Issue
Block a user