diff --git a/res/home.html b/res/home.html index ddcfb0e887..4b3b3198b7 100644 --- a/res/home.html +++ b/res/home.html @@ -1,9 +1,183 @@ - - - - Riot - Home - - -
Welcome to Riot
- - \ No newline at end of file + + diff --git a/res/home/css/welcome.css b/res/home/css/welcome.css index d69cb41634..0d3c5a5ee8 100644 --- a/res/home/css/welcome.css +++ b/res/home/css/welcome.css @@ -1,21 +1,29 @@ -.container { -} - -div.row { +.mx_HomePage_col { display: flex; flex-direction: row; flex-wrap: wrap; } -img.logo { - margin-top: 26px; - margin-left: 10px; - display: inline; +.mx_HomePage_row { + flex: 1 1 0; + margin-right: 20px; + display: flex; + flex-direction: row; + flex-wrap: wrap; } -a.bigicon { - cursor: pointer; +.mx_HomePage_logo { + margin-top: 20px; + margin-left: 40px; + margin-right: 40px; + margin-bottom: 20px; display: inline; + height: 100px; +} + +.mx_HomePage_room { + cursor: pointer; + float: left; text-decoration: none; text-align: center; padding-left: 10px; @@ -23,38 +31,42 @@ a.bigicon { width: 120px; } -a.bigicon .icon { +.mx_HomePage_room .mx_HomePage_icon { border-radius: 50%; width: 65px; height: 65px; } -a.bigicon .title { +.mx_HomePage_room .mx_HomePage_name { display: block; } -a.bigicon .roomname { +.mx_HomePage_room .mx_HomePage_desc { display: block; - white-space: nowrap; font-size: 12px; + margin-top: 8px; } -.description { - display: inline; +.mx_HomePage_comment { + display: block; + margin-left: 140px; vertical-align: top; } -h2 { - font-size: 26px; -} - -h4 { - margin-top: 22px; -} - h3::after, h4::after { content: ":"; } -p { +.mx_HomePage_container { + display: block ! important; + margin: 20px; } + +.mx_HomePage_container h1 { + margin: 0px; + margin-top: 35px; +} + +.mx_HomePage_container h2 { + margin-top: 5px; +} \ No newline at end of file diff --git a/res/home/images/matrix.svg b/res/home/images/matrix.svg new file mode 100644 index 0000000000..5c7dfbb5e3 --- /dev/null +++ b/res/home/images/matrix.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/home/index.html b/res/home/index.html deleted file mode 100644 index 0e70079530..0000000000 --- a/res/home/index.html +++ /dev/null @@ -1,167 +0,0 @@ - - - - - - - - Welcome to Riot.im - - - - - - - - -
-
- -
-

Welcome to Riot.im

-

Decentralised, encrypted chat & collaboration powered by Matrix.

-
-
-
-
-

Chat with Riot Bot

- - - - - Get started with some tips from Riot Bot! - -
-
-
-
-

Search the room directory

- - - - - Lots of rooms already exist in Matrix, both linked with existing networks (Slack, Freenode, Gitter etc) or existing independently. Check out the directory! - -
-
- -
-

General discussion about Matrix

-
- -
- - - Matrix HQ - #matrix:matrix.org - - - - Riot.im - #riot:matrix.org - -
- -
-

Matrix technical discussions

-
- -
-

Running Matrix services

-
-
- - - #synapse - #synapse:matrix.org - - - - #dendrite - #dendrite:matrix.org - - - - #homeowners - #homeowners:matrix.org - - - - #irc - #irc:matrix.org - -
- -
-

Building services on Matrix

-
-
- - - #matrix-dev - #matrix-dev:matrix.org - - - - #e2e - #e2e:matrix.org - - - - #vr - #vr:matrix.org - - - - #webrtc - #webrtc:matrix.org - - - - #identity - #identity:matrix.org - - - - #bridging - #bridging:matrix.org - -
- -
-

Contributing code to Matrix and Riot

-
-
- - - #riot-dev - #riot-dev:matrix.org - - - - #dendrite-dev - #dendrite-dev:matrix.org - - - - #riot-translations - #riotweb-translations:matrix.org - - - - #irc - #irc:matrix.org - -
-
- - diff --git a/res/home/rooms/bridging.png b/res/home/rooms/bridging.png index de1ea60d54..6b3a55e7bb 100644 Binary files a/res/home/rooms/bridging.png and b/res/home/rooms/bridging.png differ diff --git a/res/home/rooms/homeowners.png b/res/home/rooms/homeowners.png index de1ea60d54..ed45f11ceb 100644 Binary files a/res/home/rooms/homeowners.png and b/res/home/rooms/homeowners.png differ diff --git a/res/home/rooms/identity.jpg b/res/home/rooms/identity.jpg new file mode 100644 index 0000000000..f2e1505634 Binary files /dev/null and b/res/home/rooms/identity.jpg differ diff --git a/res/home/rooms/riot-android.png b/res/home/rooms/riot-android.png new file mode 100644 index 0000000000..fa2bec8e3e Binary files /dev/null and b/res/home/rooms/riot-android.png differ diff --git a/res/home/rooms/riot-dev.png b/res/home/rooms/riot-dev.png index ee0f855895..ff8b21ad1a 100644 Binary files a/res/home/rooms/riot-dev.png and b/res/home/rooms/riot-dev.png differ diff --git a/res/home/rooms/riot-ios.png b/res/home/rooms/riot-ios.png new file mode 100644 index 0000000000..83306f7cb8 Binary files /dev/null and b/res/home/rooms/riot-ios.png differ diff --git a/res/home/rooms/riot_im.png b/res/home/rooms/riot.png similarity index 100% rename from res/home/rooms/riot_im.png rename to res/home/rooms/riot.png diff --git a/res/home/rooms/webrtc.png b/res/home/rooms/webrtc.png index 3871d90714..98b790f9ae 100644 Binary files a/res/home/rooms/webrtc.png and b/res/home/rooms/webrtc.png differ diff --git a/scripts/copy-res.js b/scripts/copy-res.js index 45aecebefb..d6835a237f 100755 --- a/scripts/copy-res.js +++ b/scripts/copy-res.js @@ -26,6 +26,7 @@ const INCLUDE_LANGS = [ const COPY_LIST = [ ["res/manifest.json", "webapp"], ["res/home.html", "webapp"], + ["res/home/**", "webapp/home"], ["res/{media,vector-icons}/**", "webapp"], ["res/flags/*", "webapp/flags/"], ["src/skins/vector/{fonts,img}/**", "webapp"], diff --git a/src/components/structures/HomePage.js b/src/components/structures/HomePage.js index 8b5dd56d0e..810a0a44fa 100644 --- a/src/components/structures/HomePage.js +++ b/src/components/structures/HomePage.js @@ -20,6 +20,8 @@ limitations under the License. import React from 'react'; import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg'; import sdk from 'matrix-react-sdk'; +import GeminiScrollbar from 'react-gemini-scrollbar'; +import request from 'browser-request'; module.exports = React.createClass({ displayName: 'HomePage', @@ -34,17 +36,46 @@ module.exports = React.createClass({ homePageUrl: React.PropTypes.string, }, - render: function() { - let src = this.props.homePageUrl || '/home/home.html'; + getInitialState: function() { + return { + page: "" + }; + }, + + componentWillMount: function() { + // we use request() to inline the homepage into the react component + // so that it can inherit CSS and theming easily rather than mess around + // with iframes and trying to synchronise document.stylesheets. + + let src = this.props.homePageUrl || '/home.html'; if (this.props.teamToken && this.props.teamServerUrl) { src = `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`; } + request( + { method: "GET", url: src }, + (err, response, body) => { + if (err || response.status < 200 || response.status >= 300) { + console.log(error); + this.setState({ page: "Couldn't load home page" }); + } + + // We parse the JSON ourselves rather than use the JSON + // parameter, since this throws a parse error on empty + // which breaks if there's no config.json and we're + // loading from the filesystem (see above). + this.setState({ page: body }); + } + ); + }, + + render: function() { return ( -
-