AG-530 Implement React declarative offering

2017-11-07 16:32:03 +00:00
parent 351d93b8fb
commit b030235bbc
6 changed files with 23 additions and 13 deletions
--- a/src-large/index.html
+++ b/src-large/index.html
@@ -0,0 +1,124 @@
+<html>
+
+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
+    <head>
+        <meta charset="utf-8">
+        <script type="text/javascript" src="dist/react-large.js" charset="utf-8"></script>
+        <!-- Example uses font awesome icons -->
+        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    </head>
+
+    <!-- Put some spacing around the buttons - not needed, just makes it look nice -->
+    <style>
+        button {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+
+        .customHeaderMenuButton{
+            margin-top: 5px;
+            margin-left: 4px;
+            float: left;
+        }
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customSortDownLabel{
+            float: left;
+            margin-left: 10px;
+            margin-top: 5px;
+        }
+
+        .customSortUpLabel{
+            float: left;
+            margin-left: 3px;
+            margin-top: 4px;
+        }
+
+        .customSortRemoveLabel{
+            float: left;
+            font-size: 11px;
+            margin-left: 3px;
+            margin-top: 6px;
+        }
+
+        .active {
+            color: cornflowerblue;
+        }
+
+        .hidden { display:none; }
+
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customExpandButton{
+            float:right;
+            margin-top: 5px;
+            margin-left: 3px;
+        }
+
+        .expanded {
+            animation-name: toExpanded;
+            animation-duration: 1s;
+            -ms-transform: rotate(180deg); /* IE 9 */
+            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+            transform: rotate(180deg);
+        }
+
+        .collapsed {
+            color: cornflowerblue;
+            animation-name: toCollapsed;
+            animation-duration: 1s;
+            -ms-transform: rotate(0deg); /* IE 9 */
+            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+            transform: rotate(0deg);
+        }
+
+
+
+        @keyframes  toExpanded{
+            from {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+            to {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+        }
+
+        @keyframes toCollapsed{
+            from {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+            to {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+        }
+    </style>
+
+    <body>
+        <div id="myAppContainer"></div>
+    </body>
+
+</html>
--- a/src-large/index.js
+++ b/src-large/index.js
@@ -3,9 +3,9 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
-// is there a better way of doing this?
-import 'ag-grid-root/dist/styles/ag-grid.css';
-import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/theme-fresh.css';

 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.