From bf8d7050cc6bd7b700e839a5ca7a409f6101f663 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 1 Sep 2016 16:46:51 +0100 Subject: [PATCH 01/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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 ee3fdbee5b2f80fe9b684cb49ebac3ab9ca6c45d Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Sun, 4 Sep 2016 13:31:44 +0100 Subject: [PATCH 19/48] e2e device CSS CSS to make the deviceinfo stuff a little bit closer to the designs --- .../views/rooms/MemberDeviceInfo.css | 15 +++++---------- .../matrix-react-sdk/views/rooms/MemberInfo.css | 5 ----- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css index 4eef01ce1a..bba31e3dcd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css @@ -15,14 +15,9 @@ limitations under the License. */ .mx_MemberDeviceInfo { - font-size: 12px; - display: table-row; - height: 17px; + padding: 10px 0px; } -.mx_MemberDeviceInfo div { - display: table-cell; -} .mx_MemberDeviceInfo_textButton { color: #fff; @@ -33,25 +28,25 @@ limitations under the License. padding-right: 1em; cursor: pointer; + display: inline; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked { - color: #fff; width: 17px; border-radius: 17px; text-align: center; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { - background-color: #76cfa6; + color: #76cfa6; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { - background-color: #eca46f; + color: #b2b2b2; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked { - background-color: #e55e5e; + color: #e55e5e; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index 57da9faaa6..4c60881561 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css @@ -73,8 +73,3 @@ limitations under the License. margin-left: 8px; line-height: 23px; } - -.mx_MemberInfo_devices { - display: table; - border-spacing: 5px; -} \ No newline at end of file From b8610ab46670de39f2c0af571af00ad3ef355564 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Sun, 4 Sep 2016 21:03:00 +0530 Subject: [PATCH 20/48] RTE formatbar (wip) --- .../views/rooms/MessageComposer.css | 27 +++++++++++++++++-- src/skins/vector/img/button-text-bold-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-bold.svg | 17 ++++++++++++ .../vector/img/button-text-bullet-o-n.svg | 20 ++++++++++++++ src/skins/vector/img/button-text-bullet.svg | 20 ++++++++++++++ .../vector/img/button-text-formatting.svg | 18 +++++++++++++ .../vector/img/button-text-italic-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-italic.svg | 17 ++++++++++++ .../vector/img/button-text-numbullet-o-n.svg | 20 ++++++++++++++ .../vector/img/button-text-numbullet.svg | 20 ++++++++++++++ .../vector/img/button-text-quote-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-quote.svg | 17 ++++++++++++ src/skins/vector/img/button-text-strike.svg | 18 +++++++++++++ 13 files changed, 243 insertions(+), 2 deletions(-) create mode 100644 src/skins/vector/img/button-text-bold-o-n.svg create mode 100644 src/skins/vector/img/button-text-bold.svg create mode 100644 src/skins/vector/img/button-text-bullet-o-n.svg create mode 100644 src/skins/vector/img/button-text-bullet.svg create mode 100644 src/skins/vector/img/button-text-formatting.svg create mode 100644 src/skins/vector/img/button-text-italic-o-n.svg create mode 100644 src/skins/vector/img/button-text-italic.svg create mode 100644 src/skins/vector/img/button-text-numbullet-o-n.svg create mode 100644 src/skins/vector/img/button-text-numbullet.svg create mode 100644 src/skins/vector/img/button-text-quote-o-n.svg create mode 100644 src/skins/vector/img/button-text-quote.svg create mode 100644 src/skins/vector/img/button-text-strike.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 9dd93b804c..71f5315d5e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -65,8 +65,9 @@ limitations under the License. font-size: 14px; margin-right: 6px; } -.mx_MessageComposer_input_rte { - border-top: 2px solid #76cfa6; /* placeholder RTE indicator */ + +.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root { + display: none; } .mx_MessageComposer_input .DraftEditor-root { @@ -122,3 +123,25 @@ limitations under the License. pointer-events: none; } +.mx_MessageComposer_formatbar { + display: flex; + + height: 30px; + width: 100%; + background-color: #f7f7f7; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); + + box-sizing: border-box; + padding-left: 62px; + + flex-direction: row; + align-items: center; +} + +.mx_MessageComposer_formatbar * { + margin-right: 4px; +} + +.mx_MessageComposer_format_button { + cursor: pointer; +} diff --git a/src/skins/vector/img/button-text-bold-o-n.svg b/src/skins/vector/img/button-text-bold-o-n.svg new file mode 100644 index 0000000000..161e740e90 --- /dev/null +++ b/src/skins/vector/img/button-text-bold-o-n.svg @@ -0,0 +1,17 @@ + + + + 01F3F9B2-8F38-4BAF-A345-AECAC3D88E79 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bold.svg b/src/skins/vector/img/button-text-bold.svg new file mode 100644 index 0000000000..0fd0baa07e --- /dev/null +++ b/src/skins/vector/img/button-text-bold.svg @@ -0,0 +1,17 @@ + + + + 9BC64A5B-F157-43FF-BCC4-02D30CDF520B + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bullet-o-n.svg b/src/skins/vector/img/button-text-bullet-o-n.svg new file mode 100644 index 0000000000..d4a40e889c --- /dev/null +++ b/src/skins/vector/img/button-text-bullet-o-n.svg @@ -0,0 +1,20 @@ + + + + 654917CF-20A4-49B6-B0A1-9875D7B733C8 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bullet.svg b/src/skins/vector/img/button-text-bullet.svg new file mode 100644 index 0000000000..ae3e640d8e --- /dev/null +++ b/src/skins/vector/img/button-text-bullet.svg @@ -0,0 +1,20 @@ + + + + B7D94619-44BC-4184-A60A-DBC5BB54E5F9 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-formatting.svg b/src/skins/vector/img/button-text-formatting.svg new file mode 100644 index 0000000000..d3fc3f5f54 --- /dev/null +++ b/src/skins/vector/img/button-text-formatting.svg @@ -0,0 +1,18 @@ + + + + F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9 + Created with sketchtool. + + + + + + + A + a + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-italic-o-n.svg b/src/skins/vector/img/button-text-italic-o-n.svg new file mode 100644 index 0000000000..15fe588596 --- /dev/null +++ b/src/skins/vector/img/button-text-italic-o-n.svg @@ -0,0 +1,17 @@ + + + + 116426C2-0B55-480E-92B3-57D4B3ABAB90 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-italic.svg b/src/skins/vector/img/button-text-italic.svg new file mode 100644 index 0000000000..b5722e827b --- /dev/null +++ b/src/skins/vector/img/button-text-italic.svg @@ -0,0 +1,17 @@ + + + + 9FBC844D-96CF-4DCB-B545-FCD23727218B + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-numbullet-o-n.svg b/src/skins/vector/img/button-text-numbullet-o-n.svg new file mode 100644 index 0000000000..869a2c2cc2 --- /dev/null +++ b/src/skins/vector/img/button-text-numbullet-o-n.svg @@ -0,0 +1,20 @@ + + + + 294F929B-31AA-4D0C-98B3-9CA96764060D + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-numbullet.svg b/src/skins/vector/img/button-text-numbullet.svg new file mode 100644 index 0000000000..8e5b8b87b6 --- /dev/null +++ b/src/skins/vector/img/button-text-numbullet.svg @@ -0,0 +1,20 @@ + + + + F0F58459-A13A-48C5-9332-ABFB96726F05 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-quote-o-n.svg b/src/skins/vector/img/button-text-quote-o-n.svg new file mode 100644 index 0000000000..f8a86125c9 --- /dev/null +++ b/src/skins/vector/img/button-text-quote-o-n.svg @@ -0,0 +1,17 @@ + + + + 3B24B8C7-64BE-4B3E-A748-94DB72E1210F + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-quote.svg b/src/skins/vector/img/button-text-quote.svg new file mode 100644 index 0000000000..d70c261f5d --- /dev/null +++ b/src/skins/vector/img/button-text-quote.svg @@ -0,0 +1,17 @@ + + + + BFC0418B-9081-4789-A231-B75953157748 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-strike.svg b/src/skins/vector/img/button-text-strike.svg new file mode 100644 index 0000000000..5f262dc350 --- /dev/null +++ b/src/skins/vector/img/button-text-strike.svg @@ -0,0 +1,18 @@ + + + + A34F2223-34C6-46AE-AA47-38EC8984E9B3 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file From fb103cb9e1a9689bb2b11a8f0885cdfe7e12a2a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 10:27:54 +0100 Subject: [PATCH 21/48] 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 22/48] 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 23/48] 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 24/48] 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 d6a324ede725c877648c8e79483d0454e2450b8f Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Mon, 5 Sep 2016 17:39:32 +0530 Subject: [PATCH 25/48] Formatting toggle, markdown indicator, quoting --- .../views/context_menus/MessageContextMenu.js | 15 +++++++ .../views/rooms/MessageComposer.css | 42 +++++++++++++++--- src/skins/vector/img/button-md-false.png | Bin 0 -> 569 bytes src/skins/vector/img/button-md-false.svg | 29 ++++++++++++ src/skins/vector/img/button-md-false@2x.png | Bin 0 -> 1086 bytes src/skins/vector/img/button-md-false@3x.png | Bin 0 -> 1548 bytes src/skins/vector/img/button-md-true.png | Bin 0 -> 483 bytes src/skins/vector/img/button-md-true.svg | 14 ++++++ src/skins/vector/img/button-md-true@2x.png | Bin 0 -> 906 bytes src/skins/vector/img/button-md-true@3x.png | Bin 0 -> 1201 bytes .../vector/img/button-text-strike-o-n.svg | 18 ++++++++ src/skins/vector/img/icon-text-cancel.svg | 15 +++++++ 12 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 src/skins/vector/img/button-md-false.png create mode 100644 src/skins/vector/img/button-md-false.svg create mode 100644 src/skins/vector/img/button-md-false@2x.png create mode 100644 src/skins/vector/img/button-md-false@3x.png create mode 100644 src/skins/vector/img/button-md-true.png create mode 100644 src/skins/vector/img/button-md-true.svg create mode 100644 src/skins/vector/img/button-md-true@2x.png create mode 100644 src/skins/vector/img/button-md-true@3x.png create mode 100644 src/skins/vector/img/button-text-strike-o-n.svg create mode 100644 src/skins/vector/img/icon-text-cancel.svg diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 737b7faa41..ff6ace619a 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -84,6 +84,14 @@ module.exports = React.createClass({ if (this.props.onFinished) this.props.onFinished(); }, + onQuoteClick: function () { + console.log(this.props.mxEvent); + dis.dispatch({ + action: 'quote', + event: this.props.mxEvent, + }); + }, + render: function() { var eventStatus = this.props.mxEvent.status; var resendButton; @@ -141,6 +149,12 @@ module.exports = React.createClass({
); + const quoteButton = ( +
+ Quote +
+ ); + return (
{resendButton} @@ -149,6 +163,7 @@ module.exports = React.createClass({ {viewSourceButton} {unhidePreviewButton} {permalinkButton} + {quoteButton}
); } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 71f5315d5e..b1cd3ce0e6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -57,11 +57,10 @@ limitations under the License. .mx_MessageComposer_input { flex: 1; vertical-align: middle; - min-height: 60px; - max-height: 120px; display: flex; - align-items: center; - overflow: auto; + flex-direction: column; + min-height: 60px; + align-items: flex-start; font-size: 14px; margin-right: 6px; } @@ -71,7 +70,17 @@ limitations under the License. } .mx_MessageComposer_input .DraftEditor-root { + width: 100%; flex: 1; + max-height: 120px; + overflow: auto; +} + +.mx_MessageComposer_input blockquote { + color: rgb(119, 119, 119); + margin: 0 0 16px; + padding: 0 15px; + border-left: 4px solid rgb(221, 221, 221); } .mx_MessageComposer_input textarea { @@ -89,7 +98,8 @@ limitations under the License. color: #454545; background-color: #fff; font-size: 14px; - + max-height: 120px; + overflow: auto; /* needed for FF */ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; } @@ -123,6 +133,11 @@ limitations under the License. pointer-events: none; } +.mx_MessageComposer_formatting { + cursor: pointer; + margin: 0 11px; +} + .mx_MessageComposer_formatbar { display: flex; @@ -142,6 +157,21 @@ limitations under the License. margin-right: 4px; } -.mx_MessageComposer_format_button { +.mx_MessageComposer_format_button, +.mx_MessageComposer_formatbar_cancel, +.mx_MessageComposer_formatbar_markdown { cursor: pointer; } + +.mx_MessageComposer_formatbar_cancel { + margin-right: 22px; +} + +.mx_MessageComposer_formatbar_markdown { + margin-right: 64px; +} + +.mx_MessageComposer_input_markdownIndicator { + padding: 4px 4px 4px 0; + opacity: 0.8; +} diff --git a/src/skins/vector/img/button-md-false.png b/src/skins/vector/img/button-md-false.png new file mode 100644 index 0000000000000000000000000000000000000000..6debbccc937a75e1a07a2a36518e221efb696823 GIT binary patch literal 569 zcmV-90>=G`P)Px$^GQTOR5%f>lTAwkQ51&nI5U20n$SW62`sRMghb#f7w+1H`X`irKr45x3;Gkf zOl*-LxR6$YU$_&bjn+a?upCi)&)^-#VcLWT4)@G^&w1vYJ9h*I%VaWQDwVQOybr5Z ztLsv!v=W-lX4>g=mIOiA2UlY(m&>$dv)S&fRx2alv*j%?3ASf0V>k(U=bS}ROol=s zo7?R^#O5b|BO16Tog8|d>sS??{-)E_a0d?M3&o1h=bMbj2|wM09|qjtvDJdyjQE$+*~gd3esw|dY{kdVXplNr-VQtFu;G1gY$g- zdK8I7nw3h0HZ9p~_7z8RVYl1q5~z7Q7aZLr+wHc9v67sE2`IDcCGCQ&us*)}2Ja=8+8&U!HINf2k- zBz2KxnUNcffHbn18KIN|?o`6%&*P7LM6uVb@IRUgmZaP-lh~_%7EU=y00000NkvXX Hu0mjflU)I? literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-false.svg b/src/skins/vector/img/button-md-false.svg new file mode 100644 index 0000000000..6414933d96 --- /dev/null +++ b/src/skins/vector/img/button-md-false.svg @@ -0,0 +1,29 @@ + + + + D335F9E8-C813-47D7-B1BE-C8DEF2C8214F + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-md-false@2x.png b/src/skins/vector/img/button-md-false@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..497f5385d140cfda7cd24c5b79cf3871a700b017 GIT binary patch literal 1086 zcmV-E1i|}>P)Px&_(?=TR9FesS6@g|VHDqgbz`!J%|BC;>|v;E;Db;?U>5DAmmq?C>q&%q2#O$l zis-?hw+bJkmx_X(5=TBn3`R}d5SdbIMk+e7hat{suDSI)mwlJ-UU% zc&`=!mcwv(c=)iduWwvGH#awAx7$B42fbdeGZ+j^tVxSw$?@$h+}8=iDB945X5jSZipS%F0Fq^qk)eUMwzdqDc?tk}0*y()s}=cdHftdJa#`05oKE!n z{l8MF)Hw={EMM#F?EJ2XPuj z#7|94SzB9MXNj+50l*mmdIwvjk`uzr&(Dvb`5$L8867?H_dr#^5!r&d9iEw)v2}NM ze}L?w(<;5Fp;Ruft*ucxlms7*Mu(f4nqE;%TDTS*xw%#goZ_A8?d?q=`)5g@j}IIs z{Xc0#VZnZEWo2a?+Y<2MaM*|Y_DAN1_`;Q&$&CIBaC-Sz=;MPx6NSv;Rz%Sk_W}Mo zGY*A9Cmaq(l*#msK)_2aO;e>*00N6lYX;3?0sQmj<>gI0vreZo2EBj@dZ9#^ot!EH zM-yGdD0)jxf#wjtGLYHx^6sX9T&CURLpF3-Djp`8Kym;iqRURVM*uyV5bof>-0i`!ZgI77X}nzNr}0@w6yI01q7Z{+`rz{BLDyZ07*qoM6N<$ Ef*aWjwEzGB literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-false@3x.png b/src/skins/vector/img/button-md-false@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..1184e6b351ec17fb2e1f8cdaa866ea3d81d5cb07 GIT binary patch literal 1548 zcmV+n2J`ueP)Px)#z{m$RA>e5T3t+IMHIfbEzt58HUUzK6=jjlVvQRkAgq56ZcKRa!A%JA6I zqdpj4HmQjTlI)8QMq;eClwXk{!G`xHTO4Om186mfcb`X&JBE;JzI{sNeR zmX?+taddRFv8JZxZ@GXdiUNR=lTZBn>gwvFrqa^VCs|JkjFOTP!DKSAb(a4ets*c%VO_?7AMj->9?;+8@#Hk_78{sKjT3UJ&1ltMzvUJtpYM z3KU(YPknv;T{!s~&p4I_nJAXLRwY1K*?iV@0fig@FgLfix4*_TO6SiDb#-;&bOP(^ z>xP}39f5wB0_jB4^48YYjM?hZ4HQ@ycez||!;o>FwTO;u0B(%OV`%`^h?A>8zy1Av zmZhn_v9V#uR*#;b2!n%z`?IsNFYfN{rsN&~@*M#AM3Yx}6xJ0K@}sM(>mCkO&q$*T zKq#>~^XQ}Iu5|~6ENE+M^C34}L4G+FiB*nTPC%hf91h1fi;IhoWlF4agO0*`&Om{4 z@s5s;e~yBaT5UKqD8s|UWkW+lm0CI;A0NM$FGB3;Ir=!;B3nfN%P*%8^?%_ZAbH&94vadGjDxw*M>YzGH* z(d+eogmceJ9G)r?qU9X`^MNX1j!+;FI0GHiI3$`-3et}ws{i*CeDwDCe7=;=2on<% zmjKv@JOi}Q;L!E?`S~}rv>{nq3^q46eUV6{9NT|E`q9~l_vjia)B#4IysE0|HgZft z_d#O)k=J=PG{(U@?`Z)c*<6A`BT>nY2#pY&VQtL1j%YMgR#y5v z9#1t#iHMc(bM$|iNe$BWYx$QYmCvqtw;`OexM*caXQ(#4aMyyKu?( zE~|(7#imi!RdCKhA;Ty_$RIrdksJmv*5>AB4<%HhVd=ku{_guIP7y)_qvlb)qs50K zTPPF?l2U|hQaeJ}uBIayAQtFKjBYp_7O;m%>Vw?FYV@%(0Onk0XXmeokk0^!o8?iR z0HJ|V`=|y53hx4#gx;p6CINc}wSDm9&O+BZF)Au51e~3CGFoXDF+dl$wzg7i%jVAl z$q~|O!BLc_Xk-&9C3RZuv_4uQC8=9!ZYt4}4LKEZM5&z;ouej6qBfMj=q4cBl`bn# zXf*VC2o!AQ^ir45L%?JU2q`#G(?>644anSygr}Fn9LhL*b~a2- yPPSB6S3eF$MP4m@fSpqgfxljyq5K30b^RY({^*N^6Hc%I0000Px$ok>JNR5%f}Q@=~YP!R4*qDv@tQgBgpu#<=o2mb*jZDSmCaQDZigR9Wpx;VJ_ zCj?Yd(o(nn8C}Iq$0}-)#_!TxcuzVg#0SZD_uakk-Q7z>k|d(hXv`aiF;yyP#c@1r zx7)9xR;%6NfZc+0a~Vz3&NO&CIa8o98jTzcRnr0gv2;aP*Y!ipzAA*+#}o63uy2UZ zVqX&fB=PUeGa76V;v$|qoz4K}0C%wfyu{PDEbFw{Y(}t4wrwYbw9s|v`#$9>Jo&Vg z%E#3B9RxuO60PP>s zCJ3*vCoN}Q|5@tzVAi3$Kk--c6To{Ir=xh^QIf|k#A;$?7aa3#9>-9x!T$7W) zSHPbThw5~WA#VvC^x%`|Ec1*){Uei&w|7h8Fc$WW4VBFgcg+%DVcwCp!bF? Zt#3CFoq7f*3)uhw002ovPDHLkV1lx_+k^lB literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-true.svg b/src/skins/vector/img/button-md-true.svg new file mode 100644 index 0000000000..2acc4f675c --- /dev/null +++ b/src/skins/vector/img/button-md-true.svg @@ -0,0 +1,14 @@ + + + + 2A63B135-4281-4FBB-A88C-012AE22E9594 + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-md-true@2x.png b/src/skins/vector/img/button-md-true@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ad9067f385b2fbb975c6df7a006adab817800751 GIT binary patch literal 906 zcmV;519kj~P)Px&L`g(JR9Fesmpf=vQ5eU2la^>xMT0}ZL8l5na4B}Ex+o}plA(jtpjaq~RK%g9 zwnM>+2t`Fid_ZxK^g(Jae~KP!xe-|ufpCX)}~TWS@w z;4%y&13wlHhtCG<&wHjDc)A8ghHV= zOm>W9Sv?`TsMqT~QVd%6`PaNH;A-;u`T1Fw%QYrI0R5dZ@&h_9y49ezfh$n0t*z$) z99BH^#N6E6E5)zos0ui5n+)~b59rgJ!2Q((EOS`~t{!4TLqi@3q%^*Av95@$XkTAn zlP>>H-ZJpT#l@y*Goa%}$CI02wq4*Ri z6AjR=Ua-^G3rd*5!NG=DEEa_QqU(!!Kty~#-+{@=$waYDWO8p6p3T?-|BP?5=!9C{ zaR~tYL{CpoyU2L)z#IN zOUMZfko=@dW@X@en1$Yk=KjQ(#RLKYFE2pVwYHhrm984#bxhjKH_cJ*hnB4SQj-#M zlm%Zhv#ZnKRHpISV`dj!Rlrp+iQA~zr?7=iBS|gNvz*$n?n_RC)3^gYr0dQ2s)4Iy zOyD+4YE?%$jB{$o#h-;-CTG9M<*2Q$QZCV7*luzWms!LPK%cRi$6&=P9!wHQ87#xc zM25Oayi=3S*l)zWFEZ>RuF}b>7op{ntoWwIlV}8S9DLZ6_e_YZ4 zS98>nz_|~(+FPo*?W_QZd$dHIyRKI7t0^;}KLThr_p?i9383(!*jQ62H85QI3>aT~ gJf4d)GczB41OD$WoQHsRivR!s07*qoM6N<$g6lN16951J literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-true@3x.png b/src/skins/vector/img/button-md-true@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..d615867dc4604e2f898fb0f15e4e2b19e5bd0bf5 GIT binary patch literal 1201 zcmV;i1Wx;jP)Px(Ye_^wRA>e5noCGjQ5eUaM^>7c^rSWg8AJ<%#%L2E5rMCqXre`i77;`S6>XwG z6c;UeLPgNV$_NApQHK&*v=RhcL_sC40$WHyj~SEH>34>%-VW#FnVCB|dFR66p7XuV z`TqAi-~H|*FE4lG5HLZ&V+n;qp{3*FiAJc0j> zhp)Phj*hQ7nQWmu0*Y{k?KR}}dQWN`BhusbJv}{dHTz9$LSXM19muae`ShzYF33mA3u zzsQqj``ENjN!kyQc#~Gj5{0xQg<|ViQ&ZDoQ-63Dyo|!C-c)`*8JZG8apWG+C2u4ABJYZ0xJ#jh8J?FY0{7SlmXc|LS+l8X-6?IzP_ z+up;*eiNOP7pXGNq-$th_QWd^E3`0exk|^BhQ60=_Yi>hnCe(^L~tAW$F1>PXGcL1 zlQH>B;-#NRtelfgtjcv`C!ZF^$?Zx31(E1FgU&?-OG|Pbl;1NovhY(})kI>|&Yl7T z2a9Nt+S=MpbE&h2!^qs2OHSrz3KS7BH<_$Op3tH3YCiM!69sE^_5f`!yms2m_i~-A zOwSl7OymccjM>NbMsmzka#peI6o3Q(tqYlanP)Q2*rH7)Pge$~%c9X}x2QiXTfty( z^W@}Y1fJ0=O-s*ycB*)@+x*x4-P9kCiI~vD#Kan!_*p=_Gfw$10);SL!tWY8RkKi7 zCH?yb_SWg_5%!|qN$Mafg47}RIg7i}hNP4g!XA>9@~yf;))gckDJuT!oRX=llmkV9 zYz~whC<+7=B=L|HQ_x*Y0*|Qplj)Uf5s(}QkSR!SL{7OQ@!ULY=PPE+%WJ!bpm2@m z>UxDJd0tRZa85+T%oC(|h@v{(ODjcShAxB_@ + + + 69B11088-0F3A-4E14-BD9F-4FEF4115E99B + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/icon-text-cancel.svg b/src/skins/vector/img/icon-text-cancel.svg new file mode 100644 index 0000000000..ce28d128aa --- /dev/null +++ b/src/skins/vector/img/icon-text-cancel.svg @@ -0,0 +1,15 @@ + + + + 28D80248-63BA-4A5F-9216-4CFE72784BAC + Created with sketchtool. + + + + + + + + + + \ No newline at end of file From f6f68bc3481863f2f1fc97a64609e339d4582528 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 5 Sep 2016 17:28:23 +0100 Subject: [PATCH 26/48] 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 d309a7a67b246a440f86764032487d4c94c71011 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 5 Sep 2016 18:54:10 +0100 Subject: [PATCH 27/48] jenkins.sh: install olm from jenkins artifacts Use the latest version of olm, as provided by jenkins, rather than the most recent release. --- jenkins.sh | 3 +++ 1 file changed, 3 insertions(+) diff --git a/jenkins.sh b/jenkins.sh index 3a4ee0c704..258e358674 100755 --- a/jenkins.sh +++ b/jenkins.sh @@ -13,6 +13,9 @@ npm install # apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked. npm install matrix-react-sdk matrix-js-sdk +# install olm +npm install ./olm/olm-*.tgz + # we may be using a dev branch of react-sdk, in which case we need to build it (cd node_modules/matrix-react-sdk && npm run build) From 6153e795bf6eccc1110f2dc6d4be0ad0b7abb5b9 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 11:33:56 +0100 Subject: [PATCH 28/48] 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 835d13c696b4a13756c783c55d258a9d3f100e3e Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 6 Sep 2016 13:24:06 +0100 Subject: [PATCH 29/48] Another go at using latest Olm The previous attempt failed due to npm shenanigans. Let's have another go, without the "help" of npm. --- jenkins.sh | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/jenkins.sh b/jenkins.sh index 258e358674..2bccf0f88c 100755 --- a/jenkins.sh +++ b/jenkins.sh @@ -13,8 +13,11 @@ npm install # apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked. npm install matrix-react-sdk matrix-js-sdk -# install olm -npm install ./olm/olm-*.tgz +# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url +# from our package.json (or even matrix-js-sdk's) in preference. +tar -C olm -xz < olm/olm-*.tgz +rm -r node_modules/olm +cp -r olm/package node_modules/olm # we may be using a dev branch of react-sdk, in which case we need to build it (cd node_modules/matrix-react-sdk && npm run build) From a41a8d32b8e7f399b4db284d5c1414982f3b63d0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 6 Sep 2016 15:24:37 +0100 Subject: [PATCH 30/48] 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 31/48] 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 32/48] 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 33/48] 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 34/48] 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 31dd49ffd77eb68172fec2ff8a16c0e10dd89d5c Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 6 Sep 2016 22:33:21 +0100 Subject: [PATCH 35/48] Bump to olm 1.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc87daf5a6..c52e26d0a0 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,6 @@ "webpack": "^1.12.14" }, "optionalDependencies": { - "olm": "https://matrix.org/packages/npm/olm/olm-1.1.0.tgz" + "olm": "https://matrix.org/packages/npm/olm/olm-1.2.0.tgz" } } From 48501d91d21a3b19724f77763fa80c35615a370c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 7 Sep 2016 10:55:31 +0100 Subject: [PATCH 36/48] 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 37/48] 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 38/48] 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 39/48] 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 40/48] 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 a1f8116e3bd5ac0bf916bf61e913f0adadbe7353 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 7 Sep 2016 17:47:47 +0100 Subject: [PATCH 41/48] Support toggling DM status of rooms on context menu --- .../views/context_menus/RoomTagContextMenu.js | 60 +++++++++++-- src/skins/vector/img/icon_context_person.svg | 85 +++++++++++++++++++ .../vector/img/icon_context_person_on.svg | 85 +++++++++++++++++++ src/skins/vector/img/icons-people.svg | 9 -- 4 files changed, 225 insertions(+), 14 deletions(-) create mode 100644 src/skins/vector/img/icon_context_person.svg create mode 100644 src/skins/vector/img/icon_context_person_on.svg delete mode 100644 src/skins/vector/img/icons-people.svg diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index 3637a3a5ee..f0dc5f0784 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -21,6 +21,8 @@ var React = require('react'); var classNames = require('classnames'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var dis = require('matrix-react-sdk/lib/dispatcher'); +var DMRoomMap = require('matrix-react-sdk/lib/utils/DMRoomMap'); +var Rooms = require('matrix-react-sdk/lib/Rooms'); module.exports = React.createClass({ displayName: 'RoomTagContextMenu', @@ -32,9 +34,11 @@ module.exports = React.createClass({ }, getInitialState: function() { + const dmRoomMap = new DMRoomMap(MatrixClientPeg.get()); return { isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"), isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"), + isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)), }; }, @@ -113,6 +117,41 @@ module.exports = React.createClass({ } }, + _onClickDM: function() { + const newIsDirectMessage = !this.state.isDirectMessage; + this.setState({ + isDirectMessage: newIsDirectMessage, + }); + + if (MatrixClientPeg.get().isGuest()) return; + + let newTarget; + if (newIsDirectMessage) { + const guessedTarget = Rooms.guessDMRoomTarget( + this.props.room, + this.props.room.getMember(MatrixClientPeg.get().credentials.userId), + ); + newTarget = guessedTarget.userId; + } else { + newTarget = null; + } + + q.delay(500).done(() => { + return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => { + // Close the context menu + if (this.props.onFinished) { + this.props.onFinished(); + }; + }, (err) => { + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + Modal.createDialog(ErrorDialog, { + title: "Failed to set Direct Message status of room", + description: err.toString() + }); + }); + }); + }, + _onClickLeave: function() { // Leave room dis.dispatch({ @@ -146,27 +185,33 @@ module.exports = React.createClass({ }, render: function() { - var myUserId = MatrixClientPeg.get().credentials.userId; - var myMember = this.props.room.getMember(myUserId); + const myUserId = MatrixClientPeg.get().credentials.userId; + const myMember = this.props.room.getMember(myUserId); - var favouriteClasses = classNames({ + const favouriteClasses = classNames({ 'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite, 'mx_RoomTagContextMenu_fieldDisabled': false, }); - var lowPriorityClasses = classNames({ + const lowPriorityClasses = classNames({ 'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority, 'mx_RoomTagContextMenu_fieldDisabled': false, }); - var leaveClasses = classNames({ + const leaveClasses = classNames({ 'mx_RoomTagContextMenu_field': true, 'mx_RoomTagContextMenu_fieldSet': false, 'mx_RoomTagContextMenu_fieldDisabled': false, }); + const dmClasses = classNames({ + 'mx_RoomTagContextMenu_field': true, + 'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage, + 'mx_RoomTagContextMenu_fieldDisabled': false, + }); + if (myMember && myMember.membership === "leave") { return (
@@ -190,6 +235,11 @@ module.exports = React.createClass({ Low Priority
+
+ + + Direct Message +
diff --git a/src/skins/vector/img/icon_context_person.svg b/src/skins/vector/img/icon_context_person.svg new file mode 100644 index 0000000000..fff019d377 --- /dev/null +++ b/src/skins/vector/img/icon_context_person.svg @@ -0,0 +1,85 @@ + + + + + + image/svg+xml + + 81230A28-D944-4572-B5DB-C03CAA2B1FCA + + + + + + 81230A28-D944-4572-B5DB-C03CAA2B1FCA + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icon_context_person_on.svg b/src/skins/vector/img/icon_context_person_on.svg new file mode 100644 index 0000000000..362944332d --- /dev/null +++ b/src/skins/vector/img/icon_context_person_on.svg @@ -0,0 +1,85 @@ + + + + + + image/svg+xml + + 81230A28-D944-4572-B5DB-C03CAA2B1FCA + + + + + + 81230A28-D944-4572-B5DB-C03CAA2B1FCA + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg deleted file mode 100644 index d6867a3f3a..0000000000 --- a/src/skins/vector/img/icons-people.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - From 22bf6e7969a6897712e1c1230b144c8a27f1b6d5 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Wed, 7 Sep 2016 22:52:37 +0530 Subject: [PATCH 42/48] RTE format bar enhancements --- .../views/elements/RichText.css | 13 ++++++++++ .../views/rooms/MessageComposer.css | 23 ++++++++++++++--- src/skins/vector/img/button-text-code-o-n.svg | 25 +++++++++++++++++++ src/skins/vector/img/button-text-code.svg | 25 +++++++++++++++++++ .../vector/img/button-text-underline-o-n.svg | 18 +++++++++++++ .../vector/img/button-text-underline.svg | 18 +++++++++++++ 6 files changed, 118 insertions(+), 4 deletions(-) create mode 100644 src/skins/vector/img/button-text-code-o-n.svg create mode 100644 src/skins/vector/img/button-text-code.svg create mode 100644 src/skins/vector/img/button-text-underline-o-n.svg create mode 100644 src/skins/vector/img/button-text-underline.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css index 171482a362..3d8d8f3bbd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css @@ -20,3 +20,16 @@ .mx_Markdown_ITALIC { font-style: italic; } + +.mx_Markdown_CODE { + padding: .2em 0; + margin: 0; + font-size: 85%; + background-color: rgba(0,0,0,.04); + border-radius: 3px; +} + +.mx_Markdown_HR { + color: rgba(0, 0, 0, 0.5); + text-decoration: #e7e7e7 double line-through; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index b1cd3ce0e6..45bc39cf3b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -60,6 +60,7 @@ limitations under the License. display: flex; flex-direction: column; min-height: 60px; + justify-content: center; align-items: flex-start; font-size: 14px; margin-right: 6px; @@ -138,19 +139,26 @@ limitations under the License. margin: 0 11px; } -.mx_MessageComposer_formatbar { - display: flex; - - height: 30px; +.mx_MessageComposer_formatbar_wrapper { width: 100%; background-color: #f7f7f7; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); +} + +.mx_MessageComposer_formatbar { + margin: auto; + max-width: 960px; + display: flex; + + height: 30px; box-sizing: border-box; padding-left: 62px; flex-direction: row; align-items: center; + font-size: 10px; + color: #888; } .mx_MessageComposer_formatbar * { @@ -163,6 +171,11 @@ limitations under the License. cursor: pointer; } +.mx_MessageComposer_format_button_disabled { + cursor: not-allowed; + opacity: 0.5; +} + .mx_MessageComposer_formatbar_cancel { margin-right: 22px; } @@ -172,6 +185,8 @@ limitations under the License. } .mx_MessageComposer_input_markdownIndicator { + cursor: pointer; + height: 10px; padding: 4px 4px 4px 0; opacity: 0.8; } diff --git a/src/skins/vector/img/button-text-code-o-n.svg b/src/skins/vector/img/button-text-code-o-n.svg new file mode 100644 index 0000000000..8d1439c97b --- /dev/null +++ b/src/skins/vector/img/button-text-code-o-n.svg @@ -0,0 +1,25 @@ + + + + B76754AB-42E6-48D2-9443-80CBC0DE02ED + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-code.svg b/src/skins/vector/img/button-text-code.svg new file mode 100644 index 0000000000..24026cb709 --- /dev/null +++ b/src/skins/vector/img/button-text-code.svg @@ -0,0 +1,25 @@ + + + + 4CAFF494-61AE-4916-AFE8-D1E62F7CF0DE + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-underline-o-n.svg b/src/skins/vector/img/button-text-underline-o-n.svg new file mode 100644 index 0000000000..870be3ce6a --- /dev/null +++ b/src/skins/vector/img/button-text-underline-o-n.svg @@ -0,0 +1,18 @@ + + + + FD84FF7C-43E4-4312-90AB-5A59AD018377 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-underline.svg b/src/skins/vector/img/button-text-underline.svg new file mode 100644 index 0000000000..26f448539c --- /dev/null +++ b/src/skins/vector/img/button-text-underline.svg @@ -0,0 +1,18 @@ + + + + 13E7EE68-9B16-4A3D-8F9F-31E4BAB7E438 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file From d833c7632d9677a6e093a3dde1041152202254a2 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Thu, 8 Sep 2016 02:47:31 +0530 Subject: [PATCH 43/48] Add strikethrough and
styles --- .../css/matrix-react-sdk/views/elements/RichText.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css index 3d8d8f3bbd..f0b3c04645 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css @@ -30,6 +30,10 @@ } .mx_Markdown_HR { - color: rgba(0, 0, 0, 0.5); - text-decoration: #e7e7e7 double line-through; + display: block; + background: #e7e7e7; +} + +.mx_Markdown_STRIKETHROUGH { + text-decoration: line-through; } From 74aef1fdadac41a1e1d65f39f5d40be1f499ba96 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 8 Sep 2016 13:58:53 +0100 Subject: [PATCH 44/48] Comment delay --- src/components/views/context_menus/RoomTagContextMenu.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/context_menus/RoomTagContextMenu.js b/src/components/views/context_menus/RoomTagContextMenu.js index f0dc5f0784..43fd7a553a 100644 --- a/src/components/views/context_menus/RoomTagContextMenu.js +++ b/src/components/views/context_menus/RoomTagContextMenu.js @@ -136,6 +136,8 @@ module.exports = React.createClass({ newTarget = null; } + // give some time for the user to see the icon change first, since + // this will hide the context menu once it completes q.delay(500).done(() => { return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => { // Close the context menu From 38ac520e1ed89b29d56ccea4cbb604eb5c73b3ce Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 8 Sep 2016 17:19:59 +0100 Subject: [PATCH 45/48] 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 46/48] 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 47/48] 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 bf02a21c7d097c19fef403bd44ede10013a6ec6d Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 9 Sep 2016 10:30:17 +0100 Subject: [PATCH 48/48] Re-add icons-people (I accidentally deleted it) --- src/skins/vector/img/icons-people.svg | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/skins/vector/img/icons-people.svg diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg new file mode 100644 index 0000000000..d6867a3f3a --- /dev/null +++ b/src/skins/vector/img/icons-people.svg @@ -0,0 +1,9 @@ + + + + + + + + +