diff --git a/.gitignore b/.gitignore index f5a3b1bdcd..2bc43f864a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ lib key.pem cert.pem vector/components.css +packages/ diff --git a/README.md b/README.md index 529e7cdf0f..a40fa56fd5 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,8 @@ Getting started 7. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector. With `npm start`, any changes you make to the source files will cause a rebuild so -your changes will show up when you refresh. +your changes will show up when you refresh. This development server also disables +caching, so do NOT use it in production. For production use, run `npm run build` to build all the necessary files into the `vector` directory and run your own server. diff --git a/package.json b/package.json index 42aa567eb1..16963787c9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js", "build": "npm run build:css && npm run build:compile && npm run build:bundle", + "package": "npm run build && mkdir -p packages && tar chvzf packages/vector-`git describe --dirty || echo unknown`.tar.gz vector", "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", @@ -27,6 +28,7 @@ "prepublish": "npm run build:css && npm run build:compile" }, "dependencies": { + "babel-polyfill": "^6.5.0", "classnames": "^2.1.2", "extract-text-webpack-plugin": "^0.9.1", "filesize": "^3.1.2", @@ -56,6 +58,6 @@ "parallelshell": "^1.2.0", "rimraf": "^2.4.3", "source-map-loader": "^0.1.5", - "webpack": "^1.12.6" + "webpack": "^1.12.13" } } diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index c12f53f4c7..dc4f606c31 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -20,6 +20,7 @@ var React = require('react'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg"); +var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); module.exports = React.createClass({ displayName: 'RightPanel', @@ -66,15 +67,19 @@ module.exports = React.createClass({ onRoomStateMember: function(ev, state, member) { // redraw the badge on the membership list if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) { - this.forceUpdate(); + this._delayedUpdate(); } else if (this.state.phase === this.Phase.MemberInfo && member.roomId === this.props.roomId && member.userId === this.state.member.userId) { // refresh the member info (e.g. new power level) - this.forceUpdate(); + this._delayedUpdate(); } }, + _delayedUpdate: new rate_limited_func(function() { + this.forceUpdate(); + }, 500), + onAction: function(payload) { if (payload.action === "view_user") { if (payload.member) { diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 0c65e107e7..09c15a1cc9 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -69,7 +69,7 @@ module.exports = React.createClass({ var rooms = this.state.publicRooms.filter(function(a) { // FIXME: if incrementally typing, keep narrowing down the search set // incrementally rather than starting over each time. - return (a.aliases[0].search(filter) >= 0 && a.num_joined_members > 0); + return (a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0 && a.num_joined_members > 0); }).sort(function(a,b) { return a.num_joined_members - b.num_joined_members; }); diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 434b4ae545..53ab57fe05 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -202,7 +202,9 @@ input[type=text]:focus, textarea:focus { } .mx_TextInputDialog_input { - color: #747474; - font-weight: 300; font-size: 15px; + border-radius: 3px; + border: 1px solid #f0f0f0; + padding: 9px; + color: #454545; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css index 47db997c38..e8a5eb795b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css @@ -116,6 +116,13 @@ limitations under the License. -webkit-flex: 1; flex: 1; + /* Experimental fix for https://github.com/vector-im/vector-web/issues/947 + and https://github.com/vector-im/vector-web/issues/946. + Empirically this stops the MessagePanel's width exploding outwards when + gemini is in 'prevented' mode + */ + overflow-x: auto; + /* XXX: Hack: apparently if you try to nest a flex-box * within a non-flex-box within a flex-box, the height * of the innermost element gets miscalculated if the diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index b16389ee43..ea1710dac6 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -170,6 +170,10 @@ limitations under the License. cursor: pointer; } +.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image { + object-fit: cover; +} + .mx_UserSettings_avatarPicker_edit { text-align: center; margin-top: 10px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css new file mode 100644 index 0000000000..66a796720d --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css @@ -0,0 +1,23 @@ +/* +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_SetDisplayNameDialog_input { + border-radius: 3px; + border: 1px solid #f0f0f0; + padding: 9px; + color: #454545; + font-size: 15px; +} \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 258364fa76..b2451a5374 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -90,19 +90,21 @@ limitations under the License. /* end of overrides */ /* this is used for the tile for the event which is selected via the URL. - * for now, it is just a crude color; ultimately we probably want some - * transition on here. + * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected { - background-color: #76cfa6; - color: #fff; + border-left: #76cfa6 5px solid; + margin-left: 53px; + padding-left: 7px; } .mx_EventTile_searchHighlight { background-color: #76cfa6; color: #fff; border-radius: 5px; - padding: 4px; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; } .mx_EventTile_searchHighlight a { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index 5844d5f1d7..fb24cc3cec 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -51,14 +51,14 @@ limitations under the License. } .mx_MemberList .mx_SearchableEntityList_expanded { - flex: 1 1 100%; - -webkit-flex: 1 1 100%; + flex: 1 0 0; + -webkit-flex: 1 0 0; } .mx_MemberList_joined { order: 2; - flex: 1 1 50%; - -webkit-flex: 1 1 50%; + flex: 1 0 0; + -webkit-flex: 1 0 0; overflow-y: auto; } 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 78ce5d22aa..664c31703b 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 @@ -184,14 +184,9 @@ limitations under the License. } .mx_RoomHeader_leaveButton { - visibility: hidden; margin-top: -1px; } -.mx_RoomHeader_wrapper:hover .mx_RoomHeader_leaveButton { - visibility: visible; -} - .mx_RoomHeader_placeholder { color: #a2a2a2 ! important; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css index 006882ebb5..172da8eb51 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css @@ -64,7 +64,8 @@ limitations under the License. display: block; } -.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"] { +.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"], +.mx_RoomSettings .mx_RoomSettings_toggles input[type="radio"] { margin-right: 7px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css index 3e88508cd0..0d7639bfca 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css @@ -37,11 +37,13 @@ limitations under the License. .mx_SearchableEntityList_query::-moz-placeholder { color: #454545; opacity: 0.5; + font-size: 12px; } .mx_SearchableEntityList_query::-webkit-input-placeholder { color: #454545; opacity: 0.5; + font-size: 12px; } .mx_SearchableEntityList_listWrapper { diff --git a/src/vector/index.js b/src/vector/index.js index 1d845adf06..0b23955745 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -16,6 +16,10 @@ limitations under the License. 'use strict'; +// for ES6 stuff like startsWith() that Safari doesn't handle +// and babel doesn't do by default +require('babel-polyfill'); + // CSS requires: just putting them here for now as CSS is going to be // refactored soon anyway require('../../vector/components.css'); @@ -94,7 +98,8 @@ function routeUrl(location) { else if (location.hash.indexOf('#/register') == 0) { window.matrixChat.showScreen('register', parseQsFromFragment(location)); } else { - window.matrixChat.showScreen(location.hash.substring(2)); + var hashparts = location.hash.split('?'); + window.matrixChat.showScreen(hashparts[0].substring(2)); } } diff --git a/src/vector/updater.js b/src/vector/updater.js index 0daba7285d..e8d6830d02 100644 --- a/src/vector/updater.js +++ b/src/vector/updater.js @@ -43,7 +43,8 @@ module.exports = { } } }); - req.open("GET", "version"); + var cacheBuster = "?ts=" + new Date().getTime(); + req.open("GET", "version" + cacheBuster); req.send(); // can't suppress 404s from being logged. setTimeout(module.exports.run, POKE_RATE_MS);