Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

add dedicated menu button to room tile with new design

Browse Source
This commit is contained in:
Bruno Windels 2018-11-05 17:42:25 +01:00
parent 665d424758
commit ef26189add
2 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
res/css/views/rooms/_RoomTile.scss
View File

@ -26,6 +26,26 @@ limitations under the License.
background-color: $secondary-accent-color;
}
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-repeat: no-repeat;
background-position: right center;
}
// toggle menuButton and badge on hover/menu displayed
.mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
.mx_RoomTile_menuButton {
display: block;
}
.mx_RoomTile_badge {
display: none;
}
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
@ -88,6 +108,10 @@ limitations under the License.
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.mx_RoomTile_menuButton {
display: none; //no design for this for now
}
}
.mx_RoomTile_badge {
@ -99,12 +123,6 @@ limitations under the License.
font-size: 12px;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: $neutral-badge-color;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color;
}
@ -144,10 +162,6 @@ limitations under the License.
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;

21
src/components/views/rooms/RoomTile.js
View File

@ -220,7 +220,7 @@ module.exports = React.createClass({
this.setState( { badgeHover: false } );
},
onBadgeClicked: function(e) {
onOpenMenu: function(e) {
// Prevent the RoomTile onClick event firing as well
e.stopPropagation();
// Only allow non-guests to access the context menu
@ -276,19 +276,14 @@ module.exports = React.createClass({
if (name == undefined || name == null) name = '';
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
let badgeContent;
if (this.state.badgeHover || this.state.menuDisplayed) {
badgeContent = "\u00B7\u00B7\u00B7";
} else if (badges) {
let badge;
if (badges) {
const limitedCount = FormattingUtils.formatCount(notificationCount);
badgeContent = notificationCount ? limitedCount : '!';
const badgeContent = notificationCount ? limitedCount : '!';
badge = <div className={badgeClasses}>{ badgeContent }</div>;
}
const badge = badgeContent ?
(<div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>) :
undefined;
const EmojiText = sdk.getComponent('elements.EmojiText');
let label;
let tooltip;
@ -317,6 +312,11 @@ module.exports = React.createClass({
// incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
//}
let contextMenuButton;
if (!MatrixClientPeg.get().isGuest()) {
contextMenuButton = <AccessibleButton className="mx_RoomTile_menuButton" onClick={this.onOpenMenu} />;
}
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
let dmIndicator;
@ -338,6 +338,7 @@ module.exports = React.createClass({
</div>
</div>
{ label }
{ contextMenuButton }
{ badge }
{ /* { incomingCallBox } */ }
{ tooltip }