dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28970
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14558: consistent look in even-capture input fields
------------------------------------------------------------
revno: 14558
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Mon 2014-03-31 10:29:08 +0200
message:
consistent look in even-capture input fields
modified:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json
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/scripts/directives.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/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json 2014-03-27 13:57:00 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/i18n/en.json 2014-03-31 08:29:08 +0000
@@ -17,10 +17,14 @@
"save": "Save",
"save_and_add_new": "Save and add new",
"save_and_close": "Save and close",
+ "save_and_back": "Save and back",
"delete": "Delete",
"cancel": "Cancel",
"close": "Close",
"discard": "Discard",
+ "back": "Back",
+ "go_back": "Go back",
+ "required": "Required",
"ok": "Ok",
"done": "Done",
"remove": "Remove",
=== 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-28 18:02:06 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-31 08:29:08 +0000
@@ -1,5 +1,6 @@
<!DOCTYPE html>
-<html manifest="event-capture.appcache" ng-app="eventCapture">
+<!--<html manifest="event-capture.appcache" ng-app="eventCapture">-->
+<html ng-app="eventCapture">
<head>
<title>Event Capture</title>
@@ -44,7 +45,7 @@
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.memory.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.contextmenu.js"></script>
- <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>
+ <!--<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>-->
<script type="text/javascript" src="../dhis-web-commons/ouwt/ouwt.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/angular/plugins/angularLocalStorage.js"></script>
@@ -61,7 +62,7 @@
<link type="text/css" rel="stylesheet" href="../dhis-web-commons/font-awesome/css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet" media="screen,print" href="../dhis-web-commons/css/light_blue/light_blue.css"/>
- <link type="text/css" rel="stylesheet" media="screen,print" href="../dhis-web-commons/css/widgets.css"/>
+ <link type="text/css" rel="stylesheet" media="screen,print" href="../dhis-web-commons/css/widgets.css"/>
<link type="text/css" rel="stylesheet" href="styles/style.css">
@@ -164,7 +165,7 @@
<!-- grid begins -->
<form name="outerForm" novalidate>
- <table class="listTable dhis2-table-striped-border dhis2-table-hover">
+ <table class="listTable dhis2-table-striped-border dhis2-table-hover">
<thead>
<tr>
<th ng-show="eventGridColumn.show"
@@ -193,14 +194,14 @@
<!-- filter input field begins -->
<span ng-show="eventGridColumn.showFilter">
<span ng-show="eventGridColumn.type !=='date'">
- <input type="text" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
+ <input type="text" class="form-control" style="width: 90%;" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid(eventGridColumn)">
</span>
<span ng-show="eventGridColumn.type ==='date'">
- <input placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].start" data-ng-date readonly="readonly">
+ <input class="form-control" 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 placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[eventGridColumn.id].end" data-ng-date readonly="readonly">
+ <input class="form-control" 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>
@@ -209,10 +210,10 @@
<!-- filter input field ends -->
</th>
- <th></th>
+ <th style="width: 20px;"></th>
</tr>
</thead>
- <tbody id="list">
+ <tbody id="list">
<tr ng-repeat="dhis2Event in dhis2Events | orderBy:sortHeader:reverse | gridFilter:filterText:programStageDataElements"
ng-click="showContextMenu(dhis2Event)">
@@ -234,7 +235,7 @@
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
<input type="number"
- input-validator
+ class="form-control"
program-stage-data-element={{programStageDataElements[eventGridColumn.id]}}
ng-model="dhis2Event[eventGridColumn.id]"
ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)"
@@ -245,11 +246,12 @@
ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
/>
- <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ <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"
@@ -260,11 +262,12 @@
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">{{'required'| translate}}</span>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
</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"
@@ -276,10 +279,11 @@
<option value="0">{{'no'| translate}}</option>
<option value="1">{{'yes'| translate}}</option>
</select>
- <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><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="dhis2Event[eventGridColumn.id]"
@@ -290,7 +294,7 @@
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">{{'required'| translate}}</span>
+ <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
</div>
</ng-form>
@@ -339,38 +343,41 @@
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
<input type="number"
+ class="form-control"
ng-model="currentEvent[eventGridColumn.id]"
ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:98%;"
+ 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" class="red">{{'required'| translate}}</span>
+ <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"
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:98%;"
+ 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" class="red">{{'required'| translate}}</span>
+ <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:98%;"
+ style="width:95%;"
ng-class="{true: 'update-success'} [updateSuccess && currentGridColumnId == eventGridColumn.id]"
ng-class="{true: 'update-error'} [!updateSuccess && currentGridColumnId == eventGridColumn.id]"
/>
@@ -378,21 +385,22 @@
<option value="0">{{'no'| translate}}</option>
<option value="1">{{'yes'| translate}}</option>
</select>
- <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid" class="red">{{'required'| translate}}</span>
+ <span ng-show="outerForm.submitted && innerFormUpdate.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]"
blur-or-change="updateEventDataValue(currentEvent, eventGridColumn.id)"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:98%;"
+ 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" class="red">{{'required'| translate}}</span>
+ <span ng-show="outerForm.submitted && innerFormUpdate.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
</div>
</ng-form>
@@ -430,14 +438,15 @@
{{selectedProgram.dateOfIncidentDescription}}
</td>
<td>
- <input type="text"
- placeholder="yyyy-mm-dd"
- ng-date
- ng-model="currentEvent.eventDate"
- ng-required="true"
- name="eventDate"
- style="width:98%;">
- <span ng-show="outerForm.submitted && outerForm.eventDate.$invalid" class="red">{{'required'| translate}}</span>
+ <input type="text"
+ class="form-control"
+ 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>
</td>
</tr>
<tr ng-repeat="eventGridColumn in eventGridColumns">
@@ -449,44 +458,48 @@
<div ng-switch="eventGridColumn.type">
<div ng-switch-when="int">
<input type="number"
+ class="form-control"
ng-model="currentEvent[eventGridColumn.id]"
ng-required={{eventGridColumn.compulsory}}
name="foo"
- style="width:98%;"/>
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ style="width:95%;"/>
+ <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"
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:98%;">
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ style="width:95%;">
+ <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"
name="foo"
- style="width:98%;">
+ style="width:95%;">
<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" class="red">{{'required'| translate}}</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:98%;">
- <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+ style="width:95%;">
+ <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid"><em title="{{'required'| translate}}" class="required">*</em></span>
</div>
</div>
</ng-form>
@@ -496,9 +509,9 @@
</table>
<button ng-click="addEvent(true)" class="button">{{'save_and_add_new'| translate}}</button>
- <button ng-click="addEvent()" class="button">{{'save_and_close'| translate}}</button>
+ <button ng-click="addEvent()" class="button">{{'save_and_back'| translate}}</button>
- <button ng-click="showEventList(null)" class="button">{{'discard'| translate}}</button>
+ <button ng-click="showEventList(null)" class="button">{{'go_back'| translate}}</button>
</div>
</div>
</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-28 18:02:06 +0000
+++ 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
@@ -32,15 +32,7 @@
$scope.editGridColumns = false;
$scope.editingEventInFull = false;
$scope.editingEventInGrid = false;
- $scope.currentGridColumnId = '';
-
- /*$scope.programStageDataElements = [];
-
- $scope.dhis2Events = [];
- $scope.eventGridColumns = [];
- $scope.hiddenGridColumns = 0;
- $scope.newDhis2Event = {dataValues: []};
- $scope.currentEvent = {dataValues: []};*/
+ $scope.currentGridColumnId = '';
$scope.currentEventOrginialValue = '';
//watch for selection of org unit from tree
@@ -388,7 +380,13 @@
$scope.updateSuccess = false;
currentEvent[dataElement] = oldValue;
return;
- }
+ }
+
+ if( $scope.programStageDataElements[dataElement].compulsory && !newValue ) {
+ $scope.updateSuccess = false;
+ currentEvent[dataElement] = oldValue;
+ return;
+ }
if( newValue !== oldValue ){
@@ -408,7 +406,7 @@
$scope.currentEventOrginialValue = angular.copy(currentEvent);
$scope.updateSuccess = true;
- });
+ });
}
};
@@ -442,7 +440,6 @@
};
$scope.getHelpContent = function(){
- console.log('I will get help content');
};
//for simplicity of grid display, events were changed from
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js 2014-03-27 15:03:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js 2014-03-31 08:29:08 +0000
@@ -21,50 +21,7 @@
return {
restrict: 'A',
- link: function(scope, element, attrs){
-
- //when tree has loaded, get selected orgunit - if there is any - and inform angular
- $(function() {
-
- var adapters = [];
- var partial_adapters = [];
-
- if( dhis2.ou.memoryOnly ) {
- adapters = [ dhis2.storage.InMemoryAdapter ];
- partial_adapters = [ dhis2.storage.InMemoryAdapter ];
- } else {
- adapters = [ dhis2.storage.IndexedDBAdapter, dhis2.storage.DomLocalStorageAdapter, dhis2.storage.InMemoryAdapter ];
- partial_adapters = [ dhis2.storage.IndexedDBAdapter, dhis2.storage.DomSessionStorageAdapter, dhis2.storage.InMemoryAdapter ];
- }
-
- dhis2.ou.store = new dhis2.storage.Store({
- name: OU_STORE_NAME,
- objectStores: [
- {
- name: OU_KEY,
- adapters: adapters
- },
- {
- name: OU_PARTIAL_KEY,
- adapters: partial_adapters
- }
- ]
- });
-
- dhis2.ou.store.open().done( function() {
- selection.load();
- $( "#orgUnitTree" ).one( "ouwtLoaded", function() {
- var selected = selection.getSelected()[0];
- selection.getOrganisationUnit(selected).done(function(data){
- if( data ){
- scope.selectedOrgUnit = {id: selected, name: data[selected].n};
- scope.$apply();
- }
- });
- } );
-
- });
- });
+ link: function(scope, element, attrs){
//listen to user selection, and inform angular
selection.setListenerFunction( organisationUnitSelected );
=== 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-28 17:25:21 +0000
+++ 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
@@ -22,7 +22,9 @@
table
{
font-size: 13px;
- line-height: 18px;
+ line-height: 24px;
+ table-layout: fixed;
+
}
// --------------------------------------------------------------
@@ -153,6 +155,7 @@
background-color: #ebf0f6;
}
+
.dhis2-table-striped-border tr th {
border: 1px solid #cad5e5;
}
@@ -165,6 +168,10 @@
background-color: #ebf0f6
}
+.listTable th {
+ height: 30px;
+}
+
.dhis2-table-striped>thead>tr,
.dhis2-table-striped>tbody>tr,
.dhis2-table-striped>tfoot>tr,
@@ -484,4 +491,50 @@
.dropdown-menu li:hover {
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;
}
\ No newline at end of file
