App tile and app dialog styling
This commit is contained in:
Richard Lewis
parent
0e5657333f
commit
e8837d28ef
4 changed files with 188 additions and 10 deletions
|
|
@ -29,6 +29,9 @@ export default React.createClass({
|
|||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
value: "",
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
|
|
@ -36,9 +39,7 @@ export default React.createClass({
|
|||
},
|
||||
|
||||
onValueChange: function(ev) {
|
||||
this.setState({
|
||||
value: ev.target.value,
|
||||
});
|
||||
this.setState({ value: ev.target.value});
|
||||
},
|
||||
|
||||
onFormSubmit: function(ev) {
|
||||
|
|
@ -61,7 +62,7 @@ export default React.createClass({
|
|||
<div className="mx_Dialog_content">
|
||||
<input type="text" ref="input_value" value={this.state.value}
|
||||
autoFocus={true} onChange={this.onValueChange} size="30"
|
||||
className="mx_SetDisplayNameDialog_input"
|
||||
className="mx_SetAppURLDialog_input"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx_Dialog_buttons">
|
||||
|
|
|
|||
53
src/components/views/elements/AppTile.js
Normal file
53
src/components/views/elements/AppTile.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
Copyright 2015, 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';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
export default React.createClass({
|
||||
displayName: 'AppTile',
|
||||
|
||||
propTypes: {
|
||||
id: React.PropTypes.string.isRequired,
|
||||
url: React.PropTypes.string.isRequired,
|
||||
name: React.PropTypes.string.isRequired,
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
url: "",
|
||||
};
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_AppTile" id={this.props.id}>
|
||||
<div className="mx_AppTileMenuBar">
|
||||
{this.props.name}
|
||||
<span className="mx_AppTileMenuBarWidgets">
|
||||
<img src="img/edit.svg" className="mx_filterFlipColor mx_AppTileMenuBarWidgetPadding" width="8" height="8" alt="Edit"/>
|
||||
<img src="img/cancel.svg" className="mx_filterFlipColor" width="8" height="8" alt="Cancel"/>
|
||||
{/* <span className="mx_CloseAppWidget">x</span> */}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mx_AppTileBody">
|
||||
<iframe sandbox seamless="seamless" src={this.props.url}></iframe>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
97
src/components/views/elements/MemberTile.js
Normal file
97
src/components/views/elements/MemberTile.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
Copyright 2015, 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';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
||||
var sdk = require('../../../index');
|
||||
var dis = require('../../../dispatcher');
|
||||
var Modal = require("../../../Modal");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MemberTile',
|
||||
|
||||
propTypes: {
|
||||
member: React.PropTypes.any.isRequired, // RoomMember
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {};
|
||||
},
|
||||
|
||||
shouldComponentUpdate: function(nextProps, nextState) {
|
||||
if (
|
||||
this.member_last_modified_time === undefined ||
|
||||
this.member_last_modified_time < nextProps.member.getLastModifiedTime()
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
nextProps.member.user &&
|
||||
(this.user_last_modified_time === undefined ||
|
||||
this.user_last_modified_time < nextProps.member.user.getLastModifiedTime())
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
onClick: function(e) {
|
||||
dis.dispatch({
|
||||
action: 'view_user',
|
||||
member: this.props.member,
|
||||
});
|
||||
},
|
||||
|
||||
_getDisplayName: function() {
|
||||
return this.props.member.name;
|
||||
},
|
||||
|
||||
getPowerLabel: function() {
|
||||
return this.props.member.userId + " (power " + this.props.member.powerLevel + ")";
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
||||
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||
var EntityTile = sdk.getComponent('rooms.EntityTile');
|
||||
|
||||
var member = this.props.member;
|
||||
var name = this._getDisplayName();
|
||||
var active = -1;
|
||||
var presenceState = member.user ? member.user.presence : null;
|
||||
|
||||
var av = (
|
||||
<MemberAvatar member={member} width={36} height={36} />
|
||||
);
|
||||
|
||||
if (member.user) {
|
||||
this.user_last_modified_time = member.user.getLastModifiedTime();
|
||||
}
|
||||
this.member_last_modified_time = member.getLastModifiedTime();
|
||||
|
||||
return (
|
||||
<EntityTile {...this.props} presenceState={presenceState}
|
||||
presenceLastActiveAgo={ member.user ? member.user.lastActiveAgo : 0 }
|
||||
presenceLastTs={ member.user ? member.user.lastPresenceTs : 0 }
|
||||
presenceCurrentlyActive={ member.user ? member.user.currentlyActive : false }
|
||||
avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
|
||||
name={name} powerLevel={this.props.member.powerLevel} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -18,6 +18,8 @@ limitations under the License.
|
|||
|
||||
const React = require('react');
|
||||
const AddAppDialog = require('../dialogs/AddAppDialog');
|
||||
const AppTile = require('../elements/AppTile');
|
||||
const Modal = require("../../../Modal");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'AppsDrawer',
|
||||
|
|
@ -26,26 +28,51 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
const as = this.state.apps;
|
||||
as.push({
|
||||
id: "bbcApp",
|
||||
url: "http://news.bbc.co.uk",
|
||||
name: "BBC News",
|
||||
});
|
||||
this.setState({apps: as});
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
// this.onClickAddWidget = this.onClickAddWidget.bind(this);
|
||||
return {
|
||||
addAppWidget: false,
|
||||
apps: [{
|
||||
id: "googleApp",
|
||||
url: "http://matrix.org/grafana/dashboard/db/golang-metrics?panelId=2&fullscreen&edit&var-bucket_size=1m&var-job=riot-bot&var-handler=All&from=1495188444653&to=1495210044654",
|
||||
name: "Google",
|
||||
}],
|
||||
};
|
||||
},
|
||||
|
||||
onClickAddWidget: function() {
|
||||
this.setState({
|
||||
addAppWidget: true,
|
||||
Modal.createDialog(AddAppDialog, {
|
||||
onFinished: (proceed, reason) => {
|
||||
if (!proceed) return;
|
||||
|
||||
this.state.apps.push();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const apps = this.state.apps.map(
|
||||
(app) => <AppTile key={app.id} url={app.url} name={app.name}/>);
|
||||
|
||||
return (
|
||||
<div className="mx_AppsDrawer">
|
||||
<div onClick={this.onClickAddWidget} role="button" tabIndex="0" className="mx_AddWidget_button" title="Add a widget">[+] Add a widget</div>
|
||||
{this.state.addAppWidget && AddAppDialog}
|
||||
<div id="apps" className="mx_AppsContainer">
|
||||
{apps}
|
||||
</div>
|
||||
<div onClick={this.onClickAddWidget}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
className="mx_AddWidget_button"
|
||||
title="Add a widget">
|
||||
[+] Add a widget
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue