Chore: Release a new version 3.12.9🚀

CHANGELOG.md

@@ -25,6 +25,13 @@ Types of changes:
 - ...
 
 -------------
+## 3.12.9 - 2020-12-23
+### Fixed
+- Watermark's text font selection is now updated with the chosen text font.
+
+### Added
+- support custom theme's colors for more elements.
+
 ## 3.12.8 - 2020-12-17
 ### Fixed
 - showing the appropriate styles for the plugin while being showing inside page not as modal.

README.md

@@ -1,6 +1,6 @@
 > Repository includes React version and Vanilla JS adapter for standalone usage
 
-[![Release](https://img.shields.io/badge/release-v3.12.8-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
+[![Release](https://img.shields.io/badge/release-v3.12.9-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -140,7 +140,7 @@ or use your custom color scheme
 Use the latest CDNized plugin version:
 
 ```html
-<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.8/filerobot-image-editor.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.9/filerobot-image-editor.min.js"></script>
 ```
 
 ### <a name="quick_start"></a>Quick start

examples/js/src/filerobot-init-example.js

@@ -13,7 +13,7 @@ let ImageEditorDownload, ImageEditorUpload, ImageEditorModify;
 
 // Image Editor to download images
 
-const customColorScheme = {
+const customThemeColors = {
   primaryBg: '#ffffff',
   primaryBgHover: '#f2f2f2',
   secondaryBg: '#F8FAFB',
@@ -38,7 +38,7 @@ const customColorScheme = {
 ImageEditorDownload = new FilerobotImageEditor({
     elementId: 'image-editor-download',
     isLowQualityPreview: true,
-    colorScheme: customColorScheme, // 'light', 'dark' or object like above customColorScheme variable
+    colorScheme: 'dark',
     reduceBeforeEdit: {
       mode: 'manual',
       widthLimit: 2000,
@@ -71,6 +71,7 @@ ImageEditorDownload = new FilerobotImageEditor({
       defaultText: 'Filerobot.....'
     },
     theme: {
+      // colors: customThemeColors,
       fonts: [
         { label: 'Arial', value: 'Arial' },
         { label: 'Tahoma', value: 'Tahoma' },

examples/js/src/index.html

@@ -297,7 +297,7 @@ <h2>Ready to get started?</h2>
           Include the following script into your project
         </p>
         <figure class="highlight">
-          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.8/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
+          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.9/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
         </figure>
       </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "filerobot-image-editor",
-  "version": "3.12.8",
+  "version": "3.12.9",
   "main": "dist/index.js",
   "description": "Edit, resize, and filter any image!",
   "author": "scaleflex",

projects/react/components/CustomizedCanvas.js

@@ -37,7 +37,7 @@ export default class CustomizedCanvas extends Component {
       this._context = this._canvas.getContext('2d');
 
       const border = `1px solid ${
-        this.props.colorScheme?.text || (this.props.colorScheme === 'light' ? '#000' : '#fff')
+        this.props.theme?.colors?.text || (this.props.colorScheme === 'light' ? '#000' : '#fff')
       }`;
       const availableShapes = [
         {

projects/react/components/Preview/Preview.js

@@ -9,7 +9,7 @@ export default class extends Component {
   render() {
     const {
       activeTab, isHideCanvas, watermark = {}, focusPoint, original, updateState, src, shapes,
-      selectedShape, config: { colorScheme, elementId: editorWrapperId, processWithCloudimage }, roundCrop,
+      selectedShape, config: { colorScheme, elementId: editorWrapperId, processWithCloudimage, theme }, roundCrop,
       latestCanvasSize
     } = this.props;
 
@@ -35,6 +35,7 @@ export default class extends Component {
           round={roundCrop}
           latestCanvasSize={latestCanvasSize}
           colorScheme={colorScheme}
+          theme={theme}
           wrapperId={editorWrapperId}
           processWithCloudimage={processWithCloudimage}
         />}

projects/react/components/Shared/Select.js

@@ -209,6 +209,7 @@ const getItemStyles = size => {
 const ItemName = styled.span`
   display: inline-block;
   vertical-align: middle;
+  white-space: break-spaces;
 `;
 
 const ItemIcon = styled.span`

projects/react/styledComponents/Crop.ui.js

@@ -56,7 +56,7 @@ const FieldInput = styled.input.attrs(props => ({
   font-size: 12px;
   line-height: 30px;
   color: ${p => p.theme.colors.text};
-  background: ${props => props.dark ? props.theme.colors.primaryBg : props.theme.colors.secondaryBg};
+  background: ${props => props.theme.colors.primaryBg};
   border-radius: 2px;
   transition: border-color 0.15s ease-in-out;
   vertical-align: middle;
@@ -86,13 +86,16 @@ const FileInput = styled('input').attrs(props => ({
   font-size: 12px;
   line-height: 1;
   color: ${p => p.theme.colors.text};
-  background: ${props => props.dark ? props.theme.colors.primaryBg : props.theme.colors.secondaryBg};
+  background: ${props => props.theme.colors.primaryBg};
   border-radius: 2px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   vertical-align: middle;
   border: 0px solid transparent;
   font-family: Roboto, sans-serif;
   border: 1px solid ${props => props.theme.colors.border};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   
   &:hover {
     outline: none;