fix roomtile badge

only put it in the dom if it has
anything to show as it has a border now in collapsed mode
This commit is contained in:
Bruno Windels 2018-11-05 14:23:28 +01:00
parent cb8393d449
commit c0becc7664
2 changed files with 10 additions and 10 deletions

View file

@ -71,6 +71,8 @@ limitations under the License.
.mx_RoomTile { .mx_RoomTile {
margin: 2px; margin: 2px;
padding: 2px 0 2px 12px; padding: 2px 0 2px 12px;
display: block; // not flex
position: relative;
} }
.mx_RoomTile_name { .mx_RoomTile_name {
@ -80,23 +82,21 @@ limitations under the License.
.mx_RoomTile_badge { .mx_RoomTile_badge {
display: block; display: block;
position: absolute; position: absolute;
height: 15px; right: 6px;
right: 8px; top: 0px;
top: 2px;
min-width: 12px;
border-radius: 16px; border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 3; z-index: 3;
border: 0.18em solid $secondary-accent-color;
} }
} }
.mx_RoomTile_badge { .mx_RoomTile_badge {
flex: 0 1 content; flex: 0 1 content;
border-radius: 8px; border-radius: 0.8em;
padding: 0 0.4em;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
padding: 0 5px;
} }

View file

@ -283,11 +283,11 @@ module.exports = React.createClass({
} else if (badges) { } else if (badges) {
const limitedCount = FormattingUtils.formatCount(notificationCount); const limitedCount = FormattingUtils.formatCount(notificationCount);
badgeContent = notificationCount ? limitedCount : '!'; badgeContent = notificationCount ? limitedCount : '!';
} else {
badgeContent = '\u200B';
} }
const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>; const badge = badgeContent ?
(<div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>) :
undefined;
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
let label; let label;