Merge branch 'master' into production

nhn · Oct 4, 2018 · dbae22b · dbae22b
2 parents 3bbf4dc + 64241c8
commit dbae22b
Show file tree

Hide file tree

Showing 170 changed files with 766 additions and 483 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 # ![Toast UI ImageEditor](https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png)
-> Full-featured photo image editor with use canvas, easy to apply, and great filter function
-Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
+> Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.
 
 
 [![github version](https://img.shields.io/github/release/nhnent/tui.image-editor.svg)](https://github.com/nhnent/tui.image-editor/releases/latest) [![npm version](https://img.shields.io/npm/v/tui-image-editor.svg)](https://www.npmjs.com/package/tui-image-editor) [![bower version](https://img.shields.io/bower/v/tui.image-editor.svg)](https://github.com/nhnent/tui.image-editor/releases/latest) [![license](https://img.shields.io/github/license/nhnent/tui.image-editor.svg)](https://github.com/nhnent/tui.image-editor/blob/master/LICENSE) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhnent/tui.image-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)[![code with hearth by NHN Entertainment](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN%20Entertainment-ff1414.svg)](https://github.com/nhnent)
@@ -25,7 +24,7 @@ Full-featured photo image editor using canvas. It is really easy, and it comes w
 * [Usage](#-usage)
   * [HTML](#html)
   * [JavaScript](#javascript)
-* [Development](#develop)
+* [Development](#-development)
   * [Setup](#setup)
   * [Run webpack-dev-server](#run-webpack-dev-server)
 * [Documents](#-documents)

diff --git a/examples/js/theme/black-theme.js b/examples/js/theme/black-theme.js
@@ -15,50 +15,59 @@ var blackTheme = {
     'loadButton.backgroundColor': '#fff',
     'loadButton.border': '1px solid #ddd',
     'loadButton.color': '#222',
-    'loadButton.fontFamily': 'NotoSans, sans-serif',
+    'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
     'loadButton.fontSize': '12px',
 
     // download button
     'downloadButton.backgroundColor': '#fdba3b',
     'downloadButton.border': '1px solid #fdba3b',
     'downloadButton.color': '#fff',
-    'downloadButton.fontFamily': 'NotoSans, sans-serif',
+    'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
     'downloadButton.fontSize': '12px',
 
     // main icons
-    'menu.normalIcon.path': '../dist/svg/icon-b.svg',
-    'menu.normalIcon.name': 'icon-b',
-    'menu.activeIcon.path': '../dist/svg/icon-a.svg',
-    'menu.activeIcon.name': 'icon-a',
+    'menu.normalIcon.path': '../dist/svg/icon-d.svg',
+    'menu.normalIcon.name': 'icon-d',
+    'menu.activeIcon.path': '../dist/svg/icon-b.svg',
+    'menu.activeIcon.name': 'icon-b',
+    'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
+    'menu.disabledIcon.name': 'icon-a',
+    'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
+    'menu.hoverIcon.name': 'icon-c',
     'menu.iconSize.width': '24px',
     'menu.iconSize.height': '24px',
 
     // submenu primary color
     'submenu.backgroundColor': '#1e1e1e',
-    'submenu.partition.color': '#858585',
+    'submenu.partition.color': '#3c3c3c',
 
     // submenu icons
-    'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
-    'submenu.normalIcon.name': 'icon-a',
+    'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
+    'submenu.normalIcon.name': 'icon-d',
     'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
     'submenu.activeIcon.name': 'icon-c',
     'submenu.iconSize.width': '32px',
     'submenu.iconSize.height': '32px',
 
     // submenu labels
-    'submenu.normalLabel.color': '#858585',
+    'submenu.normalLabel.color': '#8a8a8a',
     'submenu.normalLabel.fontWeight': 'lighter',
     'submenu.activeLabel.color': '#fff',
     'submenu.activeLabel.fontWeight': 'lighter',
 
     // checkbox style
-    'checkbox.border': '1px solid #ccc',
+    'checkbox.border': '0px',
     'checkbox.backgroundColor': '#fff',
 
-    // rango style
+    // range style
     'range.pointer.color': '#fff',
     'range.bar.color': '#666',
     'range.subbar.color': '#d1d1d1',
+
+    'range.disabledPointer.color': '#414141',
+    'range.disabledBar.color': '#282828',
+    'range.disabledSubbar.color': '#414141',
+
     'range.value.color': '#fff',
     'range.value.fontWeight': 'lighter',
     'range.value.fontSize': '11px',

diff --git a/examples/js/theme/white-theme.js b/examples/js/theme/white-theme.js
@@ -15,33 +15,37 @@ var whiteTheme = {
     'loadButton.backgroundColor': '#fff',
     'loadButton.border': '1px solid #ddd',
     'loadButton.color': '#222',
-    'loadButton.fontFamily': 'NotoSans, sans-serif',
+    'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
     'loadButton.fontSize': '12px',
 
     // download button
     'downloadButton.backgroundColor': '#fdba3b',
     'downloadButton.border': '1px solid #fdba3b',
     'downloadButton.color': '#fff',
-    'downloadButton.fontFamily': 'NotoSans, sans-serif',
+    'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
     'downloadButton.fontSize': '12px',
 
     // main icons
-    'menu.normalIcon.path': '../dist/svg/icon-b.svg',
-    'menu.normalIcon.name': 'icon-b',
-    'menu.activeIcon.path': '../dist/svg/icon-a.svg',
-    'menu.activeIcon.name': 'icon-a',
+    'menu.normalIcon.path': '../dist/svg/icon-d.svg',
+    'menu.normalIcon.name': 'icon-d',
+    'menu.activeIcon.path': '../dist/svg/icon-b.svg',
+    'menu.activeIcon.name': 'icon-b',
+    'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
+    'menu.disabledIcon.name': 'icon-a',
+    'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
+    'menu.hoverIcon.name': 'icon-c',
     'menu.iconSize.width': '24px',
     'menu.iconSize.height': '24px',
 
     // submenu primary color
     'submenu.backgroundColor': 'transparent',
-    'submenu.partition.color': '#858585',
+    'submenu.partition.color': '#e5e5e5',
 
     // submenu icons
-    'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
-    'submenu.normalIcon.name': 'icon-a',
-    'submenu.activeIcon.path': '../dist/svg/icon-d.svg',
-    'submenu.activeIcon.name': 'icon-d',
+    'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
+    'submenu.normalIcon.name': 'icon-d',
+    'submenu.activeIcon.path': '../dist/svg/icon-b.svg',
+    'submenu.activeIcon.name': 'icon-b',
     'submenu.iconSize.width': '32px',
     'submenu.iconSize.height': '32px',
 
@@ -59,6 +63,11 @@ var whiteTheme = {
     'range.pointer.color': '#333',
     'range.bar.color': '#ccc',
     'range.subbar.color': '#606060',
+
+    'range.disabledPointer.color': '#d3d3d3',
+    'range.disabledBar.color': 'rgba(85,85,85,0.06)',
+    'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
+
     'range.value.color': '#000',
     'range.value.fontWeight': 'normal',
     'range.value.fontSize': '11px',
@@ -68,6 +77,6 @@ var whiteTheme = {
     'range.title.fontWeight': 'lighter',
 
     // colorpicker style
-    'colorpicker.button.border': '1px solid #cbcbcb',
+    'colorpicker.button.border': '0px',
     'colorpicker.title.color': '#000'
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHNEnt FE Development Lab <dl_javascript@nhnent.com>",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/css/checkbox.styl b/src/css/checkbox.styl
@@ -27,7 +27,7 @@
           width: 14px;
           height: 14px;
           background-color: #fff;
-          top: 4px;
+          top: 6px;
           left: -19px;
           display: inline-block;
           margin: 0;
@@ -45,8 +45,8 @@
       position: relative;
       select
           width: 100%;
-          height: 25px;
-          margin-top: 9px;
+          height: 28px;
+          margin-top: 4px;
           border: 0;
           outline: 0;
           border-radius: 0;
@@ -55,15 +55,30 @@
           -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none;
-          padding: 0 7px 0 7px;
-  .{prefix}-selectlist-wrap:after
+          padding: 0 7px 0 10px;
+      .{prefix}-selectlist
+          display: none;
+          position: relative;
+          top: -1px;
+          border: 1px solid #ccc;
+          background-color: #fff;
+          border-top: 0px;
+          padding: 4px 0;
+          li
+              display: block;
+              text-align: left;
+              padding: 7px 10px;
+              font-family: 'Noto Sans', sans-serif;
+          li:hover
+                  background-color: rgba(81, 92, 230, 0.05);
+  .{prefix}-selectlist-wrap:before
       content: '';
       position: absolute;
       display: inline-block;
       width: 14px;
       height: 14px;
       right: 5px;
-      bottom: 5px;
+      top: 10px;
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');
       background-size: cover;
   .{prefix}-selectlist-wrap select::-ms-expand

diff --git a/src/css/colorpicker.styl b/src/css/colorpicker.styl
@@ -14,58 +14,75 @@
         border: 0;
         font-size: 11px;
         margin-top: 2px;
-
+        font-family: 'Noto Sans', sans-serif;
+    .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
+    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
+            border: 1px solid #ccc;
+    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
+            background-size: cover;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
     .tui-colorpicker-palette-preview
         border-radius: 100%;
         float: left;
-        width: 16px;
-        height: 16px;
-
+        width: 17px;
+        height: 17px;
+        border: 0;
     .color-picker-control
         position: absolute;
         display: none;
         z-index: 99;
-        width: 188px;
-        height: 112px;
+        width: 192px;
         background-color: #fff;
-        box-shadow: 0 3px 22px 0px #000;
-        padding: 14px;
+        box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);
+        padding: 16px;
         border-radius: 2px;
         .tui-colorpicker-palette-toggle-slider
             display: none;
         .tui-colorpicker-palette-button
+            border: 0;
             border-radius: 100%;
             margin: 2px;
+            background-size: cover;
+            font-size: 1px;
+            &[title='#ffffff']
+              border: 1px solid #ccc;
+            &[title='']
+              border: 1px solid #ccc;
         .triangle
             width: 0;
             height: 0;
-            border-right: 12px solid transparent;
-            border-top: 12px solid #fff;
-            border-left: 12px solid transparent;
+            border-right: 7px solid transparent;
+            border-top: 8px solid #fff;
+            border-left: 7px solid transparent;
             position: absolute;
-            bottom: -11px;
-            left: 77px;
+            bottom: -8px;
+            left: 84px;
         .tui-colorpicker-container,
         .tui-colorpicker-palette-container ul,
         .tui-colorpicker-palette-container
             width: 100%;
             height: auto;
 
 
-    .filter-color-item .color-picker-control label
-        font-color: #333;
-        font-weight: normal;
-        margin-right: 7pxleft
+    .filter-color-item
+        .color-picker-control label
+            font-color: #333;
+            font-weight: normal;
+            margin-right: 7pxleft
+        .tui-image-editor-checkbox
+            margin-top: 0;
+            input + label:before
+              left: -16px;
     .color-picker
         width: 100%;
         height: auto;
     .color-picker-value 
-        width: 30px;
-        height: 30px;
+        width: 32px;
+        height: 32px;
         border: 0px;
         border-radius: 100%;
         margin: auto;
-        margin-bottom: 4px;
+        margin-bottom: 1px;
         &.transparent
             border: 1px solid #cbcbcb;
             background-size: cover;

diff --git a/src/css/gridtable.styl b/src/css/gridtable.styl
@@ -5,6 +5,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        border: 1px solid rgba(255,255,255,0.7);
     .{prefix}-main.{prefix}-menu-flip,
     .{prefix}-main.{prefix}-menu-rotate
         .tui-image-editor
@@ -17,27 +18,27 @@
             width: 100%;
             height: 100%;
             border-collapse: collapse;
-            box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
             td
-                border: 1px solid #fff;
-                box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
+                border: 1px solid rgba(255,255,255,0.3);
             td.dot:before
                 content: '';
                 position: absolute;
-                width: 8px;
-                height: 8px;
-                border: 1px solid #cdcdcd;
+                box-sizing: border-box;
+                width: 10px;
+                height: 10px;
+                border: 0;
+                box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
                 border-radius: 100%;
                 background-color: #fff;
             td.dot.left-top:before
-                top: -4px;
-                left: -4px;
+                top: -5px;
+                left: -5px;
             td.dot.right-top:before
-                top: -4px;
-                right: -4px;
+                top: -5px;
+                right: -5px;
             td.dot.left-bottom:before
-                bottom: -4px;
-                left: -4px;
+                bottom: -5px;
+                left: -5px;
             td.dot.right-bottom:before
-                bottom: -4px;
-                right: -4px;
+                bottom: -5px;
+                right: -5px;