Mercurial > hg > digilib

changeset 1565:001e6fa1c7fb measure-maps

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
measure plugin: change to dark theme
author hertzhaft
date Thu, 03 Nov 2016 22:55:51 +0100
parents bbe5d0bc1a7e
children 046d89ff70b3
files webapp/src/main/webapp/jquery/jquery.digilib.measure.css webapp/src/main/webapp/jquery/jquery.digilib.measure.js
diffstat 2 files changed, 180 insertions(+), 120 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Tue Nov 01 22:04:44 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Thu Nov 03 22:55:51 2016 +0100
@@ -4,85 +4,121 @@
  * Martin Raspe, Robert Casties, 26.3.2012
  */
 
-div#dl-measure-toolbar {
-    font-size: 90%;
-    display: none;
-	border: 1px solid grey;
-	border-radius: 20px;
-	background-color: silver;
-    padding: 5px;
-    position: absolute;
-    z-index: 20;
+body {
+  background-color: #303030;
+}
+
+#dl-measure-toolbar {
+  font-size: 90%;
+  display: none;
+	border: 1px solid black;
+	border-radius: 5px;
+	color: silver;
+	background-color: #303030;
+	background: linear-gradient(to bottom, #606060 0%,black 27%, #303030 100%);
+  padding: 5px 5px 2px 2px;
+  position: absolute;
+  z-index: 20;
+}
+
+#dl-measure-info {
+  font-size: 90%;
+  display: none;
+	border: 1px solid black;
+	border-radius: 5px;
+	color: white;
+	background-color:rgba(48, 48, 48, 0.3);
+  padding: 5px;
+  position: absolute;
+  z-index: 20;
+}
+
+#dl-measure-info div.head {
+  font-weight: bold;
 }
 
-div#dl-measure-info {
-    font-size: 90%;
-    display: none;
-	border: 1px solid grey;
-	border-radius: 5px;
-	background-color:rgba(255, 255, 255, 0.3);
-    padding: 5px;
-    position: absolute;
-    z-index: 20;
+#dl-measure-info em {
+  font-weight: bold;
 }
 
-div#dl-measure-info div.head {
-    font-weight: bold;
+#dl-measure-startb {
+  color: lightgreen;
+  background-color: #303030;
+  border: 1px solid black;
+	border-radius: 5px;
+}
+
+#dl-measure-startb:hover {
+  border-color: lightgreen;
+}
+
+#dl-measure-startb.dl-drawing {
+  color: black;
+  background-color: lightgreen;
 }
 
-div#dl-measure-info em {
-    font-weight: bold;
+#dl-measure-value1 {
+  font-size: 100%;
+  width: 8em;
+  color: lightgreen;
+  background-color: #606060;
+  text-align: right;
+	border: 1px solid black;
+	border-radius: 5px;
+	padding: 1px 3px 2px;
 }
 
-input#dl-measure-value1 {
-    font-size: 100%;
-    width: 8em;
-    text-align: right;
+#dl-measure-value1:focus {
+  color: black;
+  background-color: silver;
 }
 
-input#dl-measure-value1:disabled {
-    color: black;
-	background-color: silver;
-	border: none;
+#dl-measure-value1:disabled {
+  color: lightgreen;
+  background-color: #606060;
 }
 
 span.dl-measure-label {
-    padding: 0px 5px;
-    }
+  padding: 0px 5px;
+}
 
-span#dl-measure-shapeinfo {
-    display: inline-block;
-    width: 5em;
-    text-align: right;
-    }
+#dl-measure-shapeinfo {
+  display: inline-block;
+  width: 5em;
+  text-align: right;
+}
 
-span#dl-measure-value2 {
-    display: inline-block;
-    width: 6em;
-    }
+#dl-measure-value2 {
+  display: inline-block;
+  width: 6em;
+  margin-right: 3px;
+}
 
-span.dl-measure-number {
-    display: inline-block;
-    color: lightgreen;
-    background-color: #606060;
-    padding: 2px;
-    width: 4em;
-    text-align: center;
-    }
+.dl-measure-number {
+  display: inline-block;
+  color: lightgreen;
+  background-color: #606060;
+  padding: 2px;
+  width: 4em;
+  text-align: center;
+}
 
-select#dl-measure-shape, select#dl-measure-unit1, select#dl-measure-unit2 {
-    font-size: 100%;
-    border: none;
-    background-color: silver;
-    /* width: 12em; */
-    margin: 0px 2px;
-    }
+#dl-measure-shape, #dl-measure-unit1, #dl-measure-unit2 {
+  font-size: 100%;
+  border: none;
+  color: lightgreen;
+  background-color: #606060;
+  padding: 1px 0px;
+  margin: 0px 2px;
+	border: 1px solid black;
+	border-radius: 5px;
+}
 
-select#dl-measure-shape  {
-    color: lightgreen;
-    background-color: #606060;
-    width: 9em;
-    }
+#dl-measure-shape  {
+  color: lightgreen;
+  background-color: #606060;
+  width: 9em;
+}
 
 /* select#dl-measure-shape:focus  {
     color: black;
@@ -91,103 +127,124 @@
 */
 
 option:disabled {
-    color: black;
-}
-
-button.dl-drawing {
-    background-color: lightgreen;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 option.dl-units {
-    margin-left: 10px;
+  color: lightgreen;
+  margin-left: 10px;
+}
+
+#dl-measure-move {
+  vertical-align: middle;
+  margin: 2px 2px 4px 4px;
+  background-color: #606060;
+	padding: 2px;	
+	border: 1px solid black;
+	border-radius: 8px;
 }
 
-img#dl-measure-move {
-    vertical-align: middle;
-    margin: 0px 0px 4px 4px;
+#dl-measure-move:hover {
+  border-color: lightgreen;
+}
+
+#dl-measure-move.dragging {
+  background-color: lightgreen;
 }
 
-img#dl-measure-info {
-    vertical-align: middle;
-    margin: 0px 4px 4px 4px;
+#dl-measure-about {
+  vertical-align: middle;
+  margin: 2px 2px 4px 4px;
+  background-color: #606060;
+	padding: 2px;	
+	border: 1px solid black;
+	border-radius: 8px;
 }
 
 .dl-measure-shape {
-    pointer-events: visibleStroke;
+  pointer-events: visibleStroke;
 }
 
 .dl-measure-shape:hover {
-    stroke: lightcyan;
+  stroke: lightcyan;
 }
 
 .dl-measure-selected {
-    stroke: cyan;
+  stroke: cyan;
 }
 
 .dl-measure-guide {
-    stroke: blue;
-    stroke-dasharray: 10 5;
-    fill: none;
+  stroke: blue;
+  stroke-dasharray: 10 5;
+  fill: none;
 }
 
 .dl-measure-constr {
-    stroke: cornsilk;
-    stroke-dasharray: 3 3;
-    fill: none;
+  stroke: cornsilk;
+  stroke-dasharray: 3 3;
+  fill: none;
 }
 
 .dl-measure-handle {
-    stroke: blue;
-    fill: none;
+  stroke: blue;
+  fill: none;
 }
 
-
 span.dl-measure-color {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    vertical-align: middle;
-    margin: 1px;
-    border: 1px solid black;
-    background-color: darkgray;
+  display: inline-block;
+  width: 9px;
+  height: 16px;
+  vertical-align: middle;
+  margin: 1px;
+  border: 1px solid black;
+  border-radius: 3px;
+  background-color: darkgray;
+}
+
+span.dl-measure-color:hover {
+  border-color: lightgreen;
 }
 
 div.colorPicker-palette {
-    width: 140px;
-    position: absolute;
-    border: 1px solid grey;
-	border-radius: 10px;
-    background-color: silver;
-    padding: 5px;
-    z-index: 9999;
+  width: 140px;
+  position: absolute;
+  border: 1px solid black;
+	border-radius: 5px;
+	color: silver;
+  background-color: #303030;
+  padding: 5px;
+  z-index: 200;
 }
 
 div.colorPicker_hexWrap {
-    width: 100%;
-    float:left
+  width: 100%;
+  float:left
 }
 
 div.colorPicker_hexWrap label {
-    font-size: 90%;
-    color: #2F2F2F;
-    margin: 5px 2px;
-    width: 25%
+  font-size: 90%;
+  color: #2F2F2F;
+  margin: 5px 2px;
+  width: 25%
 }
 
 div.colorPicker_hexWrap input {
-    font-size: 90%;
-    margin: 5px 2px;
-    padding: 0;
-    width: 100px;
-    border: 1px solid #000;
+  font-size: 90%;
+  margin: 5px 2px;
+  padding: 0;
+  width: 100px;
+  border: 1px solid black;
+  border-radius: 5px;
 }
 
 div.colorPicker-swatch {
-    height: 12px;
-    width: 12px;
-    border: 1px solid #000;
-    margin: 1px;
-    float: left;
-    cursor: pointer;
-    line-height: 12px;
+  height: 12px;
+  width: 12px;
+  border: 1px solid black;
+  margin: 1px;
+  float: left;
+  cursor: pointer;
+  line-height: 12px;
+  border-radius: 3px;
 }
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Tue Nov 01 22:04:44 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Thu Nov 03 22:55:51 2016 +0100
@@ -1350,7 +1350,9 @@
 
     // drag measureBar around
     var dragMeasureBar = function(event) {
-        var $div = $(this).parent();
+        var $elem = $(this);
+        $elem.addClass('dragging');
+        var $div = $elem.parent();
         var x = $div.offset().left - event.pageX;
         var y = $div.offset().top - event.pageY;
         $(document.body).on('mousemove.measure', function(event) {
@@ -1360,6 +1362,7 @@
             });
         }).on('mouseup.measure', function(event) {
             $(document.body).off('mousemove.measure').off('mouseup.measure');
+            $elem.removeClass('dragging');
             });
         return false;
         };
@@ -1715,7 +1718,7 @@
         console.debug('measure: setupMeasureBar');
         var widgets = {
         names: [
-          'info',
+          'about',
           'startb', 'shape',
           'type',
           'value1', 'unit1', 'eq',
@@ -1723,7 +1726,7 @@
           'shapecolor', 'guidecolor', 'constrcolor', 'selectedcolor', 'handlecolor',
           'move'
           ],
-        info:         $('<img id="dl-measure-info" src="img/info.png" title="display info window for shapes"></img>'),
+        about:         $('<img id="dl-measure-about" src="img/info.png" title="display info window for shapes"></img>'),
         startb:       $('<button id="dl-measure-startb" title="click to draw a measuring shape on top of the image">M</button>'),
         shape:        $('<select id="dl-measure-shape" title="select a shape to use for measuring" />'),
         eq:           $('<span class="dl-measure-label">=</span>'),