← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 16231: Indicator/validation rule expression builder, made the layout responsive so that the text areas/s...

 

------------------------------------------------------------
revno: 16231
committer: Lars Helge Overland <larshelge@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2014-07-25 09:07:54 +0200
message:
  Indicator/validation rule expression builder, made the layout responsive so that the text areas/select scales horizontally when dialog is resized
modified:
  dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/indicatorExpressionBuilderForm.vm
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/expressionBuilderForm.vm


--
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-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/indicatorExpressionBuilderForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/indicatorExpressionBuilderForm.vm	2014-07-25 06:49:27 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/indicatorExpressionBuilderForm.vm	2014-07-25 07:07:54 +0000
@@ -26,10 +26,10 @@
 <form id="indicator-expression-form">
 <table style="width:100%;text-align:left">
 	<colgroup>
-		<col width="250"/>
-		<col width="10"/>
-        <col width="250"/>
-		<col/>
+		<col width="45%"/>
+		<col width="2%"/>
+        <col width="20%"/>
+		<col width="33%">
 	</colgroup>
 	<tr>
 		<th colspan="2">$i18n.getString( "description" )</th>
@@ -38,15 +38,15 @@
 	</tr>
 	<tr>
 		<td>
-			<input type="text" id="description" name="description" style="width:250px" class="{validate:{required:true}}"/>
+			<input type="text" id="description" name="description" class="{validate:{required:true}}" style="width:100%"/>
 			<div class="tipText" style="margin-top: 4px">$i18n.getString( "tip" ): $i18n.getString( "use" ) abs(x) sin(x) cos(x) tan(x) ln(x) log(x) sqrt(x) mod(x,y)</div>
 		</td>
 		<td></td>
 		<td>
-			<select id="constantId" name="constantId" size="3" style="width:250px" ondblclick="insertText( 'expression', this.value )"></select>
+			<select id="constantId" name="constantId" size="3" style="width:100%" ondblclick="insertText( 'expression', this.value )"></select>
 		</td>
         <td>
-            <select id="orgUnitGroupId" name="orgUnitGroupId" size="3" style="width:270px" ondblclick="insertText( 'expression', this.value )"></select>
+            <select id="orgUnitGroupId" name="orgUnitGroupId" size="3" style="width:100%" ondblclick="insertText( 'expression', this.value )"></select>
         </td>
 	</tr>
 	<tr>
@@ -54,34 +54,36 @@
 	</tr>
 	<tr>
 		<th colspan="2">$i18n.getString( "formula" )</th>
-		<th colspan="2" style="width:100%">$i18n.getString( "data_elements" )</th>
+		<th colspan="2">$i18n.getString( "data_elements" )</th>
 	</tr>
 	<tr>
 		<td valign="top">
-		<textarea id="expression" name="expression" style="width:250px; height:150px" wrap="virtual" onchange="cleanExpression()" class="{validate:{required:true}}"></textarea><br/>
-		<a href="javascript:insertText( 'expression', '(' )"><img src="../images/left_parent.png" title="$i18n.getString( 'left_brackets' )"/></a>
-		<a href="javascript:insertText( 'expression', ')' )"><img src="../images/right_parent.png" title="$i18n.getString( 'right_brackets' )"/></a>
-		<a href="javascript:insertText( 'expression', '*' )"><img src="../images/multiply.png" title="$i18n.getString( 'multiply' )"/></a>
-		<a href="javascript:insertText( 'expression', '/' )"><img src="../images/divide.png" title="$i18n.getString( 'divide' )"/></a>
-		<a href="javascript:insertText( 'expression', '+' )"><img src="../images/plus.png" title="$i18n.getString( 'plus' )"/></a>
-		<a href="javascript:insertText( 'expression', '-' )"><img src="../images/minus.png" title="$i18n.getString( 'minus' )"/></a>
-		<a href="javascript:insertText( 'expression', '[days]' )"><img src="../images/no_of_days.png" title="$i18n.getString( 'no_of_days' )"/></a>
+		<textarea id="expression" name="expression" style="width:100%; height:158px; margin-top:2px;" wrap="virtual" onchange="cleanExpression()" class="{validate:{required:true}}"></textarea><br/>
+		<div style="margin-bottom:2px">
+			<a href="javascript:insertText( 'expression', '(' )"><img src="../images/left_parent.png" title="$i18n.getString( 'left_brackets' )"/></a>
+			<a href="javascript:insertText( 'expression', ')' )"><img src="../images/right_parent.png" title="$i18n.getString( 'right_brackets' )"/></a>
+			<a href="javascript:insertText( 'expression', '*' )"><img src="../images/multiply.png" title="$i18n.getString( 'multiply' )"/></a>
+			<a href="javascript:insertText( 'expression', '/' )"><img src="../images/divide.png" title="$i18n.getString( 'divide' )"/></a>
+			<a href="javascript:insertText( 'expression', '+' )"><img src="../images/plus.png" title="$i18n.getString( 'plus' )"/></a>
+			<a href="javascript:insertText( 'expression', '-' )"><img src="../images/minus.png" title="$i18n.getString( 'minus' )"/></a>
+			<a href="javascript:insertText( 'expression', '[days]' )"><img src="../images/no_of_days.png" title="$i18n.getString( 'no_of_days' )"/></a>
+		</div>
 		</td>
 		<td></td>
-		<td colspan="2" valign="top" style="width:100%">
-			<input type="text" id="filter" name="filter" style="width:370px">
+		<td colspan="2" valign="top">
+			<input type="text" id="filter" name="filter" style="width:280px">
 			<input type="button" value="$i18n.getString( 'filter' )" onclick="getOperandsPage()" style="width:60px">
 			<input type="button" value="$i18n.getString( 'clear' )" onclick="clearSearchText();" style="width:60px"><br/>
 
-			<select id="dataElementId" name="dataElementId" size="8"  style="width:100%" ondblclick="insertText( 'expression', this.value )">
+			<select id="dataElementId" name="dataElementId" size="9"  style="width:100%" ondblclick="insertText( 'expression', this.value )">
 			</select>
 		</td>
 	</tr>
 	<tr>
-		<th colspan="4" style="width:100%">$i18n.getString( "description" )</th>		
+		<th colspan="4">$i18n.getString( "description" )</th>		
 	</tr>
 	<tr>
-		<td colspan="4" style="width:100%"><div id="formulaText" style="width:740px;height:100px;overflow:auto"></div></td>
+		<td colspan="4"><div id="formulaText" style="width:100%;height:100px;overflow:auto"></div></td>
 	</tr>
 	<tr>
 		<td colspan="4"></td>

=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/expressionBuilderForm.vm'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/expressionBuilderForm.vm	2013-10-08 19:10:40 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/expressionBuilderForm.vm	2014-07-25 07:07:54 +0000
@@ -13,22 +13,23 @@
 <form id="expression-form" name="expression-form">
 <table style="width:100%;text-align:left">
 	<colgroup>
-		<col width="250"/>
-		<col width="50"/>
-		<col />
+		<col width="45%"/>
+		<col width="2%"/>
+		<col width="53%"/>
 	</colgroup>
 	<tr>
 		<th colspan="2">$i18n.getString( "description" )</th>		
 		<th>$i18n.getString( "constants" )</th>		
 	</tr>
 	<tr>
-		<td colspan="2">
-			<input type="text" id="description" name="description" style="width:250px" class="{validate:{required:true}}"/><br>
+		<td>
+			<input type="text" id="description" name="description" style="width:100%" class="{validate:{required:true}}"/><br>
 			<input type="checkbox" id="nullIfBlank" name="nullIfBlank" value="true">&nbsp;<label for="nullIfBlank">$encoder.htmlEncode( $i18n.getString( "skip_for_missing_values" ) )</label>
 			<div class="tipText" style="margin-top: 4px">$encoder.htmlEncode( $i18n.getString( "tip" ) ): $encoder.htmlEncode( $i18n.getString( "use" ) ) abs(x) ln(x) log(x) sqrt(x) mod(x,y)</div>
 		</td>
+		<td></td>
 		<td>
-			<select id="constantId" name="constantId" size="3" style="min-width:450px" ondblclick="insertText( 'expression', this.value )">
+			<select id="constantId" name="constantId" size="3" style="width:100%" ondblclick="insertText( 'expression', this.value )">
 			</select>
 		</td>
 	</tr>
@@ -37,34 +38,36 @@
 	</tr>
 	<tr>
 		<th colspan="2">$i18n.getString( "expression" )</th>
-		<th style="width:100%">$i18n.getString( "available_data_elements" )</th>
+		<th>$i18n.getString( "available_data_elements" )</th>
 	</tr>
 	<tr>
 		<td valign="top">
-		<textarea id="expression" name="expression" style="width:250px; height:150px" wrap="virtual" onchange="getExpressionText()" class="{validate:{required:true}}"></textarea><br/>
-		<a href="javascript:insertText( 'expression', '(' )"><img src="../images/left_parent.png" alt="$i18n.getString( 'left_brackets' )"/></a>
-		<a href="javascript:insertText( 'expression', ')' )"><img src="../images/right_parent.png" alt="$i18n.getString( 'right_brackets' )"/></a>
-		<a href="javascript:insertText( 'expression', '*' )"><img src="../images/multiply.png" alt="$i18n.getString( 'multiply' )"/></a>
-		<a href="javascript:insertText( 'expression', '/' )"><img src="../images/divide.png" alt="$i18n.getString( 'divide' )"/></a>
-		<a href="javascript:insertText( 'expression', '+' )"><img src="../images/plus.png" alt="$i18n.getString( 'plus' )"/></a>
-		<a href="javascript:insertText( 'expression', '-' )"><img src="../images/minus.png" alt="$i18n.getString( 'minus' )"/></a>
-		<a href="javascript:insertText( 'expression', '[days]' )"><img src="../images/no_of_days.png" title="$i18n.getString( 'no_of_days' )"/></a>
+		<textarea id="expression" name="expression" style="width:100%; height:158px; margin-top:2px;" wrap="virtual" onchange="getExpressionText()" class="{validate:{required:true}}"></textarea><br/>
+		<div style="margin-bottom:2px">
+			<a href="javascript:insertText( 'expression', '(' )"><img src="../images/left_parent.png" alt="$i18n.getString( 'left_brackets' )"/></a>
+			<a href="javascript:insertText( 'expression', ')' )"><img src="../images/right_parent.png" alt="$i18n.getString( 'right_brackets' )"/></a>
+			<a href="javascript:insertText( 'expression', '*' )"><img src="../images/multiply.png" alt="$i18n.getString( 'multiply' )"/></a>
+			<a href="javascript:insertText( 'expression', '/' )"><img src="../images/divide.png" alt="$i18n.getString( 'divide' )"/></a>
+			<a href="javascript:insertText( 'expression', '+' )"><img src="../images/plus.png" alt="$i18n.getString( 'plus' )"/></a>
+			<a href="javascript:insertText( 'expression', '-' )"><img src="../images/minus.png" alt="$i18n.getString( 'minus' )"/></a>
+			<a href="javascript:insertText( 'expression', '[days]' )"><img src="../images/no_of_days.png" title="$i18n.getString( 'no_of_days' )"/></a>
+		</div>
 		</td>
 		<td></td>
-		<td valign="top" style="width:100%">
-			<input type="text" id="filter" name="filter" style="width:320px">
+		<td valign="top">
+			<input type="text" id="filter" name="filter" style="width:280px">
 			<input type="button" value="$i18n.getString( 'filter' )" onclick="getOperandsPage()" style="width:60px">
 			<input type="button" value="$i18n.getString( 'clear' )" onclick="clearSearchText();" style="width:60px"><br/>
 
-			<select id="dataElementId" name="dataElementId" size="8" style="width:100%" ondblclick="insertText( 'expression', this.value )">
+			<select id="dataElementId" name="dataElementId" size="9" style="width:100%" ondblclick="insertText( 'expression', this.value )">
 			</select>
 		</td>
 	</tr>
 	<tr>
-		<th colspan="3" style="width:100%">$i18n.getString( "description" )</th>		
+		<th colspan="3">$i18n.getString( "description" )</th>		
 	</tr>
 	<tr>
-		<td colspan="3" style="width:100%"><div id="formulaText" style="width:740px;height:100px;overflow:auto"></div></td>
+		<td colspan="3"><div id="formulaText" style="width:100%;height:100px;overflow:auto"></div></td>
 	</tr>
 	<tr>
 		<td colspan="3"></td>