@searpent/react-image-annotate 2.0.16 → 2.0.18

package/Editor/annotation-plugin/annotation.css

@@ -0,0 +1,46 @@
+/**
+ * Plugin styles
+ */
+.ce-header {
+  padding: 0.6em 0 3px;
+  margin: 0;
+  line-height: 1.25em;
+  outline: none;
+}
+
+.ce-header p,
+.ce-header div {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/**
+ * Styles for Plugin icon in Toolbar
+ */
+.ce-header__icon {}
+
+.ce-header[contentEditable=true][data-placeholder]::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: normal;
+  display: none;
+  cursor: text;
+}
+
+.ce-header[contentEditable=true][data-placeholder]:empty::before {
+  display: block;
+}
+
+.ce-header[contentEditable=true][data-placeholder]:empty:focus::before {
+  display: none;
+}
+
+/* Custom overwrite */
+.cdx-settings-button {
+  width: 100% !important;
+}
+
+.ce-settings__plugin-zone {
+  padding: 0 .25rem;
+}

package/MainLayout/index.js

@@ -66,7 +66,9 @@ var EditorWrapper = styled("div")(function (_ref3) {
   return {
     width: "45%",
     padding: "1rem",
-    paddingLeft: "2rem"
+    paddingLeft: "2rem",
+    height: "100vh",
+    overflowY: "scroll"
   };
 });
 export var MainLayout = function MainLayout(_ref4) {

package/PageSelector/index.js

@@ -44,66 +44,11 @@ function PageSelector(_ref2) {
       'page-selector--opened': showMetadata
     })
   }, React.createElement("div", {
-    className: "top-buttons"
-  }, React.createElement("button", {
-    onClick: onRecalc,
-    disabled: !recalcActive,
-    className: "info"
-  }, "Recalc"), React.createElement("button", {
-    onClick: onSave,
-    disabled: !saveActive,
-    className: "success"
-  }, "Save"), React.createElement("div", {
-    className: "show-metadata-wrapper"
-  }, React.createElement("label", {
-    className: "switch mr-2"
-  }, React.createElement("input", {
-    id: "show-metadata",
-    type: "checkbox",
-    value: showMetadata,
-    onChange: function onChange() {
-      return setShowMetadata(function (prev) {
-        return !prev;
-      });
-    }
-  }), React.createElement("span", {
-    className: "slider round"
-  })), React.createElement("label", null, "Metadata"))), React.createElement("div", {
     className: "pages"
   }, pages.map(function (page, idx) {
-    var _page$metadata;
-
     return React.createElement("div", {
       className: "page-thumbnail__wrapper"
-    }, React.createElement(PageThumbnail, {
-      key: "".concat(page.id),
-      src: page.src,
-      isActive: page.isActive,
-      onClick: function onClick() {
-        return onPageClick(idx);
-      }
-    }), showMetadata && React.createElement("div", {
-      className: "page-thumbnail__metadata"
-    }, React.createElement("h5", null, "Metadata"), page === null || page === void 0 ? void 0 : (_page$metadata = page.metadata) === null || _page$metadata === void 0 ? void 0 : _page$metadata.map(function (_ref3) {
-      var key = _ref3.key,
-          value = _ref3.value;
-      return React.createElement("div", {
-        key: key
-      }, React.createElement("label", {
-        htmlFor: key
-      }, key), React.createElement("input", {
-        id: key,
-        type: "text",
-        value: value,
-        onChange: function onChange(e) {
-          return onMetadataChange({
-            name: key,
-            value: e.target.value,
-            imageIndex: idx
-          });
-        }
-      }));
-    })));
+    }, "This is thumbnail ", page.id);
   })));
 }
 

package/PageSelector/page-selector.css

@@ -0,0 +1,201 @@
+.page-selector {
+  height: 100vh;
+  overflow-y: scroll;
+  /* max-width: 10%; */
+  transition: max-width .5s;
+}
+
+.page-selector--opened {
+  /* max-width: 20%; */
+}
+
+.pages {
+  list-style: none;
+}
+
+.page-thumbnail__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: #2dce89;
+  /* width: 240px; */
+  width: 480px;
+}
+
+.page-thumbnail {
+  /* width: 300px; */
+  margin-bottom: 1rem;
+  border-radius: .25rem !important;
+  overflow: hidden;
+  filter: grayscale(1);
+  transition: transform .2s;
+  opacity: .5;
+}
+
+.page-thumbnail:hover {
+  box-shadow: 0 0 2rem 0 #8898aa !important;
+  filter: grayscale(0);
+  transform: scale(1.015);
+  cursor: pointer;
+  opacity: 1;
+}
+
+.page-thumbnail-is-active {
+  filter: grayscale(0);
+  opacity: 1;
+}
+
+.page-thumbnail img {
+  width: 100%;
+}
+
+.page-thumbnail__metadata {
+  padding: 1rem;
+}
+
+.page-thumbnail__metadata * {
+  display: block;
+}
+
+.top-buttons {
+  background: linear-gradient(#8898aa, rgba(255, 255, 255, 0));
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  z-index: 100;
+}
+
+.top-buttons button {
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.top-buttons button:hover {
+  cursor: pointer;
+}
+
+.top-buttons button:disabled {
+  pointer-events: none;
+  opacity: .5;
+}
+
+.top-buttons button.info {
+  background-color: transparent;
+  border-radius: 0.5rem;
+  background-image: linear-gradient(310deg, #627594, #a8b8d8);
+  color: white;
+  border: none;
+  padding: 0.5rem 0;
+}
+
+.top-buttons button.success {
+  color: white;
+  background-image: linear-gradient(310deg, #2dce89, #2dcecc);
+  border-radius: 0.5rem;
+  border: none;
+  padding: 0.5rem 0;
+}
+
+.bottom-buttons {
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  z-index: 100;
+}
+
+
+.page-number-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 10%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(rgba(255, 255, 255, 0), #8898aa);
+  padding: .5rem 0;
+}
+
+.page-number {
+  font-size: 1.5rem;
+  font-weight: 800;
+}
+
+/* toggle */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #2196F3;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.show-metadata-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mr-2 {
+  margin-right: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -58,7 +58,7 @@
     "storybook": "start-storybook -p 9090 -s public",
     "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
     "dist": "npm run build && cd dist && npm publish",
-    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js && cp src/PageSelector/page-selector.css dist/PageSelector/ && cp src/Editor/annotation-plugin/annotation.css dist/Editor/annotation-plugin",
     "build-storybook": "build-storybook",
     "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
     "gh-pages": "npm run build:gh-pages && gh-pages -d build",