| Thread Previous • Date Previous • Date Next • Thread Next |
------------------------------------------------------------ revno: 14563 committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx branch nick: dhis2 timestamp: Mon 2014-03-31 12:39:30 +0200 message: more consistency in UI modified: dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css -- lp:dhis2 https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk Your team DHIS 2 developers is subscribed to branch lp:dhis2. To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-31 08:29:08 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-31 10:39:30 +0000
@@ -169,7 +169,7 @@
<thead>
<tr>
<th ng-show="eventGridColumn.show"
- class="max-column-width"
+
ng-repeat="eventGridColumn in eventGridColumns">
<!-- sort icon begins -->
@@ -194,14 +194,14 @@
<!-- filter input field begins -->
<span ng-show="eventGridColumn.showFilter">
<span ng-show="eventGridColumn.type !=='date'">
- <input type="text" class="form-control" style="width: 90%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
+ <input type="text" style="width: 90%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
</span>
<span ng-show="eventGridColumn.type ==='date'">
- <input class="form-control" style="width: 90%;" placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" data-ng-date readonly="readonly">
+ <input style="width: 90%;" placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" data-ng-date readonly="readonly">
<span ng-hide="filterText[eventGridColumn.id].start == 'undefined' || filterText[eventGridColumn.id].start == ''">
<a href ng-click='removeStartFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>
</span>
- <input class="form-control" style="width: 90%;" placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].end" data-ng-date readonly="readonly">
+ <input style="width: 90%;" placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].end" data-ng-date readonly="readonly">
<span ng-hide="filterText[eventGridColumn.id].end == 'undefined' || filterText[eventGridColumn.id].end == ''">
<a href ng-click='removeEndFilterText(eventGridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>
</span>
@@ -220,22 +220,20 @@
<!-- Visible when event is not under editing -->
<td dhis-context-menu
selected-item={{dhis2Event}}
- class="max-column-width"
+
ng-hide="(currentEvent.event == dhis2Event.event) || !eventGridColumn.show"
ng-repeat="eventGridColumn in eventGridColumns">
{{dhis2Event[eventGridColumn.id]}}
</td>
<!-- Visible when event is under editing - in grid -->
- <td class="max-column-width"
- style="cursor:default;"
+ <td style="cursor:default;"
ng-if="(currentEvent.event == dhis2Event.event) && eventGridColumn.show"
ng-repeat="eventGridColumn in eventGridColumns">
<ng-form name="innerFormGrid">
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
<input type="number"
- class="form-control"
program-stage-data-element={{programStageDataElements[eventGridColumn.id]}}
ng-model="dhis2Event[eventGridColumn.id]"
ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)"
@@ -244,14 +242,12 @@
style="width:98%;"
ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
- />
-
+ />
<span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
<div ng-switch-when="string">
<div class="container-fluid">
<input type="text"
- class="form-control"
ng-model="dhis2Event[eventGridColumn.id]"
ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)"
typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20"
@@ -267,7 +263,6 @@
</div>
<div ng-switch-when="bool">
<select ng-model="dhis2Event[eventGridColumn.id]"
- class="form-control"
ng-change="updateEventDataValue(dhis2Event, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
name="foo"
@@ -283,7 +278,6 @@
</div>
<div ng-switch-when="date">
<input type="text"
- class="form-control"
placeholder="yyyy-mm-dd"
ng-date
ng-model="dhis2Event[eventGridColumn.id]"
@@ -296,6 +290,17 @@
/>
<span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
+ <div ng-switch-when="trueOnly">
+ <input type="checkbox"
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-change="updateEventDataValue(currentEvent, eventGridColumn.id)"
+ ng-required={{eventGridColumn.compulsory}}
+ name="foo"
+ ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
+ ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
+ />
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ </div>
</div>
</ng-form>
</td>
@@ -335,72 +340,74 @@
</thead>
<tbody id="list">
<tr ng-repeat="eventGridColumn in eventGridColumns">
- <td class="max-column-width">
+ <td >
{{eventGridColumn.name}}
</td>
- <td class="max-column-width">
+ <td >
<ng-form name="innerFormUpdate">
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
- <input type="number"
- class="form-control"
+ <input type="number"
ng-model="currentEvent[eventGridColumn.id]"
ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;"
- ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
- ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
+ style="width:99%;"
+ ng-class="{true: 'update-success'} [updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ ng-class="{true: 'update-error'} [!updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
/>
- <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
<div ng-switch-when="string">
<div class="container-fluid">
- <input type="text"
- class="form-control"
+ <input type="text"
ng-model="currentEvent[eventGridColumn.id]"
ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)"
typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20"
typeahead-open-on-focus
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;"
- ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
- ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
+ style="width:99%;"
+ ng-class="{true: 'update-success'} [updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ ng-class="{true: 'update-error'} [!updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
/>
- <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
</div>
<div ng-switch-when="bool">
<select ng-model="currentEvent[eventGridColumn.id]"
ng-change="updateEventDataValue(currentEvent, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
- class="form-control"
name="foo"
- style="width:95%;"
- ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
- ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
+ style="width:99%;"
+ ng-class="{true: 'update-success'} [updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ ng-class="{true: 'update-error'} [!updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
/>
<option value="">{{'please_select'| translate}}</option>
<option value="0">{{'no'| translate}}</option>
<option value="1">{{'yes'| translate}}</option>
- </select>
- <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ </select>
</div>
<div ng-switch-when="date">
- <input type="text"
- class="form-control"
+ <input type="text"
placeholder="yyyy-mm-dd"
ng-date
ng-model="currentEvent[eventGridColumn.id]"
blur-or-change="updateEventDataValue(currentEvent, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;"
- ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
- ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
- />
- <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ style="width:99%;"
+ ng-class="{true: 'update-success'} [updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ ng-class="{true: 'update-error'} [!updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ />
+ </div>
+ <div ng-switch-when="trueOnly">
+ <input type="checkbox"
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-change="updateEventDataValue(currentEvent, eventGridColumn.id)"
+ ng-required={{eventGridColumn.compulsory}}
+ name="foo"
+ ng-class="{true: 'update-success'} [updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ ng-class="{true: 'update-error'} [!updateSuccess && (currentGridColumnId == eventGridColumn.id)]"
+ />
</div>
</div>
</ng-form>
@@ -408,7 +415,7 @@
</tr>
</tbody>
</table>
- <button ng-click="showEventList()" class="button">{{'back'| translate}}</button>
+ <button ng-click="showEventList()" class="button">{{'go_back'| translate}}</button>
</div>
</div>
</form>
@@ -438,68 +445,75 @@
{{selectedProgram.dateOfIncidentDescription}}
</td>
<td>
- <input type="text"
- class="form-control"
+ <input type="text"
placeholder="yyyy-mm-dd"
ng-date
ng-model="currentEvent.eventDate"
ng-required="true"
name="eventDate"
- style="width:95%;">
- <span ng-show="outerForm.submitted && outerForm.eventDate.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ style="width:99%;">
</td>
</tr>
<tr ng-repeat="eventGridColumn in eventGridColumns">
- <td class="max-column-width">
+ <td >
{{eventGridColumn.name}}
</td>
- <td class="max-column-width">
+ <td>
<ng-form name="innerFormAdd">
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
- <input type="number"
- class="form-control"
+ <input type="number"
ng-model="currentEvent[eventGridColumn.id]"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;"/>
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ style="width:99%;"/>
+ <!--<span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>-->
</div>
<div ng-switch-when="string">
<div class="container-fluid">
- <input type="text"
- class="form-control"
+ <input type="text"
ng-model="currentEvent[eventGridColumn.id]"
typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20"
typeahead-open-on-focus
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;">
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ style="width:99%;">
+ <!--<span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>-->
</div>
</div>
<div ng-switch-when="bool">
<select ng-model="currentEvent[eventGridColumn.id]"
- ng-required={{eventGridColumn.compulsory}}
- class="form-control"
+ ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;">
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ style="width:99%;">
<option value="">{{'please_select'| translate}}</option>
<option value="0">{{'no'| translate}}</option>
<option value="1">{{'yes'| translate}}</option>
</select>
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ <!--<span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>-->
</div>
<div ng-switch-when="date">
<input type="text"
- class="form-control"
placeholder="yyyy-mm-dd"
ng-date
ng-model="currentEvent[eventGridColumn.id]"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:95%;">
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ style="width:99%;">
+ <!--<span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>-->
+ </div>
+ <div ng-switch-when="trueOnly">
+ <input type="checkbox"
+ ng-model="currentEvent[eventGridColumn.id]"
+ ng-required={{eventGridColumn.compulsory}}
+ ng-class="{true: 'update-error'} [outerForm.submitted && outerForm.eventDate.$invalid]"
+ name="foo"/>
+ <!--<span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>-->
</div>
</div>
</ng-form>
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-31 08:29:08 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-31 10:39:30 +0000
@@ -32,6 +32,7 @@
$scope.editGridColumns = false;
$scope.editingEventInFull = false;
$scope.editingEventInGrid = false;
+ $scope.updateSuccess = false;
$scope.currentGridColumnId = '';
$scope.currentEventOrginialValue = '';
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css 2014-03-31 08:29:08 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/styles/style.css 2014-03-31 10:39:30 +0000
@@ -493,47 +493,6 @@
cursor: pointer;
}
-.form-control {
- display: block;
- width: 100%;
- height: 20px;
- padding: 6px 6px;
- font-size: 13px;
- line-height: 1.428571429;
- color: #555;
- vertical-align: middle;
- background-color: #fff;
- background-image: none;
- border: 1px solid #ccc;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
-}
-.form-control:focus {
- border-color: #66afe9;
- outline: 0;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6)
-}
-.form-control:-moz-placeholder {
- color: #999
-}
-.form-control::-moz-placeholder {
- color: #999
-}
-.form-control:-ms-input-placeholder {
- color: #999
-}
-.form-control::-webkit-input-placeholder {
- color: #999
-}
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
- cursor: not-allowed;
- background-color: #eee
-}
-
input[type=number] {
border: 1px solid #aaa;
padding: 4px 1px;
| Thread Previous • Date Previous • Date Next • Thread Next |
