mirror of https://github.com/vector-im/riot-web
quick and dirty support for custom welcome pages, with an example for geektime techfest
Matthew Hodgson
parent
b0c1097f86
commit
3f640139d2
|
|
@ -0,0 +1,25 @@
|
|||
<div style="text-align: center; margin: 40px;">
|
||||
<a href="http://techfest.geektime.co.il/">
|
||||
<img src="/img/geektime/geektime.png" width="600" height="215" alt="GeekTime Techfest!"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
Welcome to the GeekTime Techfest Riot!
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
To get started, please join some chat rooms!
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#/room/#geektime:matrix.org">Geektime Coordination Room</a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
To explore other rooms available on Matrix, click here: <a href="#/directory"><img style="vertical-align: middle" src="/img/icons-directory.svg" width="25" height="25" alt="Room Directory"/></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To learn more about Matrix, head over to <a href="https://matrix.org">Matrix.org</a> - and to better understand Riot, check out the official <a href="https://riot.im">Riot Website</a>.
|
||||
</p>
|
||||
|
|
@ -34,6 +34,8 @@ import structures$LeftPanel from './components/structures/LeftPanel';
|
|||
module.exports.components['structures.LeftPanel'] = structures$LeftPanel;
|
||||
import structures$RightPanel from './components/structures/RightPanel';
|
||||
module.exports.components['structures.RightPanel'] = structures$RightPanel;
|
||||
import structures$HomePage from './components/structures/HomePage';
|
||||
module.exports.components['structures.HomePage'] = structures$HomePage;
|
||||
import structures$RoomDirectory from './components/structures/RoomDirectory';
|
||||
module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory;
|
||||
import structures$RoomSubList from './components/structures/RoomSubList';
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ var React = require('react');
|
|||
var ReactDOM = require('react-dom');
|
||||
var sdk = require('matrix-react-sdk')
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||
var SdkConfig = require('matrix-react-sdk/lib/SdkConfig');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'BottomLeftMenu',
|
||||
|
|
@ -32,6 +33,7 @@ module.exports = React.createClass({
|
|||
return({
|
||||
directoryHover : false,
|
||||
roomsHover : false,
|
||||
homeHover: false,
|
||||
peopleHover : false,
|
||||
settingsHover : false,
|
||||
});
|
||||
|
|
@ -62,6 +64,19 @@ module.exports = React.createClass({
|
|||
this.setState({ roomsHover: false });
|
||||
},
|
||||
|
||||
// Home button events
|
||||
onHomeClick: function() {
|
||||
dis.dispatch({ action: 'view_home_page' });
|
||||
},
|
||||
|
||||
onHomeMouseEnter: function() {
|
||||
this.setState({ homeHover: true });
|
||||
},
|
||||
|
||||
onHomeMouseLeave: function() {
|
||||
this.setState({ homeHover: false });
|
||||
},
|
||||
|
||||
// People events
|
||||
onPeopleClick: function() {
|
||||
dis.dispatch({ action: 'view_create_chat' });
|
||||
|
|
@ -98,9 +113,21 @@ module.exports = React.createClass({
|
|||
|
||||
render: function() {
|
||||
var TintableSvg = sdk.getComponent('elements.TintableSvg');
|
||||
|
||||
var homeButton;
|
||||
if (SdkConfig.get().home_page) {
|
||||
homeButton = (
|
||||
<div className="mx_BottomLeftMenu_homePage" onClick={ this.onHomeClick } onMouseEnter={ this.onHomeMouseEnter } onMouseLeave={ this.onHomeMouseLeave } >
|
||||
<TintableSvg src="img/icons-home.svg" width="25" height="25" />
|
||||
{ this.getLabel("Welcome page", this.state.homeHover) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_BottomLeftMenu">
|
||||
<div className="mx_BottomLeftMenu_options">
|
||||
{ homeButton }
|
||||
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
|
||||
<TintableSvg src="img/icons-people.svg" width="25" height="25" />
|
||||
{ this.getLabel("Start chat", this.state.peopleHover) }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import 'isomorphic-fetch';
|
||||
|
||||
var React = require("react");
|
||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||
var sdk = require('matrix-react-sdk');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'HomePage',
|
||||
|
||||
propTypes: {
|
||||
config: React.PropTypes.object.isRequired,
|
||||
collapsedRhs: React.PropTypes.bool,
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
page: ""
|
||||
};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
fetch(this.props.config.home_page).then(
|
||||
(response)=>{
|
||||
return response.text();
|
||||
},
|
||||
(error)=>{
|
||||
console.log(error);
|
||||
this.setState({ page: "Couldn't load home page" });
|
||||
}
|
||||
).then(
|
||||
(body)=>{
|
||||
this.setState({ page: body });
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
||||
// <SimpleRoomHeader title="Welcome to Riot" collapsedRhs={ this.props.collapsedRhs }/>
|
||||
|
||||
return (
|
||||
<div className="mx_HomePage">
|
||||
<div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
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_HomePage {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_HomePage_body {
|
||||
margin-left: 63px;
|
||||
}
|
||||
|
|
@ -79,6 +79,7 @@ limitations under the License.
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_homePage,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_directory,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_people,
|
||||
|
|
@ -87,6 +88,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapsed .mx_BottomLeftMenu_homePage,
|
||||
.collapsed .mx_BottomLeftMenu_directory,
|
||||
.collapsed .mx_BottomLeftMenu_createRoom,
|
||||
.collapsed .mx_BottomLeftMenu_people,
|
||||
|
|
@ -96,6 +98,7 @@ limitations under the License.
|
|||
padding-bottom: 3px ! important;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_homePage,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_directory,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_people {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#76CFA6;}
|
||||
.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g id="Layer_1">
|
||||
<title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="Symbols">
|
||||
<g id="Left-nav-default" transform="translate(-50.000000, -725.000000)">
|
||||
<g id="Left-panel">
|
||||
<g>
|
||||
<g id="icons_people" transform="translate(50.000000, 725.000000)">
|
||||
<path id="Oval-1-Copy-7" class="st0" d="M12.5,25C19.4,25,25,19.4,25,12.5S19.4,0,12.5,0S0,5.6,0,12.5S5.6,25,12.5,25z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
<rect x="7.8" y="10.7" class="st1" width="9.4" height="7.4"/>
|
||||
<polygon class="st1" points="12.5,6 6.2,10.7 18.8,10.7 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue