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

rework tom's welcome page to fit in slightly better with riot's UI/UX

Browse source 
* moves login button to top-left
* switches from iframe to a request() to load the welcome page to inherit CSS (probably breaks RTS :/)
* namespace CSS
* change the layout a bit.
This commit is contained in:
Matthew Hodgson 2017-05-30 03:58:45 +01:00
parent 1af86405bd
commit 1f4f86b5f8
21 changed files with 548 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

41
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() {
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 (
<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}>
Login
</AccessibleButton>
</div>
);
}
var self = this;
return (
<div className="mx_SearchBox">
{ loginButton }
{ toggleCollapse }
</div>
);
}
});

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

@ -101,10 +101,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) {
@ -222,10 +218,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/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 {