Initial app icon tiles

src/components/structures/AppWidget.js

@@ -0,0 +1,28 @@
+/*
+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.
+*/
+import ModularWidgets from 'ModularWidgets';
+
+class AppWidget {
+    constructor(type, url, options) {
+        if(!ModularWidgets.widgetTypes.includes(type) || url === "") {
+            return null;
+        }
+        this.type = type;
+        this.url = url;
+        this.options = options || {};
+    }
+}
+export default AppWidget;

src/components/structures/ModularWidgets.js

@@ -0,0 +1,13 @@
+class ModularWidgets {
+    static widgetTypes = [
+        {
+            type: 'etherpad',
+            icon: '',
+        },
+        {
+            type: 'grafana',
+            icon: '',
+        },
+    ];
+}
+export default ModularWidgets;

src/components/views/dialogs/AddAppDialog.js

@@ -53,22 +53,22 @@ export default React.createClass({
         return (
             <BaseDialog className="mx_AddAppDialog"
                 onFinished={this.props.onFinished}
-                title="App URL"
+                title="Add an app Widget"
             >
                 <div className="mx_Dialog_content">
-                    Please enter the URL of the app / widget to add.
-                </div>
+                    
+                    {/* <hr/>
                     <form onSubmit={this.onFormSubmit}>
-                    <div className="mx_Dialog_content">
+                        <div>Or enter the URL of the widget to add.</div>
                         <input type="text" ref="input_value" value={this.state.value}
                             autoFocus={true} onChange={this.onValueChange} size="30"
                             className="mx_SetAppURLDialog_input"
                         />
-                    </div>
-                    <div className="mx_Dialog_buttons">
-                        <input className="mx_Dialog_primary" type="submit" value="Set" />
-                    </div>
                     </form>
+                    <div className="mx_Dialog_buttons">
+                        <input className="mx_Dialog_primary" type="submit" value="Add" />
+                    </div> */}
+                </div>
             </BaseDialog>
         );
     },

src/components/views/elements/AppIconTile.js

@@ -0,0 +1,41 @@
+/*
+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';
+import React from 'react';
+
+class AppIconTile extends React.Component {
+    render() {
+        return (
+            <div className="mx_AppIconTile">
+                <img src={this.props.icon} alt={this.props.name} className="mx_AppIconTile_image"/>
+                <div className="mx_AppIconTile_content">
+                  <h4><b>{this.props.name}</b></h4>
+                  <p>{this.props.description}</p>
+                </div>
+            </div>
+        );
+    }
+}
+
+AppIconTile.propTypes = {
+    type: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string.isRequired,
+    name: React.PropTypes.string.isRequired,
+    description: React.PropTypes.string.isRequired,
+};
+
+export default AppIconTile;

src/components/views/rooms/AppsDrawer.js

@@ -32,7 +32,7 @@ const roomWidgetConfig = {
         },
         {
             id: "recipie",
-            url: "http://10.9.64.88:8000/recepie.html",
+            url: "http://10.9.64.55:8000/recepie.html",
             name: "Ingredients - Boeuf Bourguignon",
         },
     ],
@@ -40,7 +40,7 @@ const roomWidgetConfig = {
     '!JWeMRscvtWqfNuzmSf:matrix.org': [
         {
             id: "grafana",
-            url: "http://10.9.64.88:8000/grafana.html",
+            url: "http://10.9.64.55:8000/grafana.html",
             name: "Monitoring our Single-Point-Of-Failure DB",
         },
     ],
@@ -53,7 +53,7 @@ const roomWidgetConfig = {
         },
         {
             id: "thermometer",
-            url: "http://10.9.64.88:8000/index.html",
+            url: "http://10.9.64.55:8000/index.html",
             name: "Tip Me!!! -- Send me cash $$$",
         },
     ],
@@ -66,7 +66,7 @@ const roomWidgetConfig = {
         },
         {
             id: "thermometer",
-            url: "http://10.9.64.88:8000/index.html",
+            url: "http://10.9.64.55:8000/index.html",
             name: "Tip Me!!! -- Send me cash $$$",
         },
     ],
@@ -74,7 +74,7 @@ const roomWidgetConfig = {
     '!BLQjREzUgbtIsgrvRn:matrix.org': [
         {
             id: "etherpad",
-            url: "http://10.9.64.88:8000/etherpad.html",
+            url: "http://10.9.64.55:8000/etherpad.html",
             name: "Etherpad",
         },
     ],