mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-22 08:08:07 +02:00
Code Activity

Button widget annotations: improve unit tests, simplify code and remove labels

Browse source 
Modern browsers support styling radio buttons and checkboxes with CSS.
This makes the implementation much easier, and the fallback for older
browsers is still decent.
This commit is contained in:
Tim van der Meij 2016-12-15 23:49:46 +01:00
parent 77148c7880
commit a428899b3c
5 changed files with 88 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

74
web/annotation_layer_builder.css
View file

@ -43,7 +43,9 @@
.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select {
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
background-color: rgba(0, 54, 255, 0.13);
border: 1px solid transparent;
box-sizing: border-box;
@ -63,8 +65,8 @@
.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled] + label,
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] + label {
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
background: none;
border: 1px solid transparent;
cursor: not-allowed;
@ -72,7 +74,9 @@
.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover {
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
border: 1px solid #000;
}
@ -99,66 +103,12 @@
width: 115%;
}
.annotationLayer .buttonWidgetAnnotation.checkBox label,
.annotationLayer .buttonWidgetAnnotation.radioButton label {
background-color: rgba(0, 54, 255, 0.13);
border: 1px solid transparent;
box-sizing: border-box;
cursor: pointer;
height: 100%;
position: absolute;
width: 100%;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
position: absolute;
left: -9999px;
}
.annotationLayer .buttonWidgetAnnotation.radioButton label {
border-radius: 50%;
}
.annotationLayer .buttonWidgetAnnotation.checkBox label:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox label:focus,
.annotationLayer .buttonWidgetAnnotation.checkBox input:focus + label,
.annotationLayer .buttonWidgetAnnotation.radioButton label:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton label:focus,
.annotationLayer .buttonWidgetAnnotation.radioButton input:focus + label {
border: 1px solid #000;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked + label:before,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked + label:before {
content: '';
left: 50%;
top: 50%;
position: absolute;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked + label:before {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
height: 25%;
-webkit-transform: translate(-50%, -65%) rotateZ(-45deg);
-moz-transform: translate(-50%, -65%) rotateZ(-45deg);
-o-transform: translate(-50%, -65%) rotateZ(-45deg);
-ms-transform: translate(-50%, -65%) rotateZ(-45deg);
transform: translate(-50%, -65%) rotateZ(-45deg);
width: 60%;
}
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked + label:before {
background-color: #000;
border-radius: 50%;
height: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
.annotationLayer .popupWrapper {