Changeset 33061 for main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

Timestamp:

2019-05-09T17:34:07+12:00 (5 years ago)

Author:

wy59

Message:

1. Phase 2: Changed the thickness and opacity label display (which were next to their slider controls) into input fields. Editing the input fields now also updates the slider controls. 2. Some bug fixes, for example can now use numeric and regulare keypad's numbers when focus is on thickness/opacity inputs. 3. Changes to css to get the input fields looking right.

File:

• main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl (modified) (2 diffs)

main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

@@ -247 +247 @@
                         <div id="SecondRow">
                             <div id="LineThickness">
-                                <p>Line thickness:
-                                    <span id="thicknessRangeVal-{@nodeID}">1.00</span>
-                                    <!--<input id="thicknessRangeVal-{@nodeID}" type="number" min="1.00" max="5.00" value="1.00" />-->
-                                    <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />
+                                <p style="display:inline-block">Line thickness:
+                                    <!-- <span id="thicknessRangeVal-{@nodeID}">1.00</span> -->
+                                    <div class="valueChanger">
+                                        <input type="number" class="valueInput" id="thicknessRangeVal-{@nodeID}" min="1.00" max="5.00" value="1.00" step="0.01" />
+                                        <span class="unit" style="display:none">%</span>
+                                        <!-- % sign added above, to keep the thickness field width equal to that of the opacity field -->
+                                        <!-- setting the step attribute to 0.01 means we allow 2 decimal places
+                                            (then Firefox won't make the box red/invalid for values with 2 dec places)
+                                        -->
+                                    </div>
+                                    <input type="range"  size="2" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />              
                                 </p>
                                 <!-- <p>Value: </p> -->
@@ -256 +263 @@
                             
                             <div id="ColourOpacity">
-                                <p>Colour opacity: 
-                                    <span id="opacityRangeVal-{@nodeID}">1.0</span>
-                                    <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
+                                <p style="display:inline-block">Colour opacity: 
+                                    <!-- <span id="opacityRangeVal-{@nodeID}">1.0</span> -->
+                                    <div class="valueChanger">
+                                        <input type="number" class="valueInput" id="opacityRangeVal-{@nodeID}" min="0.0" max="100.0" value="40" />
+                                        <span class="unit">%</span>
+                                    </div>
+                                    <input type="range" min="0" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
                                 </p>
                                 <!-- <p>Value: </p> -->