From bf8d7050cc6bd7b700e839a5ca7a409f6101f663 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 1 Sep 2016 16:46:51 +0100 Subject: [PATCH 01/43] New People icon in place of Directory icon, and placeholder functionality --- src/components/structures/BottomLeftMenu.js | 10 +++---- .../css/vector-web/structures/LeftPanel.css | 6 ++-- src/skins/vector/img/icons-people.svg | 29 ++++++++++++++----- 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index d36966d297..bb1f6c5e0f 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -27,8 +27,8 @@ module.exports = React.createClass({ dis.dispatch({action: 'view_user_settings'}); }, - onRoomDirectoryClick: function() { - dis.dispatch({action: 'view_room_directory'}); + onOneToOneChatClick: function() { + dis.dispatch({action: 'view_one_to_one_chat'}); }, onCreateRoomClick: function() { @@ -51,11 +51,11 @@ module.exports = React.createClass({ return (
-
+
-
- +
+
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index fb023ffeac..e7834c4a29 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -80,21 +80,21 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu_createRoom, -.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_people, .mx_LeftPanel .mx_BottomLeftMenu_settings { display: inline-block; cursor: pointer; } .collapsed .mx_BottomLeftMenu_createRoom, -.collapsed .mx_BottomLeftMenu_directory, +.collapsed .mx_BottomLeftMenu_people, .collapsed .mx_BottomLeftMenu_settings { margin-left: 0px ! important; padding-top: 3px ! important; padding-bottom: 3px ! important; } -.mx_LeftPanel .mx_BottomLeftMenu_directory { +.mx_LeftPanel .mx_BottomLeftMenu_people { margin-left: 10px; } diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg index d6867a3f3a..8854506127 100644 --- a/src/skins/vector/img/icons-people.svg +++ b/src/skins/vector/img/icons-people.svg @@ -1,9 +1,22 @@ - - - - - - - - + + + + 81230A28-D944-4572-B5DB-C03CAA2B1FCA + Created with sketchtool. + + + + + + + + + + + + + + + + From d2e2c726eb58550be212a7760b22fde17fda568b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 2 Sep 2016 15:45:43 +0100 Subject: [PATCH 02/43] Refactor of the RoomTooltip, so that it is easier to use, and also works with Safari --- src/component-index.js | 1 - src/components/structures/BottomLeftMenu.js | 3 +- .../views/rooms/BottomLeftMenuTile.js | 57 ------------------ src/components/views/rooms/RoomTooltip.js | 60 ++++++++++++------- .../vector-web/views/rooms/RoomTooltip.css | 6 ++ 5 files changed, 47 insertions(+), 80 deletions(-) delete mode 100644 src/components/views/rooms/BottomLeftMenuTile.js diff --git a/src/component-index.js b/src/component-index.js index dfe549930a..a0c4d9dc09 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -48,7 +48,6 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader'); module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); -module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index bb1f6c5e0f..4dab5062dd 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -41,12 +41,11 @@ module.exports = React.createClass({ } else if (this.state.hover) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, render: function() { - var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
diff --git a/src/components/views/rooms/BottomLeftMenuTile.js b/src/components/views/rooms/BottomLeftMenuTile.js deleted file mode 100644 index 0db6bd92eb..0000000000 --- a/src/components/views/rooms/BottomLeftMenuTile.js +++ /dev/null @@ -1,57 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket 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. -*/ - -'use strict'; - -var React = require('react'); - -var sdk = require('matrix-react-sdk') - -module.exports = React.createClass({ - displayName: 'BottomLeftMenuTile', - - getInitialState: function() { - return( { hover : false }); - }, - - onMouseEnter: function() { - this.setState( { hover : true }); - }, - - onMouseLeave: function() { - this.setState( { hover : false }); - }, - - render: function() { - var label; - if (!this.props.collapsed) { - label =
{ this.props.label }
; - } - else if (this.state.hover) { - var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - label = ; - } - - return ( -
-
- -
- { label } -
- ); - } -}); diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 2f5de83721..83c8326f49 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -24,37 +24,57 @@ var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ displayName: 'RoomTooltip', + propTypes: { + component: React.PropTypes.object.isRequired, + room: React.PropTypes.object, + label: React.PropTypes.string, + }, + + // Create a wrapper for the tooltip outside the main matrix element componentDidMount: function() { - var tooltip = ReactDOM.findDOMNode(this); - if (!this.props.bottom) { - // tell the roomlist about us so it can position us - dis.dispatch({ - action: 'view_tooltip', - tooltip: tooltip, - }); - } - else { - tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px"; - tooltip.style.display = "block"; - } + this.tooltipContainer = document.createElement("div"); + this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; + document.body.appendChild(this.tooltipContainer); + + this._renderTooltip(); + + // tell the roomlist about us so it can position us + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: this.props.component ? ReactDOM.findDOMNode(this.props.component) : null, + }); }, + // Remove the wrapper element, as the tooltip has finished using it componentWillUnmount: function() { - if (!this.props.bottom) { - dis.dispatch({ - action: 'view_tooltip', - tooltip: null, - }); - } + dis.dispatch({ + action: 'view_tooltip', + tooltip: null, + parent: null, + }); + + ReactDOM.unmountComponentAtNode(this.tooltipContainer); + document.body.removeChild(this.tooltipContainer); }, - render: function() { + _renderTooltip: function() { var label = this.props.room ? this.props.room.name : this.props.label; - return ( + var tooltip = (
{ label }
); + + this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); + }, + + render: function() { + // Render a placeholder + return ( +
+
+ ); } }); diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index deb8cd3f96..22ec9e2316 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -18,6 +18,7 @@ limitations under the License. position: absolute; left: -9px; top: 7px; + pointer-events: none; } .mx_RoomTooltip { @@ -29,4 +30,9 @@ limitations under the License. z-index: 2000; left: 52px; padding: 6px; + pointer-events: none; +} + +mx_RoomToolTip_placeholder { + display: none; } From bf4e3364b48ece118ea1e9e915737e0163becff6 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 2 Sep 2016 18:41:27 +0100 Subject: [PATCH 03/43] Tweak of the RoomTooltip to use DOM element for the parent rather than a React component --- src/components/views/rooms/RoomTooltip.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 83c8326f49..72a2f733bb 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -25,7 +25,7 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', propTypes: { - component: React.PropTypes.object.isRequired, + parent: React.PropTypes.object.isRequired, room: React.PropTypes.object, label: React.PropTypes.string, }, @@ -36,14 +36,17 @@ module.exports = React.createClass({ this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; document.body.appendChild(this.tooltipContainer); - this._renderTooltip(); + // don't render tooltip if parent is undefined + if (this.props.parent) { + this._renderTooltip(); - // tell the roomlist about us so it can position us - dis.dispatch({ - action: 'view_tooltip', - tooltip: this.tooltip, - parent: this.props.component ? ReactDOM.findDOMNode(this.props.component) : null, - }); + // tell the roomlist about us so it can position us + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: this.props.parent, + }); + } }, // Remove the wrapper element, as the tooltip has finished using it From cb101b0a3b76bbdd1371b3ddf79d17021f61ab8e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 2 Sep 2016 18:50:47 +0100 Subject: [PATCH 04/43] Allow better updating if the tooltip is designed to stick around, rather than just appearing on hover --- src/components/views/rooms/RoomTooltip.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 72a2f733bb..d055551bdd 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -49,6 +49,14 @@ module.exports = React.createClass({ } }, + componentDidUpdate: function() { + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: this.props.parent, + }); + }, + // Remove the wrapper element, as the tooltip has finished using it componentWillUnmount: function() { dis.dispatch({ From 80e6cd6d7c75280e494cfdaca4ef2bc01547cb6c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 12:44:09 +0100 Subject: [PATCH 05/43] Further tweaks to the tooltip to better handle its position, and simplify it's use --- src/components/views/rooms/RoomTooltip.js | 87 ++++++++++++++----- .../vector-web/views/rooms/RoomTooltip.css | 2 +- 2 files changed, 64 insertions(+), 25 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index d055551bdd..49a1a7ddf5 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -25,36 +25,31 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', propTypes: { + // The 'parent' can either be a React component or a DOM element parent: React.PropTypes.object.isRequired, + + // The tooltip is derived from either the room name or a label room: React.PropTypes.object, label: React.PropTypes.string, + + // The tooltip position can be tweaked by passing in additional positional information + top: React.PropTypes.number, + botom: React.PropTypes.number, + left: React.PropTypes.number, + right: React.PropTypes.number, }, - // Create a wrapper for the tooltip outside the main matrix element + // Create a wrapper for the tooltip outside the parent and attach to the body element componentDidMount: function() { this.tooltipContainer = document.createElement("div"); this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; document.body.appendChild(this.tooltipContainer); - // don't render tooltip if parent is undefined - if (this.props.parent) { - this._renderTooltip(); - - // tell the roomlist about us so it can position us - dis.dispatch({ - action: 'view_tooltip', - tooltip: this.tooltip, - parent: this.props.parent, - }); - } + this._renderTooltip(); }, componentDidUpdate: function() { - dis.dispatch({ - action: 'view_tooltip', - tooltip: this.tooltip, - parent: this.props.parent, - }); + this._renderTooltip(); }, // Remove the wrapper element, as the tooltip has finished using it @@ -69,16 +64,60 @@ module.exports = React.createClass({ document.body.removeChild(this.tooltipContainer); }, + _isDOMElement: function(obj) { + return (obj && typeof obj === "object" && obj instanceof HTMLElement); + }, + + _isReactComponent: function(obj) { + var ReactComponentPrototype = React.Component.prototype; + var ReactClassComponentPrototype = (Object.getPrototypeOf(Object.getPrototypeOf(new (React.createClass({ render () {} }))()))); + + return (obj && typeof obj === "object" && (ReactComponentPrototype.isPrototypeOf(obj) || ReactClassComponentPrototype.isPrototypeOf(obj))); + }, + _renderTooltip: function() { var label = this.props.room ? this.props.room.name : this.props.label; - var tooltip = ( -
- - { label } -
- ); + var style = {}; + if (this.props.top) { style.top = this.props.top; } + if (this.props.bottom) { style.bottom = this.props.bottom; } + if (this.props.left) { style.left = this.props.left; } + if (this.props.right) { style.right = this.props.right; } - this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); + let parent; + if (this._isDOMElement(this.props.parent)) { + parent = this.props.parent; + } else if (this._isReactComponent(this.props.parent)) { + parent = ReactDOM.findDOMNode(this.props.parent); + } else { + parent = null; + } + + // If a parent exist, add the parents position to the tooltips, so it's correctly + // positioned, also taking into account any window zoom + // NOTE: The additional 6 pixels for the left position, is to take account of the + // tooltips chevron + if (parent) { + style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; + style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; + style.display = "block"; + + var tooltip = ( +
+ + { label } +
+ ); + + // Render the tooltip manually, as we wish it to not be render within the parent + this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); + + // tell the roomlist about us so it can position us + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: parent, + }); + } }, render: function() { diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index 22ec9e2316..8de89d64fb 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -28,9 +28,9 @@ limitations under the License. border-radius: 8px; background-color: #fff; z-index: 2000; - left: 52px; padding: 6px; pointer-events: none; + line-height: 18px; } mx_RoomToolTip_placeholder { From ab9f48cd47c927bfb34dfe8f0c801d2954299ec0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 13:44:00 +0100 Subject: [PATCH 06/43] Restyled tooltip to better match the design --- src/components/structures/BottomLeftMenu.js | 73 +++++++++++++++---- .../vector-web/views/rooms/RoomTooltip.css | 9 ++- 2 files changed, 62 insertions(+), 20 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 4dab5062dd..b8ee15cdf1 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -17,31 +17,69 @@ limitations under the License. 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ displayName: 'BottomLeftMenu', + propTypes: { + collapsed: React.PropTypes.bool.isRequired, + }, + + getInitialState: function() { + return({ + roomsHover : false, + peopleHover : false, + settingsHover : false, + }); + }, + + // Room events + onRoomsClick: function() { + dis.dispatch({action: 'view_create_room'}); + }, + + onRoomsMouseEnter: function() { + this.setState({ roomsHover: true }); + }, + + onRoomsMouseLeave: function() { + this.setState({ roomsHover: false }); + }, + + // People events + onPeopleClick: function() { + dis.dispatch({action: 'view_one_to_one_chat'}); + }, + + onPeopleMouseEnter: function() { + this.setState({ peopleHover: true }); + }, + + onPeopleMouseLeave: function() { + this.setState({ peopleHover: false }); + }, + + // Settings events onSettingsClick: function() { dis.dispatch({action: 'view_user_settings'}); }, - onOneToOneChatClick: function() { - dis.dispatch({action: 'view_one_to_one_chat'}); + onSettingsMouseEnter: function() { + this.setState({ settingsHover: true }); }, - onCreateRoomClick: function() { - dis.dispatch({action: 'view_create_room'}); + onSettingsMouseLeave: function() { + this.setState({ settingsHover: false }); }, - getLabel: function(name) { - if (!this.props.collapsed) { - return
{name}
- } - else if (this.state.hover) { + // Get the label/tooltip to show + getLabel: function(label, parent, show) { + if (true) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, @@ -50,14 +88,17 @@ module.exports = React.createClass({ return (
-
- +
this._rooms = ref} > + + { this.getLabel("Rooms", this._rooms, this.state.roomsHover) }
-
- +
this._people = ref} > + + { this.getLabel("New direct message", this._people, this.state.peopleHover) }
-
- +
this._settings = ref} > + + { this.getLabel("Settings", this._settings, this.state.settingsHover) }
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index 8de89d64fb..bd98ac08d2 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -17,7 +17,7 @@ limitations under the License. .mx_RoomTooltip_chevron { position: absolute; left: -9px; - top: 7px; + top: 4px; pointer-events: none; } @@ -25,12 +25,13 @@ limitations under the License. display: none; position: fixed; border: 1px solid #a4a4a4; - border-radius: 8px; + border-radius: 5px; background-color: #fff; z-index: 2000; - padding: 6px; + padding: 5px; pointer-events: none; - line-height: 18px; + line-height: 14px; + font-size: 13px; } mx_RoomToolTip_placeholder { From d1dd4bd3d8f302778d211f943b6e5d2ebea03b0f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 13:57:49 +0100 Subject: [PATCH 07/43] Updated tooltip styling to be better inline with the design --- src/components/structures/BottomLeftMenu.js | 2 +- src/components/views/rooms/RoomTooltip.js | 4 ++-- .../vector-web/views/rooms/RoomTooltip.css | 22 ++++++++++++++++--- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index b8ee15cdf1..6858a47dfb 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -77,7 +77,7 @@ module.exports = React.createClass({ // Get the label/tooltip to show getLabel: function(label, parent, show) { - if (true) { + if (show) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); return ; } diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 49a1a7ddf5..327e4acf24 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -103,8 +103,8 @@ module.exports = React.createClass({ var tooltip = (
- - { label } +
+ { label }
); diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index bd98ac08d2..5bb5f21a8d 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -16,15 +16,31 @@ limitations under the License. .mx_RoomTooltip_chevron { position: absolute; - left: -9px; + left: -8px; top: 4px; - pointer-events: none; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-right: 8px solid rgba(187, 187, 187, 0.5); + border-bottom: 8px solid transparent; +} + +.mx_RoomTooltip_chevron:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid #fff; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; } .mx_RoomTooltip { display: none; position: fixed; - border: 1px solid #a4a4a4; + border: 1px solid rgba(187, 187, 187, 0.5); border-radius: 5px; background-color: #fff; z-index: 2000; From 7f52fa74a41932d1f15d1567801908e734ec4d2c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 14:14:11 +0100 Subject: [PATCH 08/43] Better comments, and syntax tweak --- src/components/views/rooms/RoomTooltip.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 327e4acf24..e2cdd8a226 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -39,7 +39,7 @@ module.exports = React.createClass({ right: React.PropTypes.number, }, - // Create a wrapper for the tooltip outside the parent and attach to the body element + // Create a wrapper for the tooltip outside the parent and attach it to the body element componentDidMount: function() { this.tooltipContainer = document.createElement("div"); this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper"; @@ -83,7 +83,7 @@ module.exports = React.createClass({ if (this.props.left) { style.left = this.props.left; } if (this.props.right) { style.right = this.props.right; } - let parent; + var parent; if (this._isDOMElement(this.props.parent)) { parent = this.props.parent; } else if (this._isReactComponent(this.props.parent)) { @@ -92,7 +92,7 @@ module.exports = React.createClass({ parent = null; } - // If a parent exist, add the parents position to the tooltips, so it's correctly + // If a parent exists, add the parent's position to the tooltips, so it's correctly // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron @@ -108,10 +108,10 @@ module.exports = React.createClass({
); - // Render the tooltip manually, as we wish it to not be render within the parent + // Render the tooltip manually, as we wish it not to be rendered within the parent this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); - // tell the roomlist about us so it can position us + // tell the roomlist about us so it can manipulate us if it wishes dis.dispatch({ action: 'view_tooltip', tooltip: this.tooltip, From aee56a5bd1170d4e865cb37b66d06689a7a543a1 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 14:47:36 +0100 Subject: [PATCH 09/43] z-index tweak for badge, so it does sit aboce the header --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2545650350..e4d0304a1f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -113,7 +113,7 @@ limitations under the License. min-width: 12px; border-radius: 16px; padding: 0px 4px 0px 4px; - z-index: 200; + z-index: 3; } /* Hide the bottom of speech bubble */ From 52bd61a2f047f67cc7fc9433113d7a68c1513bba Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 14:48:10 +0100 Subject: [PATCH 10/43] When collapsed a long hover on the header now shows the full tag name and room count --- src/components/structures/RoomSubList.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 63b340563f..4d6a5dc804 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -418,8 +418,18 @@ var RoomSubList = React.createClass({ badge =
{subListNotifCount > 99 ? "99+" : subListNotifCount}
; } + // When collapsed, allow a long hover on the header to show user + // the full tag name and room count + var title; + if (this.props.collapsed) { + title = this.props.label; + if (roomCount !== '') { + title += " [" + roomCount + "]"; + } + } + return ( -
+
{ this.props.collapsed ? '' : this.props.label }
{roomCount}
From c2d80675234823c56f064518e41f11941aecfffa Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 3 Sep 2016 14:55:35 +0100 Subject: [PATCH 11/43] Testing to see if having the header badges when collapsed is usable --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 4d9b0668fc..3dc4d2ce77 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -90,9 +90,11 @@ limitations under the License. background-color: #76cfa6; } +/* .collapsed .mx_RoomSubList_badge { display: none; } +*/ .mx_RoomSubList_badgeHighlight { background-color: #ff0064; From 5417385c83f38492861d17abfd8e7a41c12a126b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 07:41:48 +0100 Subject: [PATCH 12/43] Tolltip thweak to not require the passing in of the parent --- src/components/structures/BottomLeftMenu.js | 16 ++++++++-------- src/components/views/rooms/RoomTooltip.js | 13 +------------ 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 6858a47dfb..178fe94082 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -76,10 +76,10 @@ module.exports = React.createClass({ }, // Get the label/tooltip to show - getLabel: function(label, parent, show) { + getLabel: function(label, show) { if (show) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, @@ -88,17 +88,17 @@ module.exports = React.createClass({ return (
-
this._rooms = ref} > +
- { this.getLabel("Rooms", this._rooms, this.state.roomsHover) } + { this.getLabel("Rooms", this.state.roomsHover) }
-
this._people = ref} > +
- { this.getLabel("New direct message", this._people, this.state.peopleHover) } + { this.getLabel("New direct message", this.state.peopleHover) }
-
this._settings = ref} > +
- { this.getLabel("Settings", this._settings, this.state.settingsHover) } + { this.getLabel("Settings", this.state.settingsHover) }
diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index e2cdd8a226..ce0b0f6198 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -25,9 +25,6 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', propTypes: { - // The 'parent' can either be a React component or a DOM element - parent: React.PropTypes.object.isRequired, - // The tooltip is derived from either the room name or a label room: React.PropTypes.object, label: React.PropTypes.string, @@ -83,19 +80,11 @@ module.exports = React.createClass({ if (this.props.left) { style.left = this.props.left; } if (this.props.right) { style.right = this.props.right; } - var parent; - if (this._isDOMElement(this.props.parent)) { - parent = this.props.parent; - } else if (this._isReactComponent(this.props.parent)) { - parent = ReactDOM.findDOMNode(this.props.parent); - } else { - parent = null; - } - // If a parent exists, add the parent's position to the tooltips, so it's correctly // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron + var parent = ReactDOM.findDOMNode(this).parentElement; if (parent) { style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; From cb98e2421e24cadd874e620ef4f16cd6133eb248 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 07:56:32 +0100 Subject: [PATCH 13/43] Removed the nolonger required methods --- src/components/views/rooms/RoomTooltip.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index ce0b0f6198..7dca627a28 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -61,17 +61,6 @@ module.exports = React.createClass({ document.body.removeChild(this.tooltipContainer); }, - _isDOMElement: function(obj) { - return (obj && typeof obj === "object" && obj instanceof HTMLElement); - }, - - _isReactComponent: function(obj) { - var ReactComponentPrototype = React.Component.prototype; - var ReactClassComponentPrototype = (Object.getPrototypeOf(Object.getPrototypeOf(new (React.createClass({ render () {} }))()))); - - return (obj && typeof obj === "object" && (ReactComponentPrototype.isPrototypeOf(obj) || ReactClassComponentPrototype.isPrototypeOf(obj))); - }, - _renderTooltip: function() { var label = this.props.room ? this.props.room.name : this.props.label; var style = {}; From 7ae821e2b552f57e5c787388cc8eed1f2447f609 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 08:39:32 +0100 Subject: [PATCH 14/43] Removed nolonger needed conditional test, as the parent will always exist --- src/components/views/rooms/RoomTooltip.js | 38 +++++++++++------------ 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 7dca627a28..9ee58401f5 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -69,33 +69,31 @@ module.exports = React.createClass({ if (this.props.left) { style.left = this.props.left; } if (this.props.right) { style.right = this.props.right; } - // If a parent exists, add the parent's position to the tooltips, so it's correctly + // Add the parent's position to the tooltips, so it's correctly // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron var parent = ReactDOM.findDOMNode(this).parentElement; - if (parent) { - style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; - style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; - style.display = "block"; + style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; + style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; + style.display = "block"; - var tooltip = ( -
-
- { label } -
- ); + var tooltip = ( +
+
+ { label } +
+ ); - // Render the tooltip manually, as we wish it not to be rendered within the parent - this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); + // Render the tooltip manually, as we wish it not to be rendered within the parent + this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); - // tell the roomlist about us so it can manipulate us if it wishes - dis.dispatch({ - action: 'view_tooltip', - tooltip: this.tooltip, - parent: parent, - }); - } + // tell the roomlist about us so it can manipulate us if it wishes + dis.dispatch({ + action: 'view_tooltip', + tooltip: this.tooltip, + parent: parent, + }); }, render: function() { From fd81ce126baa27503dc9b5536ae3026fcf7d1385 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 08:40:43 +0100 Subject: [PATCH 15/43] Code tidy up --- src/components/views/rooms/RoomTooltip.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 9ee58401f5..037132da77 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -18,7 +18,6 @@ limitations under the License. var React = require('react'); var ReactDOM = require('react-dom'); - var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ @@ -88,7 +87,7 @@ module.exports = React.createClass({ // Render the tooltip manually, as we wish it not to be rendered within the parent this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer); - // tell the roomlist about us so it can manipulate us if it wishes + // Tell the roomlist about us so it can manipulate us if it wishes dis.dispatch({ action: 'view_tooltip', tooltip: this.tooltip, From e52f5b5d0857c8b65503f9acea4a06aa933ba55d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 08:49:43 +0100 Subject: [PATCH 16/43] Removed unrequired positional tweak props --- src/components/views/rooms/RoomTooltip.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 037132da77..4cd87a62a7 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -30,9 +30,7 @@ module.exports = React.createClass({ // The tooltip position can be tweaked by passing in additional positional information top: React.PropTypes.number, - botom: React.PropTypes.number, left: React.PropTypes.number, - right: React.PropTypes.number, }, // Create a wrapper for the tooltip outside the parent and attach it to the body element @@ -64,9 +62,7 @@ module.exports = React.createClass({ var label = this.props.room ? this.props.room.name : this.props.label; var style = {}; if (this.props.top) { style.top = this.props.top; } - if (this.props.bottom) { style.bottom = this.props.bottom; } if (this.props.left) { style.left = this.props.left; } - if (this.props.right) { style.right = this.props.right; } // Add the parent's position to the tooltips, so it's correctly // positioned, also taking into account any window zoom From 50bb4edd1c0d0b4e77d25ce163979316b435ce86 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 08:54:15 +0100 Subject: [PATCH 17/43] Small refactor, to make it clearer whats happening --- src/components/views/rooms/RoomTooltip.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 4cd87a62a7..1c1baa6600 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -60,19 +60,21 @@ module.exports = React.createClass({ _renderTooltip: function() { var label = this.props.room ? this.props.room.name : this.props.label; - var style = {}; - if (this.props.top) { style.top = this.props.top; } - if (this.props.left) { style.left = this.props.left; } // Add the parent's position to the tooltips, so it's correctly // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron var parent = ReactDOM.findDOMNode(this).parentElement; - style.top = (+style.top || 0) + parent.getBoundingClientRect().top + window.pageYOffset; - style.left = (+style.left || 0) + 6 + parent.getBoundingClientRect().right + window.pageXOffset; + var style = {}; + style.top = parent.getBoundingClientRect().top + window.pageYOffset; + style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset; style.display = "block"; + // Add any additional positional tweaks passed in to the tooltip + if (this.props.top) { style.top += this.props.top; } + if (this.props.left) { style.left += this.props.left; } + var tooltip = (
From 2d827a75a60bc0d8ec2d0df45bfcf44cd579b40a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 4 Sep 2016 12:16:01 +0100 Subject: [PATCH 18/43] Sending the top and left position tweaks with the action --- src/components/views/rooms/RoomTooltip.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 1c1baa6600..84c2e5d185 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -52,6 +52,8 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: null, parent: null, + top: null, + left: null, }); ReactDOM.unmountComponentAtNode(this.tooltipContainer); @@ -90,6 +92,8 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: this.tooltip, parent: parent, + top: this.props.top, + left: this.props.left, }); }, From fb103cb9e1a9689bb2b11a8f0885cdfe7e12a2a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 10:27:54 +0100 Subject: [PATCH 19/43] Rename the action to make it clearer what it is doing --- src/components/structures/BottomLeftMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 178fe94082..3615ce8d5c 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -51,7 +51,7 @@ module.exports = React.createClass({ // People events onPeopleClick: function() { - dis.dispatch({action: 'view_one_to_one_chat'}); + dis.dispatch({action: 'view_create_chat'}); }, onPeopleMouseEnter: function() { From 519dd161352f69edf3feee63fa37079c6e37c750 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 10:50:58 +0100 Subject: [PATCH 20/43] Added the correct styling back for the dialog buttons, that got regressed somewhere --- src/skins/vector/css/common.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 64cf4d6d4b..70977f8beb 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -196,8 +196,9 @@ input[type=text]:focus, textarea:focus { height: 36px; border-radius: 40px; border: solid 1px #76cfa6; - font-weight: 400; - font-size: 15px; + font-weight: 600; + font-size: 14px; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; margin-left: 0px; margin-right: 8px; padding-left: 1.5em; From 2acbad36a6759703174ba9568a7b5c22ecd07a5d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 12:03:43 +0100 Subject: [PATCH 21/43] Initial commit of the new ChatInviteDialog --- .../views/dialogs/ChatInviteDialog.css | 34 +++++++++++++++++++ src/skins/vector/img/icons-close-button.svg | 15 ++++++++ 2 files changed, 49 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css create mode 100644 src/skins/vector/img/icons-close-button.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css new file mode 100644 index 0000000000..97597ca556 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -0,0 +1,34 @@ +/* +Copyright 2016 OpenMarket 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_ChatInviteDialog_input { + line-height: 36px; + font-size: 14px; + padding-left: 12px; + padding-right: 12px; + margin: 0; +} + +.mx_ChatInviteDialog_cancel { + position: absolute; + right: 11px; + top: 13px; + cursor: pointer; +} + +.mx_ChatInviteDialog_cancel object { + pointer-events: none; +} diff --git a/src/skins/vector/img/icons-close-button.svg b/src/skins/vector/img/icons-close-button.svg new file mode 100644 index 0000000000..f17940f58c --- /dev/null +++ b/src/skins/vector/img/icons-close-button.svg @@ -0,0 +1,15 @@ + + + + 206C270A-EB00-48E4-8CC3-5D403C59177C + Created with sketchtool. + + + + + + + + + + From 7378904f0042a7f131e83902118abf24268e96ac Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 12:43:04 +0100 Subject: [PATCH 22/43] Adding back the BottomLeftMenuTile component, as it turns out it's still used in the RightPanel --- src/component-index.js | 1 + .../views/rooms/BottomLeftMenuTile.js | 57 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/components/views/rooms/BottomLeftMenuTile.js diff --git a/src/component-index.js b/src/component-index.js index a0c4d9dc09..dfe549930a 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -48,6 +48,7 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader'); module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); +module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); diff --git a/src/components/views/rooms/BottomLeftMenuTile.js b/src/components/views/rooms/BottomLeftMenuTile.js new file mode 100644 index 0000000000..0db6bd92eb --- /dev/null +++ b/src/components/views/rooms/BottomLeftMenuTile.js @@ -0,0 +1,57 @@ +/* +Copyright 2015, 2016 OpenMarket 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. +*/ + +'use strict'; + +var React = require('react'); + +var sdk = require('matrix-react-sdk') + +module.exports = React.createClass({ + displayName: 'BottomLeftMenuTile', + + getInitialState: function() { + return( { hover : false }); + }, + + onMouseEnter: function() { + this.setState( { hover : true }); + }, + + onMouseLeave: function() { + this.setState( { hover : false }); + }, + + render: function() { + var label; + if (!this.props.collapsed) { + label =
{ this.props.label }
; + } + else if (this.state.hover) { + var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); + label = ; + } + + return ( +
+
+ +
+ { label } +
+ ); + } +}); From f6f68bc3481863f2f1fc97a64609e339d4582528 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 17:28:23 +0100 Subject: [PATCH 23/43] Initial AddressTile added --- .../views/elements/AddressTile.css | 35 +++++++++++++ src/skins/vector/img/icon-address-delete.svg | 15 ++++++ src/skins/vector/img/search-icon-vector.svg | 52 +++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css create mode 100644 src/skins/vector/img/icon-address-delete.svg create mode 100644 src/skins/vector/img/search-icon-vector.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css new file mode 100644 index 0000000000..4bac7ccec8 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -0,0 +1,35 @@ +/* +Copyright 2015, 2016 OpenMarket 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_AddressTile { + +} + +.mx_AddressTile_avatar { + +} + +.mx_AddressTile_name { + +} + +.mx_AddressTile_id { + +} + +.mx_AddressTile_dismiss { + +} diff --git a/src/skins/vector/img/icon-address-delete.svg b/src/skins/vector/img/icon-address-delete.svg new file mode 100644 index 0000000000..1289d5aafc --- /dev/null +++ b/src/skins/vector/img/icon-address-delete.svg @@ -0,0 +1,15 @@ + + + + 943783E9-DBD7-4D4E-BAC9-35437C17C2C4 + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/search-icon-vector.svg b/src/skins/vector/img/search-icon-vector.svg new file mode 100644 index 0000000000..5ff808d538 --- /dev/null +++ b/src/skins/vector/img/search-icon-vector.svg @@ -0,0 +1,52 @@ + + + + 3F331F6F-C5B8-4F4E-B05C-61DD280A5298 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 6153e795bf6eccc1110f2dc6d4be0ad0b7abb5b9 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 11:33:56 +0100 Subject: [PATCH 24/43] Correct AddressTile and ChatInviteDialog styling --- .../views/dialogs/ChatInviteDialog.css | 17 +++++++++-- .../views/elements/AddressTile.css | 29 +++++++++++++++---- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 97597ca556..6558c47b67 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -14,12 +14,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ChatInviteDialog_input { - line-height: 36px; +.mx_ChatInviteDialog_input, +.mx_ChatInviteDialog_input:focus { + line-height: 34px; font-size: 14px; padding-left: 12px; padding-right: 12px; - margin: 0; + margin: 0 !important; + border: 0 !important; +} + +.mx_ChatInviteDialog_inputContainer { + border-radius: 3px; + border: solid 1px #f0f0f0; + line-height: 36px; + padding-left: 4px; + padding-right: 4px; + padding-top: 2px; } .mx_ChatInviteDialog_cancel { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 4bac7ccec8..98a0c27e31 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -15,21 +15,40 @@ limitations under the License. */ .mx_AddressTile { - + display: inline-block; + border-radius: 3px; + background-color: rgba(74, 73, 74, 0.1); + border: solid 1px #f0f0f0; + line-height: 27px; + color: #454545; + font-size: 14px; + font-weight: normal; } .mx_AddressTile_avatar { - + display: inline-block; + position: relative; + top: 1px; + padding-left: 2px; + padding-right: 7px; } .mx_AddressTile_name { - + display: inline-block; + padding-right: 4px; + font-weight: 600; } .mx_AddressTile_id { - + display: inline-block; } .mx_AddressTile_dismiss { - + display: inline-block; + padding-right: 11px; + padding-left: 12px; +} + +.mx_AddressTile_dismiss object { + pointer-events: none; } From a41a8d32b8e7f399b4db284d5c1414982f3b63d0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 15:24:37 +0100 Subject: [PATCH 25/43] Basic address list created, and UX tweaks for interaction --- .../views/dialogs/ChatInviteDialog.css | 11 +++++++++++ .../matrix-react-sdk/views/elements/AddressTile.css | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 6558c47b67..bbfaf1a28b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -33,6 +33,17 @@ limitations under the License. padding-top: 2px; } +.mx_ChatInviteDialog_queryList { + position: absolute; + background-color: #fff; + border: 0; +} + +.mx_ChatInviteDialog_queryListElement .mx_AddressTile { + background-color: #fff; + border: solid 1px #fff; +} + .mx_ChatInviteDialog_cancel { position: absolute; right: 11px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 98a0c27e31..58f57c8dce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -41,12 +41,13 @@ limitations under the License. .mx_AddressTile_id { display: inline-block; + padding-right: 11px; } .mx_AddressTile_dismiss { display: inline-block; padding-right: 11px; - padding-left: 12px; + padding-left: 1px; } .mx_AddressTile_dismiss object { From 1fb53565efdff44d00f5a376f830d0e28c82b066 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 15:46:09 +0100 Subject: [PATCH 26/43] Added scrolling to queryList --- .../matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index bbfaf1a28b..dc9db94a78 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -36,7 +36,12 @@ limitations under the License. .mx_ChatInviteDialog_queryList { position: absolute; background-color: #fff; - border: 0; + width: 410px; + max-height: 116px; + overflow-y: scroll; + border-radius: 3px; + background-color: #fff; + border: solid 1px #76cfa6; } .mx_ChatInviteDialog_queryListElement .mx_AddressTile { From e3d5ca34c824e8351ad0c9650f73da92dc8926f4 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 16:15:36 +0100 Subject: [PATCH 27/43] Circumventing autofill by using a textarea rather than an input type=text --- .../matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index dc9db94a78..dddd58e30f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +/* Using a textarea for this element, to circumvent autofill */ .mx_ChatInviteDialog_input, .mx_ChatInviteDialog_input:focus { line-height: 34px; @@ -22,6 +23,13 @@ limitations under the License. padding-right: 12px; margin: 0 !important; border: 0 !important; + outline: 0 !important; + width: 1000%; /* Pretend that this is an "input type=text" */ + resize: none; + overflow: hidden; + vertical-align: middle; + box-sizing: border-box; + word-wrap: nowrap; } .mx_ChatInviteDialog_inputContainer { @@ -31,6 +39,7 @@ limitations under the License. padding-left: 4px; padding-right: 4px; padding-top: 2px; + overflow: hidden; } .mx_ChatInviteDialog_queryList { From c0ce7663a999897b6dcf93325c66db3c51e9ab39 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 16:39:38 +0100 Subject: [PATCH 28/43] Initial highlighting selected address - styling not final --- .../views/dialogs/ChatInviteDialog.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index dddd58e30f..ef106f2353 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -16,7 +16,8 @@ limitations under the License. /* Using a textarea for this element, to circumvent autofill */ .mx_ChatInviteDialog_input, -.mx_ChatInviteDialog_input:focus { +.mx_ChatInviteDialog_input:focus +{ line-height: 34px; font-size: 14px; padding-left: 12px; @@ -58,6 +59,15 @@ limitations under the License. border: solid 1px #fff; } +.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { + background-color: #ddd; /* selected colour */ +} + +.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { + background-color: #ddd; /* selected colour */ + border: solid 1px #ddd; /* selected colour */ +} + .mx_ChatInviteDialog_cancel { position: absolute; right: 11px; From ace0e01d86372f212283fecfd3caaaa7324063ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 17:21:28 +0100 Subject: [PATCH 29/43] Tweak on the textarea to prevent the input area jumping a couple of pixels in size between textarea and AddressTile --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index ef106f2353..d33fac788c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -18,7 +18,7 @@ limitations under the License. .mx_ChatInviteDialog_input, .mx_ChatInviteDialog_input:focus { - line-height: 34px; + height: 26px; font-size: 14px; padding-left: 12px; padding-right: 12px; From 48501d91d21a3b19724f77763fa80c35615a370c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 10:55:31 +0100 Subject: [PATCH 30/43] Added justification for the AddressTile, when requested --- .../views/dialogs/ChatInviteDialog.css | 6 +++--- .../views/elements/AddressTile.css | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index d33fac788c..60e7fa46de 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -60,12 +60,12 @@ limitations under the License. } .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { - background-color: #ddd; /* selected colour */ + background-color: #eaf5f0; /* selected colour */ } .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { - background-color: #ddd; /* selected colour */ - border: solid 1px #ddd; /* selected colour */ + background-color: #eaf5f0; /* selected colour */ + border: solid 1px #eaf5f0; /* selected colour */ } .mx_ChatInviteDialog_cancel { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 58f57c8dce..2638375157 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -39,11 +39,25 @@ limitations under the License. font-weight: 600; } +.mx_AddressTile_name.mx_AddressTile_justified { + width: 120px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .mx_AddressTile_id { display: inline-block; padding-right: 11px; } +.mx_AddressTile_id.mx_AddressTile_justified { + width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .mx_AddressTile_dismiss { display: inline-block; padding-right: 11px; From 75c81b369f28fbf94236fa952a4e22fbb1f04649 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 16:19:30 +0100 Subject: [PATCH 31/43] Mouse actions on the queryList added, as well as better queryListElement styling --- src/skins/vector/css/common.css | 5 +++++ .../views/dialogs/ChatInviteDialog.css | 10 ++++++---- .../views/elements/AddressTile.css | 14 ++++++++++++-- .../css/vector-web/structures/RoomSubList.css | 2 +- src/skins/vector/img/search-icon-vector.svg | 9 +++++---- 5 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 083d09f884..1cb6d3befa 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -64,6 +64,11 @@ input[type=text]:focus, textarea:focus { box-shadow: none; } +/* Required by Firefox */ +textarea { + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; +} + /* Prevent ugly dotted highlight around selected elements in Firefox */ ::-moz-focus-inner { border: 0; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 60e7fa46de..37c966d812 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -20,6 +20,7 @@ limitations under the License. { height: 26px; font-size: 14px; + font-family: font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; padding-left: 12px; padding-right: 12px; margin: 0 !important; @@ -39,24 +40,26 @@ limitations under the License. line-height: 36px; padding-left: 4px; padding-right: 4px; - padding-top: 2px; + padding-top: 1px; + padding-bottom: 1px; overflow: hidden; } .mx_ChatInviteDialog_queryList { position: absolute; background-color: #fff; - width: 410px; + width: 470px; max-height: 116px; overflow-y: scroll; border-radius: 3px; background-color: #fff; border: solid 1px #76cfa6; + cursor: pointer; } .mx_ChatInviteDialog_queryListElement .mx_AddressTile { background-color: #fff; - border: solid 1px #fff; + border: 0; } .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { @@ -65,7 +68,6 @@ limitations under the License. .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { background-color: #eaf5f0; /* selected colour */ - border: solid 1px #eaf5f0; /* selected colour */ } .mx_ChatInviteDialog_cancel { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 2638375157..ae8b93ffee 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -25,12 +25,20 @@ limitations under the License. font-weight: normal; } +.mx_AddressTile_network { + display: inline-block; + position: relative; + padding-left: 2px; + padding-right: 4px; + vertical-align: middle; +} + .mx_AddressTile_avatar { display: inline-block; position: relative; - top: 1px; padding-left: 2px; padding-right: 7px; + vertical-align: middle; } .mx_AddressTile_name { @@ -40,10 +48,11 @@ limitations under the License. } .mx_AddressTile_name.mx_AddressTile_justified { - width: 120px; + width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + vertical-align: middle; } .mx_AddressTile_id { @@ -56,6 +65,7 @@ limitations under the License. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + vertical-align: middle; } .mx_AddressTile_dismiss { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 3dc4d2ce77..fef044162e 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -39,7 +39,7 @@ limitations under the License. padding-top: 6px; padding-bottom: 6px; cursor: pointer; - background-color: rgba(118, 207, 166, 0.2); + background-color: rgba(118, 207, 166, 0.2); /* Should be #d3ede1, but not a magic colour */ border-top: solid 2px #eaf5f0; } diff --git a/src/skins/vector/img/search-icon-vector.svg b/src/skins/vector/img/search-icon-vector.svg index 5ff808d538..13728f97ae 100644 --- a/src/skins/vector/img/search-icon-vector.svg +++ b/src/skins/vector/img/search-icon-vector.svg @@ -1,7 +1,7 @@ - + - 3F331F6F-C5B8-4F4E-B05C-61DD280A5298 + 2EFF6BB8-D2CC-44E6-85E9-D057E4AE9DF2 Created with sketchtool. @@ -21,8 +21,9 @@ - - + + + From cc720b97978bac51a188a29d5323e38429d70241 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 17:08:24 +0100 Subject: [PATCH 32/43] Design tweaks for alignment --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 3 ++- .../vector/css/matrix-react-sdk/views/elements/AddressTile.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 37c966d812..645bbc8155 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -59,7 +59,7 @@ limitations under the License. .mx_ChatInviteDialog_queryListElement .mx_AddressTile { background-color: #fff; - border: 0; + border: solid 1px #fff; } .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { @@ -68,6 +68,7 @@ limitations under the License. .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { background-color: #eaf5f0; /* selected colour */ + border: solid 1px #eaf5f0; /* selected colour */ } .mx_ChatInviteDialog_cancel { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index ae8b93ffee..a8ba5fe9f4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -19,7 +19,7 @@ limitations under the License. border-radius: 3px; background-color: rgba(74, 73, 74, 0.1); border: solid 1px #f0f0f0; - line-height: 27px; + line-height: 26px; color: #454545; font-size: 14px; font-weight: normal; @@ -72,6 +72,7 @@ limitations under the License. display: inline-block; padding-right: 11px; padding-left: 1px; + cursor: pointer; } .mx_AddressTile_dismiss object { From 761552430c88464b8af9aa774ec3fa337bc91691 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 17:14:27 +0100 Subject: [PATCH 33/43] Dialog buttons have a pointer cursor now --- src/skins/vector/css/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 1cb6d3befa..d6047ae825 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -211,7 +211,7 @@ textarea { padding-left: 1.5em; padding-right: 1.5em; outline: none; - + cursor: pointer; color: #76cfa6; background-color: #fff; } From 1d32dd72ed2732ff35d2e66b915207d003f7a779 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 17:30:53 +0100 Subject: [PATCH 34/43] Fixed typing error --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 645bbc8155..9bd9934ea2 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -20,7 +20,7 @@ limitations under the License. { height: 26px; font-size: 14px; - font-family: font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; padding-left: 12px; padding-right: 12px; margin: 0 !important; From 38ac520e1ed89b29d56ccea4cbb604eb5c73b3ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 8 Sep 2016 17:19:59 +0100 Subject: [PATCH 35/43] Fixed name vertical overflow --- .../vector/css/matrix-react-sdk/views/elements/AddressTile.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index a8ba5fe9f4..5e22ccaf8d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -45,6 +45,9 @@ limitations under the License. display: inline-block; padding-right: 4px; font-weight: 600; + overflow: hidden; + height: 26px; + vertical-align: middle; } .mx_AddressTile_name.mx_AddressTile_justified { From 7cb48e0d2d288762fbd4fa5f7dbf4c9d9e3866f1 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 06:56:54 +0100 Subject: [PATCH 36/43] Refactor so that the tooltip positional tweaks can be done in CSS rather than passed in as parameters --- src/components/structures/BottomLeftMenu.js | 2 +- src/components/views/rooms/RoomTooltip.js | 18 ++++-------------- .../matrix-react-sdk/views/rooms/RoomTile.css | 8 ++++++++ .../css/vector-web/structures/LeftPanel.css | 7 +++++++ .../css/vector-web/views/rooms/RoomTooltip.css | 3 --- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 3615ce8d5c..27ae2924f2 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -79,7 +79,7 @@ module.exports = React.createClass({ getLabel: function(label, show) { if (show) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index 84c2e5d185..bbed5df8a5 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -24,13 +24,11 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', propTypes: { + // Alllow the tooltip to be styled by the parent element + className: React.PropTypes.string.isRequired, // The tooltip is derived from either the room name or a label room: React.PropTypes.object, label: React.PropTypes.string, - - // The tooltip position can be tweaked by passing in additional positional information - top: React.PropTypes.number, - left: React.PropTypes.number, }, // Create a wrapper for the tooltip outside the parent and attach it to the body element @@ -52,8 +50,6 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: null, parent: null, - top: null, - left: null, }); ReactDOM.unmountComponentAtNode(this.tooltipContainer); @@ -67,16 +63,12 @@ module.exports = React.createClass({ // positioned, also taking into account any window zoom // NOTE: The additional 6 pixels for the left position, is to take account of the // tooltips chevron - var parent = ReactDOM.findDOMNode(this).parentElement; + var parent = ReactDOM.findDOMNode(this); var style = {}; style.top = parent.getBoundingClientRect().top + window.pageYOffset; style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset; style.display = "block"; - // Add any additional positional tweaks passed in to the tooltip - if (this.props.top) { style.top += this.props.top; } - if (this.props.left) { style.left += this.props.left; } - var tooltip = (
@@ -92,15 +84,13 @@ module.exports = React.createClass({ action: 'view_tooltip', tooltip: this.tooltip, parent: parent, - top: this.props.top, - left: this.props.left, }); }, render: function() { // Render a placeholder return ( -
+
); } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e4d0304a1f..0bff0444fa 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -22,6 +22,14 @@ limitations under the License. height: 34px; } +.mx_RoomTile_tooltip { + display: inline-block; + position: relative; + top: -62px; + left: 44px; +} + + .mx_RoomTile_nameContainer { display: inline-block; width: 180px; diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index e7834c4a29..12991fc2db 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -105,3 +105,10 @@ limitations under the License. .mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { float: none; } + +.mx_LeftPanel .mx_BottomLeftMenu_tooltip { + display: inline-block; + position: relative; + top: -25px; + left: 6px; +} diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index 5bb5f21a8d..bf69f9e7bc 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -50,6 +50,3 @@ limitations under the License. font-size: 13px; } -mx_RoomToolTip_placeholder { - display: none; -} From ac365622b8b1eacc3dec74f316c46abc260e62c3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 07:10:12 +0100 Subject: [PATCH 37/43] Align the RoomTile tooltips with the BottomLeftMenu tooltips --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 0bff0444fa..2f1da5b292 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -26,7 +26,7 @@ limitations under the License. display: inline-block; position: relative; top: -62px; - left: 44px; + left: 46px; } From bfa59c6c04ba2f5c9570d3309f6b7f11fb514d0f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 11:42:57 +0100 Subject: [PATCH 38/43] Increased the width of the query list container to take account of scrollbars --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 9bd9934ea2..8dce58a3cc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -48,7 +48,7 @@ limitations under the License. .mx_ChatInviteDialog_queryList { position: absolute; background-color: #fff; - width: 470px; + width: 485px; max-height: 116px; overflow-y: scroll; border-radius: 3px; From 09ce3a79ecbba0046a4a030819d91f2ed058805c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 12:23:50 +0100 Subject: [PATCH 39/43] Added back the Directory listing button, with new tootlip --- src/components/structures/BottomLeftMenu.js | 25 ++++++++++++++++--- .../css/vector-web/structures/LeftPanel.css | 14 +++++++++-- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 27ae2924f2..77493b17ca 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -30,6 +30,7 @@ module.exports = React.createClass({ getInitialState: function() { return({ + directoryHover : false, roomsHover : false, peopleHover : false, settingsHover : false, @@ -37,8 +38,20 @@ module.exports = React.createClass({ }, // Room events + onDirectoryClick: function() { + dis.dispatch({ action: 'view_room_directory' }); + }, + + onDirectoryMouseEnter: function() { + this.setState({ directoryHover: true }); + }, + + onDirectoryMouseLeave: function() { + this.setState({ directoryHover: false }); + }, + onRoomsClick: function() { - dis.dispatch({action: 'view_create_room'}); + dis.dispatch({ action: 'view_create_room' }); }, onRoomsMouseEnter: function() { @@ -51,7 +64,7 @@ module.exports = React.createClass({ // People events onPeopleClick: function() { - dis.dispatch({action: 'view_create_chat'}); + dis.dispatch({ action: 'view_create_chat' }); }, onPeopleMouseEnter: function() { @@ -64,7 +77,7 @@ module.exports = React.createClass({ // Settings events onSettingsClick: function() { - dis.dispatch({action: 'view_user_settings'}); + dis.dispatch({ action: 'view_user_settings' }); }, onSettingsMouseEnter: function() { @@ -88,9 +101,13 @@ module.exports = React.createClass({ return (
+
+ + { this.getLabel("Room directory", this.state.directoryHover) } +
- { this.getLabel("Rooms", this.state.roomsHover) } + { this.getLabel("Create new room", this.state.roomsHover) }
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 12991fc2db..3109e59571 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -53,7 +53,7 @@ limitations under the License. } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { - flex: 0 0 120px; + flex: 0 0 160px; } .mx_LeftPanel .mx_BottomLeftMenu { @@ -79,6 +79,7 @@ limitations under the License. pointer-events: none; } +.mx_LeftPanel .mx_BottomLeftMenu_directory, .mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_people, .mx_LeftPanel .mx_BottomLeftMenu_settings { @@ -86,6 +87,7 @@ limitations under the License. cursor: pointer; } +.collapsed .mx_BottomLeftMenu_directory, .collapsed .mx_BottomLeftMenu_createRoom, .collapsed .mx_BottomLeftMenu_people, .collapsed .mx_BottomLeftMenu_settings { @@ -94,8 +96,16 @@ limitations under the License. padding-bottom: 3px ! important; } +.mx_LeftPanel .mx_BottomLeftMenu_directory { + margin-right: 10px; +} + +.mx_LeftPanel .mx_BottomLeftMenu_createRoom { + margin-right: 10px; +} + .mx_LeftPanel .mx_BottomLeftMenu_people { - margin-left: 10px; + margin-right: 10px; } .mx_LeftPanel .mx_BottomLeftMenu_settings { From 18eb9d933058ac310e8a1f120edd9f056c63d607 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:36:21 +0100 Subject: [PATCH 40/43] Made sure the z-index was correct for the new little green men --- .../matrix-react-sdk/views/rooms/RoomList.css | 2 +- .../css/vector-web/structures/LeftPanel.css | 2 +- .../css/vector-web/structures/RoomSubList.css | 2 +- src/skins/vector/img/icon_person.svg | 23 +++++++++++++++++++ 4 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 src/skins/vector/img/icon_person.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css index 4dcda646f6..110dcd5b6b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css @@ -35,5 +35,5 @@ limitations under the License. /* Make sure the scrollbar is above the sticky headers from RoomList */ .mx_RoomList_scrollbar .gm-scrollbar.-vertical { - z-index: 5; + z-index: 6; } diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 12991fc2db..98b2abd44f 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -49,7 +49,7 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; - z-index: 5; + z-index: 6; } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index fef044162e..9e4162817a 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -46,7 +46,7 @@ limitations under the License. .mx_RoomSubList_label.mx_RoomSubList_fixed { position: fixed; top: 0; - z-index: 4; + z-index: 5; /* pointer-events: none; */ } diff --git a/src/skins/vector/img/icon_person.svg b/src/skins/vector/img/icon_person.svg new file mode 100644 index 0000000000..4be70df0db --- /dev/null +++ b/src/skins/vector/img/icon_person.svg @@ -0,0 +1,23 @@ + + + + 815EF7DE-169A-4322-AE2A-B65CBE91DCED + Created with sketchtool. + + + + + + + + + + + + + + + + + + From cd368004266e6db6cb2a8427666ae81b27859f05 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:42:11 +0100 Subject: [PATCH 41/43] New direct message indicator CSS --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2f1da5b292..28145946bf 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -36,6 +36,10 @@ limitations under the License. height: 24px; } +.mx_RoomTile_avatar_container { + position: relative; +} + .mx_RoomTile_avatar { display: inline-block; padding-top: 5px; @@ -47,6 +51,14 @@ limitations under the License. vertical-align: middle; } +.mx_RoomTile_dm { + display: block; + position: absolute; + bottom: 0; + right: -5px; + z-index: 2; +} + .mx_RoomTile_avatar_container:hover:before, .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before { display: block; From 2476f87e1d3b54d483d640a1268ac2077d4c9ced Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:47:26 +0100 Subject: [PATCH 42/43] Positional tweaks for the new Direct Message indicator --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 28145946bf..9055083c95 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -67,7 +67,6 @@ limitations under the License. border-radius: 40px; background-image: url("img/icons_ellipsis.svg"); background-size: 25px; - left: 15px; width: 24px; height: 24px; z-index: 4; @@ -80,7 +79,7 @@ limitations under the License. content: ""; border-radius: 40px; background: #4A4A4A; - top: 5px; + bottom: 0; width: 24px; height: 24px; opacity: 0.6; From 965d9aaf47ac985366672001fb1810510b25d430 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 9 Sep 2016 14:56:20 +0100 Subject: [PATCH 43/43] Lowered the Avatar menu background, so the Direct Message indicator is in front of it --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 9055083c95..29fbd9de16 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -83,7 +83,7 @@ limitations under the License. width: 24px; height: 24px; opacity: 0.6; - z-index: 2; + z-index: 1; } .collapsed .mx_RoomTile_avatar_container:hover:before {