From e5835d27310d228bbf365a5fd7acca829e6a14c9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 May 2016 15:01:36 +0100 Subject: [PATCH 01/78] typo --- src/components/structures/RoomDirectory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index d780823099..63b313d793 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -21,7 +21,7 @@ var React = require('react'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var ContentRepo = require("matrix-js-sdk").ContentRepo; var Modal = require('matrix-react-sdk/lib/Modal'); -var sdk = require('matrix-react-sdk') +var sdk = require('matrix-react-sdk'); var dis = require('matrix-react-sdk/lib/dispatcher'); var GeminiScrollbar = require('react-gemini-scrollbar'); From ac24d6707faf5096ad549a9762861b9f9a973f55 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 May 2016 15:02:03 +0100 Subject: [PATCH 02/78] Add integs mgt --- src/component-index.js | 1 + .../views/settings/IntegrationsManager.js | 56 +++++++++++++++++++ .../views/settings/IntegrationsManager.css | 20 +++++++ 3 files changed, 77 insertions(+) create mode 100644 src/components/views/settings/IntegrationsManager.js create mode 100644 src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css diff --git a/src/component-index.js b/src/component-index.js index b3baf22aed..d7d9c97088 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -51,4 +51,5 @@ module.exports.components['views.rooms.RoomDNDView'] = require('./components/vie module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar'); +module.exports.components['views.settings.IntegrationsManager'] = require('./components/views/settings/IntegrationsManager'); module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications'); diff --git a/src/components/views/settings/IntegrationsManager.js b/src/components/views/settings/IntegrationsManager.js new file mode 100644 index 0000000000..0dffde4b29 --- /dev/null +++ b/src/components/views/settings/IntegrationsManager.js @@ -0,0 +1,56 @@ +/* +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'); +var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); + +module.exports = React.createClass({ + displayName: 'IntegrationsManager', + + propTypes: { + src: React.PropTypes.string.isRequired, // the source of the integration manager being embedded + onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed + }, + + // XXX: keyboard shortcuts for managing dialogs should be done by the modal + // dialog base class somehow, surely... + componentDidMount: function() { + document.addEventListener("keydown", this.onKeyDown); + }, + + componentWillUnmount: function() { + document.removeEventListener("keydown", this.onKeyDown); + }, + + onKeyDown: function(ev) { + if (ev.keyCode == 27) { // escape + ev.stopPropagation(); + ev.preventDefault(); + this.props.onFinished(); + } + }, + + render: function() { + return ( +
+ ; +
+ ); + } +}); diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css new file mode 100644 index 0000000000..265231adcb --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css @@ -0,0 +1,20 @@ +/* +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_IntegrationsManager { + width: 640px; + height: 600px; +} From c4d408d095a65f418fb8f616a2db0214d61d2c8e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 May 2016 17:02:39 +0100 Subject: [PATCH 03/78] CSS for IntegrationsManager --- .../views/settings/IntegrationsManager.js | 4 ++-- .../views/settings/IntegrationsManager.css | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/views/settings/IntegrationsManager.js b/src/components/views/settings/IntegrationsManager.js index 0dffde4b29..8db010a2b0 100644 --- a/src/components/views/settings/IntegrationsManager.js +++ b/src/components/views/settings/IntegrationsManager.js @@ -48,8 +48,8 @@ module.exports = React.createClass({ render: function() { return ( -
- ; +
+
); } diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css index 265231adcb..0fa40fe1ef 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css +++ b/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css @@ -15,6 +15,19 @@ limitations under the License. */ .mx_IntegrationsManager { - width: 640px; - height: 600px; + display: -webkit-flex; + display: flex; + width: 100%; + height: 100%; + -webkit-align-items: center; + align-items: center; + justify-content: center; + -webkit-justify-content: center; +} + +.mx_IntegrationsManager iframe { + background-color: #fff; + border: 0px; + width: 720px; + height: 512px; } From a288c5b85d4776d9c7255591d0d2b97a8e39ba42 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 May 2016 12:21:45 +0100 Subject: [PATCH 04/78] fix padding of badges --- 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 45a997c33a..a8eead8669 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 @@ -103,7 +103,7 @@ limitations under the License. N.B. this has to come after the above _selected width tweaks */ .mx_RoomTile_unreadNotify .mx_RoomTile_name, .mx_RoomTile_highlight .mx_RoomTile_name { - padding-right: 36px; + padding-right: 40px; } .mx_RoomTile_selected .mx_RoomTile_name span { From ef4f2f10d94e175873fa951c7a5ef78906620b83 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 13:56:59 +0100 Subject: [PATCH 05/78] Updated that RightPanel members icon, highlight and numbers --- src/components/structures/RightPanel.js | 2 +- .../css/vector-web/structures/RightPanel.css | 25 ++++++----------- src/skins/vector/img/icons-people.svg | 26 ++++++++++++++++++ src/skins/vector/img/members.png | Bin 729 -> 0 bytes src/skins/vector/img/members.svg | 14 ---------- 5 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 src/skins/vector/img/icons-people.svg delete mode 100644 src/skins/vector/img/members.png delete mode 100644 src/skins/vector/img/members.svg diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 431bdba5fa..ca9376e1b4 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -136,8 +136,8 @@ module.exports = React.createClass({ buttonGroup =
- { membersBadge } + { membersHighlight }
diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7257d8b4a0..f6b300b208 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -43,7 +43,7 @@ limitations under the License. /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 25px; + margin-top: 10px; float: left; background-color: #fff; margin-left: -4px; @@ -55,34 +55,27 @@ limitations under the License. vertical-align: middle; padding-left: 15px; padding-right: 15px; + text-align: center; position: relative; } .mx_RightPanel_headerButton object { pointer-events: none; + padding-bottom: 2px; } .mx_RightPanel_headerButton_highlight { - position: absolute; - bottom: -2px; - left: 10px; width: 25px; - height: 4px; - background-color: #76cfa6; + height: 5px; + border-radius: 5px; + background-color: rgba(118, 207, 166, 0.2); } .mx_RightPanel_headerButton_badge { - position: absolute; - top: 4px; - left: 28px; - font-size: 12px; - background-color: #76cfa6; - color: #fff; + font-size: 11px; + color: #76cfa6; font-weight: bold; - border-radius: 20px; - padding-left: 4px; - padding-right: 4px; - padding-top: 0px; + padding-bottom: 2px; } .mx_RightPanel .mx_MemberList, diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg new file mode 100644 index 0000000000..d9af3c38d2 --- /dev/null +++ b/src/skins/vector/img/icons-people.svg @@ -0,0 +1,26 @@ + + + + 00B600B3-7C80-417D-9C3F-89072AE3B227 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/members.png b/src/skins/vector/img/members.png deleted file mode 100644 index b5e5875768c3969bba84f38429b68480181e612c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 729 zcmV;~0w(>5P)Px%lSxEDR5%fpR9{F_VH7{--n%UkGJ+t2B1NCpgPJq2q96&QEPAlAnFT#W59J>= zi6GcxxSaG9iEOo;QDQ+tJtXZVtxel}$cLz;;Y;))VawUwy{B`R_xgDiv;*V&-QVwb ze(-(Y*@s}O!|{MpTToF3H%x9tR z-a+pi>*$+^x+Pf&5l|vn?Y$-T*fDmcVx#_vf&F%2=^Op&Sj3l#owMtbN%+zO%{o#l z=xG@5NR$9sIVy^FY@7v3RHx;>Pl=ipl3)B0=KF4L ze;3&;8bs_Vski}zPkQS*7ew9)F$9GCRp%zxGyjK24Wg-IJXF+`9_(eV=G&L&K~XdC zieWQ|YpL)y7r1&@Fb;2)e_PmA%+CA4s`LGZ$6l*KL_^zTbeAiq&UKH@W+4zT#(&LP z5#moqwxi; z_R=&T=8pDwgs-1ZsU!J-=K(+U)m%~6YZi6B@0Uu6voMsBLs1$C^jD%`BN#P(gva27 z;pOe%5p_|0vyn#86Rf$A<~OL);P^=#90N2SV;=4QErJC#_q*{g@pIUd=K|NK00000 LNkvXXu0mjf?c-bK diff --git a/src/skins/vector/img/members.svg b/src/skins/vector/img/members.svg deleted file mode 100644 index 0f115966ab..0000000000 --- a/src/skins/vector/img/members.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - icons_people - Created with bin/sketchtool. - - - - - - - - - \ No newline at end of file From 959dcd0c49a772d2a3921de55c3279a39957e0a5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 14:10:44 +0100 Subject: [PATCH 06/78] Updated BottomLeftMenu buttons to the new ones --- src/components/structures/BottomLeftMenu.js | 6 ++-- src/skins/vector/img/icons-create-room.svg | 24 +++++++--------- src/skins/vector/img/icons-directory.svg | 32 ++++++++++----------- src/skins/vector/img/icons-settings.svg | 20 ++++++------- 4 files changed, 39 insertions(+), 43 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index ae49a34706..d36966d297 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -52,13 +52,13 @@ module.exports = React.createClass({
- +
- +
- +
diff --git a/src/skins/vector/img/icons-create-room.svg b/src/skins/vector/img/icons-create-room.svg index 6ed94b4b29..252bd2df3b 100644 --- a/src/skins/vector/img/icons-create-room.svg +++ b/src/skins/vector/img/icons-create-room.svg @@ -1,20 +1,18 @@ - - - icons_create_room + + + 0F9BCC43-B3A7-4C9F-8E34-1F38194362C2 Created with sketchtool. - - - - - - - - - + + + + + + + - \ No newline at end of file + diff --git a/src/skins/vector/img/icons-directory.svg b/src/skins/vector/img/icons-directory.svg index 00869b9b3d..1f1cc29a82 100644 --- a/src/skins/vector/img/icons-directory.svg +++ b/src/skins/vector/img/icons-directory.svg @@ -1,21 +1,21 @@ - - - icons_directory + + + E34C64ED-EBD7-49B6-BDD9-CB729162705A Created with sketchtool. - - - - - - - - - - - - + + + + + + + + + + + + - \ No newline at end of file + diff --git a/src/skins/vector/img/icons-settings.svg b/src/skins/vector/img/icons-settings.svg index 6096953055..3ca2b655f4 100644 --- a/src/skins/vector/img/icons-settings.svg +++ b/src/skins/vector/img/icons-settings.svg @@ -1,17 +1,15 @@ - - - icons_settings + + + 4D42A2A7-7430-4D4F-A0A2-E19278CF66E3 Created with sketchtool. - - - - - - - + + + + + - \ No newline at end of file + From 1fbc249de540bf216ab2bc0be6b8c1884181d6e5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 14:23:46 +0100 Subject: [PATCH 07/78] Updated Filter room icon --- src/components/structures/SearchBox.js | 2 +- src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 5e5a19e65e..7fc5100049 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -94,7 +94,7 @@ module.exports = React.createClass({ , Date: Wed, 13 Jul 2016 14:34:20 +0100 Subject: [PATCH 08/78] Tweak to the close button css to keep the close button inline with the search box --- src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 555a8f5799..96f192c4d0 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -34,6 +34,7 @@ limitations under the License. .mx_SearchBox_closeButton { cursor: pointer; + margin-top: -5px; } .mx_SearchBox_search { From 0a4af647c8593c3f5b5865db1ec24de046bc892d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 13 Jul 2016 17:46:07 +0100 Subject: [PATCH 09/78] Header and footer buttons updated to new versions --- .../views/rooms/RoomHeader.css | 2 +- src/skins/vector/img/icons-search-copy.svg | 22 +++++++++++++++ src/skins/vector/img/icons-settings-room.svg | 15 ++++++++++ src/skins/vector/img/icons-upload.svg | 28 +++++++++++++++++++ 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/img/icons-search-copy.svg create mode 100644 src/skins/vector/img/icons-settings-room.svg create mode 100644 src/skins/vector/img/icons-upload.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index c0e919b88f..2c132640c4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -164,7 +164,7 @@ limitations under the License. .mx_RoomHeader_settingsButton { display: inline-block; position: relative; - bottom: 10px; + bottom: -1px; left: 4px; } diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg new file mode 100644 index 0000000000..54b6f8e503 --- /dev/null +++ b/src/skins/vector/img/icons-search-copy.svg @@ -0,0 +1,22 @@ + + + + 1C068C28-66A7-48CD-BAA3-6E96EAC39CEF + Created with sketchtool. + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/icons-settings-room.svg b/src/skins/vector/img/icons-settings-room.svg new file mode 100644 index 0000000000..117d134c95 --- /dev/null +++ b/src/skins/vector/img/icons-settings-room.svg @@ -0,0 +1,15 @@ + + + + 69011392-CE9D-4404-A85C-A8548C5D850B + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg new file mode 100644 index 0000000000..d003934980 --- /dev/null +++ b/src/skins/vector/img/icons-upload.svg @@ -0,0 +1,28 @@ + + + + 2082AA27-EC81-4C61-8CD9-75C54E9D8FE2 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + From 1f43f904d58b3c1f113a2c311f7eaed989ef5819 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 11:33:07 +0100 Subject: [PATCH 10/78] Search icon updated in header, and all icons spacing and positioning teaked --- .../views/rooms/RoomHeader.css | 15 ++++++------- src/skins/vector/img/icons-search.svg | 21 +++++++++++++++++++ 2 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 src/skins/vector/img/icons-search.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 2c132640c4..5bd5d1868f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -164,8 +164,7 @@ limitations under the License. .mx_RoomHeader_settingsButton { display: inline-block; position: relative; - bottom: -1px; - left: 4px; + left: 8px; } .mx_RoomHeader_settingsButton object { @@ -183,10 +182,6 @@ limitations under the License. color: #76cfa6; } -.mx_RoomHeader_leaveButton { - margin-top: -1px; -} - .mx_RoomHeader_placeholder { color: #a2a2a2 ! important; } @@ -244,9 +239,11 @@ limitations under the License. .mx_RoomHeader_button { display: table-cell; - vertical-align: top; - padding-left: 8px; - padding-right: 8px; + vertical-align: middle; + /* padding-left: 8px; */ + /* padding-right: 8px; */ + width: 35px; + text-align: center; cursor: pointer; } diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg new file mode 100644 index 0000000000..2612bc05bc --- /dev/null +++ b/src/skins/vector/img/icons-search.svg @@ -0,0 +1,21 @@ + + + + C47A699C-B829-4BF8-AA39-721EFDB3AA24 + Created with sketchtool. + + + + + + + + + + + + + + + + From 09e861637f4115b23fd37b38dd930e3a0ba2f9b0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 12:04:31 +0100 Subject: [PATCH 11/78] Simplification of the css --- .../matrix-react-sdk/views/rooms/RoomHeader.css | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 5bd5d1868f..8245687751 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -103,7 +103,8 @@ limitations under the License. .mx_RoomHeader_rightRow { margin-top: 4px; background-color: #fff; - + display: flex; + align-items: center; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; @@ -161,12 +162,6 @@ limitations under the License. opacity: 0.6; } -.mx_RoomHeader_settingsButton { - display: inline-block; - position: relative; - left: 8px; -} - .mx_RoomHeader_settingsButton object { pointer-events: none; } @@ -238,12 +233,7 @@ limitations under the License. } .mx_RoomHeader_button { - display: table-cell; - vertical-align: middle; - /* padding-left: 8px; */ - /* padding-right: 8px; */ - width: 35px; - text-align: center; + margin-left: 8px; cursor: pointer; } From b87b35672239fbf59c844ef7358b5929f42d3d18 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 19 Jul 2016 11:43:15 +0100 Subject: [PATCH 12/78] Added fixed SCG assets --- src/skins/vector/img/icons-people.svg | 33 +++++--------------- src/skins/vector/img/icons-search-copy.svg | 28 +++++------------ src/skins/vector/img/icons-search.svg | 28 +++++------------ src/skins/vector/img/icons-upload.svg | 36 ++++++---------------- 4 files changed, 34 insertions(+), 91 deletions(-) diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg index d9af3c38d2..4a8214ca63 100644 --- a/src/skins/vector/img/icons-people.svg +++ b/src/skins/vector/img/icons-people.svg @@ -1,26 +1,9 @@ - - - - 00B600B3-7C80-417D-9C3F-89072AE3B227 - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg index 54b6f8e503..38280d23b6 100644 --- a/src/skins/vector/img/icons-search-copy.svg +++ b/src/skins/vector/img/icons-search-copy.svg @@ -1,22 +1,10 @@ - - - - 1C068C28-66A7-48CD-BAA3-6E96EAC39CEF - Created with sketchtool. - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 2612bc05bc..0e680d3183 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -1,21 +1,9 @@ - - - - C47A699C-B829-4BF8-AA39-721EFDB3AA24 - Created with sketchtool. - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index d003934980..bbbdbeb9df 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -1,28 +1,12 @@ - - - - 2082AA27-EC81-4C61-8CD9-75C54E9D8FE2 - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + From e9db975d7de0a2f6ea39b64f3e65d37800c63aa8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 10:25:42 +0100 Subject: [PATCH 13/78] Redone assets, with lighter weight to match design --- src/skins/vector/img/icons-people.svg | 4 ++-- src/skins/vector/img/icons-search-copy.svg | 4 ++-- src/skins/vector/img/icons-search.svg | 2 +- src/skins/vector/img/icons-upload.svg | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg index 4a8214ca63..d6867a3f3a 100644 --- a/src/skins/vector/img/icons-people.svg +++ b/src/skins/vector/img/icons-people.svg @@ -3,7 +3,7 @@ - - + + diff --git a/src/skins/vector/img/icons-search-copy.svg b/src/skins/vector/img/icons-search-copy.svg index 38280d23b6..b026718b84 100644 --- a/src/skins/vector/img/icons-search-copy.svg +++ b/src/skins/vector/img/icons-search-copy.svg @@ -3,8 +3,8 @@ - - + + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 0e680d3183..4f5002ab79 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -3,7 +3,7 @@ - + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index bbbdbeb9df..9074fcf9fa 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -4,8 +4,8 @@ - - + + From ad74d264a3e59601a3c3b205cb2c64a7018e78a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 11:37:40 +0100 Subject: [PATCH 14/78] Selected room highlight teaked to better fit previous design --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 770a3a625f..66e1178139 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 @@ -27,6 +27,7 @@ limitations under the License. padding-top: 6px; padding-bottom: 6px; padding-left: 18px; + padding-right: 6px; width: 24px; height: 24px; vertical-align: middle; @@ -38,8 +39,10 @@ limitations under the License. vertical-align: middle; overflow: hidden; word-break: break-word; - padding-left: 11px; + padding-left: 5px; padding-right: 15px; + padding-top: 4px; + padding-bottom: 4px; color: rgba(69, 69, 69, 0.8); } @@ -128,14 +131,7 @@ style are the same, this style needs to be AFTER it to take effect when matched font-weight: bold; } -.mx_RoomTile_selected .mx_RoomTile_name span { - display: inline-block; - position: relative; - width: 100%; - padding: 4px; - margin-top: -4px; - margin-bottom: -4px; - border-radius: 2px; +.mx_RoomTile_selected .mx_RoomTile_name { background-color: rgba(118,207,166,0.2); } From 73bb3179253771508c5db6845652c9f3fef0a943 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 12:19:11 +0100 Subject: [PATCH 15/78] Slight tweak to the name padding so there is a little less space above and below the name --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 66e1178139..5eb9026870 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 @@ -41,8 +41,8 @@ limitations under the License. word-break: break-word; padding-left: 5px; padding-right: 15px; - padding-top: 4px; - padding-bottom: 4px; + padding-top: 2px; + padding-bottom: 2px; color: rgba(69, 69, 69, 0.8); } From df163d8cb7f06cdf4214a44343446d5fbd82ff45 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 14:33:27 +0100 Subject: [PATCH 16/78] Clean up of the CSS, and refactor to better match current code --- .../matrix-react-sdk/views/rooms/RoomTile.css | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 5eb9026870..d2437c4ef2 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 @@ -56,14 +56,14 @@ limitations under the License. */ } -.collapsed .mx_RoomTile_name { - display: none; -} - .collapsed .mx_RoomTile { height: 36px; } +.collapsed .mx_RoomTile_name { + display: none; +} + .collapsed .mx_RoomTile_badge { top: -40px; left: 30px; @@ -74,6 +74,11 @@ limitations under the License. z-index: 200; } +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after { + display: none; +} + /* This is the bottom of the speech bubble */ .mx_RoomTile_highlight .mx_RoomTile_badge:after { content: ""; @@ -86,12 +91,6 @@ limitations under the License. border-right: 10px solid transparent; } -/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after" -style are the same, this style needs to be AFTER it to take effect when matched */ -.collapsed .mx_RoomTile_badge:after { - display: none; -} - .mx_RoomTile_badge { display: inline-block; min-width: 14px; @@ -109,7 +108,7 @@ style are the same, this style needs to be AFTER it to take effect when matched padding-right: 4px; } -.mx_RoomTile_badge:hover { +.mx_RoomTile .mx_RoomTile_badge:hover { letter-spacing: 0.1em; opacity: 1; } @@ -122,7 +121,7 @@ style are the same, this style needs to be AFTER it to take effect when matched background-color: #ff0064; } -.mx_RoomTile_badge_no_unread { +.mx_RoomTile_read .mx_RoomTile_badge { background-color: rgb(214, 214, 214); opacity: 0; } From 633a3f48675ce4cdf439c9e9e957f9aa9414241f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 17:44:05 +0100 Subject: [PATCH 17/78] New component for testing --- src/component-index.js | 1 + src/components/views/elements/Label.js | 39 ++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/components/views/elements/Label.js diff --git a/src/component-index.js b/src/component-index.js index b3baf22aed..fc4a72c7fc 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -35,6 +35,7 @@ module.exports.components['structures.RoomSubList'] = require('./components/stru module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); +module.exports.components['views.elements.Label'] = require('./components/views/elements/Label'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar'); module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar'); diff --git a/src/components/views/elements/Label.js b/src/components/views/elements/Label.js new file mode 100644 index 0000000000..2bfbebc3f9 --- /dev/null +++ b/src/components/views/elements/Label.js @@ -0,0 +1,39 @@ +/* +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'); + +module.exports = React.createClass({ + displayName: 'Label', + + propTypes: { + label: React.PropTypes.string, + }, + + getInitialState: function() { + return({ label : "LABEL" }); + }, + + render: function() { + return ( +
+ { this.props.label } +
+ ); + } +}); From e988f5ca3ba9452dde55c05a1c5ba4eb9a63c533 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 17:54:33 +0100 Subject: [PATCH 18/78] Badge visual tweaks --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index d2437c4ef2..1b5c02b961 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 @@ -94,16 +94,16 @@ limitations under the License. .mx_RoomTile_badge { display: inline-block; min-width: 14px; - height: 18px; + height: 17px; position: relative; left: 8px; top: 2px; - border-radius: 18px; + border-radius: 14px; color: #fff; - font-weight: bold; + font-weight: 600; font-size: 11px; text-align: center; - padding-top: 2px; + padding-top: 1px; padding-left: 4px; padding-right: 4px; } From 24e021b91f0474ac8d9ee8ca76891e6e78ece37a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 21 Jul 2016 18:19:52 +0100 Subject: [PATCH 19/78] Badge dohickey shown on name hover and badge hover --- 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 1b5c02b961..221d707ce4 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 @@ -108,7 +108,7 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge:hover { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton { letter-spacing: 0.1em; opacity: 1; } From 7eff6d968e6ebdfff2ea6619ce2ecc9a835c2ef3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 11:16:04 +0100 Subject: [PATCH 20/78] Tweak to z-index as the tooltip was occasionally getting occluded. --- .../css/vector-web/views/rooms/RoomTooltip.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 3aec0fa7f6..f1ec610eaa 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -14,19 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_RoomTooltip_chevron { + position: absolute; + left: -9px; + top: 7px; +} + .mx_RoomTooltip { display: none; position: fixed; border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; - z-index: 1000; + z-index: 2000; left: 64px; padding: 6px; } - -.mx_RoomTooltip_chevron { - position: absolute; - left: -9px; - top: 8px; -} From ce5311191fde6d5fc9df3b824cc8c3714a54a855 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 11:30:41 +0100 Subject: [PATCH 21/78] Tweaked tooltip z-index --- .../css/vector-web/views/rooms/RoomTooltip.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 3aec0fa7f6..f1ec610eaa 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -14,19 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_RoomTooltip_chevron { + position: absolute; + left: -9px; + top: 7px; +} + .mx_RoomTooltip { display: none; position: fixed; border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; - z-index: 1000; + z-index: 2000; left: 64px; padding: 6px; } - -.mx_RoomTooltip_chevron { - position: absolute; - left: -9px; - top: 8px; -} From 72b4a86eedffc6b9551fc2e88c1036858930554b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 14:59:02 +0100 Subject: [PATCH 22/78] Tweaked the tooltip to be better aligned. Also added the fading of the room name if too long --- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 15 ++++++++++++++- .../css/vector-web/structures/LeftPanel.css | 1 + .../css/vector-web/views/rooms/RoomTooltip.css | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 221d707ce4..fb28b559b5 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 @@ -35,10 +35,12 @@ limitations under the License. .mx_RoomTile_name { display: inline-block; + position: relative; width: 100px; vertical-align: middle; overflow: hidden; - word-break: break-word; + /* word-break: break-word; */ + white-space: nowrap; padding-left: 5px; padding-right: 15px; padding-top: 2px; @@ -46,6 +48,17 @@ limitations under the License. color: rgba(69, 69, 69, 0.8); } +.mx_RoomTile_name:before { + content:''; + width:100px; + height:22px; + top: 0px; + left: 0px; + position:absolute; + padding-left: 20px; + background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%); +} + .mx_RoomTile_ellipsis .mx_RoomTile_name { font-style: italic; color: #454545; diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index ea12c953fe..0ea76c928a 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -63,6 +63,7 @@ limitations under the License. margin-right: 18px; -webkit-flex: 0 0 60px; flex: 0 0 60px; + z-index: 1; } .mx_LeftPanel .mx_BottomLeftMenu_options { 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 f1ec610eaa..deb8cd3f96 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -27,6 +27,6 @@ limitations under the License. border-radius: 8px; background-color: #fff; z-index: 2000; - left: 64px; + left: 52px; padding: 6px; } From 204e42494a6af2745b5178f98d26ef0246048780 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 16:11:42 +0100 Subject: [PATCH 23/78] The default props doesn't seem to be working, hardcoded 'LABEL' for now. OnClick closes menu --- src/components/views/elements/Label.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/Label.js b/src/components/views/elements/Label.js index 2bfbebc3f9..2608dd4537 100644 --- a/src/components/views/elements/Label.js +++ b/src/components/views/elements/Label.js @@ -29,10 +29,16 @@ module.exports = React.createClass({ return({ label : "LABEL" }); }, + onLabelClick: function() { + if (this.props.onFinished) this.props.onFinished(); + }, + render: function() { return (
- { this.props.label } +
+ LABEL +
); } From 2768cd201038afbb6dd649f12ec64129cb0c68ea Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 22 Jul 2016 17:30:09 +0100 Subject: [PATCH 24/78] Initial unstyled mentions state notifier context menu --- src/component-index.js | 2 +- src/components/views/elements/Label.js | 45 -------- .../rooms/NotificationStateContextMenu.js | 107 ++++++++++++++++++ 3 files changed, 108 insertions(+), 46 deletions(-) delete mode 100644 src/components/views/elements/Label.js create mode 100644 src/components/views/rooms/NotificationStateContextMenu.js diff --git a/src/component-index.js b/src/component-index.js index fc4a72c7fc..029a0a8182 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -35,7 +35,6 @@ module.exports.components['structures.RoomSubList'] = require('./components/stru module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); -module.exports.components['views.elements.Label'] = require('./components/views/elements/Label'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar'); module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar'); @@ -48,6 +47,7 @@ module.exports.components['views.messages.MessageTimestamp'] = require('./compon module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile'); module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu'); +module.exports.components['views.rooms.NotificationStateContextMenu'] = require('./components/views/rooms/NotificationStateContextMenu'); 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/elements/Label.js b/src/components/views/elements/Label.js deleted file mode 100644 index 2608dd4537..0000000000 --- a/src/components/views/elements/Label.js +++ /dev/null @@ -1,45 +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'); - -module.exports = React.createClass({ - displayName: 'Label', - - propTypes: { - label: React.PropTypes.string, - }, - - getInitialState: function() { - return({ label : "LABEL" }); - }, - - onLabelClick: function() { - if (this.props.onFinished) this.props.onFinished(); - }, - - render: function() { - return ( -
-
- LABEL -
-
- ); - } -}); diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js new file mode 100644 index 0000000000..d485422d9a --- /dev/null +++ b/src/components/views/rooms/NotificationStateContextMenu.js @@ -0,0 +1,107 @@ +/* +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 q = require("q"); +var React = require('react'); +var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); + +module.exports = React.createClass({ + displayName: 'NotificationStateContextMenu', + + propTypes: { + room: React.PropTypes.object.isRequired, + /* callback called when the menu is dismissed */ + onFinished: React.PropTypes.func, + }, + + getInitialState: function() { + var areNotifsMuted = false; + var cli = MatrixClientPeg.get(); + if (!cli.isGuest()) { + var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId); + if (roomPushRule) { + if (0 <= roomPushRule.actions.indexOf("dont_notify")) { + areNotifsMuted = true; + } + } + } + + return { + areNotifsMuted: areNotifsMuted, + }; + }, + + onAllClick: function() { + if (this.props.onFinished) { + this.setState({areNotifsMuted: false}); + this._save(false); + this.props.onFinished(); + } + }, + + onMuteClick: function() { + if (this.props.onFinished) { + this.setState({areNotifsMuted: true}); + this._save(true); + this.props.onFinished(); + } + }, + + _save: function( isMuted ) { + const roomId = this.props.room.roomId; + /* + if (this.state.areNotifsMuted !== originalState.areNotifsMuted) { + promises.push(MatrixClientPeg.get().setRoomMutePushRule( + "global", roomId, this.state.areNotifsMuted + )); + } + */ + MatrixClientPeg.get().setRoomMutePushRule( + "global", roomId, isMuted + ); + }, + + _onToggle: function(keyName, checkedValue, uncheckedValue, ev) { + console.log("Checkbox toggle: %s %s", keyName, ev.target.checked); + var state = {}; + state[keyName] = ev.target.checked ? checkedValue : uncheckedValue; + this.setState(state); + }, + + render: function() { + var cli = MatrixClientPeg.get(); + return ( +
+ {/* +
+ + Mute notifications for this room +
+ */} +
+ All notifications - { this.state.areNotifsMuted ? "OFF" : "ON" } +
+
+ Mute - { this.state.areNotifsMuted ? "ON" : "OFF" } +
+
+ ); + } +}); From 497ebce88ad62ec5cbb8e5e2c47711e4817f196f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 25 Jul 2016 13:16:51 +0100 Subject: [PATCH 25/78] Corrected vertical alignment of membership button --- src/skins/vector/css/vector-web/structures/RightPanel.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index f6b300b208..9567869e7d 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -43,7 +43,7 @@ limitations under the License. /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 10px; + margin-top: 6px; float: left; background-color: #fff; margin-left: -4px; @@ -61,7 +61,7 @@ limitations under the License. .mx_RightPanel_headerButton object { pointer-events: none; - padding-bottom: 2px; + padding-bottom: 3px; } .mx_RightPanel_headerButton_highlight { From 791980cd1f9e22279fc3f8c25cabb1f2bdf67c73 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 25 Jul 2016 17:19:06 +0100 Subject: [PATCH 26/78] Menu context dohickey now sticks when menu shown --- 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 fb28b559b5..8a32993f52 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 @@ -121,7 +121,7 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { letter-spacing: 0.1em; opacity: 1; } From 30b1e7078faffacb39af8aa9fd8f9f1041202f33 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 25 Jul 2016 18:04:16 +0100 Subject: [PATCH 27/78] Contextual menu restyling --- src/skins/vector/css/common.css | 52 ++++++++++++++++++++++++++------- 1 file changed, 42 insertions(+), 10 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 1d4be178b5..b9dab27069 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -96,27 +96,59 @@ input[type=text]:focus, textarea:focus { } .mx_ContextualMenu { - border: 1px solid #a4a4a4; - border-radius: 8px; - background-color: #fff; - color: #747474; + border: solid 1px rgba(187, 187, 187, 0.5); + border-radius: 4px; + background-color: #f6f6f6; + color: #4a4a4a; position: fixed; z-index: 2001; padding: 6px; } .mx_ContextualMenu_chevron_right { - padding: 12px; position: absolute; - right: -21px; - top: 0px; + right: -8px; + top: 10px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-left: 8px solid rgba(187, 187, 187, 0.5); + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_right:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-left: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + right: 1px; } .mx_ContextualMenu_chevron_left { - padding: 12px; position: absolute; - left: -21px; - top: 0px; + left: -8px; + top: 10px; + 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_ContextualMenu_chevron_left:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; } .mx_ContextualMenu_field { From 187818aaa006f209541e5de500c710f5ec51bb7b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 26 Jul 2016 10:34:03 +0100 Subject: [PATCH 28/78] Radio buttons now added, and only none guests can modify notfication state --- .../rooms/NotificationStateContextMenu.js | 64 ++++++++----------- 1 file changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js index d485422d9a..3d125d2c14 100644 --- a/src/components/views/rooms/NotificationStateContextMenu.js +++ b/src/components/views/rooms/NotificationStateContextMenu.js @@ -46,22 +46,6 @@ module.exports = React.createClass({ }; }, - onAllClick: function() { - if (this.props.onFinished) { - this.setState({areNotifsMuted: false}); - this._save(false); - this.props.onFinished(); - } - }, - - onMuteClick: function() { - if (this.props.onFinished) { - this.setState({areNotifsMuted: true}); - this._save(true); - this.props.onFinished(); - } - }, - _save: function( isMuted ) { const roomId = this.props.room.roomId; /* @@ -71,35 +55,43 @@ module.exports = React.createClass({ )); } */ - MatrixClientPeg.get().setRoomMutePushRule( - "global", roomId, isMuted - ); + var cli = MatrixClientPeg.get(); + this.setState({areNotifsMuted: isMuted}); + if (!cli.isGuest()) { + cli.setRoomMutePushRule( + "global", roomId, isMuted + ); + } }, - _onToggle: function(keyName, checkedValue, uncheckedValue, ev) { - console.log("Checkbox toggle: %s %s", keyName, ev.target.checked); - var state = {}; - state[keyName] = ev.target.checked ? checkedValue : uncheckedValue; - this.setState(state); + _onToggle: function(ev) { + switch (ev.target.value) { + case "all": + if (this.props.onFinished) { + this._save(false); + this.props.onFinished(); + } + break; + case "mute": + if (this.props.onFinished) { + this._save(true); + this.props.onFinished(); + } + break; + } }, render: function() { var cli = MatrixClientPeg.get(); return (
- {/* -
- - Mute notifications for this room +
+ + All notifications
- */} -
- All notifications - { this.state.areNotifsMuted ? "OFF" : "ON" } -
-
- Mute - { this.state.areNotifsMuted ? "ON" : "OFF" } +
+ + Mute
); From 15f9f5dbe80cf86d112128e3051ecb53468821a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 26 Jul 2016 17:24:45 +0100 Subject: [PATCH 29/78] Doing the state change via onClick events rather than radio buttons, as they were causeing untraceable react errros for some reason --- .../rooms/NotificationStateContextMenu.js | 50 +++++++++++++------ src/skins/vector/css/common.css | 5 ++ 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/rooms/NotificationStateContextMenu.js index 3d125d2c14..d8a79b3062 100644 --- a/src/components/views/rooms/NotificationStateContextMenu.js +++ b/src/components/views/rooms/NotificationStateContextMenu.js @@ -18,6 +18,7 @@ limitations under the License. var q = require("q"); var React = require('react'); +var classNames = require('classnames'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); module.exports = React.createClass({ @@ -67,31 +68,52 @@ module.exports = React.createClass({ _onToggle: function(ev) { switch (ev.target.value) { case "all": - if (this.props.onFinished) { - this._save(false); - this.props.onFinished(); - } + this._save(false); break; case "mute": - if (this.props.onFinished) { - this._save(true); - this.props.onFinished(); - } + this._save(true); break; } + + if (this.props.onFinished) { + this.props.onFinished(); + }; + }, + + _onClickAllNotifs: function() { + this._save(false); + if (this.props.onFinished) { + this.props.onFinished(); + }; + }, + + _onClickMute: function() { + this._save(true); + if (this.props.onFinished) { + this.props.onFinished(); + }; }, render: function() { var cli = MatrixClientPeg.get(); + + var allNotifsClasses = classNames({ + 'mx_ContextualMenu_field': true, + 'mx_ContextualMenu_fieldSet': !this.state.areNotifsMuted, + }); + + var muteNotifsClasses = classNames({ + 'mx_ContextualMenu_field': true, + 'mx_ContextualMenu_fieldSet': this.state.areNotifsMuted, + }); + return (
-
- - All notifications +
+ { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications
-
- - Mute +
+ { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute
); diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index b9dab27069..bca1949309 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -103,6 +103,7 @@ input[type=text]:focus, textarea:focus { position: fixed; z-index: 2001; padding: 6px; + font-size: 14px; } .mx_ContextualMenu_chevron_right { @@ -156,6 +157,10 @@ input[type=text]:focus, textarea:focus { cursor: pointer; } +.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { + font-weight: bold; +} + .mx_ContextualMenu_spinner { display: block; margin: 0 auto; From 37a7ce809ae196074e8062104ce64a01dabd92aa Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 10:40:19 +0100 Subject: [PATCH 30/78] Added two new icons for notifications states --- src/skins/vector/img/icon-context-mute-off.svg | 9 +++++++++ src/skins/vector/img/icon-context-mute.svg | 9 +++++++++ 2 files changed, 18 insertions(+) create mode 100644 src/skins/vector/img/icon-context-mute-off.svg create mode 100644 src/skins/vector/img/icon-context-mute.svg diff --git a/src/skins/vector/img/icon-context-mute-off.svg b/src/skins/vector/img/icon-context-mute-off.svg new file mode 100644 index 0000000000..c30ed85b68 --- /dev/null +++ b/src/skins/vector/img/icon-context-mute-off.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/skins/vector/img/icon-context-mute.svg b/src/skins/vector/img/icon-context-mute.svg new file mode 100644 index 0000000000..71c5035aa1 --- /dev/null +++ b/src/skins/vector/img/icon-context-mute.svg @@ -0,0 +1,9 @@ + + + + + + + + + From 5cf164fcc156823a77e7ed905a33d52cee5fcab5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 10:40:57 +0100 Subject: [PATCH 31/78] Re-modularised the context menus --- src/component-index.js | 4 +- .../MessageContextMenu.js | 0 .../NotificationStateContextMenu.js | 8 +- src/skins/vector/css/common.css | 81 ------------------- .../structures/ContextualMenu.css | 80 ++++++++++++++++++ 5 files changed, 88 insertions(+), 85 deletions(-) rename src/components/views/{rooms => context_menus}/MessageContextMenu.js (100%) rename src/components/views/{rooms => context_menus}/NotificationStateContextMenu.js (93%) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css diff --git a/src/component-index.js b/src/component-index.js index 029a0a8182..819420f8ea 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -34,6 +34,8 @@ module.exports.components['structures.RoomDirectory'] = require('./components/st module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList'); module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox'); module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); +module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu'); +module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar'); @@ -46,8 +48,6 @@ module.exports.components['views.messages.DateSeparator'] = require('./component module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile'); module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); -module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu'); -module.exports.components['views.rooms.NotificationStateContextMenu'] = require('./components/views/rooms/NotificationStateContextMenu'); 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/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js similarity index 100% rename from src/components/views/rooms/MessageContextMenu.js rename to src/components/views/context_menus/MessageContextMenu.js diff --git a/src/components/views/rooms/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js similarity index 93% rename from src/components/views/rooms/NotificationStateContextMenu.js rename to src/components/views/context_menus/NotificationStateContextMenu.js index d8a79b3062..7859f810ba 100644 --- a/src/components/views/rooms/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -110,10 +110,14 @@ module.exports = React.createClass({ return (
- { !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications + { !this.state.areNotifsMuted ? "ON" : "OFF" } + + All notifications
- { this.state.areNotifsMuted ? "ON" : "OFF" } - Mute + { this.state.areNotifsMuted ? "ON" : "OFF" } + + Mute
); diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index bca1949309..d542850df2 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -85,87 +85,6 @@ input[type=text]:focus, textarea:focus { border-left: 6px solid transparent; } -.mx_ContextualMenu_background { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1.0; - z-index: 2000; -} - -.mx_ContextualMenu { - border: solid 1px rgba(187, 187, 187, 0.5); - border-radius: 4px; - background-color: #f6f6f6; - color: #4a4a4a; - position: fixed; - z-index: 2001; - padding: 6px; - font-size: 14px; -} - -.mx_ContextualMenu_chevron_right { - position: absolute; - right: -8px; - top: 10px; - width: 0; - height: 0; - border-top: 8px solid transparent; - border-left: 8px solid rgba(187, 187, 187, 0.5); - border-bottom: 8px solid transparent; -} - -.mx_ContextualMenu_chevron_right:after{ - content:''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-left: 7px solid #f6f6f6; - border-bottom: 7px solid transparent; - position:absolute; - top: -7px; - right: 1px; -} - -.mx_ContextualMenu_chevron_left { - position: absolute; - left: -8px; - top: 10px; - 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_ContextualMenu_chevron_left:after{ - content:''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-right: 7px solid #f6f6f6; - border-bottom: 7px solid transparent; - position:absolute; - top: -7px; - left: 1px; -} - -.mx_ContextualMenu_field { - padding: 3px 6px 3px 6px; - cursor: pointer; -} - -.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { - font-weight: bold; -} - -.mx_ContextualMenu_spinner { - display: block; - margin: 0 auto; -} - .mx_Dialog_wrapper { position: fixed; z-index: 4000; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css new file mode 100644 index 0000000000..95282e35f2 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -0,0 +1,80 @@ +.mx_ContextualMenu_background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 2000; +} + +.mx_ContextualMenu { + border: solid 1px rgba(187, 187, 187, 0.5); + border-radius: 4px; + background-color: #f6f6f6; + color: #4a4a4a; + position: fixed; + z-index: 2001; + padding: 6px; + font-size: 14px; +} + +.mx_ContextualMenu_chevron_right { + position: absolute; + right: -8px; + top: 10px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-left: 8px solid rgba(187, 187, 187, 0.5); + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_right:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-left: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + right: 1px; +} + +.mx_ContextualMenu_chevron_left { + position: absolute; + left: -8px; + top: 10px; + 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_ContextualMenu_chevron_left:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid #f6f6f6; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; +} + +.mx_ContextualMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; +} + +.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { + font-weight: bold; +} + +.mx_ContextualMenu_spinner { + display: block; + margin: 0 auto; +} From dab707a8938dc442c7caacf544de7a613ec0db97 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 11:26:36 +0100 Subject: [PATCH 32/78] Additional refactor to further modularise the context menus --- .../views/context_menus/MessageContextMenu.js | 12 +++++----- .../NotificationStateContextMenu.js | 8 +++---- .../structures/ContextualMenu.css | 20 ++++++++++++---- .../context_menus/MessageContextMenu.css | 24 +++++++++++++++++++ .../NotificationStateContextMenu.css | 24 +++++++++++++++++++ 5 files changed, 74 insertions(+), 14 deletions(-) create mode 100644 src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css create mode 100644 src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 91c59bd07b..401c0c6cc0 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -95,7 +95,7 @@ module.exports = React.createClass({ if (eventStatus === 'not_sent') { resendButton = ( -
+
Resend
); @@ -103,7 +103,7 @@ module.exports = React.createClass({ if (!eventStatus) { // sent redactButton = ( -
+
Redact
); @@ -111,14 +111,14 @@ module.exports = React.createClass({ if (eventStatus === "queued" || eventStatus === "not_sent") { cancelButton = ( -
+
Cancel Sending
); } viewSourceButton = ( -
+
View Source
); @@ -126,7 +126,7 @@ module.exports = React.createClass({ if (this.props.eventTileOps) { if (this.props.eventTileOps.isWidgetHidden()) { unhidePreviewButton = ( -
+
Unhide Preview
) @@ -136,7 +136,7 @@ module.exports = React.createClass({ // XXX: this should be https://matrix.to. // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID) permalinkButton = ( -
+ diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 7859f810ba..1813e20145 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -98,13 +98,13 @@ module.exports = React.createClass({ var cli = MatrixClientPeg.get(); var allNotifsClasses = classNames({ - 'mx_ContextualMenu_field': true, - 'mx_ContextualMenu_fieldSet': !this.state.areNotifsMuted, + 'mx_NotificationStateContextMenu_field': true, + 'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted, }); var muteNotifsClasses = classNames({ - 'mx_ContextualMenu_field': true, - 'mx_ContextualMenu_fieldSet': this.state.areNotifsMuted, + 'mx_NotificationStateContextMenu_field': true, + 'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted, }); return ( diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css index 95282e35f2..1d4f51ea62 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -1,3 +1,19 @@ +/* +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_ContextualMenu_background { position: fixed; top: 0; @@ -70,10 +86,6 @@ cursor: pointer; } -.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet { - font-weight: bold; -} - .mx_ContextualMenu_spinner { display: block; margin: 0 auto; diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css new file mode 100644 index 0000000000..881b11a6c8 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css @@ -0,0 +1,24 @@ +/* +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_MessageContextMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; +} + +.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet { + font-weight: bold; +} diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css new file mode 100644 index 0000000000..57994d4690 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -0,0 +1,24 @@ +/* +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_NotificationStateContextMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; +} + +.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { + font-weight: bold; +} From 4b33164ab64dae9e186b68e97d62eb14b034b529 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 27 Jul 2016 11:41:27 +0100 Subject: [PATCH 33/78] Remove relayoutOnUpdate prop on gemini-scrollbar The latest gemini-scrollbar makes relayoutOnUpdate redundant, so update to it and remove the properties. --- package.json | 4 ++-- src/components/structures/RoomDirectory.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 2b059bcf26..8010c90312 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "extract-text-webpack-plugin": "^0.9.1", "filesize": "^3.1.2", "flux": "~2.0.3", - "gemini-scrollbar": "matrix-org/gemini-scrollbar#468544d", + "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279", "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.0.0-beta.4", @@ -51,7 +51,7 @@ "react-dnd": "^2.1.4", "react-dnd-html5-backend": "^2.1.2", "react-dom": "^15.2.1", - "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#dbf0abf", + "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "sanitize-html": "^1.11.1" }, "devDependencies": { diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 81429a0e48..e3519b9ea9 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -282,8 +282,7 @@ module.exports = React.createClass({
- + { this.getRows(this.state.roomAlias) } From 074bbc71499c7d13bfc1eabd37574d75afc6e4e5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 12:25:44 +0100 Subject: [PATCH 34/78] Added the two additiona states that don't yet exist on the backend, as faded and disabled options --- .../NotificationStateContextMenu.js | 37 ++++++++++++------- .../NotificationStateContextMenu.css | 4 ++ .../vector/img/icon-context-mute-mentions.svg | 11 ++++++ .../vector/img/icon-context-mute-off-copy.svg | 10 +++++ 4 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 src/skins/vector/img/icon-context-mute-mentions.svg create mode 100644 src/skins/vector/img/icon-context-mute-off-copy.svg diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 1813e20145..bea226a170 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -65,19 +65,8 @@ module.exports = React.createClass({ } }, - _onToggle: function(ev) { - switch (ev.target.value) { - case "all": - this._save(false); - break; - case "mute": - this._save(true); - break; - } - - if (this.props.onFinished) { - this.props.onFinished(); - }; + _onClickAlertMe: function() { + // Placeholder }, _onClickAllNotifs: function() { @@ -87,6 +76,10 @@ module.exports = React.createClass({ }; }, + _onClickMentions: function() { + // Placeholder + }, + _onClickMute: function() { this._save(true); if (this.props.onFinished) { @@ -97,11 +90,21 @@ module.exports = React.createClass({ render: function() { var cli = MatrixClientPeg.get(); + var alertMeClasses = classNames({ + 'mx_NotificationStateContextMenu_field': true, + 'mx_NotificationStateContextMenu_fieldDisabled': true, + }); + var allNotifsClasses = classNames({ 'mx_NotificationStateContextMenu_field': true, 'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted, }); + var mentionsClasses = classNames({ + 'mx_NotificationStateContextMenu_field': true, + 'mx_NotificationStateContextMenu_fieldDisabled': true, + }); + var muteNotifsClasses = classNames({ 'mx_NotificationStateContextMenu_field': true, 'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted, @@ -109,11 +112,19 @@ module.exports = React.createClass({ return (
+
+ + Alert me +
{ !this.state.areNotifsMuted ? "ON" : "OFF" } All notifications
+
+ + Mentions only +
{ this.state.areNotifsMuted ? "ON" : "OFF" } diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index 57994d4690..009374b7c6 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -22,3 +22,7 @@ limitations under the License. .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { font-weight: bold; } + +.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled { + color: rgba(0, 0, 0, 0.2); +} diff --git a/src/skins/vector/img/icon-context-mute-mentions.svg b/src/skins/vector/img/icon-context-mute-mentions.svg new file mode 100644 index 0000000000..46d5022e69 --- /dev/null +++ b/src/skins/vector/img/icon-context-mute-mentions.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/skins/vector/img/icon-context-mute-off-copy.svg b/src/skins/vector/img/icon-context-mute-off-copy.svg new file mode 100644 index 0000000000..f62eaa97d9 --- /dev/null +++ b/src/skins/vector/img/icon-context-mute-off-copy.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 53f4da1d3006389f68534041f6f3116691433bc2 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 16:09:26 +0100 Subject: [PATCH 35/78] Refactor so that chevron and menu can be positioned independantly --- .../structures/ContextualMenu.css | 21 +++++++++++++++---- .../context_menus/MessageContextMenu.css | 1 + .../NotificationStateContextMenu.css | 1 + 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css index 1d4f51ea62..f626cddded 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -14,6 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_ContextualMenu_wrapper { + position: fixed; + z-index: 2000; +} + .mx_ContextualMenu_background { position: fixed; top: 0; @@ -29,16 +34,19 @@ limitations under the License. border-radius: 4px; background-color: #f6f6f6; color: #4a4a4a; - position: fixed; - z-index: 2001; + position: absolute; padding: 6px; font-size: 14px; } +.mx_ContextualMenu.mx_ContextualMenu_right { + right: 8px; +} + .mx_ContextualMenu_chevron_right { position: absolute; right: -8px; - top: 10px; + top: 0px; width: 0; height: 0; border-top: 8px solid transparent; @@ -58,10 +66,14 @@ limitations under the License. right: 1px; } +.mx_ContextualMenu.mx_ContextualMenu_left { + left: 8px; +} + .mx_ContextualMenu_chevron_left { position: absolute; left: -8px; - top: 10px; + top: 0px; width: 0; height: 0; border-top: 8px solid transparent; @@ -84,6 +96,7 @@ limitations under the License. .mx_ContextualMenu_field { padding: 3px 6px 3px 6px; cursor: pointer; + white-space: nowrap; } .mx_ContextualMenu_spinner { diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css index 881b11a6c8..85e8080c88 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css @@ -17,6 +17,7 @@ limitations under the License. .mx_MessageContextMenu_field { padding: 3px 6px 3px 6px; cursor: pointer; + white-space: nowrap; } .mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet { diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index 009374b7c6..b8e312b61d 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -17,6 +17,7 @@ limitations under the License. .mx_NotificationStateContextMenu_field { padding: 3px 6px 3px 6px; cursor: pointer; + width: 174px; } .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { From d376df478a6b326e477446a30ebbdf617a2cece7 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 17:43:35 +0100 Subject: [PATCH 36/78] Initial context menu with all it's elements --- .../NotificationStateContextMenu.js | 15 ++++++----- .../structures/ContextualMenu.css | 1 + .../NotificationStateContextMenu.css | 25 +++++++++++++++++-- src/skins/vector/img/notif-active.svg | 20 +++++++++++++++ src/skins/vector/img/notif-slider.svg | 22 ++++++++++++++++ 5 files changed, 75 insertions(+), 8 deletions(-) create mode 100644 src/skins/vector/img/notif-active.svg create mode 100644 src/skins/vector/img/notif-slider.svg diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index bea226a170..17f75f807d 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -112,22 +112,25 @@ module.exports = React.createClass({ return (
+
+ +
- + Alert me
- { !this.state.areNotifsMuted ? "ON" : "OFF" } - + + All notifications
- + Mentions only
- { this.state.areNotifsMuted ? "ON" : "OFF" } - + + Mute
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css index f626cddded..7523bd103c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -37,6 +37,7 @@ limitations under the License. position: absolute; padding: 6px; font-size: 14px; + z-index: 2001; } .mx_ContextualMenu.mx_ContextualMenu_right { diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index b8e312b61d..86d70e4408 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -14,16 +14,37 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_NotificationStateContextMenu_picker { + position: absolute; + top: 16px; +} + .mx_NotificationStateContextMenu_field { - padding: 3px 6px 3px 6px; + padding-top: 4px; + padding-right: 6px; + padding-bottom: 10px; + padding-left: 26px; cursor: pointer; - width: 174px; + white-space: nowrap; + display: flex; + align-items: center; } .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { font-weight: bold; + padding-left: 14px; } .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled { color: rgba(0, 0, 0, 0.2); } + +.mx_NotificationStateContextMenu_activeIcon { + display: none; + position: relative; + left: -9px; +} + +.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon { + display: inline-block; +} diff --git a/src/skins/vector/img/notif-active.svg b/src/skins/vector/img/notif-active.svg new file mode 100644 index 0000000000..9eb279f851 --- /dev/null +++ b/src/skins/vector/img/notif-active.svg @@ -0,0 +1,20 @@ + + + + E15782FC-B5FA-472A-AE12-CFFF484E7253 + Created with sketchtool. + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/notif-slider.svg b/src/skins/vector/img/notif-slider.svg new file mode 100644 index 0000000000..55fa06d11a --- /dev/null +++ b/src/skins/vector/img/notif-slider.svg @@ -0,0 +1,22 @@ + + + + 16CB4618-0BD3-4568-BB20-FC56EBC46046 + Created with sketchtool. + + + + + + + + + + + + + + + + + From 22bf74dc6518ad8e5cd86561793fd717a4948fc7 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 18:01:43 +0100 Subject: [PATCH 37/78] Tweaks to get icons to line up better, still need to space labels correctly --- .../views/context_menus/NotificationStateContextMenu.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index 86d70e4408..9dd0fa9c46 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -17,13 +17,14 @@ limitations under the License. .mx_NotificationStateContextMenu_picker { position: absolute; top: 16px; + left: 5px; } .mx_NotificationStateContextMenu_field { padding-top: 4px; padding-right: 6px; padding-bottom: 10px; - padding-left: 26px; + padding-left: 20px; cursor: pointer; white-space: nowrap; display: flex; @@ -32,7 +33,7 @@ limitations under the License. .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { font-weight: bold; - padding-left: 14px; + padding-left: 8px; } .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled { @@ -42,7 +43,7 @@ limitations under the License. .mx_NotificationStateContextMenu_activeIcon { display: none; position: relative; - left: -9px; + left: -5px; } .mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon { From b5fdaac94721a708a7969b4222645c6fa4ea860e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Wed, 27 Jul 2016 18:06:47 +0100 Subject: [PATCH 38/78] Final spacing tweaks to get it aligned with the design --- .../views/context_menus/NotificationStateContextMenu.js | 8 ++++---- .../views/context_menus/NotificationStateContextMenu.css | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 17f75f807d..2de02112aa 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -116,21 +116,21 @@ module.exports = React.createClass({
- + Alert me
- + All notifications
- + Mentions only
- + Mute
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index 9dd0fa9c46..d92355e3df 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -40,6 +40,10 @@ limitations under the License. color: rgba(0, 0, 0, 0.2); } +.mx_NotificationStateContextMenu_icon { + padding-right: 2px; +} + .mx_NotificationStateContextMenu_activeIcon { display: none; position: relative; From 6329e274ab7d7b8a79307fac29569bb5a78dcff5 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 14:20:24 +0100 Subject: [PATCH 39/78] Extra polish to get styling looking like the design --- .../views/context_menus/NotificationStateContextMenu.js | 8 ++++---- .../views/context_menus/NotificationStateContextMenu.css | 3 ++- src/skins/vector/img/icon-context-mute-mentions.svg | 8 ++++---- src/skins/vector/img/icon-context-mute-off-copy.svg | 2 +- src/skins/vector/img/icon-context-mute-off.svg | 4 ++-- src/skins/vector/img/icon-context-mute.svg | 4 ++-- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 2de02112aa..869145aa3b 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -116,21 +116,21 @@ module.exports = React.createClass({
- + Alert me
- + All notifications
- + Mentions only
- + Mute
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index d92355e3df..1a186178e1 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -41,7 +41,8 @@ limitations under the License. } .mx_NotificationStateContextMenu_icon { - padding-right: 2px; + padding-right: 4px; + padding-left: 4px; } .mx_NotificationStateContextMenu_activeIcon { diff --git a/src/skins/vector/img/icon-context-mute-mentions.svg b/src/skins/vector/img/icon-context-mute-mentions.svg index 46d5022e69..3693b7a82a 100644 --- a/src/skins/vector/img/icon-context-mute-mentions.svg +++ b/src/skins/vector/img/icon-context-mute-mentions.svg @@ -1,10 +1,10 @@ - + - - - + + + diff --git a/src/skins/vector/img/icon-context-mute-off-copy.svg b/src/skins/vector/img/icon-context-mute-off-copy.svg index f62eaa97d9..861f2975de 100644 --- a/src/skins/vector/img/icon-context-mute-off-copy.svg +++ b/src/skins/vector/img/icon-context-mute-off-copy.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icon-context-mute-off.svg b/src/skins/vector/img/icon-context-mute-off.svg index c30ed85b68..d801823b5d 100644 --- a/src/skins/vector/img/icon-context-mute-off.svg +++ b/src/skins/vector/img/icon-context-mute-off.svg @@ -1,8 +1,8 @@ - + - + diff --git a/src/skins/vector/img/icon-context-mute.svg b/src/skins/vector/img/icon-context-mute.svg index 71c5035aa1..f53b868a76 100644 --- a/src/skins/vector/img/icon-context-mute.svg +++ b/src/skins/vector/img/icon-context-mute.svg @@ -1,8 +1,8 @@ - + - + From fd53f10fbdfcdc19b66ce2a87bd4a1f2788e91a8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 28 Jul 2016 16:05:03 +0200 Subject: [PATCH 40/78] improve the getting started instructions and plug the electron apps --- README.md | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 58bea9d9ad..6a96a868de 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,12 @@ Vector is a Matrix web client built using the Matrix React SDK (https://github.c Getting Started =============== -Vector is a modular webapp built with modern ES6 and requires and npm build system to build. -Instructions for building are below, but building from source shouldn't be necessary -for simple deployments. +The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta. +The develop branch is continuously deployed by Jenkins at https://vector.im/develop for +those who like living dangerously. + +To host your own copy of Vector, the quickest bet is to use a pre-built released version +of Vector: 1. Download the latest version from https://vector.im/packages/ 1. Untar the tarball on your web server @@ -20,7 +23,7 @@ for simple deployments. Building From Source ==================== -If you do wish to build vector from source: +Vector is a modular webapp built with modern ES6 and requires a npm build system to build. 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0` 1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` @@ -53,6 +56,26 @@ You can configure the app by copying `vector/config.sample.json` to registering with an email address or adding an email address to your account will not work. + +Running as a Desktop app +======================== + +In future we'll do an official distribution of Vector as an desktop app. Meanwhile, +there are a few options: + +@asdf:matrix.org points out that you can use nativefier and it just works(tm): + +``` +sudo npm install nativefier -g +nativefier https://vector.im/beta/ +``` + +krisa has a dedicated electron project at https://github.com/krisak/vector-electron-desktop +(although you should swap out the 'vector' folder for the latest vector tarball you want to run) + +There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop + + Development =========== From b87058508ea3748c3c93f519ec8325b9ea7b4d4a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 15:28:05 +0100 Subject: [PATCH 41/78] When a use clicks the state they want, after the change has been made it pasues breifly before closing, so that the user can see their state change has taken place. --- .../NotificationStateContextMenu.js | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 869145aa3b..8f3152d293 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -48,20 +48,27 @@ module.exports = React.createClass({ }, _save: function( isMuted ) { + var self = this; const roomId = this.props.room.roomId; - /* - if (this.state.areNotifsMuted !== originalState.areNotifsMuted) { - promises.push(MatrixClientPeg.get().setRoomMutePushRule( - "global", roomId, this.state.areNotifsMuted - )); - } - */ var cli = MatrixClientPeg.get(); - this.setState({areNotifsMuted: isMuted}); + if (!cli.isGuest()) { cli.setRoomMutePushRule( "global", roomId, isMuted - ); + ).then(function() { + console.log("DEBUG: then"); + self.setState({areNotifsMuted: isMuted}); + + // delay slightly so that the user can see their state change + q.delay(500).then(function() { + if (self.props.onFinished) { + self.props.onFinished(); + }; + }); + }).fail(function(error) { + console.log("DEBUG: fail"); + console.log(error); + }); } }, @@ -71,9 +78,6 @@ module.exports = React.createClass({ _onClickAllNotifs: function() { this._save(false); - if (this.props.onFinished) { - this.props.onFinished(); - }; }, _onClickMentions: function() { @@ -82,9 +86,6 @@ module.exports = React.createClass({ _onClickMute: function() { this._save(true); - if (this.props.onFinished) { - this.props.onFinished(); - }; }, render: function() { From 49545ce0c2802b0f48b9539edc9ef1a279c37817 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 15:29:57 +0100 Subject: [PATCH 42/78] Leaving the fail promise section blank as a todo, with explanitary comment --- .../views/context_menus/NotificationStateContextMenu.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 8f3152d293..879234fa00 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -56,7 +56,6 @@ module.exports = React.createClass({ cli.setRoomMutePushRule( "global", roomId, isMuted ).then(function() { - console.log("DEBUG: then"); self.setState({areNotifsMuted: isMuted}); // delay slightly so that the user can see their state change @@ -66,8 +65,8 @@ module.exports = React.createClass({ }; }); }).fail(function(error) { - console.log("DEBUG: fail"); - console.log(error); + // TODO: some form of error notification to the user + // to inform them that their state change failed. }); } }, From 55a10ee2755c4628645ebaf9e6fa1c3465c47c13 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 17:25:28 +0100 Subject: [PATCH 43/78] Mute state handled corrcectly --- .../context_menus/NotificationStateContextMenu.js | 11 +++++++++++ .../css/matrix-react-sdk/views/rooms/RoomTile.css | 13 ++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 879234fa00..cadc8287b7 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -20,6 +20,7 @@ var q = require("q"); var React = require('react'); var classNames = require('classnames'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); +var dis = require('matrix-react-sdk/lib/dispatcher'); module.exports = React.createClass({ displayName: 'NotificationStateContextMenu', @@ -59,7 +60,17 @@ module.exports = React.createClass({ self.setState({areNotifsMuted: isMuted}); // delay slightly so that the user can see their state change + // before closing the menu q.delay(500).then(function() { + // tell everyone that wants to know of the change in + // notification state + dis.dispatch({ + action: 'notification_change', + roomId: self.props.room.roomId, + isMuted: isMuted, + }); + + // Close the context menu if (self.props.onFinished) { self.props.onFinished(); }; 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 8a32993f52..2490321e51 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,10 @@ limitations under the License. display: block; } +.mx_RoomTile .mx_RoomTile_mute { + opacity: 0.4; +} + .mx_RoomTile_avatar { display: inline-block; padding-top: 6px; @@ -121,11 +125,18 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { + background-color: rgb(214, 214, 214); letter-spacing: 0.1em; opacity: 1; } +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { + background-color: rgba(0,0,0,0); + opacity: 1; + top: 4px; +} + .mx_RoomTile_unreadNotify .mx_RoomTile_badge { background-color: #76cfa6; } From 6c4c0bf57ade4b5fcd9a100659cbe2e9667d826a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 17:35:25 +0100 Subject: [PATCH 44/78] Initial feature set complete, but the state and CSS need to be simplified --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 7 ++++++- 1 file changed, 6 insertions(+), 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 2490321e51..b079069cfb 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 @@ -97,7 +97,7 @@ limitations under the License. } /* This is the bottom of the speech bubble */ -.mx_RoomTile_highlight .mx_RoomTile_badge:after { +.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { content: ""; position: absolute; display: block; @@ -126,6 +126,11 @@ limitations under the License. } .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { + letter-spacing: 0.1em; + opacity: 1; +} + +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { background-color: rgb(214, 214, 214); letter-spacing: 0.1em; opacity: 1; From 2f08f2441f3ace1d5ff53e10c7d2e2fde0420fbc Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 17:41:01 +0100 Subject: [PATCH 45/78] CSS tweaks for muted dohickey positioning --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 3 ++- 1 file changed, 2 insertions(+), 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 b079069cfb..783aa32130 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 @@ -125,7 +125,7 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile { letter-spacing: 0.1em; opacity: 1; } @@ -134,6 +134,7 @@ limitations under the License. background-color: rgb(214, 214, 214); letter-spacing: 0.1em; opacity: 1; + top: 2px; } .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { From 2f650646888cafd49c4708669015470404d261ed Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 28 Jul 2016 17:44:17 +0100 Subject: [PATCH 46/78] CSS bugfix to stop incorrect letter spaceing on room names --- 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 783aa32130..6491d7f7d8 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 @@ -125,7 +125,7 @@ limitations under the License. padding-right: 4px; } -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge, .mx_RoomTile { +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { letter-spacing: 0.1em; opacity: 1; } From 18701a2daef4b8de99d9bda1594dd68bafecfb88 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 29 Jul 2016 10:01:42 +0100 Subject: [PATCH 47/78] CSS tweaks to get the collapsed mute state properly working --- .../matrix-react-sdk/views/rooms/RoomTile.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 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 6491d7f7d8..050052a032 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 @@ -91,8 +91,23 @@ limitations under the License. z-index: 200; } +/* Position mute icon when collapsed */ +.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { + background-color: rgba(0,0,0,0); + opacity: 1; + top: -40px; +} + +/* Position menu icon when room muted and collapsed */ +.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { + background-color: rgb(214, 214, 214); + letter-spacing: 0.1em; + opacity: 1; + top: -40px; +} + /* Hide the bottom of speech bubble */ -.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after { +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { display: none; } @@ -130,6 +145,7 @@ limitations under the License. opacity: 1; } +/* Position menu icon when room muted and collapsed */ .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { background-color: rgb(214, 214, 214); letter-spacing: 0.1em; @@ -137,6 +153,7 @@ limitations under the License. top: 2px; } +/* Position mute icon when collapsed */ .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); opacity: 1; From 87bddcd8ce93f47294e5de84d9585c24d3a26e50 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 29 Jul 2016 10:50:50 +0100 Subject: [PATCH 48/78] Preliminary fix for showing muted state when collapsed - keep faded avatar, but don't show the mute icon --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 050052a032..c8ac2d9b22 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 @@ -91,15 +91,16 @@ limitations under the License. z-index: 200; } -/* Position mute icon when collapsed */ +/* Position mute icon when collapsed - invisiible at the moment */ .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); - opacity: 1; + opacity: 0; top: -40px; } /* Position menu icon when room muted and collapsed */ .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { + display: inline-block; background-color: rgb(214, 214, 214); letter-spacing: 0.1em; opacity: 1; From 0ad84fd7b090463aa03e7cb93d103d30b6470f7a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 29 Jul 2016 10:59:54 +0100 Subject: [PATCH 49/78] Better comments --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index c8ac2d9b22..de58140322 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 @@ -91,7 +91,7 @@ limitations under the License. z-index: 200; } -/* Position mute icon when collapsed - invisiible at the moment */ +/* Position mute icon when room muted and collapsed - invisible at the moment */ .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); opacity: 0; @@ -112,7 +112,7 @@ limitations under the License. display: none; } -/* This is the bottom of the speech bubble */ +/* This is the bottom of the speech bubble - not drawn when room muted */ .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { content: ""; position: absolute; @@ -146,7 +146,7 @@ limitations under the License. opacity: 1; } -/* Position menu icon when room muted and collapsed */ +/* Position menu icon when room muted */ .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { background-color: rgb(214, 214, 214); letter-spacing: 0.1em; @@ -154,7 +154,7 @@ limitations under the License. top: 2px; } -/* Position mute icon when collapsed */ +/* Position mute icon when room muted */ .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { background-color: rgba(0,0,0,0); opacity: 1; From bb93a59cfb6157999426f00905d14ad45a925f5e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 29 Jul 2016 13:49:28 +0100 Subject: [PATCH 50/78] fixed unread hightlight font weight for room name --- 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 de58140322..ceeac0c620 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 @@ -175,7 +175,7 @@ limitations under the License. } .mx_RoomTile_unread, .mx_RoomTile_highlight { - font-weight: bold; + font-weight: 600; } .mx_RoomTile_selected .mx_RoomTile_name { From 4a7d2901ac060faa96e8704d08b2d507e75e41cb Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sat, 30 Jul 2016 12:52:14 +0100 Subject: [PATCH 51/78] Positional tweaks for the name, badge and context menu, to better match design in both normal and collapsed states --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index ceeac0c620..e3e29d69b1 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 @@ -40,7 +40,7 @@ limitations under the License. .mx_RoomTile_name { display: inline-block; position: relative; - width: 100px; + width: 103px; vertical-align: middle; overflow: hidden; /* word-break: break-word; */ @@ -54,7 +54,7 @@ limitations under the License. .mx_RoomTile_name:before { content:''; - width:100px; + width:103px; height:22px; top: 0px; left: 0px; @@ -83,7 +83,7 @@ limitations under the License. .collapsed .mx_RoomTile_badge { top: -40px; - left: 30px; + left: 31px; min-width: 12px; height: 16px; border-radius: 16px; From d4faacf462b53b3171164fe2401e25fab67d606b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 31 Jul 2016 23:42:17 +0100 Subject: [PATCH 52/78] clear up IS ambiguity and close https://github.com/vector-im/vector-web/issues/1720 --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6a96a868de..540c575071 100644 --- a/README.md +++ b/README.md @@ -53,8 +53,12 @@ You can configure the app by copying `vector/config.sample.json` to 1. `default_hs_url` is the default home server url. 1. `default_is_url` is the default identity server url (this is the server used for verifying third party identifiers like email addresses). If this is blank, - registering with an email address or adding an email address to your account - will not work. + registering with an email address, adding an email address to your account, + or inviting users via email address will not work. Matrix identity servers are + very simple web services which map third party identifiers (currently only email + addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html + for more details. Currently the only public matrix identity servers are https://matrix.org + and https://vector.im. In future identity servers will be decentralised. Running as a Desktop app From ef5ea46830acab688839e20fdad0da4328e0c174 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 1 Aug 2016 09:53:57 +0100 Subject: [PATCH 53/78] Consistent collapsed height across browsers --- src/skins/vector/css/vector-web/structures/LeftPanel.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 0ea76c928a..7905f2f658 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -51,6 +51,10 @@ limitations under the License. overflow-y: auto; } +.mx_LeftPanel.collapsed .mx_BottomLeftMenu { + flex: 0 0 120px; +} + .mx_LeftPanel .mx_BottomLeftMenu { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; From 3860488bb50ad33e229a07f268797d997e0ad85d Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 1 Aug 2016 10:31:58 +0100 Subject: [PATCH 54/78] Fix notifications warning layout For some reason, Chrome doesn't seem to make the central div in the notifications warning wide enough, so it ends up wrapping. Fix this by making the central div expand across the available space, instead of letting the container for the close button do it. Fixes https://github.com/vector-im/vector-web/issues/1687 --- src/components/views/globals/MatrixToolbar.js | 3 +-- .../vector/css/vector-web/views/globals/MatrixToolbar.css | 8 +++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js index b176ff2ea2..a22e15ffc1 100644 --- a/src/components/views/globals/MatrixToolbar.js +++ b/src/components/views/globals/MatrixToolbar.js @@ -35,7 +35,7 @@ module.exports = React.createClass({ return (
/!\ -
+
You are not receiving desktop notifications. Enable them now
@@ -43,4 +43,3 @@ module.exports = React.createClass({ ); } }); - diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css index b5e910210e..a8297f46c2 100644 --- a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css +++ b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css @@ -33,6 +33,11 @@ limitations under the License. margin-top: -2px; } +.mx_MatrixToolbar_content { + -webkit-flex: 1; + flex: 1; +} + .mx_MatrixToolbar_link { color: #fff ! important; @@ -41,10 +46,7 @@ limitations under the License. } .mx_MatrixToolbar_close { - -webkit-flex: 1; - flex: 1; cursor: pointer; - text-align: right; } .mx_MatrixToolbar_close img { From 0d4f35bed1c95bdd60357619a41fac7c4135b7ba Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 1 Aug 2016 13:44:04 +0100 Subject: [PATCH 55/78] Fix a warning from RoomSubList `selectedRoom` is *not* required, and we often don't have one, so get warnings. --- src/components/structures/RoomSubList.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 497acdec07..a5a6fd2173 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -61,8 +61,12 @@ var RoomSubList = React.createClass({ label: React.PropTypes.string.isRequired, tagName: React.PropTypes.string, editable: React.PropTypes.bool, + order: React.PropTypes.string.isRequired, - selectedRoom: React.PropTypes.string.isRequired, + + // undefined if no room is selected (eg we are showing settings) + selectedRoom: React.PropTypes.string, + startAsHidden: React.PropTypes.bool, showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed? From 645db7fa2f452d925a5356366d5e6698e2a00b8e Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 1 Aug 2016 13:46:14 +0100 Subject: [PATCH 56/78] CSS for device management UI --- src/skins/vector/css/common.css | 12 +++++ .../views/settings/DevicesPanel.css | 47 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 1d4be178b5..bc2173094d 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -270,3 +270,15 @@ input[type=text]:focus, textarea:focus { background-color: #76CFA6; color: white; } + +/** green button with rounded corners */ +.textButton { + color: #fff; + background-color: #76cfa6; + border-radius: 17px; + text-align: center; + padding-left: 1em; + padding-right: 1em; + cursor: pointer; + display: inline; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css b/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css new file mode 100644 index 0000000000..1b60834a4e --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css @@ -0,0 +1,47 @@ +/* +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_DevicesPanel { + display: table; + table-layout: fixed; + width: 880px; + border-spacing: 2px; +} + +.mx_DevicesPanel_header { + display: table-header-group; + font-weight: bold; +} + +.mx_DevicesPanel_header > div { + display: table-cell; +} + +.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen { + width: 30%; +} + +.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons { + width: 20%; +} + +.mx_DevicesPanel_device { + display: table-row; +} + +.mx_DevicesPanel_device > div { + display: table-cell; +} From 4f94cf5dfbabcd36270670af4315250fcdc134c3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 1 Aug 2016 16:44:58 +0100 Subject: [PATCH 57/78] New voice and video call icons --- .../views/rooms/MessageComposer.css | 18 +++--------------- src/skins/vector/img/icon-call.svg | 8 ++++++++ 2 files changed, 11 insertions(+), 15 deletions(-) create mode 100644 src/skins/vector/img/icon-call.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 9242af89a9..9af21003db 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 @@ -109,9 +109,10 @@ limitations under the License. .mx_MessageComposer_videocall { /*display: table-cell;*/ /*vertical-align: middle;*/ - padding-left: 10px; - padding-right: 10px; + /*padding-left: 10px;*/ + padding-right: 5px; cursor: pointer; + padding-top: 4px; } .mx_MessageComposer_upload object, @@ -121,16 +122,3 @@ limitations under the License. pointer-events: none; } -.mx_MessageComposer_videocall { - padding-right: 10px; - padding-top: 4px; -} - -.mx_MessageComposer_voicecall { - padding-right: 10px; - padding-top: 4px; -} - -.mx_MessageComposer_upload object { - margin-top: 5px; -} diff --git a/src/skins/vector/img/icon-call.svg b/src/skins/vector/img/icon-call.svg new file mode 100644 index 0000000000..2d96b1456b --- /dev/null +++ b/src/skins/vector/img/icon-call.svg @@ -0,0 +1,8 @@ + + + + + + + + From 2e3ad3206c0d0090e96fed44ef80019cd0e31a5c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 1 Aug 2016 16:46:13 +0100 Subject: [PATCH 58/78] New video call icon --- src/skins/vector/img/icons-video.svg | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/skins/vector/img/icons-video.svg diff --git a/src/skins/vector/img/icons-video.svg b/src/skins/vector/img/icons-video.svg new file mode 100644 index 0000000000..3571ec7f21 --- /dev/null +++ b/src/skins/vector/img/icons-video.svg @@ -0,0 +1,20 @@ + + + + 05D354CE-86A7-4B6F-B9BE-F1CEBBD81B21 + Created with sketchtool. + + + + + + + + + + + + + + + From 28057fd086d40a573e9182cbf10790cf980216ee Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 1 Aug 2016 18:35:57 +0100 Subject: [PATCH 59/78] improve upgrade-to-app warning on mobile app --- src/vector/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 8f3701cbeb..4c9dd9ee0f 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -205,13 +205,13 @@ function getConfig() { async function loadApp() { if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) { - if (confirm("Vector runs much better as an app on iOS. Get the app?")) { + if (confirm("Vector is not supported on mobile web. Install the app?")) { window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067"; return; } } else if (/Android/.test(navigator.userAgent)) { - if (confirm("Vector runs much better as an app on Android. Get the app?")) { + if (confirm("Vector is not supported on mobile web. Install the app?")) { window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha"; return; } From 8c7aede0cc800606fffede206d81dd5f83d227fa Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Tue, 2 Aug 2016 11:13:46 +0100 Subject: [PATCH 60/78] Style UnknownBody with ``white-space: pre-wrap;`` --- .../views/messages/UnknownBody.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css new file mode 100644 index 0000000000..9036e12bf0 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css @@ -0,0 +1,16 @@ +/* +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_UnknownBody { + white-space: pre-wrap; +} From 51b74251f9a3b656d1d4dee44b326002dd9c337e Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 2 Aug 2016 12:42:06 +0100 Subject: [PATCH 61/78] Exclude olm from the webpack Olm takes *ages* to webpack, and it doesn't compress well. So, serve it as a separate asset to the browser. --- package.json | 14 ++++++++------ scripts/staticfiles.js | 21 +++++++++++++++++++++ vector/index.html | 2 ++ webpack.config.js | 26 ++++++++------------------ 4 files changed, 39 insertions(+), 24 deletions(-) create mode 100755 scripts/staticfiles.js diff --git a/package.json b/package.json index 8010c90312..e00505c5cf 100644 --- a/package.json +++ b/package.json @@ -17,16 +17,17 @@ "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js", "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js", - "build": "npm run build:css && npm run build:compile && npm run build:bundle", - "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev", + "build:staticfiles": "scripts/staticfiles.js", + "build": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle", + "build:dev": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle:dev", "package": "scripts/package.sh", "start:js": "webpack -w src/vector/index.js vector/bundle.js", "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js", "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css", "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270", - "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", - "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", - "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*", + "start": "parallelshell \"npm run build:staticfiles\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", + "start:prod": "parallelshell \"npm run build:staticfiles\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", + "clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*", "prepublish": "npm run build:css && npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test:multi": "karma start" @@ -61,6 +62,7 @@ "catw": "^1.0.1", "css-raw-loader": "^0.1.1", "expect": "^1.16.0", + "fs-extra": "^0.30.0", "http-server": "^0.8.4", "json-loader": "^0.5.3", "karma": "^0.13.22", @@ -74,8 +76,8 @@ "mocha": "^2.4.5", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", - "react-addons-test-utils": "^15.0.1", "react-addons-perf": "^15.0", + "react-addons-test-utils": "^15.0.1", "rimraf": "^2.4.3", "source-map-loader": "^0.1.5", "webpack": "^1.12.14" diff --git a/scripts/staticfiles.js b/scripts/staticfiles.js new file mode 100755 index 0000000000..3dbf451cd3 --- /dev/null +++ b/scripts/staticfiles.js @@ -0,0 +1,21 @@ +#!/usr/bin/env node + +// copy static files from node_modules to the vector directory +// + +var fs = require('fs-extra'); + +function exists(f) { + try { + fs.statSync(f); + return true; + } catch(e) { + return false; + } +} + +const olm = 'node_modules/olm/olm.js'; +if (exists(olm)) { + console.log("copy", olm, "-> vector"); + fs.copySync(olm, 'vector/olm.js'); +} diff --git a/vector/index.html b/vector/index.html index 08c96dd519..a78beac108 100644 --- a/vector/index.html +++ b/vector/index.html @@ -24,6 +24,8 @@
+ + diff --git a/webpack.config.js b/webpack.config.js index 91d0564c47..95afcfba98 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,12 +43,16 @@ module.exports = { // same goes for js-sdk "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'), - - // make sure we use the version of olm from vector-web rather than - // js-sdk. - "olm": path.resolve('./node_modules/olm'), }, }, + externals: { + // olm takes ages for webpack to process, and it's already heavily + // optimised, so there is little to gain by us uglifying it. We + // therefore use it via a separate