From 095da68aace2e59355346fc2f8e620e04e181e53 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 May 2017 13:58:17 +0100 Subject: [PATCH] Add buttons to room sub list headers --- src/components/structures/RoomSubList.js | 4 ++ .../structures/RoomSubListHeader.js | 42 +++++++++---------- src/skins/vector/css/_components.scss | 1 + .../views/elements/_RoleButton.scss | 26 ++++++++++++ .../views/rooms/_RoomList.scss | 11 ++--- 5 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index fde35b129..4d2a3927a 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -1,4 +1,5 @@ /* +Copyright 2017 Vector Creations Ltd Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); @@ -83,6 +84,7 @@ var RoomSubList = React.createClass({ onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, emptyContent: React.PropTypes.node, // content shown if the list is empty + headerItems: React.PropTypes.node, // content shown in the sublist header }, getInitialState: function() { @@ -522,6 +524,7 @@ var RoomSubList = React.createClass({ roomNotificationCount={ this.roomNotificationCount() } onClick={ this.onClick } onHeaderClick={ this.props.onHeaderClick } + headerItems={this.props.headerItems} /> { subList } @@ -543,6 +546,7 @@ var RoomSubList = React.createClass({ roomNotificationCount={ this.roomNotificationCount() } onClick={ this.onClick } onHeaderClick={ this.props.onHeaderClick } + headerItems={this.props.headerItems} /> : undefined } { (this.props.showSpinner && !this.state.hidden) ? : undefined } diff --git a/src/components/structures/RoomSubListHeader.js b/src/components/structures/RoomSubListHeader.js index ad9aff5f7..3ad7547cc 100644 --- a/src/components/structures/RoomSubListHeader.js +++ b/src/components/structures/RoomSubListHeader.js @@ -14,16 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - -var React = require('react'); -var ReactDOM = require('react-dom'); -var classNames = require('classnames'); -var sdk = require('matrix-react-sdk') -var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); -var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); -var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); -var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher'); +import React from 'react'; +import classNames from 'classnames'; +import sdk from 'matrix-react-sdk'; +import FormattingUtils from 'matrix-react-sdk/lib/utils/FormattingUtils'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'RoomSubListHeader', @@ -42,6 +37,7 @@ module.exports = React.createClass({ hidden: React.PropTypes.bool, onClick: React.PropTypes.func, onHeaderClick: React.PropTypes.func, + headerItems: React.PropTypes.node, // content shown in the sublist header }, getDefaultProps: function() { @@ -63,35 +59,34 @@ module.exports = React.createClass({ // }, render: function() { - var TintableSvg = sdk.getComponent("elements.TintableSvg"); + const TintableSvg = sdk.getComponent("elements.TintableSvg"); - var subListNotifications = this.props.roomNotificationCount; - var subListNotifCount = subListNotifications[0]; - var subListNotifHighlight = subListNotifications[1]; + const subListNotifications = this.props.roomNotificationCount; + const subListNotifCount = subListNotifications[0]; + const subListNotifHighlight = subListNotifications[1]; - var chevronClasses = classNames({ + const chevronClasses = classNames({ 'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevronRight': this.props.hidden, 'mx_RoomSubList_chevronDown': !this.props.hidden, }); - var badgeClasses = classNames({ + const badgeClasses = classNames({ 'mx_RoomSubList_badge': true, 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, }); - var badge; + let badge; if (subListNotifCount > 0) { badge =
{ FormattingUtils.formatCount(subListNotifCount) }
; - } - else if (subListNotifHighlight) { + } else if (subListNotifHighlight) { badge =
!
; } // When collapsed, allow a long hover on the header to show user // the full tag name and room count - var title; - var roomCount = this.props.roomCount; + let title; + const roomCount = this.props.roomCount; if (this.props.collapsed) { title = this.props.label; if (roomCount !== '') { @@ -99,9 +94,9 @@ module.exports = React.createClass({ } } - var incomingCall; + let incomingCall; if (this.props.isIncomingCallRoom) { - var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox"); + const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox"); incomingCall = ; } @@ -109,6 +104,7 @@ module.exports = React.createClass({
{ this.props.collapsed ? '' : this.props.label } + {this.props.headerItems}
{ roomCount }
{ badge } diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index df3c4600e..5b23bb82f 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -27,6 +27,7 @@ @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; @import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; @import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/elements/_RoleButton.scss"; @import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss"; @import "./matrix-react-sdk/views/login/_ServerConfig.scss"; @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss new file mode 100644 index 000000000..04503346f --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss @@ -0,0 +1,26 @@ +/* +Copyright 2107 Vector Creations Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoleButton { + margin-left: 4px; + margin-right: 4px; + cursor: pointer; + display: inline-block; +} + +.mx_RoleButton object { + pointer-events: none; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss index bc699ae79..77df1f8fd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss @@ -39,10 +39,6 @@ limitations under the License. z-index: 6; } -.mx_RoomList_greyedSubListLabel { - color: #a2a2a2; -} - .mx_RoomList_emptySubListTip { font-size: 13px; margin-left: 18px; @@ -50,12 +46,13 @@ limitations under the License. margin-top: 8px; margin-bottom: 7px; padding: 5px; - border: 1px solid $accent-color; + border: 1px dashed $accent-color; color: $primary-fg-color; background-color: $droptarget-bg-color; border-radius: 4px; } -.mx_RoomList_butonPreview { - float: right; +.mx_RoomList_headerButtons { + position: absolute; + right: 60px; }