mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-05 07:25:17 +03:00
App icon styling
This commit is contained in:
parent
f6f660fa9a
commit
c552f7f336
3 changed files with 21 additions and 4 deletions
|
@ -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!',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue