You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@climate.apache.org by jo...@apache.org on 2013/06/25 00:57:04 UTC
svn commit: r1496249 - in /incubator/climate/trunk/rcmet/src/main/ui/app:
css/app.css index.html
Author: joyce
Date: Mon Jun 24 22:57:04 2013
New Revision: 1496249
URL: http://svn.apache.org/r1496249
Log:
CLIMATE-152 progress - Initial UI layout work
- Basic two column layout added.
- Most of the functionality (specifically buttons to access features)
are commented out so the overall layout could be worked on. Certain
features need to be added back in/removed and many others still need
to be moved to better locations.
Modified:
incubator/climate/trunk/rcmet/src/main/ui/app/css/app.css
incubator/climate/trunk/rcmet/src/main/ui/app/index.html
Modified: incubator/climate/trunk/rcmet/src/main/ui/app/css/app.css
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/css/app.css?rev=1496249&r1=1496248&r2=1496249&view=diff
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/css/app.css (original)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/css/app.css Mon Jun 24 22:57:04 2013
@@ -19,15 +19,8 @@
#map
{
- height: 670px;
- width: 80%;
- margin-left: 10%;
- margin-bottom: 20px;
-}
-
-#rcmetHeader
-{
- margin-left: 10%;
+ height: 500px;
+ width: 100%;
}
.small-alert
Modified: incubator/climate/trunk/rcmet/src/main/ui/app/index.html
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/index.html?rev=1496249&r1=1496248&r2=1496249&view=diff
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/index.html (original)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/index.html Mon Jun 24 22:57:04 2013
@@ -94,141 +94,63 @@
</div>
</bootstrap-modal>
- <h1 id="rcmetHeader">Apache Open Climate Workbench UI</h1>
- <div ng-controller="WorldMapCtrl">
- <leaflet-map id="map"></leaflet-map>
- </div>
-
- <!-- Timeline -->
- <div ng-controller="TimelineCtrl">
- <div class="timeline"></div>
- </div>
-
- <div ng-controller="ParameterSelectCtrl">
- <div class="row">
- <div class="span1 offset2 text-center">Start Date:</div>
- <div class="span2">
- <form>
- <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span2" />
- </form>
- </div>
- <div class="span1 text-center">End Date:</div>
- <div class="span2">
- <form>
- <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span2" />
- </form>
- </div>
- <div class="span1">
- <button class="btn btn-block btn-success" bootstrap-modal-open="datasetSelect">Select</button>
- </div>
- <div class="span1">
- <button ng-click="clearDatasets()" ng-hide="shouldDisableClearButton()" class="btn btn-block btn-warning">Clear</button>
- </div>
- <div class="span1">
- <button ng-click="runEvaluation()" ng-hide="shouldDisableControls()" ng-disabled="runningEval" class="btn btn-block btn-primary">
- <div ng-hide="runningEval">Evaluate</div>
- <div ng-show="runningEval"><i class="icon-spinner icon-spin"></i></div>
- </button>
- </div>
- <div class="span1">
- <button class="btn btn-block btn-primary" ng-hide="shouldDisableResultsView()" bootstrap-modal-open="evaluationResults">Results</button>
- </div>
- <div class="span1">
- <button class="btn btn-block" background="false" bootstrap-modal-open="evaluationSettings"><i class="icon-cogs"></i></button>
- </div>
- </div>
- <div class="row">
- <div class="span1 offset2 text-center">North:</div>
- <div class="span2">
- <form action="">
- <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="span2 text-center" />
- </form>
- </div>
- <div class="span1 text-center">South:</div>
- <div class="span2">
- <form action="">
- <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="span2 text-center" />
- </form>
- </div>
- <div ng-show="areInUserRegridState">
- <div class="span1 text-center">Lat. Step:</div>
- <div class="span2">
- <div id="latSlider"></div>
- </div>
- <div class="span1 text-center">{{latSliderVal}}</div>
- </div>
- </div>
- <div class="row">
- <div class="span1 offset2 text-center">East:</div>
- <div class="span2">
- <form>
- <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="span2 text-center" />
- </form>
- </div>
- <div class="span1 text-center">West:</div>
- <div class="span2">
- <form>
- <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="span2 text-center" />
- </form>
- </div>
- <div ng-show="areInUserRegridState">
- <div class="span1 text-center">Lon. Step:</div>
- <div class="span2">
- <div id="lonSlider"></div>
- </div>
- <div class="span1 text-center">{{lonSliderVal}}</div>
- </div>
- </div>
- </div>
+<!--New layout test-->
+<div class="row">
+ <div class="span6">
<!--Dataset display-->
<div ng-controller="DatasetDisplayCtrl">
<div ng-repeat="dataset in datasets">
<div class="row displayRow">
- <div class="span10 offset2"><hr /></div>
+ <!--<div class="span4 offset2"><hr /></div>-->
+ <div class="span4 "><hr /></div>
</div>
<div class="row displayRow">
- <div class="span4 offset2">
- <input class="span6 text-center" type="text" value="{{dataset.name}}" />
+ <!--<div class="span4 offset2">-->
+ <div class="span4 ">
+ <input class="span4 text-center" type="text" value="{{dataset.name}}" />
</div>
</div>
<!--Time Values!-->
<div class="row displayRow">
- <div class="span1 offset2 text-center">Start Date:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.timeVals.start}}" readonly/>
+ <!--<div class="span1 offset2 text-center">Start Date:</div>-->
+ <div class="span1 text-center">Start Date:</div>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.timeVals.start}}" readonly/>
</div>
<div class="span1 text-center">End Date:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.timeVals.end}}" readonly/>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.timeVals.end}}" readonly/>
</div>
- <div class="span2">
- <a class="btn btn-block" ng-click="removeDataset($index)">Remove Dataset</a>
+ <div class="span1">
+ <a class="btn btn-block" ng-click="removeDataset($index)">Remove</a>
</div>
<div class="span1" style="background-color: {{fillColors[$index]}}; height: 28px; width: 28px;"></div>
</div>
<!--Lat/Long Values!-->
<div class="row displayRow">
- <div class="span1 offset2 text-center">North:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.latlonVals.latMax}}" readonly/>
+ <!--<div class="span1 offset2 text-center">North:</div>-->
+ <div class="span1 text-center">North:</div>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.latlonVals.latMax}}" readonly/>
</div>
<div class="span1 text-center">East:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.latlonVals.lonMax}}" readonly/>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.latlonVals.lonMax}}" readonly/>
</div>
- <div class="span2">
+ <div class="span1">
<label><input type="checkbox" ng-model="dataset.shouldDisplay" /> Display Overlay</label>
</div>
</div>
<div class="row displayRow">
- <div class="span1 offset2 text-center">South:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.latlonVals.latMin}}" readonly/>
+ <!--<div class="span1 offset2 text-center">South:</div>-->
+ <div class="span1 text-center">South:</div>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.latlonVals.latMin}}" readonly/>
</div>
<div class="span1 text-center">West:</div>
- <div class="span2">
- <input class="span2 text-center" type="text" value="{{dataset.latlonVals.lonMin}}" readonly/>
+ <div class="span1">
+ <input class="span1 text-center" type="text" value="{{dataset.latlonVals.lonMin}}" readonly/>
</div>
<div class="span2">
<label>
@@ -240,6 +162,108 @@
</div>
</div>
+ </div>
+ <div class="span6">
+
+ <div class="row span6">
+ <div ng-controller="WorldMapCtrl">
+ <leaflet-map id="map"></leaflet-map>
+ </div>
+ </div>
+
+ <!-- Timeline -->
+ <div class="row span6">
+ <div ng-controller="TimelineCtrl">
+ <div class="timeline"></div>
+ </div>
+ </div>
+
+ <div class="row span6">
+ <div ng-controller="ParameterSelectCtrl">
+ <div class="row">
+ <!--<div class="span1 offset2 text-center">Start Date:</div>-->
+ <div class="span1 text-center">Start Date:</div>
+ <div class="span1">
+ <form>
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span1" />
+ </form>
+ </div>
+ <div class="span1 text-center">End Date:</div>
+ <div class="span1">
+ <form>
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span1" />
+ </form>
+ </div>
+ <div class="span1">
+ <button class="btn btn-block btn-success" bootstrap-modal-open="datasetSelect">Select</button>
+ </div>
+ <!--<div class="span1">-->
+ <!--<button ng-click="clearDatasets()" ng-hide="shouldDisableClearButton()" class="btn btn-block btn-warning">Clear</button>-->
+ <!--</div>-->
+ <!--<div class="span1">-->
+ <!--<button ng-click="runEvaluation()" ng-hide="shouldDisableControls()" ng-disabled="runningEval" class="btn btn-block btn-primary">-->
+ <!--<div ng-hide="runningEval">Evaluate</div>-->
+ <!--<div ng-show="runningEval"><i class="icon-spinner icon-spin"></i></div>-->
+ <!--</button>-->
+ <!--</div>-->
+ <!--<div class="span1">-->
+ <!--<button class="btn btn-block btn-primary" ng-hide="shouldDisableResultsView()" bootstrap-modal-open="evaluationResults">Results</button>-->
+ <!--</div>-->
+ <!--<div class="span1">-->
+ <!--<button class="btn btn-block" background="false" bootstrap-modal-open="evaluationSettings"><i class="icon-cogs"></i></button>-->
+ <!--</div>-->
+ </div>
+ <div class="row">
+ <!--<div class="span1 offset2 text-center">North:</div>-->
+ <div class="span1 text-center">North:</div>
+ <div class="span1">
+ <form action="">
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="span1 text-center" />
+ </form>
+ </div>
+ <div class="span1 text-center">South:</div>
+ <div class="span1">
+ <form action="">
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="span1 text-center" />
+ </form>
+ </div>
+ <!--<div ng-show="areInUserRegridState">-->
+ <!--<div class="span1 text-center">Lat. Step:</div>-->
+ <!--<div class="span2">-->
+ <!--<div id="latSlider"></div>-->
+ <!--</div>-->
+ <!--<div class="span1 text-center">{{latSliderVal}}</div>-->
+ <!--</div>-->
+ </div>
+ <div class="row">
+ <!--<div class="span1 offset2 text-center">East:</div>-->
+ <div class="span1 text-center">East:</div>
+ <div class="span1">
+ <form>
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="span1 text-center" />
+ </form>
+ </div>
+ <div class="span1 text-center">West:</div>
+ <div class="span1">
+ <form>
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="span1 text-center" />
+ </form>
+ </div>
+ <!--<div ng-show="areInUserRegridState">-->
+ <!--<div class="span1 text-center">Lon. Step:</div>-->
+ <!--<div class="span2">-->
+ <!--<div id="lonSlider"></div>-->
+ <!--</div>-->
+ <!--<div class="span1 text-center">{{lonSliderVal}}</div>-->
+ <!--</div>-->
+ </div>
+ </div>
+ </div>
+
+<!--new layout test-->
+</div>
+</div>
+
<!--Libraries-->
<script src="js/lib/jquery/jquery-1.10.1.js"></script>
<script src="js/lib/jquery/jquery-ui/jquery-ui-1.10.3.min.js"></script>