mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-05 07:25:17 +03:00
Code Issues Projects Releases Packages Wiki Activity

App icon styling

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

13
src/components/views/dialogs/AddAppDialog.js
View file

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

4
src/components/views/elements/AppIconTile.js
View file

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