@searpent/react-image-annotate 2.0.20 → 2.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PageSelector/index.js +5 -5
- package/PageSelector/page-selector.css +14 -14
- package/package.json +1 -1
package/PageSelector/index.js
CHANGED
|
@@ -13,22 +13,22 @@ function PageThumbnail(_ref) {
|
|
|
13
13
|
return React.createElement("div", {
|
|
14
14
|
role: "button",
|
|
15
15
|
tabIndex: 0,
|
|
16
|
-
className: classnames('page-thumbnail', {
|
|
17
|
-
'page-thumbnail-is-active': isActive
|
|
16
|
+
className: classnames('ps-page-thumbnail', {
|
|
17
|
+
'ps-page-thumbnail-is-active': isActive
|
|
18
18
|
}),
|
|
19
19
|
onClick: onClick
|
|
20
20
|
}, React.createElement("div", {
|
|
21
|
-
className: "page-thumbnail-image-wrapper"
|
|
21
|
+
className: "ps-page-thumbnail-image-wrapper"
|
|
22
22
|
}, React.createElement("img", {
|
|
23
23
|
src: src,
|
|
24
24
|
alt: "",
|
|
25
|
-
className: "page-thumbnail-image"
|
|
25
|
+
className: "ps-page-thumbnail-image"
|
|
26
26
|
}), React.createElement("div", {
|
|
27
27
|
className: "page-number-wrapper"
|
|
28
28
|
}, pageNumber !== undefined && !showMetadata && React.createElement("span", {
|
|
29
29
|
className: "page-number"
|
|
30
30
|
}, pageNumber))), React.createElement("div", {
|
|
31
|
-
className: "page-thumbnail-metadata-wrapper"
|
|
31
|
+
className: "ps-page-thumbnail-metadata-wrapper"
|
|
32
32
|
}, React.createElement("label", {
|
|
33
33
|
htmlFor: true
|
|
34
34
|
}, "Page"), React.createElement("input", {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
padding: 16px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.page-thumbnail {
|
|
19
|
+
.ps-page-thumbnail {
|
|
20
20
|
height: 140px;
|
|
21
21
|
width: 100px;
|
|
22
22
|
margin-bottom: 1rem;
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
flex-direction: row;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.page-selector--opened .page-thumbnail {
|
|
35
|
+
.page-selector--opened .ps-page-thumbnail {
|
|
36
36
|
width: 320px;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.page-thumbnail:hover {
|
|
39
|
+
.ps-page-thumbnail:hover {
|
|
40
40
|
box-shadow: 0 0 2rem 0 #8898aa !important;
|
|
41
41
|
filter: grayscale(0);
|
|
42
42
|
transform: scale(1.015);
|
|
@@ -44,24 +44,24 @@
|
|
|
44
44
|
opacity: 1;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.page-thumbnail-is-active {
|
|
47
|
+
.ps-page-thumbnail-is-active {
|
|
48
48
|
filter: grayscale(0);
|
|
49
49
|
opacity: 1;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.page-thumbnail-image-wrapper {
|
|
52
|
+
.ps-page-thumbnail-image-wrapper {
|
|
53
53
|
width: 100px;
|
|
54
54
|
height: 100%;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.page-thumbnail-image {
|
|
57
|
+
.ps-page-thumbnail-image {
|
|
58
58
|
width: 100px;
|
|
59
|
-
height:
|
|
60
|
-
object-fit:
|
|
59
|
+
height: 140px;
|
|
60
|
+
object-fit: cover;
|
|
61
61
|
object-position: top;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.page-thumbnail-metadata-wrapper {
|
|
64
|
+
.ps-page-thumbnail-metadata-wrapper {
|
|
65
65
|
padding: 12px;
|
|
66
66
|
font-size: 12px;
|
|
67
67
|
width: 100%;
|
|
@@ -71,26 +71,26 @@
|
|
|
71
71
|
scrollbar-width: none;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.page-thumbnail-metadata-wrapper::-webkit-scrollbar {
|
|
74
|
+
.ps-page-thumbnail-metadata-wrapper::-webkit-scrollbar {
|
|
75
75
|
display: none;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.page-selector--opened .page-thumbnail-metadata-wrapper {
|
|
78
|
+
.page-selector--opened .ps-page-thumbnail-metadata-wrapper {
|
|
79
79
|
grid-template-columns: 1fr 1fr;
|
|
80
80
|
row-gap: .5rem;
|
|
81
81
|
align-items: start;
|
|
82
82
|
justify-self: center;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.page-thumbnail-metadata-wrapper input {
|
|
85
|
+
.ps-page-thumbnail-metadata-wrapper input {
|
|
86
86
|
max-width: 120px;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.page-thumbnail__metadata {
|
|
89
|
+
.ps-page-thumbnail__metadata {
|
|
90
90
|
padding: 1rem;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.page-thumbnail__metadata * {
|
|
93
|
+
.ps-page-thumbnail__metadata * {
|
|
94
94
|
display: block;
|
|
95
95
|
}
|
|
96
96
|
|