mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge pull request #4038 from vector-im/tom-welcome-page

Browse source 
Tom welcome page
This commit is contained in:
Matthew Hodgson 2017-05-30 21:36:21 +01:00 • committed by GitHub
commit 64a67583e0
33 changed files with 584 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/structures/HomePage.js
View file

@ -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() {
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 (
<div className="mx_HomePage">
<iframe src={src}/>
</div>
<GeminiScrollbar autoshow={true} className="mx_HomePage">
<div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
</div>
</GeminiScrollbar>
);
}
});

22
src/components/structures/LeftPanel.js
View file

@ -21,10 +21,13 @@ var DragDropContext = require('react-dnd').DragDropContext;
var HTML5Backend = require('react-dnd-html5-backend');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
var VectorConferenceHandler = require('../../VectorConferenceHandler');
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
var LeftPanel = React.createClass({
displayName: 'LeftPanel',
@ -96,17 +99,21 @@ var LeftPanel = React.createClass({
render: function() {
var RoomList = sdk.getComponent('rooms.RoomList');
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
var SearchBox = sdk.getComponent('structures.SearchBox');
var collapseButton;
var topBox;
if (MatrixClientPeg.get().isGuest()) {
var LoginBox = sdk.getComponent('structures.LoginBox');
topBox = <LoginBox collapsed={ this.props.collapsed }/>;
}
else {
var SearchBox = sdk.getComponent('structures.SearchBox');
topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
}
var classes = "mx_LeftPanel mx_fadable";
if (this.props.collapsed) {
classes += " collapsed";
}
else {
// Hide the collapse button until we work out how to display it in the new skin
// collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
}
var callPreview;
if (this.state.showCallElement && !this.props.collapsed) {
@ -120,8 +127,7 @@ var LeftPanel = React.createClass({
return (
<aside className={classes} style={{ opacity: this.props.opacity }}>
<SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
{ collapseButton }
{ topBox }
{ callPreview }
<RoomList
selectedRoom={this.props.selectedRoom}

86
src/components/structures/LoginBox.js Normal file
View file

@ -0,0 +1,86 @@
/*
Copyright 2017 Vector Creations 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');
import { _t } from 'matrix-react-sdk/lib/languageHandler';
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'LoginBox',
propTypes: {
collapsed: React.PropTypes.bool,
},
onToggleCollapse: function(show) {
if (show) {
dis.dispatch({
action: 'show_left_panel',
});
}
else {
dis.dispatch({
action: 'hide_left_panel',
});
}
},
onLoginClick: function() {
dis.dispatch({ action: 'start_login' });
},
render: function() {
var TintableSvg = sdk.getComponent('elements.TintableSvg');
var toggleCollapse;
if (this.props.collapsed) {
toggleCollapse =
<AccessibleButton className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
</AccessibleButton>
}
else {
toggleCollapse =
<AccessibleButton className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
</AccessibleButton>
}
var loginButton;
if (!this.props.collapsed) {
loginButton = (
<div className="mx_LoginBox_loginButton_wrapper">
<AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
{ _t("Login") }
</AccessibleButton>
</div>
);
}
var self = this;
return (
<div className="mx_SearchBox">
{ loginButton }
{ toggleCollapse }
</div>
);
}
});

8
src/components/structures/RightPanel.js
View file

@ -104,10 +104,6 @@ module.exports = React.createClass({
});
},
onLoginClick: function() {
dis.dispatch({ action: 'start_login' });
},
onRoomStateMember: function(ev, state, member) {
// redraw the badge on the membership list
if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@ -225,10 +221,6 @@ module.exports = React.createClass({
<TintableSvg src="img/minimise.svg" width="10" height="16"/>
</div>
</div>;
} else if (MatrixClientPeg.get().isGuest()) {
buttonGroup = <AccessibleButton className="mx_RightPanel_loginButton" element="button" onClick={this.onLoginClick}>
Login
</AccessibleButton>;
}
if (!this.props.collapsed) {

1
src/i18n/strings/en_EN.json
View file

@ -55,6 +55,7 @@
"Invite to this room": "Invite to this room",
"Keywords": "Keywords",
"Leave": "Leave",
"Login": "Login",
"Low Priority": "Low Priority",
"Members": "Members",
"Mentions only": "Mentions only",

1
src/skins/vector/css/_components.scss
View file

@ -3,6 +3,7 @@
@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
@import "./matrix-react-sdk/structures/_CreateRoom.scss";
@import "./matrix-react-sdk/structures/_FilePanel.scss";
@import "./matrix-react-sdk/structures/_LoginBox.scss";
@import "./matrix-react-sdk/structures/_MatrixChat.scss";
@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";

36
src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2017 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_LoginBox_loginButton_wrapper {
text-align: center;
width: 100%;
}
.mx_LoginBox_loginButton {
margin-top: -8px;
height: 40px;
border: 0px;
border-radius: 40px;
padding-left: 1em;
padding-right: 1em;
background-color: $accent-color;
color: $primary-bg-color;
cursor: pointer;
font-size: 15px;
}

2
src/skins/vector/css/vector-web/structures/_HomePage.scss
View file

@ -30,5 +30,5 @@ limitations under the License.
}
.mx_HomePage_body {
margin-left: 63px;
// margin-left: 63px;
}

15
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View file

@ -30,21 +30,6 @@ limitations under the License.
flex: 0 0 70px;
}
.mx_RightPanel_loginButton {
margin-top: 15px;
width: 100%;
height: 40px;
border: 0px;
border-radius: 40px;
background-color: $accent-color;
color: $primary-bg-color;
cursor: pointer;
font-size: 15px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {