diff --git a/.gitignore b/.gitignore index 5b2b6daf..0d9bc9d5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ /cert.pem -/.DS_Store /karma-reports /key.pem /lib @@ -8,3 +7,4 @@ /vector/bundle.* /vector/components.css /vector/config.json +.DS_Store diff --git a/README.md b/README.md index ba8ad940..540c5750 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,13 @@ 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 @@ -19,10 +23,10 @@ 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` +1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 1. Switch to the vector directory: `cd vector-web` 1. Install the prerequisites: `npm install` 1. If you are using the `develop` branch of vector, you will probably need to @@ -49,19 +53,73 @@ 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 +======================== + +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 =========== +Before attempting to develop on Vector you **must** read the developer guide +for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which +also defines the design, architecture and style for Vector too. + +The idea of Vector is to be a relatively lightweight "skin" of customisations on +top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the +higher and lower level React components useful for building Matrix communication +apps using React. + +After creating a new component you must run `npm run reskindex` to regenerate +the `component-index.js` for the app (used in future for skinning) + +**However, as of July 2016 this layering abstraction is broken due to rapid +development on Vector forcing `matrix-react-sdk` to move fast at the expense of +maintaining a clear abstraction between the two.** Hacking on Vector inevitably +means hacking equally on `matrix-react-sdk`, and there are bits of +`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project +(e.g. matrix-react-sdk specific CSS), and a bunch of Vector specific behaviour +in the `matrix-react-sdk` (grep for Vector). This separation problem will be +solved asap once development on Vector (and thus matrix-react-sdk) has +stabilised. Until then, the two projects should basically be considered as a +single unit. In particular, `matrix-react-sdk` issues are currently filed +against `vector-web` in github. + +Please note that Vector is intended to run correctly without access to the public +internet. So please don't depend on resources (JS libs, CSS, images, fonts) +hosted by external CDNs or servers but instead please package all dependencies +into Vector itself. + +Setting up a dev environment +============================ + Much of the functionality in Vector is actually in the `matrix-react-sdk` and `matrix-js-sdk` modules. It is possible to set these up in a way that makes it easy to track the `develop` branches in git and to make local changes without having to manually rebuild each time. -[Be aware that there may be problems with this process under npm version 3.] - First clone and build `matrix-js-sdk`: 1. `git clone git@github.com:matrix-org/matrix-js-sdk.git` @@ -115,6 +173,37 @@ will watch for changes to the files and rebuild automatically. 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`. +Filing issues +============= + +All issues for Vector-web and Matrix-react-sdk should be filed at +https://github.com/matrix-org/matrix-react-sdk/issues + +Triaging issues +=============== + +Issues will be triaged by the core team using the following primary set of tags: + +priority: + P1: top priority; typically blocks releases. + P2: one below that + P3: non-urgent + P4/P5: bluesky some day, who knows. + +bug or feature: + bug severity: + * cosmetic - feature works functionally but UI/UX is broken. + * critical - whole app doesn't work + * major - entire feature doesn't work + * minor - partially broken feature (but still usable) + + * release blocker + + * ui/ux (think of this as cosmetic) + + * network (specific to network conditions) + * platform (platform specific) + Enabling encryption =================== @@ -123,10 +212,7 @@ day-to-day use; it is experimental and should be considered only as a proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview of the current progress. -To build a version of vector with support for end-to-end encryption, install -the olm module with `npm i https://matrix.org/packages/npm/olm/olm-0.1.0.tgz` -before running `npm start`. The olm library will be detected and used if -available. +Vector is built with support for end-to-end encryption by default. To enable encryption for a room, type @@ -142,4 +228,4 @@ Note that historical encrypted messages cannot currently be decoded - history is therefore lost when the page is reloaded. There is currently no visual indication of whether encryption is enabled for a -room, or whether a particular message was encrypted. +room. diff --git a/package.json b/package.json index bd4c1115..e00505c5 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" @@ -39,7 +40,7 @@ "extract-text-webpack-plugin": "^0.9.1", "filesize": "^3.1.2", "flux": "~2.0.3", - "gemini-scrollbar": "matrix-org/gemini-scrollbar#87ebaa7", + "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279", "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.0.0-beta.4", @@ -47,11 +48,11 @@ "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop", "modernizr": "^3.1.0", "q": "^1.4.1", - "react": "^15.0.1", + "react": "^15.2.1", "react-dnd": "^2.1.4", "react-dnd-html5-backend": "^2.1.2", - "react-dom": "^15.0.1", - "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e", + "react-dom": "^15.2.1", + "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "sanitize-html": "^1.11.1" }, "devDependencies": { @@ -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,10 +76,13 @@ "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" + }, + "optionalDependencies": { + "olm": "https://matrix.org/packages/npm/olm/olm-1.0.0.tgz" } } diff --git a/scripts/staticfiles.js b/scripts/staticfiles.js new file mode 100755 index 00000000..3dbf451c --- /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/src/component-index.js b/src/component-index.js index d7d9c970..e9cce7f7 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,7 +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.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget'); module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip'); diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index ae49a347..d36966d2 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/components/structures/CompatibilityPage.js b/src/components/structures/CompatibilityPage.js index 70bc7f4b..c84c8318 100644 --- a/src/components/structures/CompatibilityPage.js +++ b/src/components/structures/CompatibilityPage.js @@ -45,8 +45,8 @@ module.exports = React.createClass({ available or experimental in your current browser.

- Please install Chrome for - the best experience. Firefox, + Please install Chrome or + Firefox for the best experience. Safari and Opera work too.

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 431bdba5..ca9376e1 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/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 761b0e45..e4a8524b 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -52,6 +52,18 @@ module.exports = React.createClass({ }, componentDidMount: function() { + this.getPublicRooms(); + }, + + componentWillUnmount: function() { + // dis.dispatch({ + // action: 'ui_opacity', + // sideOpacity: 1.0, + // middleOpacity: 1.0, + // }); + }, + + getPublicRooms: function() { var self = this; MatrixClientPeg.get().publicRooms(function (err, data) { if (err) { @@ -68,35 +80,79 @@ module.exports = React.createClass({ publicRooms: data.chunk, loading: false, }); - self.forceUpdate(); } }); }, - componentWillUnmount: function() { - // dis.dispatch({ - // action: 'ui_opacity', - // sideOpacity: 1.0, - // middleOpacity: 1.0, - // }); + /** + * A limited interface for removing rooms from the directory. + * Will set the room to not be publicly visible and delete the + * default alias. In the long term, it would be better to allow + * HS admins to do this through the RoomSettings interface, but + * this needs SPEC-417. + */ + removeFromDirectory: function(room) { + var alias = get_display_alias_for_room(room); + var name = room.name || alias || "Unnamed room"; + + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + + var desc; + if (alias) { + desc = `Delete the room alias '${alias}' and remove '${name}' from the directory?`; + } else { + desc = `Remove '${name}' from the directory?`; + } + + Modal.createDialog(QuestionDialog, { + title: "Remove from Directory", + description: desc, + onFinished: (should_delete) => { + if (!should_delete) return; + + var Loader = sdk.getComponent("elements.Spinner"); + var modal = Modal.createDialog(Loader); + var step = `remove '${name}' from the directory.`; + + MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => { + if (!alias) return; + step = 'delete the alias.'; + return MatrixClientPeg.get().deleteAlias(alias); + }).done(() => { + modal.close(); + this.getPublicRooms(); + }, function(err) { + modal.close(); + this.getPublicRooms(); + Modal.createDialog(ErrorDialog, { + title: "Failed to "+step, + description: err.toString() + }); + }); + } + }); }, - showRoom: function(roomId, roomAlias) { - // extract the metadata from the publicRooms structure to pass - // as out-of-band data to view_room, because we get information - // here that we can't get other than by joining the room in some - // cases. - var room; - if (roomId) { - for (var i = 0; i < this.state.publicRooms.length; ++i) { - if (this.state.publicRooms[i].room_id == roomId) { - room = this.state.publicRooms[i]; - break; - } - } + onRoomClicked: function(room, ev) { + if (ev.shiftKey) { + ev.preventDefault(); + this.removeFromDirectory(room); + } else { + this.showRoom(room); } - var oob_data = {}; + }, + + showRoomAlias: function(alias) { + this.showRoom(null, alias); + }, + + showRoom: function(room, room_alias) { + var payload = {action: 'view_room'}; if (room) { + // Don't let the user view a room they won't be able to either + // peek or join: fail earlier so they don't have to click back + // to the directory. if (MatrixClientPeg.get().isGuest()) { if (!room.world_readable && !room.guest_can_join) { var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog"); @@ -108,26 +164,25 @@ module.exports = React.createClass({ } } - oob_data = { + if (!room_alias) { + room_alias = get_display_alias_for_room(room); + } + + payload.oob_data = { avatarUrl: room.avatar_url, // XXX: This logic is duplicated from the JS SDK which // would normally decide what the name is. - name: room.name || room.canonical_alias || (room.aliases ? room.aliases[0] : "Unnamed room"), + name: room.name || room_alias || "Unnamed room", }; } - - var payload = { - oob_data: oob_data, - action: 'view_room', - }; // It's not really possible to join Matrix rooms by ID because the HS has no way to know // which servers to start querying. However, there's no other way to join rooms in // this list without aliases at present, so if roomAlias isn't set here we have no // choice but to supply the ID. - if (roomAlias) { - payload.room_alias = roomAlias; + if (room_alias) { + payload.room_alias = room_alias; } else { - payload.room_id = roomId; + payload.room_id = room.room_id; } dis.dispatch(payload); }, @@ -150,8 +205,7 @@ module.exports = React.createClass({ var self = this; var guestRead, guestJoin, perms; for (var i = 0; i < rooms.length; i++) { - var alias = rooms[i].canonical_alias || (rooms[i].aliases ? rooms[i].aliases[0] : ""); - var name = rooms[i].name || alias || "Unnamed room"; + var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room"; guestRead = null; guestJoin = null; @@ -175,7 +229,11 @@ module.exports = React.createClass({ topic = linkifyString(sanitizeHtml(topic)); rows.unshift( - + {ev.preventDefault();}} + > -
{ alias }
+
{ get_display_alias_for_room(rooms[i]) }
{ rooms[i].num_joined_members } @@ -204,7 +262,7 @@ module.exports = React.createClass({ this.forceUpdate(); this.setState({ roomAlias : this.refs.roomAlias.value }) if (ev.key == "Enter") { - this.showRoom(null, this.refs.roomAlias.value); + this.showRoomAlias(this.refs.roomAlias.value); } }, @@ -224,8 +282,7 @@ module.exports = React.createClass({
- + { this.getRows(this.state.roomAlias) } @@ -237,3 +294,9 @@ module.exports = React.createClass({ ); } }); + +// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom +// but works with the objects we get from the public room list +function get_display_alias_for_room(room) { + return room.canonical_alias || (room.aliases ? room.aliases[0] : ""); +} diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 497acdec..a5a6fd21 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? diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 5e5a19e6..7fc51000 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -94,7 +94,7 @@ module.exports = React.createClass({ , +
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 new file mode 100644 index 00000000..51ab3de8 --- /dev/null +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -0,0 +1,150 @@ +/* +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 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', + + 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, + }; + }, + + _save: function( isMuted ) { + var self = this; + const roomId = this.props.room.roomId; + var cli = MatrixClientPeg.get(); + + if (!cli.isGuest()) { + cli.setRoomMutePushRule( + "global", roomId, isMuted + ).then(function() { + 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(); + }; + }); + }).fail(function(error) { + // TODO: some form of error notification to the user + // to inform them that their state change failed. + }); + } + }, + + _onClickAlertMe: function() { + // Placeholder + }, + + _onClickAllNotifs: function() { + this._save(false); + }, + + _onClickMentions: function() { + // Placeholder + }, + + _onClickMute: function() { + this._save(true); + }, + + 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, + }); + + return ( +
+
+ +
+
+ + All messages (loud) +
+
+ + + All messages +
+
+ + Mentions only +
+
+ + + Mute +
+
+ ); + } +}); diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js index b176ff2e..a22e15ff 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/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index 7f0b5754..fb49019e 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -24,7 +24,7 @@ var Modal = require('matrix-react-sdk/lib/Modal'); var notifications = require('../../../notifications'); -// TODO: this "view" component still has far to much application logic in it, +// TODO: this "view" component still has far too much application logic in it, // which should be factored out to other files. // TODO: this component also does a lot of direct poking into this.state, which diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index c22a7def..cacf8f8d 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -58,6 +58,11 @@ input[type=text]:focus, textarea:focus { box-shadow: none; } +/* Prevent ugly dotted highlight around selected elements in Firefox */ +::-moz-focus-inner { + border: 0; +} + /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; @@ -80,50 +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: 1px solid #a4a4a4; - border-radius: 8px; - background-color: #fff; - color: #747474; - position: fixed; - z-index: 2001; - padding: 6px; -} - -.mx_ContextualMenu_chevron_right { - padding: 12px; - position: absolute; - right: -21px; - top: 0px; -} - -.mx_ContextualMenu_chevron_left { - padding: 12px; - position: absolute; - left: -21px; - top: 0px; -} - -.mx_ContextualMenu_field { - padding: 3px 6px 3px 6px; - cursor: pointer; -} - -.mx_ContextualMenu_spinner { - display: block; - margin: 0 auto; -} - .mx_Dialog_wrapper { position: fixed; z-index: 4000; @@ -143,16 +104,31 @@ input[type=text]:focus, textarea:focus { justify-content: center; } +/* Spinner Dialog overide */ +.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { + width: auto; + border-radius: 8px; + padding-left: 0px; + box-shadow: none; +} + +/* View Source Dialog overide */ +.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog { + padding-left: 10px; + padding-right: 10px; +} + .mx_Dialog { background-color: #fff; color: #747474; - text-align: center; z-index: 4010; font-weight: 300; font-size: 15px; position: relative; - border-radius: 8px; - max-width: 80%; + padding-left: 58px; + width: 60%; + max-width: 704px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .mx_Dialog_background { @@ -161,12 +137,13 @@ input[type=text]:focus, textarea:focus { left: 0; width: 100%; height: 100%; - background-color: #000; - opacity: 0.2; + background-color: #e9e9e9; + opacity: 0.8; } .mx_Dialog_lightbox .mx_Dialog_background { opacity: 0.85; + background-color: #000; } .mx_Dialog_lightbox .mx_Dialog { @@ -180,34 +157,45 @@ input[type=text]:focus, textarea:focus { } .mx_Dialog_content { - margin: 24px; + margin: 24px 58px 68px 0; + font-size: 14px; + color: #4a4a4a; + word-wrap: break-word; } .mx_Dialog_buttons { - padding-bottom: 24px; + padding-bottom: 36px; } .mx_Dialog button, .mx_Dialog input[type="submit"] { border: 0px; height: 36px; - border-radius: 36px; + border-radius: 40px; + border: solid 1px #76cfa6; font-weight: 400; font-size: 15px; + margin-left: 0px; + margin-right: 8px; + padding-left: 1.5em; + padding-right: 1.5em; + outline: none; + + color: #76cfa6; + background-color: #fff; +} + +.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { color: #fff; background-color: #76cfa6; - margin-left: 8px; - margin-right: 8px; - padding-left: 1em; - padding-right: 1em; } .mx_Dialog_title { min-height: 16px; - padding: 12px; - border-bottom: 1px solid #a4a4a4; + padding-top: 40px; font-weight: bold; - font-size: 18px; + font-size: 22px; line-height: 1.4; + color: #454545; } .mx_TextInputDialog_label { @@ -238,3 +226,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/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css new file mode 100644 index 00000000..7523bd10 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css @@ -0,0 +1,106 @@ +/* +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_wrapper { + position: fixed; + z-index: 2000; +} + +.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: absolute; + padding: 6px; + font-size: 14px; + z-index: 2001; +} + +.mx_ContextualMenu.mx_ContextualMenu_right { + right: 8px; +} + +.mx_ContextualMenu_chevron_right { + position: absolute; + right: -8px; + top: 0px; + 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.mx_ContextualMenu_left { + left: 8px; +} + +.mx_ContextualMenu_chevron_left { + position: absolute; + left: -8px; + top: 0px; + 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; + white-space: nowrap; +} + +.mx_ContextualMenu_spinner { + display: block; + margin: 0 auto; +} 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 d28f4d94..95455601 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css @@ -93,8 +93,8 @@ limitations under the License. background-color: #eaf5f0; - -webkit-flex: 0 0 210px; - flex: 0 0 210px; + -webkit-flex: 0 0 235px; + flex: 0 0 235px; } .mx_MatrixChat .mx_LeftPanel.collapsed { 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 e25928b9..59895238 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -16,8 +16,8 @@ limitations under the License. .mx_SearchBox { height: 24px; - margin-left: 16px; - margin-right: 20px; + margin-left: 18px; + margin-right: 18px; padding-top: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); @@ -28,11 +28,13 @@ limitations under the License. .mx_SearchBox_searchButton { margin-right: 10px; + margin-top: 5px; pointer-events: none; } .mx_SearchBox_closeButton { cursor: pointer; + margin-top: -5px; } .mx_SearchBox_search { @@ -65,4 +67,4 @@ limitations under the License. .mx_SearchBox object { pointer-events: none; -} \ No newline at end of file +} 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 2ab1f5eb..66d81f9c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -100,6 +100,16 @@ limitations under the License. margin-bottom: 28px; } +.mx_UserSettings_toggle input { + width: 16px; + margin-right: 8px; + margin-bottom: 8px; +} + +.mx_UserSettings_toggle label { + padding-bottom: 21px; +} + .mx_UserSettings_accountTable .mx_UserSettings_notifTable { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css index f5328af6..0f610b25 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css @@ -131,9 +131,19 @@ limitations under the License. } .mx_Login_loader { - position: absolute; - left: 50%; - margin-top: 12px; + display: inline; + position: relative; + top: 2px; + left: 8px; +} + +.mx_Login_loader .mx_Spinner { + display: inline; +} + +.mx_Login_loader .mx_Spinner img { + width: 16px; + height: 16px; } .mx_Login_error { diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css index 93a89ad1..fcf397fd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css @@ -17,3 +17,8 @@ limitations under the License. .mx_MTextBody { white-space: pre-wrap; } + +.mx_MTextBody pre{ + overflow-y: auto; + max-height: 30vh; +} 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 00000000..9036e12b --- /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; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css new file mode 100644 index 00000000..40a08ee2 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css @@ -0,0 +1,67 @@ +.mx_Autocomplete { + position: absolute; + bottom: 0; + z-index: 1000; + width: 100%; + border: 1px solid #e5e5e5; + background: rgba(255, 255, 255, 0.9); + border-bottom: none; + border-radius: 4px 4px 0 0; + max-height: 50vh; + overflow: auto +} + +.mx_Autocomplete_ProviderSection { + padding: 12px; + border-bottom: 1px solid #e5e5e5; +} + +.mx_Autocomplete_ProviderSection * { + padding: 2px; + border-radius: 4px; +} + +.mx_Autocomplete_Completion { + user-select: none; + cursor: pointer; + transition: 0.3s all ease; + display: flex; + align-items: center; +} + +.mx_Autocomplete_Completion.selected * { + transition: 0.3s all ease; +} + +.mx_Autocomplete_Completion.selected { + background: #76cfa6; + color: white; + outline: none; +} + +.mx_Autocomplete_Completion.selected * { + color: white !important; +} + +.mx_Autocomplete_provider_name { + color: #76cfa6; + font-weight: 600; +} + +.autocomplete-enter { + opacity: 0.01; +} + +.autocomplete-enter.autocomplete-enter-active { + opacity: 1; + transition: opacity 300ms ease-in; +} + +.autocomplete-leave { + opacity: 1; +} + +.autocomplete-leave.autocomplete-leave-active { + opacity: 0.01; + transition: opacity 300ms ease-in; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css index d4bff639..e52ece77 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css @@ -87,14 +87,17 @@ limitations under the License. .mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name, -.mx_EntityTile_unavailable .mx_EntityTile_name_hover +.mx_EntityTile_unavailable .mx_EntityTile_name_hover, +.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, +.mx_EntityTile_offline_beenactive .mx_EntityTile_name, +.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover { opacity: 0.66; } -.mx_EntityTile_offline .mx_EntityTile_avatar, -.mx_EntityTile_offline .mx_EntityTile_name, -.mx_EntityTile_offline .mx_EntityTile_name_hover +.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, +.mx_EntityTile_offline_neveractive .mx_EntityTile_name, +.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover { opacity: 0.25; } 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 e8f42aac..01223968 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 @@ -76,6 +76,11 @@ limitations under the License. overflow-x: hidden; } +/* De-zalgoing */ +.mx_EventTile_body { + overflow-y: hidden; +} + /* Various markdown overrides */ .mx_EventTile_content .markdown-body { @@ -115,6 +120,10 @@ limitations under the License. /* end of overrides */ +.mx_EventTile_bigEmoji { + font-size: 48px ! important; +} + /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css index 2031f4f1..4eef01ce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css @@ -16,18 +16,18 @@ limitations under the License. .mx_MemberDeviceInfo { font-size: 12px; - margin-top: 5px; + display: table-row; + height: 17px; } .mx_MemberDeviceInfo div { - display: inline; - margin-right: 5px; + display: table-cell; } .mx_MemberDeviceInfo_textButton { color: #fff; - height: 20px; - border-radius: 20px; + background-color: #76cfa6; + border-radius: 17px; text-align: center; padding-left: 1em; padding-right: 1em; @@ -35,10 +35,23 @@ limitations under the License. cursor: pointer; } -.mx_MemberDeviceInfo_verify { +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked { + color: #fff; + width: 17px; + border-radius: 17px; + text-align: center; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { background-color: #76cfa6; } -.mx_MemberDeviceInfo_unverify { +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { + background-color: #eca46f; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked { background-color: #e55e5e; -} \ No newline at end of file +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index 30de9324..829c8227 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css @@ -72,3 +72,8 @@ limitations under the License. margin-left: 8px; line-height: 23px; } + +.mx_MemberInfo_devices { + display: table; + border-spacing: 5px; +} \ No newline at end of file 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 8cced52c..9af21003 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 @@ -21,6 +21,11 @@ limitations under the License. border-top: 1px solid #e5e5e5; } +.mx_MessageComposer_autocomplete_wrapper { + position: relative; + height: 0; +} + .mx_MessageComposer_row { display: flex; flex-direction: row; @@ -104,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, @@ -116,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/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index c0e919b8..82456877 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,13 +162,6 @@ limitations under the License. opacity: 0.6; } -.mx_RoomHeader_settingsButton { - display: inline-block; - position: relative; - bottom: 10px; - left: 4px; -} - .mx_RoomHeader_settingsButton object { pointer-events: none; } @@ -183,10 +177,6 @@ limitations under the License. color: #76cfa6; } -.mx_RoomHeader_leaveButton { - margin-top: -1px; -} - .mx_RoomHeader_placeholder { color: #a2a2a2 ! important; } @@ -243,10 +233,7 @@ limitations under the License. } .mx_RoomHeader_button { - display: table-cell; - vertical-align: top; - padding-left: 8px; - padding-right: 8px; + margin-left: 8px; cursor: pointer; } 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 a8eead86..3eca1f76 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 @@ -15,33 +15,47 @@ limitations under the License. */ .mx_RoomTile { - cursor: pointer; - /* This fixes wrapping of long room names, but breaks drag & drop previews */ - /* display: table-row; */ - font-size: 13px; position: relative; + cursor: pointer; + font-size: 13px; + display: block; + height: 34px; +} + +.mx_RoomTile .mx_RoomTile_mute { + opacity: 0.4; +} + +.mx_RoomTile_nameContainer { + display: inline-block; + width: 180px; + height: 24px; } .mx_RoomTile_avatar { - display: table-cell; - padding-right: 11px; - padding-top: 6px; - padding-bottom: 6px; + display: inline-block; + padding-top: 5px; + padding-bottom: 5px; padding-left: 18px; + padding-right: 6px; width: 24px; height: 24px; - position: relative; vertical-align: middle; } .mx_RoomTile_name { - display: table-cell; - width: 100%; + display: inline-block; + position: relative; + width: 165px; vertical-align: middle; - overflow: hidden; - word-break: break-word; - padding-right: 15px; + padding-left: 6px; + padding-right: 6px; + padding-top: 2px; + padding-bottom: 3px; color: rgba(69, 69, 69, 0.8); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .mx_RoomTile_ellipsis .mx_RoomTile_name { @@ -54,28 +68,96 @@ limitations under the License. */ } +.collapsed .mx_RoomTile_nameContainer { + height: 0; +} + .collapsed .mx_RoomTile_name { display: none; } .collapsed .mx_RoomTile_badge { - margin-top: -15px; - right: 7px; + top: -2px; + min-width: 12px; + height: 16px; + border-radius: 16px; + padding: 0px 4px 0px 4px; + z-index: 200; +} + +/* 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; + top: -2px; +} + +/* 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; + top: -2px; +} + +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { + display: none; +} + +/* 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; + display: block; + width: 0; + height: 0; + margin-left: 6px; + border-top: 8px solid #ff0064; + border-right: 10px solid transparent; } .mx_RoomTile_badge { - min-width: 12px; - height: 16px; + display: inline-block; + min-width: 19px; + height: 17px; position: absolute; - right: 16px; - top: 50%; - margin-top: -8px; - border-radius: 16px; + right: 8px; /*gutter */ + top: 9px; + border-radius: 14px; color: #fff; - font-weight: bold; + font-weight: 600; font-size: 11px; text-align: center; - padding: 0px 4px 0px 4px; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, +.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge { + letter-spacing: 0.1em; + opacity: 1; +} + +/* 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; + opacity: 1; + top: 9px; + right: 8px; /* gutter */ +} + +/* Position mute icon when room muted */ +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { + background-color: rgba(0,0,0,0); + opacity: 1; + top: 11px; + right: 6px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -86,41 +168,21 @@ limitations under the License. background-color: #ff0064; } -.mx_RoomTile_unread, -.mx_RoomTile_highlight { - font-weight: bold; +.mx_RoomTile_read .mx_RoomTile_badge { + background-color: rgb(214, 214, 214); + opacity: 0; } -/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4px and grow the _name by 4px to fit it in */ -.mx_RoomTile_selected .mx_RoomTile_name { - padding-right: 19px; -} -.mx_RoomTile_selected .mx_RoomTile_avatar { - padding-right: 7px; +.mx_RoomTile_unread, .mx_RoomTile_highlight { + font-weight: 800; } -/* leave room for the badge, if present. - 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: 40px; -} - -.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 { background-color: rgba(118,207,166,0.2); } -/* stop the span from overlapping with the badge */ -.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span, -.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span { - padding-right: 22px; +.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { + width: 144px; } .mx_RoomTile_arrow { 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 00000000..1b60834a --- /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; +} diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index ea12c953..316246cb 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; @@ -59,10 +63,11 @@ limitations under the License. order: 3; border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-left: 18px; - margin-right: 18px; + margin-left: 16px; /* gutter */ + margin-right: 16px; /* gutter */ -webkit-flex: 0 0 60px; flex: 0 0 60px; + z-index: 1; } .mx_LeftPanel .mx_BottomLeftMenu_options { @@ -95,3 +100,7 @@ limitations under the License. .mx_LeftPanel .mx_BottomLeftMenu_settings { float: right; } + +.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { + float: none; +} diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7257d8b4..9567869e 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: 6px; 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: 3px; } .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/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 8f9db8fe..b54fea98 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -25,8 +25,8 @@ limitations under the License. color: #3d3b39; font-weight: 600; font-size: 13px; - padding-left: 12px; - padding-right: 12px; + padding-left: 16px; /* gutter */ + padding-right: 16px; /* gutter */ margin-top: 8px; margin-bottom: 4px; cursor: pointer; 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 00000000..85e8080c --- /dev/null +++ b/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css @@ -0,0 +1,25 @@ +/* +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; + white-space: nowrap; +} + +.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 00000000..1a186178 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -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. +*/ + +.mx_NotificationStateContextMenu_picker { + position: absolute; + top: 16px; + left: 5px; +} + +.mx_NotificationStateContextMenu_field { + padding-top: 4px; + padding-right: 6px; + padding-bottom: 10px; + padding-left: 20px; + cursor: pointer; + white-space: nowrap; + display: flex; + align-items: center; +} + +.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { + font-weight: bold; + padding-left: 8px; +} + +.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled { + color: rgba(0, 0, 0, 0.2); +} + +.mx_NotificationStateContextMenu_icon { + padding-right: 4px; + padding-left: 4px; +} + +.mx_NotificationStateContextMenu_activeIcon { + display: none; + position: relative; + left: -5px; +} + +.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon { + display: inline-block; +} diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css index dc0454d1..03223f25 100644 --- a/src/skins/vector/css/vector-web/views/elements/ImageView.css +++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css @@ -69,6 +69,7 @@ limitations under the License. .mx_ImageView_labelWrapper { position: absolute; top: 0px; + right: 0px; height: 100%; overflow: auto; pointer-events: all; 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 b5e91021..a8297f46 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 { diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css index 7ad5e893..61fbbf74 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css @@ -16,8 +16,8 @@ limitations under the License. .mx_RoomDropTarget { font-size: 13px; - margin-left: 10px; - margin-right: 15px; + margin-left: 18px; + margin-right: 18px; padding-top: 5px; padding-bottom: 5px; border: 1px dashed #76cfa6; @@ -28,6 +28,7 @@ limitations under the License. .collapsed .mx_RoomDropTarget { margin-right: 10px; + margin-left: 10px; } .mx_RoomDropTarget_placeholder { 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 3aec0fa7..deb8cd3f 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; - left: 64px; + z-index: 2000; + left: 52px; padding: 6px; } - -.mx_RoomTooltip_chevron { - position: absolute; - left: -9px; - top: 8px; -} diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/Notifications.css index f2f40060..7a93f3f7 100644 --- a/src/skins/vector/css/vector-web/views/settings/Notifications.css +++ b/src/skins/vector/css/vector-web/views/settings/Notifications.css @@ -21,20 +21,20 @@ limitations under the License. .mx_UserNotifSettings_inputCell { display: table-cell; - padding-bottom: 21px; + padding-bottom: 8px; padding-right: 8px; width: 16px; } .mx_UserNotifSettings_labelCell { - padding-bottom: 21px; + padding-bottom: 8px; width: 400px; display: table-cell; } .mx_UserNotifSettings_pushRulesTableWrapper { - padding-bottom: 21px; + padding-bottom: 8px; } .mx_UserNotifSettings_pushRulesTable { diff --git a/src/skins/vector/fonts/OpenSans.css b/src/skins/vector/fonts/OpenSans.css index cba0081a..c8a0effe 100644 --- a/src/skins/vector/fonts/OpenSans.css +++ b/src/skins/vector/fonts/OpenSans.css @@ -3,7 +3,7 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); + src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'), url(Open_Sans/OpenSans-Regular.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* latin */ @@ -11,7 +11,7 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Semibold.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* latin */ @@ -19,6 +19,6 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 700; - src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); + src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Bold.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} \ No newline at end of file +} diff --git a/src/skins/vector/fonts/Open_Sans/LICENSE.txt b/src/skins/vector/fonts/Open_Sans/LICENSE.txt new file mode 100755 index 00000000..75b52484 --- /dev/null +++ b/src/skins/vector/fonts/Open_Sans/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + 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. diff --git a/src/skins/vector/fonts/Open_Sans/OpenSans-Bold.ttf b/src/skins/vector/fonts/Open_Sans/OpenSans-Bold.ttf new file mode 100755 index 00000000..fd79d43b Binary files /dev/null and b/src/skins/vector/fonts/Open_Sans/OpenSans-Bold.ttf differ diff --git a/src/skins/vector/fonts/Open_Sans/OpenSans-Regular.ttf b/src/skins/vector/fonts/Open_Sans/OpenSans-Regular.ttf new file mode 100755 index 00000000..db433349 Binary files /dev/null and b/src/skins/vector/fonts/Open_Sans/OpenSans-Regular.ttf differ diff --git a/src/skins/vector/fonts/Open_Sans/OpenSans-Semibold.ttf b/src/skins/vector/fonts/Open_Sans/OpenSans-Semibold.ttf new file mode 100755 index 00000000..1a7679e3 Binary files /dev/null and b/src/skins/vector/fonts/Open_Sans/OpenSans-Semibold.ttf differ diff --git a/src/skins/vector/img/icon-call.svg b/src/skins/vector/img/icon-call.svg new file mode 100644 index 00000000..2d96b145 --- /dev/null +++ b/src/skins/vector/img/icon-call.svg @@ -0,0 +1,8 @@ + + + + + + + + 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 00000000..3693b7a8 --- /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 00000000..861f2975 --- /dev/null +++ b/src/skins/vector/img/icon-context-mute-off-copy.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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 00000000..d801823b --- /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 00000000..f53b868a --- /dev/null +++ b/src/skins/vector/img/icon-context-mute.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/skins/vector/img/icons-create-room.svg b/src/skins/vector/img/icons-create-room.svg index 6ed94b4b..252bd2df 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 00869b9b..1f1cc29a 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-people.svg b/src/skins/vector/img/icons-people.svg new file mode 100644 index 00000000..d6867a3f --- /dev/null +++ b/src/skins/vector/img/icons-people.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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 00000000..b026718b --- /dev/null +++ b/src/skins/vector/img/icons-search-copy.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg new file mode 100644 index 00000000..4f5002ab --- /dev/null +++ b/src/skins/vector/img/icons-search.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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 00000000..117d134c --- /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-settings.svg b/src/skins/vector/img/icons-settings.svg index 60969530..3ca2b655 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 + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg new file mode 100644 index 00000000..9074fcf9 --- /dev/null +++ b/src/skins/vector/img/icons-upload.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/skins/vector/img/icons-video.svg b/src/skins/vector/img/icons-video.svg new file mode 100644 index 00000000..3571ec7f --- /dev/null +++ b/src/skins/vector/img/icons-video.svg @@ -0,0 +1,20 @@ + + + + 05D354CE-86A7-4B6F-B9BE-F1CEBBD81B21 + Created with sketchtool. + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/members.png b/src/skins/vector/img/members.png deleted file mode 100644 index b5e58757..00000000 Binary files a/src/skins/vector/img/members.png and /dev/null differ diff --git a/src/skins/vector/img/members.svg b/src/skins/vector/img/members.svg deleted file mode 100644 index 0f115966..00000000 --- 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 diff --git a/src/skins/vector/img/notif-active.svg b/src/skins/vector/img/notif-active.svg new file mode 100644 index 00000000..9eb279f8 --- /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 00000000..55fa06d1 --- /dev/null +++ b/src/skins/vector/img/notif-slider.svg @@ -0,0 +1,22 @@ + + + + 16CB4618-0BD3-4568-BB20-FC56EBC46046 + Created with sketchtool. + + + + + + + + + + + + + + + + + diff --git a/src/vector/index.js b/src/vector/index.js index 8f3701cb..4c9dd9ee 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; } diff --git a/vector/index.html b/vector/index.html index 08c96dd5..a78beac1 100644 --- a/vector/index.html +++ b/vector/index.html @@ -24,6 +24,8 @@
+ + diff --git a/webpack.config.js b/webpack.config.js index 297881f3..95afcfba 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,8 +2,6 @@ var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var olm_path = path.resolve('./node_modules/olm'); - module.exports = { module: { preLoaders: [ @@ -45,13 +43,16 @@ module.exports = { // same goes for js-sdk "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'), - - // matrix-js-sdk will use olm if it is available, - // but does not explicitly depend on it. Pull it - // in from node_modules if it's there. - olm: olm_path, }, }, + 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