@searpent/react-image-annotate 2.0.21 → 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 +15 -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,23 +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 {
|
|
58
|
-
width: 100px
|
|
59
|
-
|
|
57
|
+
.ps-page-thumbnail-image {
|
|
58
|
+
width: 100px;
|
|
59
|
+
height: 140px;
|
|
60
|
+
object-fit: cover;
|
|
60
61
|
object-position: top;
|
|
61
62
|
}
|
|
62
63
|
|
|
63
|
-
.page-thumbnail-metadata-wrapper {
|
|
64
|
+
.ps-page-thumbnail-metadata-wrapper {
|
|
64
65
|
padding: 12px;
|
|
65
66
|
font-size: 12px;
|
|
66
67
|
width: 100%;
|
|
@@ -70,26 +71,26 @@
|
|
|
70
71
|
scrollbar-width: none;
|
|
71
72
|
}
|
|
72
73
|
|
|
73
|
-
.page-thumbnail-metadata-wrapper::-webkit-scrollbar {
|
|
74
|
+
.ps-page-thumbnail-metadata-wrapper::-webkit-scrollbar {
|
|
74
75
|
display: none;
|
|
75
76
|
}
|
|
76
77
|
|
|
77
|
-
.page-selector--opened .page-thumbnail-metadata-wrapper {
|
|
78
|
+
.page-selector--opened .ps-page-thumbnail-metadata-wrapper {
|
|
78
79
|
grid-template-columns: 1fr 1fr;
|
|
79
80
|
row-gap: .5rem;
|
|
80
81
|
align-items: start;
|
|
81
82
|
justify-self: center;
|
|
82
83
|
}
|
|
83
84
|
|
|
84
|
-
.page-thumbnail-metadata-wrapper input {
|
|
85
|
+
.ps-page-thumbnail-metadata-wrapper input {
|
|
85
86
|
max-width: 120px;
|
|
86
87
|
}
|
|
87
88
|
|
|
88
|
-
.page-thumbnail__metadata {
|
|
89
|
+
.ps-page-thumbnail__metadata {
|
|
89
90
|
padding: 1rem;
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
.page-thumbnail__metadata * {
|
|
93
|
+
.ps-page-thumbnail__metadata * {
|
|
93
94
|
display: block;
|
|
94
95
|
}
|
|
95
96
|
|