operator precedence

.gitignore

@@ -1,3 +1,4 @@
 node_modules
-vector/bundle.*
-lib
+build
+bundle.css
+bundle.js

AUTHORS.rst

@@ -1,9 +0,0 @@
-Vector is written mainly by the Vector team, building upon the Matrix React
-SDK. Vector also welcomes external contributions. Third party contributors
-include:
-
-* Nolan Darilek (https://github.com/ndarilek)
-  Accessibility and semantic markup contributions
-
-* https://github.com/neko259
-  Improved scrollbar CSS

CHANGES.rst

@@ -1,20 +0,0 @@
-Changes in vector v0.1.1 (2015-08-10)
-======================================
-
- * Support logging in with an email address
- * Use the Vector identity server
- * Fix a bug where the client was not stopped properly on logout
- * Fix bugs where field values would be forgotten if login or registration failed
- * Improve URL bar navigation
- * Add explanatory help text on advanced server options
- * Fix a bug which caused execptions on malformed VoIP invitations
- * Remove superfluous scrollbars on Firefox
- * Numerous CSS fixes
- * Improved accessibility
- * Support command-click / middle click to open image in a new tab
- * Improved room directory
- * Fix display of text with many combining unicode points
-
-Changes in vector v0.1.0 (2015-08-10)
-======================================
-Initial release

CONTRIBUTING.rst

@@ -1,4 +0,0 @@
-Contributing code to Vector
-===========================
-
-Vector follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst

README.md

@@ -10,36 +10,138 @@ Getting started
 2. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
 3. Switch to the SDK directory: `cd vector-web`
 4. Install the prerequisites: `npm install`
-5. Start the development builder and a testing server: `npm start`
-6. Wait a few seconds for the initial build to finish.
-7. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
+5. Switch to the example directory: `cd examples/vector`
+6. Install the example app prerequisites: `npm install`
+7. Build the example and start a server: `npm start`
 
-With `npm start`, any changes you make to the source files will cause a rebuild so
-your changes will show up when you refresh.
-
-For production use, run `npm run build` to build all the necessary files
-into the `vector` directory and run your own server.
+Now open http://127.0.0.1:8080/ in your browser to see your newly built
+Vector.
 
 Development
 ===========
-You can work on any of the source files within Vector with the setup above,
-and your changes will cause an instant rebuild. If you also need to make
-changes to the react sdk, you can:
+
+To work on the CSS and Javascript and have the bundle files update as you
+change the source files, you'll need to do two extra things:
 
 1. Link the react sdk package into the example:
-   `npm link path/to/your/react/sdk`
-2. Start the development rebuilder in your react SDK directory:
-   `npm start`
+   `cd vector-web/examples/vector; npm link ../../`
+2. Start a watcher for the CSS files:
+   `cd vector-web; npm run start:css`
 
-If you add or remove any components from the Vector skin, you will need to rebuild
-the skin's index by running, `npm run reskindex`.
+Note that you may need to restart the CSS builder if you add a new file. Note
+that `npm start` builds debug versions of the javascript and CSS, which are
+much larger than the production versions build by the `npm run build` commands.
 
-You may need to run `npm i source-map-loader` in matrix-js-sdk if you get errors
-about "Cannot resolve module 'source-map-loader'" due to shortcomings in webpack.
+IMPORTANT: If you customise components in your application (and hence require
+react from your app) you must be sure to:
 
-Deployment
-==========
+1. Make your app depend on react directly
+2. If you `npm link` matrix-react-sdk, manually remove the 'react' directory
+   from matrix-react-sdk's `node_modules` folder, otherwise browserify will
+   pull in both copies of react which causes the app to break.
 
-Just run `npm build` and then mount the `vector` directory on your webserver to
-actually serve up the app, which is entirely static content.
+How to customise the SDK
+========================
 
+The matrix-react-sdk provides well-defined reusable UI components which may be
+customised/replaced by the developer to build into an app.  A set of consistent
+UI components (View + CSS classes) is called a 'skin' - currently the SDK
+provides a very vanilla whitelabelled 'base skin'.  In future the SDK could
+provide alternative skins (probably by extending the base skin) that provide more
+specific look and feels (e.g. "IRC-style", "Skype-style") etc.  However, unlike
+Wordpress themes and similar, we don't normally expect app developers to define
+reusable skins.  Instead you just go and incorporate your view customisations
+into your actual app.
+
+The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+encourage a very modular and reusable architecture, making it easy to
+customise and use UI widgets independently of the rest of the SDK and your app.
+In practice this means:
+
+ * The UI of the app is strictly split up into a hierarchy of components.
+ 
+ * Each component has its own:
+   * View object defined as a React javascript class containing embedded
+     HTML expressed in React's JSX notation.
+   * CSS file, which defines the styling specific to that component.
+ 
+ * Components are loosely grouped into the 5 levels outlined by atomic design:
+   * atoms: fundamental building blocks (e.g. a timestamp tag)
+   * molecules: "group of atoms which functions together as a unit"
+     (e.g. a message in a chat timeline)
+   * organisms: "groups of molecules (and atoms) which form a distinct section
+     of a UI" (e.g. a view of a chat room)
+   * templates: "a reusable configuration of organisms" - used to combine and
+     style organisms into a well-defined global look and feel
+   * pages: specific instances of templates.
+
+ Good separation between the components is maintained by adopting various best
+ practices that anyone working with the SDK needs to be be aware of and uphold:
+
+  * Views are named with upper camel case (e.g. molecules/MessageTile.js)
+
+  * The view's CSS file MUST have the same name (e.g. molecules/MessageTile.css)
+
+  * Per-view CSS is optional - it could choose to inherit all its styling from
+    the context of the rest of the app, although this is unusual for any but 
+    the simplest atoms and molecules.
+
+  * The view MUST *only* refer to the CSS rules defined in its own CSS file.
+    'Stealing' styling information from other components (including parents)
+    is not cool, as it breaks the independence of the components.
+
+  * CSS classes are named with an app-specific namespacing prefix to try to avoid
+    CSS collisions.  The base skin shipped by Matrix.org with the matrix-react-sdk
+    uses the naming prefix "mx_".  A company called Yoyodyne Inc might use a
+    prefix like "yy_" for its app-specific classes.
+
+  * CSS classes use upper camel case when they describe React components - e.g.
+    .mx_MessageTile is the selector for the CSS applied to a MessageTile view.
+
+  * CSS classes for DOM elements within a view which aren't components are named
+    by appending a lower camel case identifier to the view's class name - e.g.
+    .mx_MessageTile_randomDiv is how you'd name the class of an arbitrary div
+    within the MessageTile view.
+
+  * We deliberately use vanilla CSS 3.0 to avoid adding any more magic
+    dependencies into the mix than we already have.  App developers are welcome
+    to use whatever floats their boat however.
+
+  * The CSS for a component can however override the rules for child components.
+    For instance, .mx_RoomList .mx_RoomTile {} would be the selector to override
+    styles of RoomTiles when viewed in the context of a RoomList view.
+    Overrides *must* be scoped to the View's CSS class - i.e. don't just define
+    .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
+    own CSS.  Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
+    only to the context of RoomList views.  N.B. overrides should be relatively
+    rare as in general CSS inheritence should be enough.
+
+  * Components should render only within the bounding box of their outermost DOM
+    element. Page-absolute positioning and negative CSS margins and similar are
+    generally not cool and stop the component from being reused easily in
+    different places.
+
+  * We don't use the atomify library itself, as React already provides most
+    of the modularity requirements it brings to the table.
+
+With all this in mind, here's how you go about skinning the react SDK UI
+components to embed a Matrix client into your app:
+
+  * Create a new NPM project. Be sure to directly depend on react, (otherwise
+    you can end up with two copies of react).
+  * Create an index.js file that sets up react. Add require statements for
+    React, the ComponentBroker and matrix-react-sdk and a call to Render
+    the root React element as in the examples.
+  * Create React classes for any custom components you wish to add. These
+    can be based off the files in `views` in the `matrix-react-sdk` package,
+    modifying the require() statement appropriately.
+    You only need to copy files you want to customise.
+  * Add a ComponentBroker.set() call for each of your custom components. These
+    must come *before* `require("matrix-react-sdk")`.
+  * Add a way to build your project: we suggest copying the browserify calls
+    from the example projects, but you could use grunt or gulp.
+  * Create an index.html file pulling in your compiled index.js file, the
+    CSS bundle from matrix-react-sdk.
+
+For more specific detail on any of these steps, look at the `custom` example in
+matrix-react-sdk/examples.

config.json

@@ -1,4 +0,0 @@
-{
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im"
-}

docs/conferencing.md

@@ -1,52 +0,0 @@
-# VoIP Conferencing
-
-This is a draft proposal for a naive voice/video conferencing implementation for
-Matrix clients.  There are many possible conferencing architectures possible for
-Matrix (Multipoint Conferencing Unit (MCU); Stream Forwarding Unit (SFU); Peer-
-to-Peer mesh (P2P), etc; events shared in the group room; events shared 1:1;
-possibly even out-of-band signalling).
-
-This is a starting point for a naive MCU implementation which could provide one
-possible Matrix-wide solution in  future, which retains backwards compatibility
-with standard 1:1 calling.
-
- * A client chooses to initiate a conference for a given room by starting a
-   voice or video call with a 'conference focus' user.  This is a virtual user
-   (typically Application Service) which implements a conferencing bridge.  It
-   isn't defined how the client discovers or selects this user.
-
- * The conference focus user MUST join the room in which the client has
-   initiated the conference - this may require the client to invite the
-   conference focus user to the room, depending on the room's `join_rules`. The
-   conference focus user needs to be in the room to let the bridge eject users
-   from the conference who have left the room in which it was initiated, and aid
-   discovery of the conference by other users in the room.  The bridge
-   identifies the room to join based on the user ID by which it was invited.
-   The format of this identifier is implementation dependent for now.
-
- * If a client leaves the group chat room, they MUST be ejected from the
-   conference. If a client leaves the 1:1 room with the conference focus user,
-   they SHOULD be ejected from the conference.
-
- * For now, rooms can contain multiple conference focus users - it's left to
-   user or client implementation to select which to converge on.  In future this
-   could be mediated using a state event (e.g. `im.vector.call.mcu`), but we
-   can't do that right now as by default normal users can't set arbitrary state
-   events on a room.
-
- * To participate in the conference, other clients initiates a standard 1:1
-   voice or video call to the conference focus user.
-
- * For best UX, clients SHOULD show the ongoing voice/video call in the UI
-   context of the group room rather than 1:1 with the focus user.  If a client
-   recognises a conference user present in the room, it MAY chose to highlight
-   this in the UI (e.g. with a "conference ongoing" notification, to aid
-   discovery).  Clients MAY hide the 1:1 room with the focus user (although in
-   future this room could be used for floor control or other direct
-   communication with the conference focus)
-
- * When all users have left the conference, the 'conference focus' user SHOULD
-   leave the room.
-
- * If a conference focus user joins a room but does not receive a 1:1 voice or
-   video call, it SHOULD time out after a period of time and leave the room.

examples/custom/CustomMTextTile.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 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 MTextTileController = require("matrix-react-sdk/src/controllers/molecules/MTextTile");
+
+module.exports = React.createClass({
+    displayName: 'MTextTile',
+    mixins: [MTextTileController],
+
+    render: function() {
+        var content = this.props.mxEvent.getContent();
+        return (
+            <span ref="content" className="mx_MTextTile mx_MessageTile_content" onClick={this.onClick}>
+                {content.body}
+            </span>
+        );
+    },
+
+    onClick: function(ev) {
+        global.alert(this.props.mxEvent.getContent().body);
+    }
+});
+

examples/custom/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+An example of how to use the Matrix React SDK to build a more customised app

examples/custom/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" style="height: 100%; overflow: hidden">
+  <head>
+    <meta charset="utf-8">
+    <title>Matrix React SDK Custom Example</title>
+  </head>
+  <body style="height: 100%; ">
+    <section id="matrixchat" style="height: 100%; "></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
+  </body>
+</html>

examples/custom/index.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 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';
+
+// Remember to make your project depend on react directly as soon as
+// you add a require('react') to any file in your project. Do not rely
+// on react being pulled in via matrix-react-sdk: browserify breaks
+// horribly in this situation and can end up pulling in multiple copies
+// of react.
+var React = require("react");
+
+// We pull in the component broker first, separately, as we need to replace
+// components before the SDK loads.
+var ComponentBroker = require("matrix-react-sdk/src/ComponentBroker");
+
+var CustomMTextTile = require('./CustomMTextTile');
+
+ComponentBroker.set('molecules/MTextTile', CustomMTextTile);
+
+var MatrixReactSdk = require("matrix-react-sdk");
+//var MatrixReactSdk = require("../../src/index");
+
+React.render(
+    <MatrixReactSdk.MatrixChat />,
+    document.getElementById('matrixchat')
+);

examples/custom/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "npm-css": "^0.2.3",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify -t [ envify --NODE_ENV production ] -g reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell 'watchify -v -d -g reactify index.js -o bundle.js' 'http-server'"
+  },
+  "dependencies": {
+    "react": "^0.13.3"
+  }
+}

examples/vector/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+A simple example of how to use the Matrix React SDK

examples/vector/fonts

@@ -0,0 +1 @@
+../../skins/base/fonts/

examples/vector/img

@@ -0,0 +1 @@
+../../skins/base/img

examples/vector/index.html

@@ -41,6 +41,6 @@
     </audio>
     <section id="matrixchat" style="height: 100%;"></section>
     <script src="bundle.js"></script>
-    <link rel="stylesheet" href="bundle.css">
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
   </body>
 </html>

examples/vector/index.js

@@ -17,59 +17,45 @@ limitations under the License.
 'use strict';
 
 var React = require("react");
-var sdk = require("matrix-react-sdk");
-sdk.loadSkin(require('../skins/vector/skindex'));
-sdk.loadModule(require('../modules/VectorConferenceHandler'));
-
-var qs = require("querystring");
-
-var lastLocationHashSet = null;
-
-
-// We want to support some name / value pairs in the fragment
-// so we're re-using query string like format
-function parseQsFromFragment(location) {
-    var hashparts = location.hash.split('?');
-    if (hashparts.length > 1) {
-        return qs.parse(hashparts[1]);
-    }
-    return {};
-}
+// In normal usage of the module:
+//var MatrixReactSdk = require("matrix-react-sdk");
+// Or to import the source directly from the file system:
+// (This is useful for debugging the SDK as it seems source
+// maps cannot pass through two stages).
+var MatrixReactSdk = require("../../src/index");
 
 // Here, we do some crude URL analysis to allow
 // deep-linking. We only support registration
 // deep-links in this example.
 function routeUrl(location) {
     if (location.hash.indexOf('#/register') == 0) {
-        window.matrixChat.showScreen('register', parseQsFromFragment(location));
-    } else if (location.hash.indexOf('#/login/cas') == 0) {
-        window.matrixChat.showScreen('cas_login', parseQsFromFragment(location));
+        var hashparts = location.hash.split('?');
+        var params = {};
+        if (hashparts.length == 2) {
+            var pairs = hashparts[1].split('&');
+            for (var i = 0; i < pairs.length; ++i) {
+                var parts = pairs[i].split('=');
+                if (parts.length != 2) continue;
+                params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+            }
+        }
+        window.matrixChat.showScreen('register', params);
     } else {
         window.matrixChat.showScreen(location.hash.substring(2));
     }
 }
 
 function onHashChange(ev) {
-    if (decodeURIComponent(window.location.hash) == lastLocationHashSet) {
-        // we just set this: no need to route it!
-        return;
-    }
     routeUrl(window.location);
 }
 
 var loaded = false;
-var lastLoadedScreen = null;
 
 // This will be called whenever the SDK changes screens,
 // so a web page can update the URL bar appropriately.
 var onNewScreen = function(screen) {
-    if (!loaded) {
-        lastLoadedScreen = screen;
-    } else {
-        var hash = '#/' + screen;
-        lastLocationHashSet = hash;
-        window.location.hash = hash;
-    }
+    if (!loaded) return;
+    window.location.hash = '#/'+screen;
 }
 
 // We use this to work out what URL the SDK should
@@ -84,9 +70,8 @@ var makeRegistrationUrl = function() {
            '#/register';
 }
 
-var MatrixChat = sdk.getComponent('pages.MatrixChat');
 window.matrixChat = React.render(
-    <MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
+    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
     document.getElementById('matrixchat')
 );
 
@@ -94,9 +79,5 @@ window.addEventListener('hashchange', onHashChange);
 window.onload = function() {
     routeUrl(window.location);
     loaded = true;
-    if (lastLoadedScreen) {
-        onNewScreen(lastLoadedScreen);
-        lastLoadedScreen = null;
-    }
 }
 

examples/vector/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify --ignore olm -t [ envify --NODE_ENV production ] -t reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell \"watchify --ignore olm -v -d -t reactify index.js -o bundle.js\" \"http-server\""
+  }
+}

package.json

@@ -1,48 +1,40 @@
 {
-  "name": "vector-web",
+  "name": "matrix-react-sdk",
   "version": "0.0.1",
-  "description": "Vector webapp",
+  "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vector-im/vector-web"
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
   },
   "license": "Apache-2.0",
+  "main": "src/index.js",
   "style": "bundle.css",
   "scripts": {
-    "reskindex": "reskindex vector -h src/skins/vector/header",
-    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.css -c uglifycss --no-watch",
-    "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",
-    "start:js": "webpack -w src/vector/index.js vector/bundle.js",
-    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.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\"",
-    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "build:skins": "jsx skins build/skins",
+    "build:logic": "jsx src build/src",
+    "build:js": "npm run build:skins && npm run build:logic",
+    "start:js": "jsx -w skins/base/views/ build --source-map-inline",
+    "build:css": "catw 'skins/base/css/**/*.css' -o bundle.css -c uglifycss --no-watch",
+    "start:css": "catw 'skins/base/css/**/*.css' -o bundle.css -v",
+    "build": "npm run build:js && npm run build:css",
+    "start": "parallelshell \"npm run start:js\" \"npm run start:css\"",
+    "prepublish": "npm run build"
   },
   "dependencies": {
     "classnames": "^2.1.2",
     "filesize": "^3.1.2",
-    "flux": "~2.0.3",
-    "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.2.2",
-    "matrix-react-sdk": "^0.0.1",
+    "flux": "^2.0.3",
+    "matrix-js-sdk": "git://github.com/matrix-org/matrix-js-sdk.git#no-trickle-ice",
     "q": "^1.4.1",
     "react": "^0.13.3",
-    "react-loader": "^1.4.0"
+    "react-loader": "^1.4.0",
+    "linkifyjs": "^2.0.0-beta.4"
   },
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
-    "http-server": "^0.8.4",
-    "json-loader": "^0.5.3",
     "parallelshell": "^1.2.0",
-    "rimraf": "^2.4.3",
-    "source-map-loader": "^0.1.5",
+    "react-tools": "^0.13.3",
     "uglifycss": "0.0.15"
   }
 }

skins/base/css/common.css

@@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-html {
-    /* hack to stop overscroll bounce on OSX and iOS.
-       N.B. Breaks things when we have legitimate horizontal overscroll */
-    height: 100%;
-    overflow: hidden;
-}
-
 body {
     font-family: 'Lato', Helvetica, Arial, Sans-Serif;
     font-size: 16px;
@@ -41,46 +34,18 @@ h2 {
     margin-bottom: 16px;
 }
 
-a:hover,
-a:link,
-a:visited {
-    color: #80CEF4;
+/* FIXME: show them on hoverover, and fix for firefox */
+::-webkit-scrollbar {
+    display: none;
 }
 
-.mx_ContextualMenu_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1.0;
-    z-index: 2000;
+html {
+    overflow: -moz-scrollbars-none;
 }
 
-.mx_ContextualMenu {
-    border: 1px solid #a9dbf4;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #747474;
-    position: fixed;
-    z-index: 2001;
-    padding: 6px;
-}
+/* FIXME: why is all the dialog stuff in here rather than in per-component files? */
 
-.mx_ContextualMenu_chevron {
-    padding: 12px;
-    position: absolute;
-    right: -21px;
-    top: 0px;
-}
-
-.mx_ContextualMenu_field {
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-}
-
-
-.mx_Dialog_background {
+.mx_Dialog_Background {
     position: fixed;
     top: 0;
     left: 0;
@@ -91,7 +56,7 @@ a:visited {
     z-index: 2000;
 }
 
-.mx_Dialog_wrapper {
+.mx_Dialog_Wrapper {
     position: fixed;
     top: 0;
     left: 0;
@@ -118,7 +83,6 @@ a:visited {
     font-size: 16px;
     position: relative;
     border-radius: 8px;
-    max-width: 75%;
 }
 
 .mx_ImageView {
@@ -157,4 +121,4 @@ a:visited {
     font-weight: bold;
     font-size: 20px;
     line-height: 1.4;
-}
+}

skins/base/css/hide.css

@@ -1,6 +1,7 @@
 .mx_RoomDropTarget,
 .mx_RoomList_favourites_label,
 .mx_RoomList_archive_label,
+.mx_LeftPanel_hideButton,
 .mx_RoomHeader_search,
 .mx_RoomSettings_encrypt,
 .mx_CreateRoom_encrypt,

skins/base/css/molecules/MImageTile.css

@@ -14,3 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MImageTile {
+}
+

skins/base/css/molecules/MatrixToolbar.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
+    width: 100%;
     text-align: center;
     background-color: #ff0064;
     color: #fff;
@@ -24,11 +25,4 @@ limitations under the License.
 
 .mx_MatrixToolbar button {
     margin-left: 12px;
-}
-
-.mx_MatrixToolbar_close {
-    float: right;
-    margin-top: 3px;
-    margin-right: 12px;
-    cursor: pointer;
 }

skins/base/css/molecules/MemberInfo.css

@@ -0,0 +1,73 @@
+/*
+Copyright 2015 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_MemberInfo {
+    text-align: center;
+    border: 1px solid #a9dbf4;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    width: 200px;
+    margin-left: -295px;
+    margin-top: 0px;
+    z-index: 1000;
+    padding: 6px;
+}
+
+.mx_MemberInfo_chevron {
+    padding: 12px;
+    position: absolute;
+    right: -21px;
+    top: 0px;
+}
+
+/*
+ * a hacky shim to extend the hitmask of the overlay to overlap
+ * better with the main menu itself
+ */
+.mx_MemberInfo_shim {
+    position: absolute;
+    left: 212px;
+    width: 40px;
+    height: 100%;
+}
+
+.mx_MemberInfo_avatar {
+    padding: 6px;
+}
+
+.mx_MemberInfo_avatarImg {
+    border-radius: 128px;
+}
+
+.mx_MemberInfo_field {
+    padding: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_MemberInfo_button {
+    vertical-align: middle;
+    max-width: 100px;
+    height: 36px;
+    background-color: #50e3c2;
+    line-height: 36px;
+    border-radius: 36px;
+    color: #fff;
+    margin: auto;
+    margin-top: 6px;
+    margin-bottom: 6px;
+}

skins/base/css/molecules/MemberTile.css

@@ -15,14 +15,13 @@ limitations under the License.
 */
 
 .mx_MemberTile {
+    cursor: pointer;
     display: table-row;
     height: 49px;
-    position: relative;
 }
 
 .mx_MemberTile_avatar {
     display: table-cell;
-    padding-left: 14px;
     padding-right: 12px;
     padding-top: 3px;
     padding-bottom: 3px;
@@ -32,8 +31,10 @@ limitations under the License.
     position: relative;
 }
 
-.mx_MemberTile_inviteTile {
-    cursor: pointer;
+.mx_MemberTile_avatarImg {
+    z-index: 20;
+    border-radius: 20px;
+    background-color: #dbdbdb;
 }
 
 .mx_MemberTile_inviteEditing {
@@ -55,14 +56,14 @@ limitations under the License.
     font-size: 14px;
     padding: 9px;
     margin-top: 6px;
-    margin-left: 14px;
 }
 
 .mx_MemberTile_power {
+    z-index: 10;
     position: absolute;
     width: 48px;
     height: 48px;
-    left: 10px;
+    left: -4px;
     top: -1px;
 }
 
@@ -73,33 +74,6 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_details {
-    display: table-cell;
-    padding-right: 14px;
-    vertical-align: middle;
-}
-
-.mx_MemberTile_hover {
-    background-color: #f0f0f0;
-    font-size: 12px;
-    color: #747474;    
-}
-
-.mx_MemberTile_userId {
-    font-weight: bold;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mx_MemberTile_leave {
-    cursor: pointer;
-    margin-top: 8px;
-    margin-right: -4px;
-    margin-left: 6px;
-    float: right;
-}
-
-/*
 .mx_MemberTile_nameWrapper {
     display: table-cell;
     vertical-align: middle;
@@ -109,26 +83,25 @@ limitations under the License.
 
 .mx_MemberTile_nameSpan {
 }
-*/
 
 .mx_MemberTile_unavailable .mx_MemberTile_avatar,
 .mx_MemberTile_unavailable .mx_MemberTile_name,
 .mx_MemberTile_unavailable .mx_MemberTile_nameSpan
 {
-    opacity: 0.66;
+    opacity: 0.75;
 }
 
 .mx_MemberTile_offline .mx_MemberTile_avatar,
 .mx_MemberTile_offline .mx_MemberTile_name,
 .mx_MemberTile_offline .mx_MemberTile_nameSpan
 {
-    opacity: 0.25;
+    opacity: 0.5;
 }
 
 .mx_MemberTile_zalgo {
     font-family: Helvetica, Arial, Sans-Serif;
 }
 
-.mx_MemberTile:hover .mx_MessageTimestamp {
-    display: block;
+.mx_MemberTile_leave {
+    float: right;
 }

skins/base/css/molecules/MessageTile.css

@@ -72,7 +72,7 @@ limitations under the License.
 }
 
 .mx_MessageTile_highlight {
-    color: #FF0064;
+    color: #00f;
 }
 
 .mx_MessageTile_msgOption {
@@ -90,22 +90,3 @@ limitations under the License.
 .mx_MessageTile:hover .mx_MessageTimestamp {
     display: block;
 }
-
-.mx_MessageTile_editButton {
-    float: right;
-    display: none;
-    border: 0px;
-    outline: none;
-}
-
-.mx_MessageTile:hover .mx_MessageTile_editButton {
-    display: inline-block;
-}
-
-.mx_MessageTile.menu .mx_MessageTile_editButton {
-    display: inline-block;
-}
-
-.mx_MessageTile.menu .mx_MessageTimestamp {
-    display: inline-block;
-}

skins/base/css/molecules/RoomHeader.css

@@ -40,7 +40,6 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 1;
     flex: 1;
 }
 
@@ -60,15 +59,9 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
-    cursor: pointer;
-
-/*  
     -webkit-flex: 0 0 90px;
     flex: 0 0 90px;
-*/
-    padding-left: 12px;
-    padding-right: 12px;
-    }
+}
 
 .mx_RoomHeader_rightRow {
     height: 48px;
@@ -95,7 +88,7 @@ limitations under the License.
     color: #80cef4;
     font-weight: 400;
     font-size: 20px;
-    overflow: hidden;
+    overflow: scroll;
     text-overflow: ellipsis;
 }
 
@@ -116,16 +109,13 @@ limitations under the License.
     margin-top: -5px;
 }
 
-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
+.mx_RoomHeader_nameInput {
     border-radius: 3px;
     width: 260px;
     border: 1px solid #c7c7c7;
     font-weight: 300;
     font-size: 14px;
     padding: 9px;
-}
-
-.mx_RoomHeader_nameInput {
     margin-top: 6px;
 }
 
@@ -137,8 +127,7 @@ limitations under the License.
     font-weight: 300;  
     padding-left: 16px;
     padding-right: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    overflow-y: scroll;
 }
 
 .mx_RoomHeader_avatar {
@@ -163,11 +152,3 @@ limitations under the License.
 .mx_RoomHeader_button img {
     cursor: pointer;
 }
-
-.mx_RoomHeader_voipButton {
-    display: table-cell;
-}
-
-.mx_RoomHeader_voipButtons {
-    margin-top: 18px;
-}

skins/base/css/molecules/RoomTile.css

@@ -22,13 +22,13 @@ limitations under the License.
 
 .mx_RoomTile_avatar {
     display: table-cell;
-    padding-right: 10px;
+    padding-right: 12px;
     padding-top: 3px;
     padding-bottom: 3px;
-    padding-left: 10px;
+    padding-left: 16px;
     vertical-align: middle;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     position: relative;
 }
 
@@ -45,10 +45,6 @@ limitations under the License.
     padding-right: 16px;    
 }
 
-.collapsed .mx_RoomTile_name {
-    display: none;
-}
-
 /*
 .mx_RoomTile_nameBadge {
     display: table;

skins/base/css/organisms/LeftPanel.css

@@ -29,9 +29,7 @@ limitations under the License.
 .mx_LeftPanel_hideButton {
     position: absolute;
     top: 10px;
-    right: 0px;
-    padding: 8px;
-    cursor: pointer;
+    right: 10px;
 }
 
 .mx_LeftPanel .mx_RoomList {
@@ -41,8 +39,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    overflow-y: auto;
-    -webkit-flex: 1 1 0;
+    overflow-y: scroll;
     flex: 1 1 0;
 }
 
@@ -63,6 +60,10 @@ limitations under the License.
     color: #378bb4;
 }
 
+.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar {
+    padding-left: 14px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
     margin-top: 12px;
     width: 100%;

skins/base/css/organisms/MemberList.css

@@ -40,12 +40,12 @@ limitations under the License.
 
 .mx_MemberList_border {
     border: 1px solid #a9dbf4;
-    overflow-y: auto;
+    overflow-y: scroll;
     border-radius: 8px;
+    padding: 20px 14px 14px 24px;
     background-color: #fff;
 
     order: 1;
-    -webkit-flex: 1 1 0;
     flex: 1 1 0px;
 }
 
@@ -56,5 +56,5 @@ limitations under the License.
 }
 
 .mx_MemberList h2 {
-    margin: 14px;
+    margin-top: 0px;
 }

skins/base/css/organisms/RoomDirectory.css

@@ -32,7 +32,6 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_list {
-    -webkit-flex: 1;    
     flex: 1;
 
     display: -webkit-box;
@@ -57,8 +56,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_tableWrapper {
-    overflow-y: auto;
-    -webkit-flex: 1 1 0;    
+    overflow-y: scroll;
     flex: 1 1 0;
 }
 

skins/base/css/organisms/RoomList.css

@@ -27,5 +27,4 @@ limitations under the License.
 .mx_RoomList h2 {
     padding-left: 16px;
     padding-right: 16px;
-    padding-bottom: 10px;
 }

skins/base/css/organisms/RoomView.css

@@ -40,42 +40,6 @@ limitations under the License.
     flex: 0 0 88px;
 }
 
-.mx_RoomView_fileDropTarget {
-    min-width: 0px;
-    max-width: 720px;
-    width: 100%;
-    font-size: 20px;
-    text-align: center;
-
-    pointer-events: none;
-
-    padding-left: 12px;
-    padding-right: 12px;
-    margin-left: -12px;
-
-    -webkit-border-top-left-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -moz-border-radius-topleft: 10px;
-    -moz-border-radius-topright: 10px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 2px dashed #80cef4;
-    border-bottom: none;
-    position: absolute;
-    top: 88px;
-    bottom: 0px;
-    z-index: 3000;
-}
-
-.mx_RoomView_fileDropTargetLabel {
-    top: 50%;
-    width: 100%;
-    margin-top: -50px;
-    position: absolute;
-}
-
 .mx_RoomView_auxPanel {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
@@ -88,9 +52,9 @@ limitations under the License.
     width: 100%;
     margin: auto;
 
-    overflow: auto;
     border-bottom: 1px solid #a8dbf3;
 
+    overflow: scroll;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }
@@ -106,8 +70,10 @@ limitations under the License.
     flex: 1 1 0;
 
     width: 100%;
+    margin-top: 18px;
+    margin-bottom: 18px;
 
-    overflow-y: auto;
+    overflow-y: scroll;
 }
 
 .mx_RoomView_messageListWrapper {
@@ -117,12 +83,6 @@ limitations under the License.
 
 .mx_RoomView_MessageList {
     width: 100%;
-    list-style-type: none;
-    padding: 0px;
-}
-
-.mx_RoomView_MessageList li {
-    clear: both;
 }
 
 .mx_RoomView_MessageList h2 {
@@ -167,22 +127,6 @@ limitations under the License.
     border-top: 1px solid #a8dbf3;
 }
 
-.mx_RoomView_unreadMessagesBar {
-    margin-top: 13px;
-    color: #fff;
-    font-weight: bold;
-    background-color: #ff0064;
-    border-radius: 30px;
-    height: 30px;
-    line-height: 30px;
-    cursor: pointer;
-}
-
-.mx_RoomView_unreadMessagesBar img {
-    padding-left: 22px;
-    padding-right: 22px;
-}
-
 .mx_RoomView_typingBar {
     margin-top: 17px;
     margin-left: 56px;
@@ -212,44 +156,11 @@ limitations under the License.
 
 .mx_RoomView_uploadProgressOuter {
     width: 100%;
-    background-color: rgba(169, 219, 244, 0.5);
-    height: 4px;
+    background-color: black;
+    height: 5px;
 }
 
 .mx_RoomView_uploadProgressInner {
-    background-color: #80cef4;
-    height: 4px;
+    background-color: blue;
+    height: 5px;
 }
-
-.mx_RoomView_uploadFilename {
-    margin-top: 15px;
-    margin-left: 56px;
-}
-
-.mx_RoomView_uploadIcon {
-    float: left;
-    margin-top: 6px;
-    margin-left: 5px;
-}
-
-.mx_RoomView_uploadCancel {
-    float: right;
-    margin-top: 6px;
-    margin-right: 10px;
-}
-
-.mx_RoomView_uploadBytes {
-    float: right;    
-    opacity: 0.5;
-    margin-top: 15px;
-    margin-right: 10px;
-}
-
-.mx_RoomView_ongoingConfCallNotification {
-    width: 100%;
-    text-align: center;
-    background-color: #ff0064;
-    color: #fff;
-    font-weight: bold;
-    padding: 6px;
-}

skins/base/css/pages/MatrixChat.css

@@ -73,11 +73,6 @@ limitations under the License.
     flex: 0 0 230px;
 }
 
-.mx_MatrixChat .mx_LeftPanel.collapsed {
-    -webkit-flex: 0 0 60px;
-    flex: 0 0 60px;
-}
-
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
@@ -88,9 +83,7 @@ limitations under the License.
     padding-left: 12px;
     padding-right: 12px;
     background-color: #f3f8fa;
-
-    -webkit-flex: 1;
-    flex: 1;
+    width: 100%;
 
     /* XXX: Hack: apparently if you try to nest a flex-box
      * within a non-flex-box within a flex-box, the height
@@ -118,8 +111,3 @@ limitations under the License.
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
 }
-
-.mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 72px;
-    flex: 0 0 72px;
-}

skins/base/css/templates/Login.css

@@ -17,6 +17,15 @@ limitations under the License.
 .mx_Login {
     width: 100%;
     height: 100%;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
 }
 
 .mx_Login h2 {
@@ -28,8 +37,6 @@ limitations under the License.
 
 .mx_Login_box {
     width: 300px;
-    margin: auto;
-    padding-top: 100px;
 }
 
 .mx_Login_logo {
@@ -75,36 +82,14 @@ limitations under the License.
     opacity: 0.8;
 }
 
-.mx_Login_create:link {
-    color: #4a4a4a;
-}
-
-.mx_Login_links {
-    display: block;
-    text-align: center;
-    width: 100%;
-    font-size: 14px;
-    opacity: 0.8;
-}
-
-.mx_Login_links a:link {
-   color: #4a4a4a;
-}
-
-.mx_Login_loader {
-    position: absolute;
-    left: 50%;
-    margin-top: 12px;
-}
-
 .mx_Login_error {
     color: #ff2020;
     font-weight: bold;
     text-align: center;
-/*
-    height: 24px;
-*/
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-bottom: 24px;
+}
+
+.mx_Login_create:link {
+    color: #4a4a4a;
 }