diff --git a/.gitignore b/.gitignore index 7cbd6fc236..f5a3b1bdcd 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,4 @@ lib .DS_Store key.pem cert.pem -build +vector/components.css diff --git a/package.json b/package.json index caed363d97..88df783386 100644 --- a/package.json +++ b/package.json @@ -9,25 +9,29 @@ }, "license": "Apache-2.0", "style": "bundle.css", + "matrix-react-parent": "matrix-react-sdk", "scripts": { - "reskindex": "reskindex vector -h src/skins/vector/header", + "reskindex": "reskindex -h src/header", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.css -c uglifycss --no-watch", + "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --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", + "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\"", - "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map", + "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*", "prepublish": "npm run build:css && npm run build:compile" }, "dependencies": { "classnames": "^2.1.2", + "extract-text-webpack-plugin": "^0.9.1", "filesize": "^3.1.2", "flux": "~2.0.3", + "gemini-scrollbar": "^1.3.0", "gfm.css": "^1.1.1", + "highlight.js": "^9.0.0", "linkifyjs": "^2.0.0-beta.4", "matrix-js-sdk": "https://github.com/matrix-org/matrix-js-sdk.git#develop", "matrix-react-sdk": "https://github.com/matrix-org/matrix-react-sdk.git#develop", @@ -44,12 +48,12 @@ "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "catw": "^1.0.1", + "css-raw-loader": "^0.1.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", - "uglifycss": "0.0.15", "webpack": "^1.12.6" } } diff --git a/src/component-index.js b/src/component-index.js new file mode 100644 index 0000000000..e6ff997e5a --- /dev/null +++ b/src/component-index.js @@ -0,0 +1,47 @@ +/* +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. +*/ + +/* + * THIS FILE IS AUTO-GENERATED + * You can edit it you like, but your changes will be overwritten, + * so you'd just be trying to swim upstream like a salmon. + * You are not a salmon. + */ + +module.exports.components = require('matrix-react-sdk/lib/component-index').components; + +module.exports.components['structures.BottomLeftMenu'] = require('./components/structures/BottomLeftMenu'); +module.exports.components['structures.CompatibilityPage'] = require('./components/structures/CompatibilityPage'); +module.exports.components['structures.LeftPanel'] = require('./components/structures/LeftPanel'); +module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel'); +module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory'); +module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList'); +module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource'); +module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); +module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); +module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar'); +module.exports.components['views.login.CustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog'); +module.exports.components['views.login.LoginFooter'] = require('./components/views/login/VectorLoginFooter'); +module.exports.components['views.login.LoginHeader'] = require('./components/views/login/VectorLoginHeader'); +module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); +module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); +module.exports.components['views.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'); +module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar'); diff --git a/src/components/views/login/VectorCustomServerDialog.js b/src/components/views/login/VectorCustomServerDialog.js new file mode 100644 index 0000000000..22c188cc7a --- /dev/null +++ b/src/components/views/login/VectorCustomServerDialog.js @@ -0,0 +1,53 @@ +/* +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. +*/ + +var React = require("react"); + +module.exports = React.createClass({ + displayName: 'VectorCustomServerDialog', + statics: { + replaces: 'CustomServerDialog', + }, + + render: function() { + return ( +
+
+ Custom Server Options +
+
+ + You can use the custom server options to log into other Matrix + servers by specifying a different Home server URL. +
+ This allows you to use Vector with an existing Matrix account on + a different Home server. +
+
+ You can also set a custom Identity server but this will affect + people's ability to find you if you use a server in a group other + than the main Matrix.org group. + +
+
+ +
+
+ ); + } +}); diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js new file mode 100644 index 0000000000..2b2f1ae827 --- /dev/null +++ b/src/components/views/login/VectorLoginFooter.js @@ -0,0 +1,37 @@ +/* +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'); + +module.exports = React.createClass({ + displayName: 'VectorLoginFooter', + statics: { + replaces: 'LoginFooter', + }, + + render: function() { + return ( +
+ blog  ·   + twitter  ·   + github  ·   + powered by Matrix +
+ ); + } +}); diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js new file mode 100644 index 0000000000..61b04267fc --- /dev/null +++ b/src/components/views/login/VectorLoginHeader.js @@ -0,0 +1,34 @@ +/* +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'); + +module.exports = React.createClass({ + displayName: 'VectorLoginHeader', + statics: { + replaces: 'LoginHeader', + }, + + render: function() { + return ( +
+ vector +
+ ); + } +}); diff --git a/src/components/views/rooms/RoomDNDView.js b/src/components/views/rooms/RoomDNDView.js index 0bae6e70b5..9642c5617d 100644 --- a/src/components/views/rooms/RoomDNDView.js +++ b/src/components/views/rooms/RoomDNDView.js @@ -201,4 +201,6 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) { // You can ask the monitor about the current drag state: isDragging: monitor.isDragging() }; -})(RoomTile)); \ No newline at end of file +})(RoomTile)); + +module.exports.replaces = 'RoomTile'; diff --git a/src/skins/vector/header b/src/header similarity index 100% rename from src/skins/vector/header rename to src/header diff --git a/src/skins/vector/css/MOVE_ME/UploadBar.css b/src/skins/vector/css/MOVE_ME/UploadBar.css new file mode 100644 index 0000000000..9a12689f5c --- /dev/null +++ b/src/skins/vector/css/MOVE_ME/UploadBar.css @@ -0,0 +1,42 @@ +.mx_UploadBar { + position: relative; +} + +.mx_UploadBar_uploadProgressOuter { + height: 4px; + margin-left: 63px; + margin-top: -1px; +} + +.mx_UploadBar_uploadProgressInner { + background-color: #76cfa6; + height: 4px; +} + +.mx_UploadBar_uploadFilename { + margin-top: 5px; + margin-left: 65px; + opacity: 0.5; + color: #4a4a4a; +} + +.mx_UploadBar_uploadIcon { + float: left; + margin-top: 1px; + margin-left: 14px; +} + +.mx_UploadBar_uploadCancel { + float: right; + margin-top: 5px; + margin-right: 10px; + position: relative; + z-index: 1; +} + +.mx_UploadBar_uploadBytes { + float: right; + margin-top: 5px; + margin-right: 30px; + color: #76cfa6; +} diff --git a/src/skins/vector/css/gemini-scrollbar.css b/src/skins/vector/css/gemini-scrollbar.css deleted file mode 120000 index 4e3c83ba7d..0000000000 --- a/src/skins/vector/css/gemini-scrollbar.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css \ No newline at end of file diff --git a/src/skins/vector/css/gfm.css b/src/skins/vector/css/gfm.css deleted file mode 120000 index 7940eacb53..0000000000 --- a/src/skins/vector/css/gfm.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/gfm.css/gfm.css \ No newline at end of file diff --git a/src/skins/vector/css/github.css b/src/skins/vector/css/github.css deleted file mode 120000 index 1ca3fc5a7b..0000000000 --- a/src/skins/vector/css/github.css +++ /dev/null @@ -1 +0,0 @@ -../../../../node_modules/highlight.js/styles/github.css \ No newline at end of file diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index d924cff6a7..7e1f1a26c8 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -75,6 +75,7 @@ limitations under the License. font-family: inherit ! important; white-space: normal ! important; line-height: inherit ! important; + color: inherit; font-size: 15px; } diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 898670d6d4..ac790fd8c5 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -112,6 +112,10 @@ limitations under the License. color: #76cfa6 ! important; } +.mx_RoomTile_highlight .mx_RoomTile_name { + color: #ff0064 ! important; +} + .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name { background: url('img/selected.png'); background-repeat: no-repeat; diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 81b0ef280f..93aec25ebc 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -166,6 +166,7 @@ limitations under the License. max-width: 960px; margin: auto; min-height: 36px; + overflow-y: hidden; } .mx_RoomView_statusAreaBox_line { @@ -241,43 +242,6 @@ limitations under the License. margin-right: 2px; } -.mx_RoomView_uploadProgressOuter { - height: 4px; - margin-left: 63px; - margin-top: -1px; -} - -.mx_RoomView_uploadProgressInner { - background-color: #76cfa6; - height: 4px; -} - -.mx_RoomView_uploadFilename { - margin-top: 5px; - margin-left: 65px; - opacity: 0.5; - color: #4a4a4a; -} - -.mx_RoomView_uploadIcon { - float: left; - margin-top: 1px; - margin-left: 14px; -} - -.mx_RoomView_uploadCancel { - float: right; - margin-top: 5px; - margin-right: 10px; -} - -.mx_RoomView_uploadBytes { - float: right; - margin-top: 5px; - margin-right: 30px; - color: #76cfa6; -} - .mx_RoomView_ongoingConfCallNotification { width: 100%; text-align: center; diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js deleted file mode 100644 index d5b559c68c..0000000000 --- a/src/skins/vector/skindex.js +++ /dev/null @@ -1,95 +0,0 @@ -/* -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. -*/ - -/* - * THIS FILE IS AUTO-GENERATED - * You can edit it you like, but your changes will be overwritten, - * so you'd just be trying to swim upstream like a salmon. - * You are not a salmon. - */ - -var skin = {}; - -// Vector-specific stuff -skin['elements.Spinner'] = require('../../components/views/elements/Spinner'); -skin['elements.ImageView'] = require('../../components/views/elements/ImageView'); -skin['messages.MessageTimestamp'] = require('../../components/views/messages/MessageTimestamp'); -skin['messages.DateSeparator'] = require('../../components/views/messages/DateSeparator'); -skin['messages.SenderProfile'] = require('../../components/views//messages/SenderProfile'); -skin['rooms.RoomTile'] = require('../../components/views/rooms/RoomDNDView'); -skin['rooms.BottomLeftMenuTile'] = require('../../components/views/rooms/BottomLeftMenuTile'); -skin['rooms.MessageContextMenu'] = require('../../components/views/rooms/MessageContextMenu'); -skin['rooms.RoomDropTarget'] = require('../../components/views/rooms/RoomDropTarget'); -skin['rooms.RoomTooltip'] = require('../../components/views/rooms/RoomTooltip'); -skin['rooms.SearchBar'] = require('../../components/views/rooms/SearchBar'); -skin['globals.MatrixToolbar'] = require('../../components/views/globals/MatrixToolbar'); -skin['structures.BottomLeftMenu'] = require('../../components/structures/BottomLeftMenu'); -skin['structures.LeftPanel'] = require('../../components/structures/LeftPanel'); -skin['structures.RightPanel'] = require('../../components/structures/RightPanel'); -skin['structures.RoomDirectory'] = require('../../components/structures/RoomDirectory'); -skin['structures.RoomSubList'] = require('../../components/structures/RoomSubList'); -skin['structures.ViewSource'] = require('../../components/structures/ViewSource'); -skin['structures.CompatibilityPage'] = require('../../components/structures/CompatibilityPage'); - -// TODO: Fix this so matrix-react-sdk stuff is in react SDK skindex? -skin['avatars.RoomAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/RoomAvatar'); -skin['avatars.MemberAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/MemberAvatar'); - -skin['settings.EnableNotificationsButton'] = require('matrix-react-sdk/lib/components/views/settings/EnableNotificationsButton'); -skin['settings.ChangeAvatar'] = require('matrix-react-sdk/lib/components/views/settings/ChangeAvatar'); -skin['settings.ChangeDisplayName'] = require('matrix-react-sdk/lib/components/views/settings/ChangeDisplayName'); -skin['settings.ChangePassword'] = require('matrix-react-sdk/lib/components/views/settings/ChangePassword'); - -skin['elements.EditableText'] = require('matrix-react-sdk/lib/components/views/elements/EditableText'); -skin['elements.ProgressBar'] = require('matrix-react-sdk/lib/components/views/elements/ProgressBar'); -skin['elements.UserSelector'] = require('matrix-react-sdk/lib/components/views/elements/UserSelector'); - -skin['messages.TextualEvent'] = require('matrix-react-sdk/lib/components/views/messages/TextualEvent'); -skin['messages.MessageEvent'] = require('matrix-react-sdk/lib/components/views/messages/MessageEvent'); -skin['messages.MFileBody'] = require('matrix-react-sdk/lib/components/views/messages/MFileBody'); -skin['messages.MImageBody'] = require('matrix-react-sdk/lib/components/views/messages/MImageBody'); -skin['messages.MVideoBody'] = require('matrix-react-sdk/lib/components/views/messages/MVideoBody'); -skin['messages.TextualBody'] = require('matrix-react-sdk/lib/components/views/messages/TextualBody'); -skin['messages.UnknownBody'] = require('matrix-react-sdk/lib/components/views/messages/UnknownBody'); - -skin['rooms.MemberInfo'] = require('matrix-react-sdk/lib/components/views/rooms/MemberInfo'); -skin['rooms.RoomHeader'] = require('matrix-react-sdk/lib/components/views/rooms/RoomHeader'); -skin['rooms.RoomSettings'] = require('matrix-react-sdk/lib/components/views/rooms/RoomSettings'); -skin['rooms.MemberTile'] = require('matrix-react-sdk/lib/components/views/rooms/MemberTile'); -skin['rooms.MemberList'] = require('matrix-react-sdk/lib/components/views/rooms/MemberList'); -skin['rooms.MessageComposer'] = require('matrix-react-sdk/lib/components/views/rooms/MessageComposer'); -skin['rooms.EventTile'] = require('matrix-react-sdk/lib/components/views/rooms/EventTile'); -skin['rooms.RoomList'] = require('matrix-react-sdk/lib/components/views/rooms/RoomList'); - -skin['create_room.CreateRoomButton'] = require('matrix-react-sdk/lib/components/views/create_room/CreateRoomButton'); -skin['create_room.Presets'] = require('matrix-react-sdk/lib/components/views/create_room/Presets'); -skin['create_room.RoomAlias'] = require('matrix-react-sdk/lib/components/views/create_room/RoomAlias'); - -skin['voip.CallView'] = require('matrix-react-sdk/lib/components/views/voip/CallView'); -skin['voip.IncomingCallBox'] = require('matrix-react-sdk/lib/components/views/voip/IncomingCallBox'); -skin['voip.VideoView'] = require('matrix-react-sdk/lib/components/views/voip/VideoView'); -skin['voip.VideoFeed'] = require('matrix-react-sdk/lib/components/views/voip/VideoFeed'); - -skin['dialogs.QuestionDialog'] = require('matrix-react-sdk/lib/components/views/dialogs/QuestionDialog'); -skin['dialogs.ErrorDialog'] = require('matrix-react-sdk/lib/components/views/dialogs/ErrorDialog'); -skin['dialogs.LogoutPrompt'] = require('matrix-react-sdk/lib/components/views/dialogs/LogoutPrompt'); - -skin['structures.CreateRoom'] = require('matrix-react-sdk/lib/components/structures/CreateRoom'); -skin['structures.UserSettings'] = require('matrix-react-sdk/lib/components/structures/UserSettings'); -skin['structures.RoomView'] = require('matrix-react-sdk/lib/components/structures/RoomView'); -skin['structures.MatrixChat'] = require('matrix-react-sdk/lib/components/structures/MatrixChat'); - -module.exports = skin; diff --git a/src/skins/vector/skinfo.json b/src/skins/vector/skinfo.json deleted file mode 100644 index 287ff9e237..0000000000 --- a/src/skins/vector/skinfo.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "baseSkin": "" -} diff --git a/src/vector/index.js b/src/vector/index.js index 00c22719ad..efca1e8243 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -16,11 +16,18 @@ limitations under the License. 'use strict'; +// CSS requires: just putting them here for now as CSS is going to be +// refactored soon anyway +require('../../vector/components.css'); +require('gemini-scrollbar/gemini-scrollbar.css'); +require('gfm.css/gfm.css'); +require('highlight.js/styles/github.css'); + var RunModernizrTests = require("./modernizr"); // this side-effects a global var React = require("react"); var ReactDOM = require("react-dom"); var sdk = require("matrix-react-sdk"); -sdk.loadSkin(require('../skins/vector/skindex')); +sdk.loadSkin(require('../component-index')); var VectorConferenceHandler = require('../VectorConferenceHandler'); var configJson = require("../../config.json"); diff --git a/vector/index.html b/vector/index.html index d86466797d..b46cf638b2 100644 --- a/vector/index.html +++ b/vector/index.html @@ -3,7 +3,7 @@ Vector - + diff --git a/webpack.config.js b/webpack.config.js index 089f3fdf1b..c19438a0df 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,6 @@ var path = require('path'); var webpack = require('webpack'); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); var olm_path = path.resolve('./node_modules/olm'); @@ -11,6 +12,8 @@ module.exports = { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, + // css-raw-loader loads CSS but doesn't try to treat url()s as require()s + { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, ] }, output: { @@ -45,6 +48,10 @@ module.exports = { } }), + new ExtractTextPlugin("bundle.css", { + allChunks: true + }), + // olm.js includes "require 'fs'", which is never // executed in the browser. Ignore it. new webpack.IgnorePlugin(/^fs$/, /node_modules\/olm$/) @@ -57,7 +64,7 @@ module.exports = { var fs = require('fs'); try { fs.lstatSync(olm_path); - console.log("Olm is installed; including it in bundle"); + console.log("Olm is installed; including it in webpack bundle"); } catch (e) { module.exports.plugins.push( new webpack.IgnorePlugin(/^olm$/)