App icon styling

This commit is contained in:
Richard Lewis 2017-06-07 10:55:49 +01:00
parent f6f660fa9a
commit c552f7f336
3 changed files with 21 additions and 4 deletions

View file

@ -2,11 +2,15 @@ class ModularWidgets {
static widgetTypes = [
{
type: 'etherpad',
icon: '',
icon: 'http://localhost:8000/static/etherpad.svg',
name: 'Etherpad',
description: 'Collaborative text editor',
},
{
type: 'grafana',
icon: '',
icon: 'http://localhost:8000/static/grafana.svg',
name: 'Grafana',
description: 'Graph and monitor all the things!',
},
];
}

View file

@ -16,6 +16,8 @@ limitations under the License.
import React from 'react';
import sdk from '../../../index';
import AppIconTile from '../elements/AppIconTile';
import ModularWidgets from '../../structures/ModularWidgets';
/**
* Prompt the user for address of iframe widget
@ -50,13 +52,22 @@ export default React.createClass({
render: function() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const appCards = ModularWidgets.widgetTypes.map((widgetType, index) =>
<AppIconTile
key={index}
type={widgetType.type}
icon={widgetType.icon}
name={widgetType.name}
description={widgetType.description}/>,
);
return (
<BaseDialog className="mx_AddAppDialog"
onFinished={this.props.onFinished}
title="Add an app Widget"
>
<div className="mx_Dialog_content">
{appCards}
{/* <hr/>
<form onSubmit={this.onFormSubmit}>
<div>Or enter the URL of the widget to add.</div>

View file

@ -21,7 +21,9 @@ class AppIconTile extends React.Component {
render() {
return (
<div className="mx_AppIconTile">
<div className="mx_AppIconTile_imageContainer">
<img src={this.props.icon} alt={this.props.name} className="mx_AppIconTile_image"/>
</div>
<div className="mx_AppIconTile_content">
<h4><b>{this.props.name}</b></h4>
<p>{this.props.description}</p>