AG-420 Improve React implementation

This commit is contained in:
Sean Landsman
2017-05-26 10:31:12 +01:00
parent 3226c0d6ba
commit e1871affe3
22 changed files with 1550 additions and 16 deletions

View File

@@ -4,14 +4,115 @@
<head>
<meta charset="utf-8">
<script type="text/javascript" src="dist/bundle.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">
<style>
html, body {
height: 100%;
}
.ag-react-container {
display: inline-block;
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>
</head>