# HG changeset patch
# User hertzhaft
# Date 1478210151 -3600
# Node ID 001e6fa1c7fbfb3a93dbc8bb31665867163b676f
# Parent bbe5d0bc1a7ea256519c63d6c6fcd4120bd93fb5
measure plugin: change to dark theme
diff -r bbe5d0bc1a7e -r 001e6fa1c7fb webapp/src/main/webapp/jquery/jquery.digilib.measure.css
--- 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;
}
diff -r bbe5d0bc1a7e -r 001e6fa1c7fb webapp/src/main/webapp/jquery/jquery.digilib.measure.js
--- 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: $('
'),
+ about: $('
'),
startb: $(''),
shape: $(''),
eq: $('='),