From 5d26c932ad7bc91256a742a8a3bfd8742d662360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 4 May 2018 12:51:02 +0900 Subject: [PATCH 001/158] feat: add design markup - 1 --- examples/example00-design.html | 322 +++++++++++++++++++++ examples/img/bg.png | Bin 0 -> 929 bytes examples/img/icon/ic-crop-active.svg | 7 + examples/img/icon/ic-crop.svg | 7 + examples/img/icon/ic-delete-active.svg | 6 + examples/img/icon/ic-delete-all-active.svg | 6 + examples/img/icon/ic-delete-all.svg | 6 + examples/img/icon/ic-delete.svg | 6 + examples/img/icon/ic-draw-active.svg | 6 + examples/img/icon/ic-draw.svg | 6 + examples/img/icon/ic-filter-active.svg | 7 + examples/img/icon/ic-filter.svg | 7 + examples/img/icon/ic-flip-active.svg | 6 + examples/img/icon/ic-flip.svg | 6 + examples/img/icon/ic-icon-active.svg | 5 + examples/img/icon/ic-icon.svg | 5 + examples/img/icon/ic-mask-active.svg | 6 + examples/img/icon/ic-mask.svg | 6 + examples/img/icon/ic-redo-active.svg | 7 + examples/img/icon/ic-redo.svg | 7 + examples/img/icon/ic-reset-active.svg | 7 + examples/img/icon/ic-reset.svg | 7 + examples/img/icon/ic-rotate-active.svg | 13 + examples/img/icon/ic-rotate.svg | 13 + examples/img/icon/ic-shape-active.svg | 6 + examples/img/icon/ic-shape.svg | 6 + examples/img/icon/ic-text-active.svg | 7 + examples/img/icon/ic-text.svg | 7 + examples/img/icon/ic-undo-active.svg | 7 + examples/img/icon/ic-undo.svg | 7 + examples/img/icon/img-bi.svg | 5 + package-lock.json | 8 + package.json | 3 +- 33 files changed, 529 insertions(+), 1 deletion(-) create mode 100644 examples/example00-design.html create mode 100644 examples/img/bg.png create mode 100644 examples/img/icon/ic-crop-active.svg create mode 100644 examples/img/icon/ic-crop.svg create mode 100644 examples/img/icon/ic-delete-active.svg create mode 100644 examples/img/icon/ic-delete-all-active.svg create mode 100644 examples/img/icon/ic-delete-all.svg create mode 100644 examples/img/icon/ic-delete.svg create mode 100644 examples/img/icon/ic-draw-active.svg create mode 100644 examples/img/icon/ic-draw.svg create mode 100644 examples/img/icon/ic-filter-active.svg create mode 100644 examples/img/icon/ic-filter.svg create mode 100644 examples/img/icon/ic-flip-active.svg create mode 100644 examples/img/icon/ic-flip.svg create mode 100644 examples/img/icon/ic-icon-active.svg create mode 100644 examples/img/icon/ic-icon.svg create mode 100644 examples/img/icon/ic-mask-active.svg create mode 100644 examples/img/icon/ic-mask.svg create mode 100644 examples/img/icon/ic-redo-active.svg create mode 100644 examples/img/icon/ic-redo.svg create mode 100644 examples/img/icon/ic-reset-active.svg create mode 100644 examples/img/icon/ic-reset.svg create mode 100644 examples/img/icon/ic-rotate-active.svg create mode 100644 examples/img/icon/ic-rotate.svg create mode 100644 examples/img/icon/ic-shape-active.svg create mode 100644 examples/img/icon/ic-shape.svg create mode 100644 examples/img/icon/ic-text-active.svg create mode 100644 examples/img/icon/ic-text.svg create mode 100644 examples/img/icon/ic-undo-active.svg create mode 100644 examples/img/icon/ic-undo.svg create mode 100644 examples/img/icon/img-bi.svg diff --git a/examples/example00-design.html b/examples/example00-design.html new file mode 100644 index 000000000..6a45b99ec --- /dev/null +++ b/examples/example00-design.html @@ -0,0 +1,322 @@ + + + + + 0. Design + + + + +
+ +
+
+ +
+ + +
+
+
+
+ +
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • +
    +
    • +
  • + +
    • +
  • + +
    • +
  • +
    +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+ + diff --git a/examples/img/bg.png b/examples/img/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..55e234d40f21b09a44e5a74d3a1322f1f79fd0fa GIT binary patch literal 929 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOY1)V64h?b`J1#c2)=|%1_J8No8Qr zIG>!5pyjEfaUwA>A>qVXZB4GC@}Q26o}h&NhYy@Ra9H6;!cm2JGh$*MNC-SQ+#p=D z``7`FMf$Is&Uk(PQ+avW)|!7}X6t7bg{fNc{9r8i$|^KsW>#jOFn3PSoH^Vn&lzr7 zon&=Yb@;}k5WRiR5{4soj49nBjItal_Zc@{R(!*+P$o3v>=C9gVWB5HDc%e>nLGuy zv31PlON?%~aZ<8V(_tI?3B3;K0}YoCyB@rAAn5wU##0LB%SF=IHMUd)eRgVge8-R^ z$;Qtn&c@1C%*M>-%@)gceA1OJp$SgU|1_OibmmKs5UYE_iDgdIBqSxI8m=@x;z|1QTw%k@o}}l3Nk6$IC3L1rO3bJhNbQ%&OdVCL;0is|M!dk z{r|t*@Iqa}9N80$3@YWB558V#tpY{{XMsm#F#`kN5fEmas?8@2jG8%_ArU1JzCKpT z`MG+DDfvmMdKI|^K-CNkHWgMtW^QUpqC!P(PF}H9g{=};g%ywu64qBz04piUwpEJo z4N!2-FG^J~)icpEP_pAvP*AWbN=dT{a&d!d2l8x{GD=Dctn~HE%ggo3jrH=2()A53 zEiLs8jP#9+bb%^#i!1X=5-W7`ij^UTz|3(;Elw`VEGWs$&r<-Io0ybeT4JlD1hNPY zAnr`9$VAwbR}A$Q(1ZFQ8GS=N1AVyJK&>_)QLBK=iqxD4m(1MMykejoc7}!qHemG_ zG6)-ybVed{T3RA&M3R7Nw9yB-AIU$EzygZ`L(7iKMjsyXc3dZKg?R!aL)Fv8F+?Lc z`OnYK&+FNg7$Xd&rKP8I%NsamE;_IxDaAqiC=U + + + + + + diff --git a/examples/img/icon/ic-crop.svg b/examples/img/icon/ic-crop.svg new file mode 100644 index 000000000..f7fef6c5c --- /dev/null +++ b/examples/img/icon/ic-crop.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-delete-active.svg b/examples/img/icon/ic-delete-active.svg new file mode 100644 index 000000000..53c534a9d --- /dev/null +++ b/examples/img/icon/ic-delete-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-delete-all-active.svg b/examples/img/icon/ic-delete-all-active.svg new file mode 100644 index 000000000..632f1a8f3 --- /dev/null +++ b/examples/img/icon/ic-delete-all-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-delete-all.svg b/examples/img/icon/ic-delete-all.svg new file mode 100644 index 000000000..4440cf63f --- /dev/null +++ b/examples/img/icon/ic-delete-all.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-delete.svg b/examples/img/icon/ic-delete.svg new file mode 100644 index 000000000..cc84890b0 --- /dev/null +++ b/examples/img/icon/ic-delete.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-draw-active.svg b/examples/img/icon/ic-draw-active.svg new file mode 100644 index 000000000..600e0ab83 --- /dev/null +++ b/examples/img/icon/ic-draw-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-draw.svg b/examples/img/icon/ic-draw.svg new file mode 100644 index 000000000..8b04ceb08 --- /dev/null +++ b/examples/img/icon/ic-draw.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-filter-active.svg b/examples/img/icon/ic-filter-active.svg new file mode 100644 index 000000000..058aafd2a --- /dev/null +++ b/examples/img/icon/ic-filter-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-filter.svg b/examples/img/icon/ic-filter.svg new file mode 100644 index 000000000..cfbd153c1 --- /dev/null +++ b/examples/img/icon/ic-filter.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-flip-active.svg b/examples/img/icon/ic-flip-active.svg new file mode 100644 index 000000000..432dcc2b3 --- /dev/null +++ b/examples/img/icon/ic-flip-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-flip.svg b/examples/img/icon/ic-flip.svg new file mode 100644 index 000000000..ead8a6479 --- /dev/null +++ b/examples/img/icon/ic-flip.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-icon-active.svg b/examples/img/icon/ic-icon-active.svg new file mode 100644 index 000000000..bcf880442 --- /dev/null +++ b/examples/img/icon/ic-icon-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/examples/img/icon/ic-icon.svg b/examples/img/icon/ic-icon.svg new file mode 100644 index 000000000..4a0aa553a --- /dev/null +++ b/examples/img/icon/ic-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/examples/img/icon/ic-mask-active.svg b/examples/img/icon/ic-mask-active.svg new file mode 100644 index 000000000..c0a6b0e45 --- /dev/null +++ b/examples/img/icon/ic-mask-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-mask.svg b/examples/img/icon/ic-mask.svg new file mode 100644 index 000000000..66a860855 --- /dev/null +++ b/examples/img/icon/ic-mask.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-redo-active.svg b/examples/img/icon/ic-redo-active.svg new file mode 100644 index 000000000..199ae6eee --- /dev/null +++ b/examples/img/icon/ic-redo-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-redo.svg b/examples/img/icon/ic-redo.svg new file mode 100644 index 000000000..0a8b7a88b --- /dev/null +++ b/examples/img/icon/ic-redo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-reset-active.svg b/examples/img/icon/ic-reset-active.svg new file mode 100644 index 000000000..c09d84f2f --- /dev/null +++ b/examples/img/icon/ic-reset-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-reset.svg b/examples/img/icon/ic-reset.svg new file mode 100644 index 000000000..9f4f5d9a4 --- /dev/null +++ b/examples/img/icon/ic-reset.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-rotate-active.svg b/examples/img/icon/ic-rotate-active.svg new file mode 100644 index 000000000..5205d0449 --- /dev/null +++ b/examples/img/icon/ic-rotate-active.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/examples/img/icon/ic-rotate.svg b/examples/img/icon/ic-rotate.svg new file mode 100644 index 000000000..1e3c32db7 --- /dev/null +++ b/examples/img/icon/ic-rotate.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/examples/img/icon/ic-shape-active.svg b/examples/img/icon/ic-shape-active.svg new file mode 100644 index 000000000..3341ec99f --- /dev/null +++ b/examples/img/icon/ic-shape-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-shape.svg b/examples/img/icon/ic-shape.svg new file mode 100644 index 000000000..42f91717d --- /dev/null +++ b/examples/img/icon/ic-shape.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/img/icon/ic-text-active.svg b/examples/img/icon/ic-text-active.svg new file mode 100644 index 000000000..3135b45e8 --- /dev/null +++ b/examples/img/icon/ic-text-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-text.svg b/examples/img/icon/ic-text.svg new file mode 100644 index 000000000..63da8be60 --- /dev/null +++ b/examples/img/icon/ic-text.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-undo-active.svg b/examples/img/icon/ic-undo-active.svg new file mode 100644 index 000000000..e0acc9068 --- /dev/null +++ b/examples/img/icon/ic-undo-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/ic-undo.svg b/examples/img/icon/ic-undo.svg new file mode 100644 index 000000000..309def7a1 --- /dev/null +++ b/examples/img/icon/ic-undo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/img/icon/img-bi.svg b/examples/img/icon/img-bi.svg new file mode 100644 index 000000000..b08a9d547 --- /dev/null +++ b/examples/img/icon/img-bi.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/package-lock.json b/package-lock.json index 78c02998b..1c3d1ad2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6471,6 +6471,14 @@ "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.3.0.tgz", "integrity": "sha512-OJUibhjdfq6jsav8ss6bg3qB8Mi7ugXprXZBOSAaNLy8GRUD3tt9TP9tF154419CCfo2tIIYl9KEJqznJg4+rA==" }, + "tui-color-picker": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tui-color-picker/-/tui-color-picker-2.2.0.tgz", + "integrity": "sha512-oAzMxF19bDExbvv7jVWQBPlrJ8sO3jQe+1rHqKkM4FtpvtGNlJO/ty19LW6pk9CCi1y43cgoG3QUt41ctGmygQ==", + "requires": { + "tui-code-snippet": "1.3.0" + } + }, "tui-jsdoc-template": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/tui-jsdoc-template/-/tui-jsdoc-template-1.2.2.tgz", diff --git a/package.json b/package.json index b7e2d625a..d627d00a8 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ }, "dependencies": { "core-js": "2.4.1", - "tui-code-snippet": "^1.3.0" + "tui-code-snippet": "^1.3.0", + "tui-color-picker": "^2.2.0" } } From 1a78ba5f42862d498029e36c0fb079d80eb58672 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 4 May 2018 18:45:23 +0900 Subject: [PATCH 002/158] changing: menu bar position change --- examples/example00-design.html | 115 +++++++++++++++++++++++++++------ 1 file changed, 94 insertions(+), 21 deletions(-) diff --git a/examples/example00-design.html b/examples/example00-design.html index 6a45b99ec..927e65252 100644 --- a/examples/example00-design.html +++ b/examples/example00-design.html @@ -14,24 +14,47 @@ box-sizing: border-box; } + .tui-image-editor-container { + height:100%; + position: relative; + background-image: url(img/bg.png); + } + .tui-image-editor-header { - position: fixed; + min-width: 533px; + position: absolute; top: 0; width: 100%; - padding: 8px; } - .tui-image-editor-header .logo { + .tui-image-editor-header .logo, + .tui-image-editor-controls .logo { float: left; width: 30%; - padding: 8px; + padding: 17px; } - .tui-image-editor-header .buttons { + .tui-image-editor-header .buttons, + .tui-image-editor-controls .buttons { float: right; + margin: 8px; } - .tui-image-editor-header .buttons button { + .tui-image-editor-controls .logo { + width: 270px; + height: 100%; + display: none; + } + + .tui-image-editor-controls .buttons { + width: 270px; + height: 100%; + display: none; + } + + + .tui-image-editor-header .buttons button, + .tui-image-editor-controls .buttons button { width: 120px; height: 40px; outline: none; @@ -44,47 +67,81 @@ cursor: pointer; } - .tui-image-editor-header .buttons button.download { + .tui-image-editor-container .buttons button.download { background-color: #fdba3b; border-color: #fdba3b; color: #fff; } + .tui-image-editor { + position: absolute; + width: 100%; + top: 0; + bottom: calc(64px + 150px); + } + .tui-image-editor .main { border: 4px solid red; position: absolute; top: 64px; - bottom: 214px; + bottom: 0; right: 0; left: 0; } - .tui-image-editor-container { - height:100%; - position: relative; - background-image: url(img/bg.png); - } - #tui-image-editor-controls { + .tui-image-editor-controls { width: 100%; position: absolute; bottom: 0; } - #tui-image-editor-controls .sub-menu { + .tui-image-editor-controls .sub-menu { + position: absolute; border: 1px solid green; width: 100%; height: 150px; + bottom: 64px; } - #tui-image-editor-controls .menu { + .tui-image-editor-controls .menu { + position: absolute; background-color: #151515; width: 100%; height: 64px; display: table; + bottom: 0; } - #tui-image-editor-controls .menu ul { + .top .tui-image-editor-controls .logo { + display: table-cell; + } + + .top .tui-image-editor-controls .buttons { + display: table-cell; + } + + .top .tui-image-editor .main { + top: calc(64px + 150px); + height: 100%; + } + + .top .tui-image-editor-controls { + top: 0; + bottom: inherit; + } + + .top .tui-image-editor-controls .sub-menu { + top: 64px; + bottom: inherit; + } + + .top .tui-image-editor-controls .menu { + top: 0; + bottom: inherit; + } + + .tui-image-editor-controls .menu ul { width: auto; list-style: none; padding: 0; @@ -93,19 +150,27 @@ text-align: center; vertical-align: middle; white-space: nowrap; + overflow: hidden; } - #tui-image-editor-controls .menu li { + .tui-image-editor-controls .menu li { display: inline-block; border-radius: 2px; padding: 7px 8px 3px 8px; cursor: pointer; } - #tui-image-editor-controls .menu li.active { + .tui-image-editor-controls .menu li.active { background-color: #fff; } + @media screen and (max-width: 1234px) { + .top .tui-image-editor-controls .logo { + display: none; + } + } + + .image-editor-icon { display: inline-block; background-size: cover; @@ -259,12 +324,15 @@ -
+
-
+
+
  • @@ -315,6 +383,11 @@
+ +
+ + +
From 5cf6b847cb57f4347c3654c928fa300183977aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 4 May 2018 18:59:23 +0900 Subject: [PATCH 003/158] change markup ing --- examples/example00-design.html | 153 ++++++++++++++++----------------- 1 file changed, 73 insertions(+), 80 deletions(-) diff --git a/examples/example00-design.html b/examples/example00-design.html index 927e65252..72074b57c 100644 --- a/examples/example00-design.html +++ b/examples/example00-design.html @@ -77,7 +77,7 @@ position: absolute; width: 100%; top: 0; - bottom: calc(64px + 150px); + bottom: 64px; } .tui-image-editor .main { @@ -90,21 +90,15 @@ } + /* .tui-image-editor-controls { width: 100%; position: absolute; bottom: 0; } + */ - .tui-image-editor-controls .sub-menu { - position: absolute; - border: 1px solid green; - width: 100%; - height: 150px; - bottom: 64px; - } - - .tui-image-editor-controls .menu { + .tui-image-editor-controls { position: absolute; background-color: #151515; width: 100%; @@ -113,6 +107,11 @@ bottom: 0; } + .left .tui-image-editor { + left: 64px; + width: calc(100% - 64px); + } + .top .tui-image-editor-controls .logo { display: table-cell; } @@ -122,7 +121,7 @@ } .top .tui-image-editor .main { - top: calc(64px + 150px); + top: 64px; height: 100%; } @@ -131,17 +130,13 @@ bottom: inherit; } - .top .tui-image-editor-controls .sub-menu { - top: 64px; - bottom: inherit; - } - .top .tui-image-editor-controls .menu { + .top .tui-image-editor-controls { top: 0; bottom: inherit; } - .tui-image-editor-controls .menu ul { + .tui-image-editor-controls ul { width: auto; list-style: none; padding: 0; @@ -153,14 +148,14 @@ overflow: hidden; } - .tui-image-editor-controls .menu li { + .tui-image-editor-controls li { display: inline-block; border-radius: 2px; padding: 7px 8px 3px 8px; cursor: pointer; } - .tui-image-editor-controls .menu li.active { + .tui-image-editor-controls li.active { background-color: #fff; } @@ -312,7 +307,7 @@ -
+
@@ -327,67 +322,65 @@
+
-
-
- -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • -
    -
    • -
  • - -
    • -
  • - -
    • -
  • -
    -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
- - -
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • +
    +
    • +
  • + +
    • +
  • + +
    • +
  • +
    +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ +
From 614fd8f018c331f0b6b2e18c64627239f6d2887c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Tue, 8 May 2018 17:45:03 +0900 Subject: [PATCH 004/158] css for markup align left, right, bottom, top --- examples/example00-design.html | 295 +++++++++++++------------------ examples/img/icon/svg-bundle.css | 35 ++++ examples/img/icon/svg-bundle.svg | 31 ++++ examples/img/svg-bundle.css | 0 examples/img/svg-bundle.svg | 2 + 5 files changed, 189 insertions(+), 174 deletions(-) create mode 100644 examples/img/icon/svg-bundle.css create mode 100644 examples/img/icon/svg-bundle.svg create mode 100644 examples/img/svg-bundle.css create mode 100644 examples/img/svg-bundle.svg diff --git a/examples/example00-design.html b/examples/example00-design.html index 72074b57c..06761d870 100644 --- a/examples/example00-design.html +++ b/examples/example00-design.html @@ -3,21 +3,29 @@ 0. Design - +
-
-
+
+
+ sub-menu +
+
@@ -329,49 +250,75 @@
  • - + + +
  • - + + +
  • - + + +
  • -
    +
  • - + + +
  • - + + +
  • -
    +
  • - + + +
  • - + + +
  • - + + +
  • - + + +
  • - + + +
  • - + + +
  • - + + +
  • - + + +
  • diff --git a/examples/img/icon/svg-bundle.css b/examples/img/icon/svg-bundle.css new file mode 100644 index 000000000..0439ce1be --- /dev/null +++ b/examples/img/icon/svg-bundle.css @@ -0,0 +1,35 @@ +.svg_ic-crop, +.svg_ic-delete-active, +.svg_ic-crop-active, +.svg_ic-delete-all-active, +.svg_ic-delete-all, +.svg_ic-delete, +.svg_ic-draw, +.svg_ic-draw-active, +.svg_ic-filter, +.svg_ic-filter-active, +.svg_ic-icon-active, +.svg_ic-icon, +.svg_ic-mask, +.svg_ic-mask-active, +.svg_ic-redo, +.svg_ic-reset, +.svg_ic-reset-active, +.svg_ic-redo-active, +.svg_ic-rotate-active, +.svg_ic-rotate, +.svg_ic-shape, +.svg_ic-shape-active, +.svg_ic-undo-active, +.svg_ic-text-active, +.svg_ic-undo, +.svg_ic-flip-active, +.svg_ic-flip, +.svg_ic-text { + width: 24px; + height: 24px; +} +.svg_img-bi { + width: 257px; + height: 26px; +} diff --git a/examples/img/icon/svg-bundle.svg b/examples/img/icon/svg-bundle.svg new file mode 100644 index 000000000..9e432a357 --- /dev/null +++ b/examples/img/icon/svg-bundle.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/img/svg-bundle.css b/examples/img/svg-bundle.css new file mode 100644 index 000000000..e69de29bb diff --git a/examples/img/svg-bundle.svg b/examples/img/svg-bundle.svg new file mode 100644 index 000000000..5d6cc5277 --- /dev/null +++ b/examples/img/svg-bundle.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file From 9729357ffd00d9e0c681d8462fbfe81808ebfdec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Tue, 8 May 2018 20:49:13 +0900 Subject: [PATCH 005/158] markup middle commit --- examples/example00-design.html | 17 +++++++-- examples/img/icon/ic-crop-active.svg | 7 ---- examples/img/icon/ic-delete-active.svg | 6 ---- examples/img/icon/ic-delete-all-active.svg | 6 ---- examples/img/icon/ic-draw-active.svg | 6 ---- examples/img/icon/ic-filter-active.svg | 7 ---- examples/img/icon/ic-flip-active.svg | 6 ---- examples/img/icon/ic-icon-active.svg | 5 --- examples/img/icon/ic-mask-active.svg | 6 ---- examples/img/icon/ic-redo-active.svg | 7 ---- examples/img/icon/ic-reset-active.svg | 7 ---- examples/img/icon/ic-rotate-active.svg | 13 ------- examples/img/icon/ic-shape-active.svg | 6 ---- examples/img/icon/ic-text-active.svg | 7 ---- examples/img/icon/ic-undo-active.svg | 7 ---- examples/img/icon/svg-bundle.css | 40 ++++++++++++---------- examples/img/icon/svg-bundle.svg | 24 +++---------- 17 files changed, 42 insertions(+), 135 deletions(-) delete mode 100644 examples/img/icon/ic-crop-active.svg delete mode 100644 examples/img/icon/ic-delete-active.svg delete mode 100644 examples/img/icon/ic-delete-all-active.svg delete mode 100644 examples/img/icon/ic-draw-active.svg delete mode 100644 examples/img/icon/ic-filter-active.svg delete mode 100644 examples/img/icon/ic-flip-active.svg delete mode 100644 examples/img/icon/ic-icon-active.svg delete mode 100644 examples/img/icon/ic-mask-active.svg delete mode 100644 examples/img/icon/ic-redo-active.svg delete mode 100644 examples/img/icon/ic-reset-active.svg delete mode 100644 examples/img/icon/ic-rotate-active.svg delete mode 100644 examples/img/icon/ic-shape-active.svg delete mode 100644 examples/img/icon/ic-text-active.svg delete mode 100644 examples/img/icon/ic-undo-active.svg diff --git a/examples/example00-design.html b/examples/example00-design.html index 06761d870..73af826c9 100644 --- a/examples/example00-design.html +++ b/examples/example00-design.html @@ -4,6 +4,8 @@ 0. Design + + +
    @@ -250,8 +253,10 @@
    • - - + + + +
    • @@ -331,5 +336,13 @@
+ diff --git a/examples/img/icon/ic-crop-active.svg b/examples/img/icon/ic-crop-active.svg deleted file mode 100644 index b357624c3..000000000 --- a/examples/img/icon/ic-crop-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/ic-delete-active.svg b/examples/img/icon/ic-delete-active.svg deleted file mode 100644 index 53c534a9d..000000000 --- a/examples/img/icon/ic-delete-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-delete-all-active.svg b/examples/img/icon/ic-delete-all-active.svg deleted file mode 100644 index 632f1a8f3..000000000 --- a/examples/img/icon/ic-delete-all-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-draw-active.svg b/examples/img/icon/ic-draw-active.svg deleted file mode 100644 index 600e0ab83..000000000 --- a/examples/img/icon/ic-draw-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-filter-active.svg b/examples/img/icon/ic-filter-active.svg deleted file mode 100644 index 058aafd2a..000000000 --- a/examples/img/icon/ic-filter-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/ic-flip-active.svg b/examples/img/icon/ic-flip-active.svg deleted file mode 100644 index 432dcc2b3..000000000 --- a/examples/img/icon/ic-flip-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-icon-active.svg b/examples/img/icon/ic-icon-active.svg deleted file mode 100644 index bcf880442..000000000 --- a/examples/img/icon/ic-icon-active.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/examples/img/icon/ic-mask-active.svg b/examples/img/icon/ic-mask-active.svg deleted file mode 100644 index c0a6b0e45..000000000 --- a/examples/img/icon/ic-mask-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-redo-active.svg b/examples/img/icon/ic-redo-active.svg deleted file mode 100644 index 199ae6eee..000000000 --- a/examples/img/icon/ic-redo-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/ic-reset-active.svg b/examples/img/icon/ic-reset-active.svg deleted file mode 100644 index c09d84f2f..000000000 --- a/examples/img/icon/ic-reset-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/ic-rotate-active.svg b/examples/img/icon/ic-rotate-active.svg deleted file mode 100644 index 5205d0449..000000000 --- a/examples/img/icon/ic-rotate-active.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/examples/img/icon/ic-shape-active.svg b/examples/img/icon/ic-shape-active.svg deleted file mode 100644 index 3341ec99f..000000000 --- a/examples/img/icon/ic-shape-active.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/examples/img/icon/ic-text-active.svg b/examples/img/icon/ic-text-active.svg deleted file mode 100644 index 3135b45e8..000000000 --- a/examples/img/icon/ic-text-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/ic-undo-active.svg b/examples/img/icon/ic-undo-active.svg deleted file mode 100644 index e0acc9068..000000000 --- a/examples/img/icon/ic-undo-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/examples/img/icon/svg-bundle.css b/examples/img/icon/svg-bundle.css index 0439ce1be..ddd613c2c 100644 --- a/examples/img/icon/svg-bundle.css +++ b/examples/img/icon/svg-bundle.css @@ -1,31 +1,17 @@ .svg_ic-crop, -.svg_ic-delete-active, -.svg_ic-crop-active, -.svg_ic-delete-all-active, .svg_ic-delete-all, .svg_ic-delete, .svg_ic-draw, -.svg_ic-draw-active, .svg_ic-filter, -.svg_ic-filter-active, -.svg_ic-icon-active, -.svg_ic-icon, .svg_ic-mask, -.svg_ic-mask-active, -.svg_ic-redo, -.svg_ic-reset, -.svg_ic-reset-active, -.svg_ic-redo-active, -.svg_ic-rotate-active, +.svg_ic-icon, .svg_ic-rotate, .svg_ic-shape, -.svg_ic-shape-active, -.svg_ic-undo-active, -.svg_ic-text-active, +.svg_ic-text, .svg_ic-undo, -.svg_ic-flip-active, +.svg_ic-redo, .svg_ic-flip, -.svg_ic-text { +.svg_ic-reset { width: 24px; height: 24px; } @@ -33,3 +19,21 @@ width: 257px; height: 26px; } + + +svg use { + display: none; +} +svg .normal { + display: block; +} +.active svg .active { + display: block; +} +.hover svg .hover { + display: block; +} +.active svg .normal, +.hover svg .normal { + display: none; +} diff --git a/examples/img/icon/svg-bundle.svg b/examples/img/icon/svg-bundle.svg index 9e432a357..f93237c6f 100644 --- a/examples/img/icon/svg-bundle.svg +++ b/examples/img/icon/svg-bundle.svg @@ -1,31 +1,17 @@ - - - - - - - - - - - - - - - + + - - - - + + + From 605acd06d16b0c56c4a55ee2368dbd3b0e528150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Thu, 10 May 2018 19:55:50 +0900 Subject: [PATCH 006/158] feat add ui code --- examples/backup.html | 419 +++++++++++++++++++++++++++++++ examples/example00-design.html | 192 +++++--------- src/js/imageEditor.js | 8 + src/js/template/controls.js | 114 +++++++++ src/js/template/mainContainer.js | 19 ++ src/js/ui.js | 26 ++ src/js/util.js | 14 ++ 7 files changed, 668 insertions(+), 124 deletions(-) create mode 100644 examples/backup.html create mode 100644 src/js/template/controls.js create mode 100644 src/js/template/mainContainer.js create mode 100644 src/js/ui.js diff --git a/examples/backup.html b/examples/backup.html new file mode 100644 index 000000000..8511257ae --- /dev/null +++ b/examples/backup.html @@ -0,0 +1,419 @@ + + + + + 0. Design + + + + + + +
+
+
+ +
+ + +
+
+
+
+ sub-menu +
+
+
+
+
+ +
    +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • +
    +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • +
    +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + +
    • +
+ +
+ + +
+
+
+ + + + + + + + + diff --git a/examples/example00-design.html b/examples/example00-design.html index 73af826c9..5e67a5933 100644 --- a/examples/example00-design.html +++ b/examples/example00-design.html @@ -4,7 +4,6 @@ 0. Design - - +
@@ -618,11 +20,8 @@ - - @@ -23,13 +23,13 @@ - - - - - - - diff --git a/examples/example03-theme.html b/examples/example03-theme.html new file mode 100644 index 000000000..2cab84082 --- /dev/null +++ b/examples/example03-theme.html @@ -0,0 +1,59 @@ + + + + + 0. Design + + + + + + + +
+ + + + + + + + + + + diff --git a/examples/js/theme/black-theme.js b/examples/js/theme/black-theme.js new file mode 100644 index 000000000..89dd4c523 --- /dev/null +++ b/examples/js/theme/black-theme.js @@ -0,0 +1,91 @@ +var blackTheme = { + common: { + backgroundImage: 'none', + backgroundColor: '#1e1e1e', + border: '0px' + }, + header: { + backgroundImage: 'none', + backgroundColor: 'transparent', + border: '0px' + }, + loadButton: { + backgroundColor: '#fff', + border: '1px solid #ddd', + color: '#222', + fontFamily: 'NotoSans, sans-serif', + fontSize: '12px' + }, + downloadButton: { + backgroundColor: '#fdba3b', + border: '1px solid #fdba3b', + color: '#fff', + fontFamily: 'NotoSans, sans-serif', + fontSize: '12px' + }, + menu: { + icon: { + normal: { + path: '../dist', + name: 'icon-a' + }, + active: { + path: '../dist', + name: 'icon-b' + } + } + }, + submenu: { + backgroundColor: 'transparent', + partition: { + color: '#858585' + }, + icon: { + normal: { + path: '../dist', + name: 'icon-a' + }, + active: { + path: '../dist', + name: 'icon-c' + } + }, + label: { + normal: { + color: '#858585', + fontWeight: 'lighter' + }, + active: { + color: '#fff', + fontWeight: 'lighter' + } + }, + checkbox: { + border: '1px solid #ccc', + backgroundColor: '#fff' + }, + range: { + pointer: { + color: '#fff' + }, + value: { + color: '#fff', + fontWeight: 'lighter', + border: '1px solid #353535', + backgroundColor: '#151515' + }, + title: { + color: '#fff', + fontWeight: 'lighter' + } + }, + colorpicker: { + button: { + border: '1px solid #1e1e1e' + }, + title: { + color: '#fff' + } + } + } +}; diff --git a/examples/js/theme/white-theme.js b/examples/js/theme/white-theme.js new file mode 100644 index 000000000..95d93128d --- /dev/null +++ b/examples/js/theme/white-theme.js @@ -0,0 +1,89 @@ +var whiteTheme = { + common: { + backgroundImage: './img/bg.png', + backgroundColor: '#fff', + border: '0px' + }, + header: { + backgroundImage: 'none', + backgroundColor: 'transparent', + border: '0px' + }, + loadButton: { + backgroundColor: '#fff', + border: '1px solid #ddd', + color: '#222', + fontFamily: 'NotoSans, sans-serif', + fontSize: '12px' + }, + downloadButton: { + backgroundColor: '#fdba3b', + border: '1px solid #fdba3b', + color: '#fff', + fontFamily: 'NotoSans, sans-serif', + fontSize: '12px' + }, + menu: { + icon: { + normal: { + path: '../dist', + name: 'icon-a' + }, + active: { + path: '../dist', + name: 'icon-b' + } + } + }, + submenu: { + backgroundColor: 'transparent', + partition: { + color: '#858585' + }, + icon: { + normal: { + path: '../dist', + name: 'icon-a' + }, + active: { + path: '../dist', + name: 'icon-d' + } + }, + label: { + normal: { + color: '#858585', + fontWeight: 'normal' + }, + active: { + color: '#000', + fontWeight: 'normal' + } + }, + checkbox: { + border: '1px solid #ccc', + backgroundColor: '#fff' + }, + range: { + pointer: { + color: '#333' + }, + value: { + color: '#000', + fontWeight: 'normal', + backgroundColor: '#f5f5f5' + }, + title: { + color: '#000' + } + }, + colorpicker: { + button: { + border: '1px solid #cbdbdb' + }, + title: { + color: '#000' + } + } + } +}; diff --git a/karma.conf.js b/karma.conf.js index bb0294b8b..5cb56fec5 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -84,7 +84,7 @@ function setConfig(defaultConfig, server) { }; } else { defaultConfig.browsers = [ - 'ChromeHeadless' + 'FirefoxHeadless' ]; } } diff --git a/package.json b/package.json index 974b6d691..93091ac57 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "karma-chrome-launcher": "^2.0.0", "karma-coverage": "^1.1.1", "karma-es5-shim": "0.0.4", + "karma-firefox-launcher": "^1.1.0", "karma-jasmine": "^1.0.2", "karma-jquery": "^0.2.2", "karma-junit-reporter": "^1.2.0", diff --git a/src/css/index.styl b/src/css/index.styl index 85ed5d3e9..6eef68fe9 100644 --- a/src/css/index.styl +++ b/src/css/index.styl @@ -1,137 +1,688 @@ prefix = 'tui-image-editor' -.{prefix}-container - marign 0 - padding 0 - box-sizing border-box - min-height 300px - height 100% - position relative - background-color #282828 - border 1px solid #000 - overflow hidden - - div, ul, label, input, li - box-sizing: border-box; - margin: 0; - padding: 0; -/* BUTTON AND LOGO */ -.{prefix}-container - .{prefix}-header - min-width: 533px; - position: absolute; - background-color: #151515; - top: 0; - width: 100%; - .{prefix}-header-buttons, .{prefix}-controls-buttons - float: right; - margin: 8px; - .{prefix}-header-logo, .{prefix}-controls-logo - float: left; - width: 30%; - padding: 17px; - .{prefix}-controls-logo, .{prefix}-controls-buttons - width: 270px; ++prefix-classes(prefix) + .-container + marign: 0; + padding: 0; + box-sizing: border-box; + min-height: 300px; height: 100%; - display: none; - .{prefix}-header-buttons, .{prefix}-controls-buttons - button - position: relative; - width: 120px; - height: 40px; - outline: none; - border-radius: 20px; - border: 1px solid #ddd; - padding-top: 5px; - font-family: NotoSans, sans-serif; - font-size: 12px; - font-weight: bold; - cursor: pointer; - .{prefix}-download-btn - background-color: #fdba3b; - border-color: #fdba3b; - color: #fff; - .{prefix}-load-btn - border: 1px solid blue; - position: absolute; - left: 0; - right: 0; - display: inline-block; - top: 0; - bottom: 0; - width: 100%; - opacity: 0; - cursor: pointer; - .{prefix}-main-container - position: absolute; - width: 100%; - top: 0; - bottom: 64px; - .{prefix}-main - position: absolute; - text-align: center; - top: 64px; - bottom: 0; - right: 0; - left: 0; - .{prefix}-wrap - position: absolute; - bottom: 150px; - width: 100%; - overflow: auto; - .{prefix} - position: absolute; - display: inline-block; - transition: all .7s ease; + position: relative; + background-color: #282828; + border: 1px solid #000; + overflow: hidden; + + div, ul, label, input, li + box-sizing: border-box; + margin: 0; + padding: 0; + + .-header + /* BUTTON AND LOGO */ + min-width: 533px; + position: absolute; + background-color: #151515; + top: 0; + width: 100%; + .-header-buttons, + .-controls-buttons + float: right; + margin: 8px; + + .-header-logo, + .-controls-logo + float: left; + width: 30%; + padding: 17px; + + .-controls-logo, + .-controls-buttons + width: 270px; + height: 100%; + display: none; + + .-header-buttons button, + .-controls-buttons button + position: relative; + width: 120px; + height: 40px; + outline: none; + border-radius: 20px; + border: 1px solid #ddd; + padding-top: 5px; + font-family: NotoSans, sans-serif; + font-size: 12px; + font-weight: bold; + cursor: pointer; + + .-download-btn + background-color: #fdba3b; + border-color: #fdba3b; + color: #fff; + .-load-btn + border: 1px solid blue; + position: absolute; + left: 0; + right: 0; + display: inline-block; + top: 0; + bottom: 0; + width: 100%; + opacity: 0; + cursor: pointer; + .-main-container + position: absolute; + width: 100%; + top: 0; + bottom: 64px; + .-main + position: absolute; + text-align: center; + top: 64px; + bottom: 0; + right: 0; + left: 0; + .-wrap + position: absolute; + bottom: 150px; + width: 100%; + overflow: auto; + . + position: absolute; + display: inline-block; + transition: all .7s ease; + /* GRID VISUAL OF FLIP AND ROTATE MENU */ .{prefix}-container - .{prefix}-grid-visual - display: none; - position: absolute; - width: 100%; - height: 100%; - table - 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); - td.dot.left-top:before - top: -4px; - left: -4px; - td.dot.right-top:before - top: -4px; - right: -4px; - td.dot.left-bottom:before - bottom: -4px; - left: -4px; - td.dot.right-bottom:before - bottom: -4px; - right: -4px; - .{prefix}-main.flip, .{prefix}-main.rotate .{prefix}-grid-visual - display: block; + display: none; + position: absolute; + width: 100%; + height: 100%; + .{prefix}.-main.flip .{prefix}-grid-visual, + .{prefix}-main.rotate ..{prefix}-grid-visual + display: block; + .{prefix}-grid-visual + table + 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); + td.dot:before + content: ''; + position: absolute; + width: 8px; + height: 8px; + border: 1px solid #cdcdcd; + border-radius: 100%; + background-color: #fff; + td.dot.left-top:before + top: -4px; + left: -4px; + td.dot.right-top:before + top: -4px; + right: -4px; + td.dot.left-bottom:before + bottom: -4px; + left: -4px; + td.dot.right-bottom:before + bottom: -4px; + right: -4px; /* SUBMENU */ .{prefix}-container - .{prefix}-submenu - display: none; - position: absolute; - bottom: 0; - width:100%; - height: 150px; - white-space: nowrap; - .button:hover - > label + .{prefix}-submenu + display: none; + position: absolute; + bottom: 0; + width:100%; + height: 150px; + white-space: nowrap; + .button:hover svg > use.active + display: block; + .menu + li + display: inline-block; + vertical-align: top; + .newline + display: block; + margin-top: 14px; + .button + position: relative; + cursor: pointer; + display: inline-block; + font-weight: normal; + font-size: 11px; + margin: 0 7px 0 7px; + label + display: inline-block; + cursor: pointer; + padding-top: 5px; + font-family: sans-serif; + font-size: 11px; + letter-spacing: 0.7px; + .button.apply label, + .button.cancel label + vertical-align: 7px; + > div + display: none; + vertical-align: bottom; + + .{prefix}-partition > div + width: 1px; + height: 52px; + border-left: 1px solid #3c3c3c; + margin: 0 12px 0 14px; + .{prefix}-main.filter .tui-image-editor-partition > div + height: 108px; + margin: 0 29px 0 0px; + .{prefix}-submenu-align + text-align: left; + margin-right: 30px; + label + width: 55px; + white-space: nowrap; + .{prefix}-submenu-align:first-child + margin-right: 0; + label + width: 70px; + .{prefix}-main.crop .{prefix}-submenu > div.crop, + .{prefix}-main.flip .{prefix}-submenu > div.flip, + .{prefix}-main.rotate .{prefix}-submenu > div.rotate, + .{prefix}-main.shape .{prefix}-submenu > div.shape, + .{prefix}-main.text .{prefix}-submenu > div.text, + .{prefix}-main.mask .{prefix}-submenu > div.mask, + .{prefix}-main.icon .{prefix}-submenu > div.icon, + .{prefix}-main.draw .{prefix}-submenu > div.draw, + .{prefix}-main.filter .{prefix}-submenu > div.filter + display: table-cell; + +/* FOR FILTER MENU */ +.{prefix}-container + .filter-color-item + display: inline-block; + .tui-image-editor-checkbox + display: block; + +/* VIRTUAL CHECKBOX */ + .{prefix}-container + .{prefix}-checkbox-wrap + display: inline-block !important; + text-align: left; + .{prefix}-checkbox-wrap.fixed-width + width: 187px; + white-space: normal; + .{prefix}-checkbox + display: inline-block; + margin: 1px 0 1px 0; + input + width: 14px; + height: 14px; + opacity: 0; + input + label + color: #fff; + height: 14px; + position: relative; + input + label:before + content: ''; + position: absolute; + width: 14px; + height: 14px; + background-color: #fff; + top: 4px; + left: -19px; + display: inline-block; + margin: 0; + text-align: center; + font-size: 11px; + border: 0; + border-radius: 2px; + padding-top: 1px; + box-sizing: border-box; + input[type='checkbox']:checked + label:before + background-size: cover; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg=='); + + .{prefix}-selectlist-wrap + position: relative; + select + width: 100%; + height: 25px; + margin-top: 9px; + border: 0; + outline: 0; + border-radius: 0; + border: 1px solid #cbdbdb; + background-color: #fff; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0 7px 0 7px; + .{prefix}-selectlist-wrap:after + content: ''; + position: absolute; + display: inline-block; + width: 14px; + height: 14px; + right: 5px; + bottom: 5px; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII='); + background-size: cover; + .{prefix}-selectlist-wrap select::-ms-expand + display:none; + + +/* VIRTUAL RANGE */ +.{prefix}-container + .{prefix}-range + position: relative; + top: 7px; + width: 166px; + height: 17px; + display: inline-block; + .{prefix}-virtual-range-bar + top: 7px; + position: absolute; + width: 100%; + height: 2px; + background-color: #bcbcbc; + .{prefix}-virtual-range-pointer + position: absolute; + cursor: pointer; + top: -5px; + left: 0; + width: 12px; + height: 12px; + background-color: #fff; + border-radius: 100%; + .{prefix}-range-wrap + display: inline-block; + &.short .tui-image-editor-range + width: 100px; + .color-picker-control + .{prefix}-range + width: 108px; + .{prefix}-virtual-range-pointer + background-color: #333; + .{prefix}-range-wrap.newline.short + margin-top: 0; + margin-left: 17px; + label + color: #8e8e8e; + font-weight: normal; + .{prefix}-range-wrap label + vertical-align: baseline; + font-size: 11px; + margin-right: 7px; color: #fff; - svg > use.active + .{prefix}-range-value + width: 40px; + height: 24px; + outline: none; + border-radius: 2px; + box-shadow: none; + border: 1px solid #d5d5d5; + text-align: center; + background-color: #1c1c1c; + color: #fff; + font-weight: lighter; + vertical-align: baseline; + font-family: sans-serif; + padding-top: 2px; + .{prefix}-controls + position: absolute; + background-color: #151515; + width: 100%; + height: 64px; + display: table; + bottom: 0; + z-index: 1; + .{prefix}-icpartition + display: inline-block; + background-color: #282828; + width: 1px; + height: 24px; + + +/* POSITION LEFT */ +.{prefix}-container + &.left + .{prefix}-submenu + left: 0; + height: 100%; + width: 248px; + .{prefix}-main-container + left: 64px; + width: calc(100% - 64px); + height: 100%; + .{prefix}-controls + width: 64px; + height: 100%; + display: table; + +/* POSITION LEFT & RIGHT */ +.{prefix}-container + &.left, &.right + .{prefix}-submenu + white-space: normal; + > div + vertical-align: middle; + .{prefix}-controls li + display: block; + width: 39px; + margin: 4px 0 4px 12px; + .{prefix}-icpartition + position: relative; + top: -7px; + width: 24px; + height: 1px; + .{prefix}-submenu + .{prefix}-partition + display: block; + width: 75%; + margin: auto; + > div + border-left: 0; + height:10px; + border-bottom: 1px solid #3c3c3c; + width: 100%; + margin: 0; + .{prefix}-submenu-align + margin-right: 0; + .menu + li + margin-top: 15px; + .tui-colorpicker-clearfix li + margin-top: 0; + + .{prefix}-checkbox-wrap.fixed-width + width: 182px; + white-space: normal; + .{prefix}-range-wrap.newline label.range display: block; - - + text-align: left; + width: 75%; + margin: auto; + .{prefix}-range + width: 136px; + #icon-add-button .button + width: 45px; + + +/* POSITION RIGIHT */ +.{prefix}-container + &.right + .{prefix}-submenu + right: 0; + height: 100%; + width: 248px; + .{prefix}-main-container + right: 64px; + width: calc(100% - 64px); + height: 100%; + .{prefix}-controls + right: 0; + width: 64px; + height: 100%; + display: table; + + +/* POSITION TOP & BOTTOM */ +.{prefix}-container + &.top, &.bottom + .{prefix}-submenu + .{prefix}-partition.only-left-right + display: none; + + +/* POSITION BOTTOM */ +.{prefix}-container + &.bottom .tui-image-editor-submenu > div + padding-bottom: 24px; + +/* POSITION TOP */ +.{prefix}-container + &.top + .{prefix}-submenu + top: 0; + bottom: inherit; + > div + padding-top: 24px; + vertical-align: top; + .{prefix}-controls-logo + display: table-cell; + .{prefix}-controls-buttons + display: table-cell; + .{prefix}-main + top: 64px; + height: 100%; + .{prefix}-controls + top: 0; + bottom: inherit; + +/* BIG MENU */ +.{prefix}-container + .{prefix}-menu + width: auto; + list-style: none; + padding: 0; + margin: 0 auto; + display: table-cell; + text-align: center; + vertical-align: middle; + white-space: nowrap; + > .item + display: inline-block; + border-radius: 2px; + padding: 7px 8px 3px 8px; + cursor: pointer; + > .item.active + background-color: #fff; + transition: all .3s ease; + .{prefix}-wrap + position: absolute; + + +/* ICON */ +.{prefix}-container + .svg_ic-menu + width: 24px; + height: 24px; + .svg_ic-submenu + width: 32px; + height: 32px; + .svg_img-bi + width: 257px; + height: 26px; + + .{prefix}-controls + svg > use + display: none; + svg > use.normal + display: block; + .active svg > use.active + display: block; + .enabled svg > use.enabled + display: block; + .active svg > use.normal, + .enabled svg > use.normal + display: none; + + +/* SUB MENU */ +.{prefix}-container + div.tui-colorpicker-clearfix + width: 159px; + height: 28px; + border: 1px solid #d5d5d5; + border-radius: 2px; + background-color: #f5f5f5; + margin-top: 6px; + padding: 4px 7px 4px 7px; + .tui-colorpicker-palette-hex + width: 114px; + background-color: #f5f5f5; + border: 0; + font-size: 11px; + margin-top: 2px; + + .tui-colorpicker-palette-preview + border-radius: 100%; + float: left; + width: 16px; + height: 16px; + + .color-picker-control + position: absolute; + display: none; + z-index: 99; + width: 188px; + height: 112px; + background-color: #fff; + box-shadow: 0 3px 22px 0px #000; + padding: 14px; + border-radius: 2px; + .tui-colorpicker-palette-toggle-slider + display: none; + .tui-colorpicker-palette-button + border-radius: 100%; + margin: 2px; + .triangle + margin: 32px auto 0; + width: 0; + height: 0; + border-right: 12px solid transparent; + border-top: 12px solid #fff; + border-left: 12px solid transparent; + position: absolute; + bottom: -11px; + left: 77px; + .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 + .color-picker + width: 100%; + height: auto; + .color-picker-value + width: 30px; + height: 30px; + border: 0px; + border-radius: 100%; + margin: auto; + margin-bottom: 4px; + &.transparent + border: 1px solid #cbcbcb; + 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'); + + .color-picker-value + label + color: #fff; + + .{prefix}-submenu svg > use + display: none; + .{prefix}-submenu svg > use.normal + display: block; + +/* ICON BUTTON */ +.{prefix}-container + #icon-add-button + &.icon-bubble .button[data-icontype="icon-bubble"] svg > use.active, + &.icon-heart .button[data-icontype="icon-heart"] svg > use.active, + &.icon-location .button[data-icontype="icon-location"] svg > use.active, + &.icon-polygon .button[data-icontype="icon-polygon"] svg > use.active, + &.icon-star .button[data-icontype="icon-star"] svg > use.active, + &.icon-arrow-3 .button[data-icontype="icon-arrow-3"] svg > use.active, + &.icon-arrow-2 .button[data-icontype="icon-arrow-2"] svg > use.active, + &.icon-arrow .button[data-icontype="icon-arrow"] svg > use.active, + &.icon-bubble .button[data-icontype="icon-bubble"] svg > use.active + display: block; + +/* DRAW BUTTON */ +.{prefix}-container + #draw-line-select-button + &.line .button.line svg > use.normal, + &.free .button.free svg > use.normal + display: none; + + &.line .button.line svg > use.active, + &.free .button.free svg > use.active + display: block; + +/* FLIP BUTTON */ +.{prefix}-container + #flip-button + &.resetFlip .button.resetFlip, + &.flipX .button.flipX, + &.flipY .button.flipY + svg > use.normal + display: none; + svg > use.active + display: block; +/* MASK BUTTON */ +.{prefix}-container + #mask-apply.apply.active .button.apply + label + color: #fff; + svg > use.active + display: block; + +/* CROP BUTTON */ +.{prefix}-container + #crop-button + .button.apply + margin-right: 24px; + .button.apply.active svg > use.active + display: block; + + +/* SHAPE BUTTON */ +.{prefix}-container + #shape-button + &.rect .button.rect, + &.circle .button.circle, + &.triangle .button.triangle + svg > use.normal + display: none; + svg > use.active + display: block; + +/* TEXT BUTTON */ +.{prefix}-container + #text-effect-button + .button.active svg > use.active + display: block; + &.left .button.left svg > use.active, + &.center .button.center svg > use.active, + &.right .button.right svg > use.active + display: block; + #mask-image-file, + #icon-image-file + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + border: 1px solid green; + cursor: inherit; + left: 0; + top: 0; + +@media screen and (max-width: 1234px) + .{prefix}-container.top + .{prefix}-controls ul + text-align: right; + .{prefix}-controls-logo + display: none; - - \ No newline at end of file diff --git a/src/js/ui/theme/standard.js b/src/js/ui/theme/standard.js index 132050008..4d3f45c10 100644 --- a/src/js/ui/theme/standard.js +++ b/src/js/ui/theme/standard.js @@ -4,8 +4,8 @@ */ export default { common: { - backgroundImage: './img/bg.png', - backgroundColor: '#fff', + backgroundImage: 'none', + backgroundColor: '#1e1e1e', border: '0px' }, header: { @@ -51,17 +51,17 @@ export default { }, active: { path: '../dist', - name: 'icon-d' + name: 'icon-c' } }, label: { normal: { color: '#858585', - fontWeight: 'normal' + fontWeight: 'lighter' }, active: { - color: '#000', - fontWeight: 'normal' + color: '#fff', + fontWeight: 'lighter' } }, checkbox: { @@ -70,23 +70,25 @@ export default { }, range: { pointer: { - color: '#333' + color: '#fff' }, value: { - color: '#000', - fontWeight: 'normal', - backgroundColor: '#f5f5f5' + color: '#fff', + fontWeight: 'lighter', + border: '1px solid #353535', + backgroundColor: '#151515' }, title: { - color: '#000' + color: '#fff', + fontWeight: 'lighter' } }, colorpicker: { button: { - border: '1px solid #cbdbdb' + border: '1px solid #1e1e1e' }, title: { - color: '#000' + color: '#fff' } } } From 16541e550b4633489f644715d5f2444852ca8f33 Mon Sep 17 00:00:00 2001 From: jinwoo-kim-nhn Date: Thu, 31 May 2018 00:43:29 +0900 Subject: [PATCH 064/158] feat: design - fixed stylus.js --- karma.conf.js | 2 +- makesvg.js | 2 +- src/css/index.styl | 4 ++-- src/js/ui/theme/standard.js | 8 ++++---- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 5cb56fec5..bb0294b8b 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -84,7 +84,7 @@ function setConfig(defaultConfig, server) { }; } else { defaultConfig.browsers = [ - 'FirefoxHeadless' + 'ChromeHeadless' ]; } } diff --git a/makesvg.js b/makesvg.js index 384286ac5..0560f0466 100644 --- a/makesvg.js +++ b/makesvg.js @@ -13,7 +13,7 @@ function getFileList(dir) { const svg = fs.readFileSync(`${targetDir}/${file}`); sprites.add(id, svg); }); - fs.writeFileSync(`./dist/${dir}.svg`, sprites); + fs.writeFileSync(`./dist/svg/${dir}.svg`, sprites); }); } diff --git a/src/css/index.styl b/src/css/index.styl index 6eef68fe9..046a8d851 100644 --- a/src/css/index.styl +++ b/src/css/index.styl @@ -100,8 +100,8 @@ prefix = 'tui-image-editor' position: absolute; width: 100%; height: 100%; - .{prefix}.-main.flip .{prefix}-grid-visual, - .{prefix}-main.rotate ..{prefix}-grid-visual + .{prefix}-main.flip .{prefix}-grid-visual, + .{prefix}-main.rotate .{prefix}-grid-visual display: block; .{prefix}-grid-visual table diff --git a/src/js/ui/theme/standard.js b/src/js/ui/theme/standard.js index 4d3f45c10..27c32e8a7 100644 --- a/src/js/ui/theme/standard.js +++ b/src/js/ui/theme/standard.js @@ -30,11 +30,11 @@ export default { menu: { icon: { normal: { - path: '../dist', + path: '../dist/svg', name: 'icon-a' }, active: { - path: '../dist', + path: '../dist/svg', name: 'icon-b' } } @@ -46,11 +46,11 @@ export default { }, icon: { normal: { - path: '../dist', + path: '../dist/svg', name: 'icon-a' }, active: { - path: '../dist', + path: '../dist/svg', name: 'icon-c' } }, From 7d4e2cb8cc466ad7b674676ff7d1340e572e5c04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Thu, 31 May 2018 12:00:22 +0900 Subject: [PATCH 065/158] feat: design - fixed menu active bug --- examples/example03-theme.html | 6 +++--- examples/js/theme/black-theme.js | 4 ++-- examples/js/theme/white-theme.js | 4 ++-- package.json | 4 ++-- src/js/action.js | 5 ++++- src/js/ui.js | 2 +- src/js/ui/theme/standard.js | 4 ++-- 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/examples/example03-theme.html b/examples/example03-theme.html index 2cab84082..a8293b844 100644 --- a/examples/example03-theme.html +++ b/examples/example03-theme.html @@ -4,8 +4,8 @@ 0. Design - - + + - - - -
-
-
- -
- - -
-
-
-
- sub-menu -
-
-
-
-
- -
    -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • -
    -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • -
    -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - -
    • -
- -
- - -
-
-
- - - - - - - - - diff --git a/examples/css/tui-image-editor.css b/examples/css/tui-image-editor.css deleted file mode 100644 index 44a771cc8..000000000 --- a/examples/css/tui-image-editor.css +++ /dev/null @@ -1,824 +0,0 @@ -/* COMMON */ -.tui-image-editor-container { - marign: 0; - padding: 0; - box-sizing: border-box; - min-height: 300px; - height:100%; - position: relative; - background-color: #282828; - border: 1px solid #000; - overflow: hidden; -} -.tui-image-editor-container div, -.tui-image-editor-container ul, -.tui-image-editor-container label, -.tui-image-editor-container input, -.tui-image-editor-container li { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* BUTTON AND LOGO */ -.tui-image-editor-container .tui-image-editor-header { - min-width: 533px; - position: absolute; - background-color: #151515; - top: 0; - width: 100%; -} - -.tui-image-editor-container .tui-image-editor-header-buttons, -.tui-image-editor-container .tui-image-editor-controls-buttons { - float: right; - margin: 8px; -} -.tui-image-editor-container .tui-image-editor-header-logo, -.tui-image-editor-container .tui-image-editor-controls-logo { - float: left; - width: 30%; - padding: 17px; -} -.tui-image-editor-container .tui-image-editor-controls-logo, -.tui-image-editor-container .tui-image-editor-controls-buttons { - width: 270px; - height: 100%; - display: none; -} -.tui-image-editor-container .tui-image-editor-header-buttons button, -.tui-image-editor-container .tui-image-editor-controls-buttons button { - position: relative; - width: 120px; - height: 40px; - outline: none; - border-radius: 20px; - border: 1px solid #ddd; - padding-top: 5px; - font-family: NotoSans, sans-serif; - font-size: 12px; - font-weight: bold; - cursor: pointer; -} - -.tui-image-editor-container .tui-image-editor-download-btn { - background-color: #fdba3b; - border-color: #fdba3b; - color: #fff; -} -.tui-image-editor-container .tui-image-editor-load-btn { - border: 1px solid blue; - position: absolute; - left: 0; - right: 0; - display: inline-block; - top: 0; - bottom: 0; - width: 100%; - opacity: 0; - cursor: pointer; -} - -.tui-image-editor-main-container { - position: absolute; - width: 100%; - top: 0; - bottom: 64px; -} -.tui-image-editor-container .tui-image-editor-main { - position: absolute; - text-align: center; - top: 64px; - bottom: 0; - right: 0; - left: 0; -} -.tui-image-editor-container .tui-image-editor-wrap { - /* border: 1px solid green;*/ - position: absolute; - bottom: 150px; - width: 100%; - overflow: auto; -} -.tui-image-editor-container .tui-image-editor { - position: absolute; - display: inline-block; - transition: all .7s ease; -} - - -/* GRID VISUAL OF FLIP AND ROTATE MENU */ -.tui-image-editor-container .tui-image-editor-grid-visual { - display: none; - position: absolute; - width: 100%; - height: 100%; -} -.tui-image-editor-container .tui-image-editor-main.flip .tui-image-editor-grid-visual, -.tui-image-editor-container .tui-image-editor-main.rotate .tui-image-editor-grid-visual { - display: block; -} -.tui-image-editor-container .tui-image-editor-grid-visual table { - width: 100%; - height: 100%; - border-collapse: collapse; - box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); -} -.tui-image-editor-container .tui-image-editor-grid-visual table td { - border: 1px solid #fff; - box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before { - content: ''; - position: absolute; - width: 8px; - height: 8px; - border: 1px solid #cdcdcd; - border-radius: 100%; - background-color: #fff; -} - -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before { - top: -4px; - left: -4px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before { - top: -4px; - right: -4px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before { - bottom: -4px; - left: -4px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before { - bottom: -4px; - right: -4px; -} - - -/* SUBMENU */ -.tui-image-editor-container .tui-image-editor-submenu { - display: none; - position: absolute; - bottom: 0; - width:100%; - height: 150px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-submenu .button:hover svg > use.active { - display: block; -} - -.tui-image-editor-container .tui-image-editor-partition > div { - width: 1px; - height: 52px; - border-left: 1px solid #3c3c3c; - margin: 0 12px 0 14px; -} -.tui-image-editor-container .tui-image-editor-main.filter .tui-image-editor-partition > div { - height: 108px; - margin: 0 29px 0 0px; -} -.tui-image-editor-container .tui-image-editor-submenu .menu li { - display: inline-block; - vertical-align: top; -} - - - - - -.tui-image-editor-container .tui-image-editor-submenu .menu .newline { - display: block; - margin-top: 14px; -} - -.tui-image-editor-container .tui-image-editor-submenu .menu .button { - position: relative; - cursor: pointer; - display: inline-block; - font-weight: normal; - font-size: 11px; - margin: 0 7px 0 7px; -} -.tui-image-editor-container .tui-image-editor-submenu .menu label { - display: inline-block; - cursor: pointer; - padding-top: 5px; - font-family: sans-serif; - font-size: 11px; - letter-spacing: 0.7px; -} - - - - -.tui-image-editor-container .tui-image-editor-submenu .menu .button.apply label, -.tui-image-editor-container .tui-image-editor-submenu .menu .button.cancel label { - vertical-align: 7px; -} -.tui-image-editor-container .tui-image-editor-submenu > div { - display: none; - vertical-align: bottom; -} -.tui-image-editor-container .tui-image-editor-submenu-align { - text-align: left; - margin-right: 30px; -} -.tui-image-editor-container .tui-image-editor-submenu-align:first-child { - margin-right: 0; -} -.tui-image-editor-container .tui-image-editor-submenu-align:first-child label { - width: 70px; -} -.tui-image-editor-container .tui-image-editor-submenu-align label { - width: 55px; - white-space: nowrap; -} - - -.tui-image-editor-container .tui-image-editor-main.crop .tui-image-editor-submenu > div.crop, -.tui-image-editor-container .tui-image-editor-main.flip .tui-image-editor-submenu > div.flip, -.tui-image-editor-container .tui-image-editor-main.rotate .tui-image-editor-submenu > div.rotate, -.tui-image-editor-container .tui-image-editor-main.shape .tui-image-editor-submenu > div.shape, -.tui-image-editor-container .tui-image-editor-main.text .tui-image-editor-submenu > div.text, -.tui-image-editor-container .tui-image-editor-main.mask .tui-image-editor-submenu > div.mask, -.tui-image-editor-container .tui-image-editor-main.icon .tui-image-editor-submenu > div.icon, -.tui-image-editor-container .tui-image-editor-main.draw .tui-image-editor-submenu > div.draw, -.tui-image-editor-container .tui-image-editor-main.filter .tui-image-editor-submenu > div.filter { - display: table-cell; -} - - - - - -/* FOR FILTER MENU */ -.tui-image-editor-container .filter-color-item { - display: inline-block; -} -.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox { - display: block; -} - -/* VIRTUAL CHECKBOX */ -.tui-image-editor-container .tui-image-editor-checkbox-wrap { - display: inline-block !important; - text-align: left; -} -.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width { - width: 187px; - white-space: normal; -} - -.tui-image-editor-container .tui-image-editor-checkbox { - display: inline-block; - margin: 1px 0 1px 0; -} - -.tui-image-editor-container .tui-image-editor-checkbox input { - width: 14px; - height: 14px; - opacity: 0; -} -.tui-image-editor-container .tui-image-editor-checkbox input + label { - color: #fff; - height: 14px; - position: relative; -} -.tui-image-editor-container .tui-image-editor-checkbox input + label:before { - content: ''; - position: absolute; - width: 14px; - height: 14px; - background-color: #fff; - top: 4px; - left: -19px; - display: inline-block; - margin: 0; - text-align: center; - font-size: 11px; - border: 0; - border-radius: 2px; - padding-top: 1px; - box-sizing: border-box; -} -.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + label:before { - background-size: cover; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg=='); -} - -.tui-image-editor-container .tui-image-editor-selectlist-wrap select { - width: 100%; - height: 25px; - margin-top: 9px; - border: 0; - outline: 0; - border-radius: 0; - border: 1px solid #cbdbdb; - background-color: #fff; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0 7px 0 7px; -} - -.tui-image-editor-container .tui-image-editor-selectlist-wrap { - position: relative; -} - -.tui-image-editor-container .tui-image-editor-selectlist-wrap:after { - content: ''; - position: absolute; - display: inline-block; - width: 14px; - height: 14px; - right: 5px; - bottom: 5px; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII='); - background-size: cover; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand { - display:none; -} - - - - - - -/* VIRTUAL RANGE */ -.tui-image-editor-container .tui-image-editor-range { - position: relative; - top: 7px; - width: 166px; - height: 17px; - display: inline-block; -} - -.tui-image-editor-container .tui-image-editor-virtual-range-bar { - top: 7px; - position: absolute; - width: 100%; - height: 2px; - background-color: #bcbcbc; -} - -.tui-image-editor-container .tui-image-editor-virtual-range-pointer { - position: absolute; - cursor: pointer; - top: -5px; - left: 0; - width: 12px; - height: 12px; - background-color: #fff; - border-radius: 100%; -} -.tui-image-editor-container .tui-image-editor-range-wrap { - display: inline-block; -} -.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range { - width: 100px; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-range { - width: 108px; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer { - background-color: #333; -} -.tui-image-editor-container .tui-image-editor-range-wrap.newline.short { - margin-top: 0; - margin-left: 17px; -} -.tui-image-editor-container .tui-image-editor-range-wrap.newline.short label { - color: #8e8e8e; - font-weight: normal; -} - -.tui-image-editor-container .tui-image-editor-range-wrap label { - vertical-align: baseline; - font-size: 11px; - margin-right: 7px; - color: #fff; -} - -.tui-image-editor-container .tui-image-editor-range-value { - width: 40px; - height: 24px; - outline: none; - border-radius: 2px; - box-shadow: none; - border: 1px solid #d5d5d5; - text-align: center; - background-color: #1c1c1c; - color: #fff; - font-weight: lighter; - vertical-align: baseline; - font-family: sans-serif; - padding-top: 2px; -} -.tui-image-editor-container .tui-image-editor-controls { - position: absolute; - background-color: #151515; - width: 100%; - height: 64px; - display: table; - bottom: 0; - z-index: 1; -} -.tui-image-editor-container .tui-image-editor-icpartition { - display: inline-block; - background-color: #282828; - width: 1px; - height: 24px; -} - - - - - -/* POSITION LEFT */ -.tui-image-editor-container.left .tui-image-editor-submenu { - left: 0; - height: 100%; - width: 248px; -} -.tui-image-editor-container.left .tui-image-editor-main-container { - left: 64px; - width: calc(100% - 64px); - height: 100%; -} -.tui-image-editor-container.left .tui-image-editor-controls { - width: 64px; - height: 100%; - display: table; -} - - -/* POSITION LEFT & RIGHT */ -.tui-image-editor-container.left .tui-image-editor-submenu > div, -.tui-image-editor-container.right .tui-image-editor-submenu > div { - vertical-align: middle; -} -.tui-image-editor-container.left .tui-image-editor-submenu, -.tui-image-editor-container.right .tui-image-editor-submenu { - white-space: normal; -} -.tui-image-editor-container.left .tui-image-editor-controls li, -.tui-image-editor-container.right .tui-image-editor-controls li { - display: block; - width: 39px; - margin: 4px 0 4px 12px; -} -.tui-image-editor-container.left .tui-image-editor-icpartition, -.tui-image-editor-container.right .tui-image-editor-icpartition { - position: relative; - top: -7px; - width: 24px; - height: 1px; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition { - display: block; - width: 75%; - margin: auto; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div { - border-left: 0; - height:10px; - border-bottom: 1px solid #3c3c3c; - width: 100%; - margin: 0; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align { - margin-right: 0; -} -.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width, -.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width { - width: 182px; - white-space: normal; -} -.tui-image-editor-container.left .tui-image-editor-submenu .menu li, -.tui-image-editor-container.right .tui-image-editor-submenu .menu li { - margin-top: 15px; -} -.tui-image-editor-container.left .tui-image-editor-submenu .menu .tui-colorpicker-clearfix li, -.tui-image-editor-container.right .tui-image-editor-submenu .menu .tui-colorpicker-clearfix li { - margin-top: 0; -} - -.tui-image-editor-container.left .tui-image-editor-range-wrap.newline label.range, -.tui-image-editor-container.right .tui-image-editor-range-wrap.newline label.range { - display: block; - text-align: left; - width: 75%; - margin: auto; -} -.tui-image-editor-container.left .tui-image-editor-range, -.tui-image-editor-container.right .tui-image-editor-range { - width: 136px; -} -.tui-image-editor-container.left #icon-add-button .button, -.tui-image-editor-container.right #icon-add-button .button { - width: 45px; -} - - -/* POSITION RIGIHT */ -.tui-image-editor-container.right .tui-image-editor-submenu { - right: 0; - height: 100%; - width: 248px; -} -.tui-image-editor-container.right .tui-image-editor-main-container { - right: 64px; - width: calc(100% - 64px); - height: 100%; -} -.tui-image-editor-container.right .tui-image-editor-controls { - right: 0; - width: 64px; - height: 100%; - display: table; -} - - -/* POSITION TOP & BOTTOM */ -.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right, -.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right { - display: none; -} - -/* POSITION BOTTOM */ -.tui-image-editor-container.bottom .tui-image-editor-submenu > div { - padding-bottom: 24px; -} - -/* POSITION TOP */ -.tui-image-editor-container.top .tui-image-editor-submenu > div { - padding-top: 24px; - vertical-align: top; -} -.tui-image-editor-container.top .tui-image-editor-submenu { - top: 0; - bottom: inherit; -} -.tui-image-editor-container.top .tui-image-editor-controls-logo { - display: table-cell; -} -.tui-image-editor-container.top .tui-image-editor-controls-buttons { - display: table-cell; -} -.tui-image-editor-container.top .tui-image-editor-main { - top: 64px; - height: 100%; -} -.tui-image-editor-container.top .tui-image-editor-controls { - top: 0; - bottom: inherit; -} - -/* BIG MENU */ -.tui-image-editor-container .tui-image-editor-menu { - width: auto; - list-style: none; - padding: 0; - margin: 0 auto; - display: table-cell; - text-align: center; - vertical-align: middle; - white-space: nowrap; -} - -.tui-image-editor-container .tui-image-editor-menu > .item { - display: inline-block; - border-radius: 2px; - padding: 7px 8px 3px 8px; - cursor: pointer; -} -.tui-image-editor-container .tui-image-editor-menu > .item.active { - background-color: #fff; - transition: all .3s ease; -} -.tui-image-editor-container .tui-image-editor-wrap { - position: absolute; -} - -/* ICON */ -.tui-image-editor-container .svg_ic-menu { - width: 24px; - height: 24px; -} -.tui-image-editor-container .svg_ic-submenu { - width: 32px; - height: 32px; -} -.tui-image-editor-container .svg_img-bi { - width: 257px; - height: 26px; -} -.tui-image-editor-container .tui-image-editor-controls svg > use { - display: none; -} -.tui-image-editor-container .tui-image-editor-controls svg > use.normal { - display: block; -} -.tui-image-editor-container .tui-image-editor-controls .active svg > use.active { - display: block; -} -.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled { - display: block; -} -.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal, -.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal { - display: none; -} - -/* SUB MENU */ -.tui-image-editor-container div.tui-colorpicker-clearfix { - width: 159px; - height: 28px; - border: 1px solid #d5d5d5; - border-radius: 2px; - background-color: #f5f5f5; - margin-top: 6px; - padding: 4px 7px 4px 7px; -} - -.tui-image-editor-container .tui-colorpicker-palette-hex { - width: 114px; - background-color: #f5f5f5; - border: 0; - font-size: 11px; - margin-top: 2px; -} - -.tui-image-editor-container .tui-colorpicker-palette-preview { - border-radius: 100%; - float: left; - width: 16px; - height: 16px; -} - -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider { - display: none; -} - -.tui-image-editor-container .color-picker-control { - position: absolute; - display: none; - z-index: 99; - width: 188px; - height: 112px; - background-color: #fff; - box-shadow: 0 3px 22px 0px #000; - padding: 14px; - border-radius: 2px; -} - -.tui-image-editor-container .filter-color-item .color-picker-control label, -.tui-image-editor-container .filter-color-item .color-picker-control label { - font-color: #333; - font-weight: normal; - margin-right: 7pxleft -} - -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button { - border-radius: 100%; - margin: 2px; -} - -.tui-image-editor-container .color-picker-control .triangle { - margin: 32px auto 0; - width: 0; - height: 0; - border-right: 12px solid transparent; - border-top: 12px solid #fff; - border-left: 12px solid transparent; - position: absolute; - bottom: -11px; - left: 77px; -} - -.tui-image-editor-container .color-picker, -.tui-image-editor-container .color-picker-control .tui-colorpicker-container, -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul, -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container { - width: 100%; - height: auto; -} -.tui-image-editor-container .color-picker-value { - width: 30px; - height: 30px; - border: 0px; - border-radius: 100%; - margin: auto; - margin-bottom: 4px; -} -.tui-image-editor-container .color-picker-value + label { - color: #fff; -} -.tui-image-editor-container .color-picker-value.transparent { - border: 1px solid #cbcbcb; - 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-image-editor-container .tui-image-editor-submenu svg > use { - display: none; -} -.tui-image-editor-container .tui-image-editor-submenu svg > use.normal { - display: block; -} - -/* ICON BUTTON */ -#icon-add-button.icon-bubble .button[data-icontype="icon-bubble"] svg > use.active, -#icon-add-button.icon-heart .button[data-icontype="icon-heart"] svg > use.active, -#icon-add-button.icon-location .button[data-icontype="icon-location"] svg > use.active, -#icon-add-button.icon-polygon .button[data-icontype="icon-polygon"] svg > use.active, -#icon-add-button.icon-star .button[data-icontype="icon-star"] svg > use.active, -#icon-add-button.icon-arrow-3 .button[data-icontype="icon-arrow-3"] svg > use.active, -#icon-add-button.icon-arrow-2 .button[data-icontype="icon-arrow-2"] svg > use.active, -#icon-add-button.icon-arrow .button[data-icontype="icon-arrow"] svg > use.active, -#icon-add-button.icon-bubble .button[data-icontype="icon-bubble"] svg > use.active { - display: block; -} - -/* DRAW BUTTON */ -#draw-line-select-button.line .button.line svg > use.normal, -#draw-line-select-button.free .button.free svg > use.normal { - display: none; -} -#draw-line-select-button.line .button.line svg > use.active, -#draw-line-select-button.free .button.free svg > use.active { - display: block; -} - -/* FLIP BUTTON */ -.tui-image-editor-container #flip-button.resetFlip .button.resetFlip svg > use.normal, -.tui-image-editor-container #flip-button.flipX .button.flipX svg > use.normal, -.tui-image-editor-container #flip-button.flipY .button.flipY svg use.normal { - display: none; -} -.tui-image-editor-container #flip-button.flipX .button.flipX svg > use.active, -.tui-image-editor-container #flip-button.flipY .button.flipY svg > use.active, -.tui-image-editor-container #flip-button.resetFlip .button.resetFlip svg > use.active { - display: block; -} -/* MASK BUTTON */ -.tui-image-editor-container #mask-apply.apply.active .button.apply label { - color: #fff; -} -.tui-image-editor-container #mask-apply.apply.active .button.apply svg > use.active { - display: block; -} - -/* CROP BUTTON */ -.tui-image-editor-container #crop-button .button.apply { - margin-right: 24px; -} -.tui-image-editor-container #crop-button .button.apply.active svg > use.active { - display: block; -} -/* SHAPE BUTTON */ -.tui-image-editor-container #shape-button.rect .button.rect svg > use.normal, -.tui-image-editor-container #shape-button.circle .button.circle svg use.normal, -.tui-image-editor-container #shape-button.triangle .button.triangle svg use.normal { - display: none; -} -.tui-image-editor-container #shape-button.rect .button.rect svg > use.active, -.tui-image-editor-container #shape-button.circle .button.circle svg > use.active, -.tui-image-editor-container #shape-button.triangle .button.triangle svg > use.active { - display: block; -} -/* TEXT BUTTON */ -.tui-image-editor-container #text-effect-button .button.active svg > use.active { - display: block; -} -.tui-image-editor-container #text-align-button.left .button.left svg > use.active, -.tui-image-editor-container #text-align-button.center .button.center svg > use.active, -.tui-image-editor-container #text-align-button.right .button.right svg > use.active { - display: block; -} -.tui-image-editor-container #mask-image-file , -.tui-image-editor-container #icon-image-file { - opacity: 0; - position: absolute; - width: 100%; - height: 100%; - border: 1px solid green; - cursor: inherit; - left: 0; - top: 0; -} - -@media screen and (max-width: 1234px) { - .tui-image-editor-container.top .tui-image-editor-controls ul { - text-align: right; - } - .tui-image-editor-container.top .tui-image-editor-controls-logo { - display: none; - } -} diff --git a/examples/example03-theme.html b/examples/example01-includeUi.html similarity index 100% rename from examples/example03-theme.html rename to examples/example01-includeUi.html diff --git a/examples/example01-basic.html b/examples/example02-useApiDirect.html similarity index 100% rename from examples/example01-basic.html rename to examples/example02-useApiDirect.html diff --git a/examples/example02-mobile.html b/examples/example03-mobile.html similarity index 100% rename from examples/example02-mobile.html rename to examples/example03-mobile.html diff --git a/examples/examples.json b/examples/examples.json index 834f75ff2..e36a72f9c 100644 --- a/examples/examples.json +++ b/examples/examples.json @@ -1,8 +1,11 @@ { - "example01-basic": { - "title": "1. Basic" + "example01-includeUi": { + "title": "1. Include ui" }, - "example02-mobile": { - "title": "2. Mobile" + "example02-useApiDirect": { + "title": "2. Use api direct (basic)" + }, + "example03-mobile": { + "title": "3. Mobile" } } diff --git a/examples/svg/icon-a.svg b/examples/svg/icon-a.svg deleted file mode 100644 index edd7b06ba..000000000 --- a/examples/svg/icon-a.svg +++ /dev/null @@ -1,239 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/examples/svg/icon-b.svg b/examples/svg/icon-b.svg deleted file mode 100644 index dc077e527..000000000 --- a/examples/svg/icon-b.svg +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/examples/svg/icon-c.svg b/examples/svg/icon-c.svg deleted file mode 100644 index 2c818c43f..000000000 --- a/examples/svg/icon-c.svg +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/examples/svg/icon-d.svg b/examples/svg/icon-d.svg deleted file mode 100644 index aaf4bda0d..000000000 --- a/examples/svg/icon-d.svg +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/js/ui/template/submenu/shape.js b/src/js/ui/template/submenu/shape.js index 6435f099d..945ab6eed 100644 --- a/src/js/ui/template/submenu/shape.js +++ b/src/js/ui/template/submenu/shape.js @@ -45,7 +45,7 @@ export default ({iconStyle: {normal, active}}) => (`
    • -
  • +
  • From 0f64b8aca23fafd930db256734e1683b84e07e11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 22 Jun 2018 14:52:00 +0900 Subject: [PATCH 148/158] chore: tutorials and api links to the latest changes. --- README.md | 4 ++-- docs/Apply-Mobile-Version.md | 7 ++++--- docs/Basic-Tutorial.md | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4da0abe45..6be547e49 100644 --- a/README.md +++ b/README.md @@ -285,8 +285,8 @@ $ npm run serve ``` ## 📙 Documents -* **Tutorial** : [https://github.com/nhnent/tui.image-editor/wiki/Tutorial](https://github.com/nhnent/tui.image-editor/wiki/Tutorial) -* **Example** : [http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-theme.html](http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-theme.html) +* **Tutorial** : [https://github.com/nhnent/tui.image-editor/tree/master/docs](https://github.com/nhnent/tui.image-editor/tree/master/docs) +* **Example** : [http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html](http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html) * **API** : [http://nhnent.github.io/tui.image-editor/latest/](http://nhnent.github.io/tui.image-editor/latest/) ## 💬 Contributing diff --git a/docs/Apply-Mobile-Version.md b/docs/Apply-Mobile-Version.md index 2697444a4..511f22b13 100644 --- a/docs/Apply-Mobile-Version.md +++ b/docs/Apply-Mobile-Version.md @@ -3,7 +3,8 @@ ## Image editor How to apply a mobile device - Some settings are required to use Image Editor components on mobile devices. -- Please refer to the [sample page](http://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html) first to check the UI configuration and operation. +- Please refer to the [sample page](http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-mobile.html) first to check the UI configuration and operation. + #### Step 1. Include the dependency file on the page. (PC version same) ```html @@ -66,8 +67,8 @@ It is recommended to customize image, CSS, and markup files when applying the se #### Step 6. Apply the image editor API to the UI -- API : [http://nhnent.github.io/tui.component.image-editor/latest/](http://nhnent.github.io/tui.component.image-editor/latest/) -- Sample Page : [http://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html](http://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html) +- API : [http://nhnent.github.io/tui.image-editor/latest/](http://nhnent.github.io/tui.image-editor/latest/) +- Sample Page : [http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html](http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html) ![all_feature_small](https://cloud.githubusercontent.com/assets/18183560/17803706/034ea17c-6633-11e6-914d-6602d12888f9.gif) ![text_feature_small](https://cloud.githubusercontent.com/assets/18183560/17803707/03530636-6633-11e6-8c03-cd5523716b9b.gif) diff --git a/docs/Basic-Tutorial.md b/docs/Basic-Tutorial.md index fe0ae9168..f8cc543fb 100644 --- a/docs/Basic-Tutorial.md +++ b/docs/Basic-Tutorial.md @@ -43,4 +43,4 @@ imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image') See the API page and the sample page * API: http://nhnent.github.io/tui.image-editor/latest/ -* Sample: http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-theme.html +* Sample: http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html From da38d5a75651149bd3d2a14dd3a4040430edb92d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 22 Jun 2018 15:55:24 +0900 Subject: [PATCH 149/158] feat/design - jsdoc Document reinforcement --- src/js/imageEditor.js | 29 +++++++++++++++++++++++++++++ src/js/ui.js | 9 +++++++-- src/js/ui/crop.js | 5 ++++- src/js/ui/draw.js | 5 ++++- src/js/ui/filter.js | 5 ++++- src/js/ui/flip.js | 5 ++++- src/js/ui/icon.js | 5 ++++- src/js/ui/mask.js | 5 ++++- src/js/ui/rotate.js | 5 ++++- src/js/ui/shape.js | 4 +++- src/js/ui/submenuBase.js | 5 ++++- src/js/ui/text.js | 5 ++++- src/js/ui/theme/theme.js | 5 ++++- src/js/ui/tools/colorpicker.js | 1 + src/js/ui/tools/range.js | 1 + 15 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/js/imageEditor.js b/src/js/imageEditor.js index 54cadfb02..dfa3004db 100644 --- a/src/js/imageEditor.js +++ b/src/js/imageEditor.js @@ -22,9 +22,38 @@ const {isUndefined, forEach, CustomEvents} = snippet; * @class * @param {string|jQuery|HTMLElement} wrapper - Wrapper's element or selector * @param {Object} [options] - Canvas max width & height of css + * @param {number} [options.includeUI] - Use the provided UI + * @param {Object} [options.includeUI.loadImage] - Basic editing image + * @param {string} options.includeUI.loadImage.path - image path + * @param {string} options.includeUI.loadImage.name - image name + * @param {Object} [options.includeUI.theme] - Theme object + * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used. [default all] + * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started. + * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position [top | bottom | left | right] * @param {number} options.cssMaxWidth - Canvas css-max-width * @param {number} options.cssMaxHeight - Canvas css-max-height * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false. + * @example + * var ImageEditor = require('tui-image-editor'); + * var blackTheme = require('./js/theme/black-theme.js'); + * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { + * includeUI: { + * loadImage: { + * path: 'img/sampleImage.jpg', + * name: 'SampleImage' + * }, + * theme: blackTheme, // or whiteTheme + * menu: ['shape', 'filter'], + * initMenu: 'filter', + * menuBarPosition: 'bottom' + * }, + * cssMaxWidth: 700, + * cssMaxHeight: 500, + * selectionStyle: { + * cornerSize: 20, + * rotatingPointOffset: 70 + * } + * }); */ class ImageEditor { constructor(wrapper, options) { diff --git a/src/js/ui.js b/src/js/ui.js index 0a7fb6d4c..4d5392ae1 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -38,8 +38,9 @@ const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300'; * @param {Boolean} [option.menuBarPosition=bottom] - Let * @param {Boolean} [option.applyCropSelectionStyle=false] - Let * @param {Objecdt} actions - ui action instance + * @ignore */ -export default class Ui { +class Ui { constructor(element, options, actions) { this.options = this._initializeOption(options); @@ -485,7 +486,9 @@ export default class Ui { const evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, false); this._els[this.options.initMenu].dispatchEvent(evt); - this.icon.registDefaultIcon(); + if (this.icon) { + this.icon.registDefaultIcon(); + } } } @@ -547,3 +550,5 @@ export default class Ui { }; } } + +export default Ui; diff --git a/src/js/ui/crop.js b/src/js/ui/crop.js index 1796afb32..d8a47848a 100644 --- a/src/js/ui/crop.js +++ b/src/js/ui/crop.js @@ -4,8 +4,9 @@ import templateHtml from './template/submenu/crop'; /** * Crop ui class * @class + * @ignore */ -export default class Crop extends Submenu { +class Crop extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'crop', @@ -66,3 +67,5 @@ export default class Crop extends Submenu { } } } + +export default Crop; diff --git a/src/js/ui/draw.js b/src/js/ui/draw.js index 70d966239..436c9a456 100644 --- a/src/js/ui/draw.js +++ b/src/js/ui/draw.js @@ -9,8 +9,9 @@ const DRAW_OPACITY = 0.7; /** * Draw ui class * @class + * @ignore */ -export default class Draw extends Submenu { +class Draw extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'draw', @@ -130,3 +131,5 @@ export default class Draw extends Submenu { } } } + +export default Draw; diff --git a/src/js/ui/filter.js b/src/js/ui/filter.js index aef3f3358..110b2f1f0 100644 --- a/src/js/ui/filter.js +++ b/src/js/ui/filter.js @@ -30,8 +30,9 @@ const FILTER_OPTIONS = [ /** * Filter ui class * @class + * @ignore */ -export default class Filter extends Submenu { +class Filter extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'filter', @@ -226,3 +227,5 @@ export default class Filter extends Submenu { }); } } + +export default Filter; diff --git a/src/js/ui/flip.js b/src/js/ui/flip.js index c82f42912..5657af8de 100644 --- a/src/js/ui/flip.js +++ b/src/js/ui/flip.js @@ -5,8 +5,9 @@ import templateHtml from './template/submenu/flip'; /** * Flip ui class * @class + * @ignore */ -export default class Flip extends Submenu { +class Flip extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'flip', @@ -61,3 +62,5 @@ export default class Flip extends Submenu { } } } + +export default Flip; diff --git a/src/js/ui/icon.js b/src/js/ui/icon.js index c7431904d..06a1bac34 100644 --- a/src/js/ui/icon.js +++ b/src/js/ui/icon.js @@ -8,8 +8,9 @@ import {defaultIconPath} from '../consts'; /** * Icon ui class * @class + * @ignore */ -export default class Icon extends Submenu { +class Icon extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'icon', @@ -131,3 +132,5 @@ export default class Icon extends Submenu { } } } + +export default Icon; diff --git a/src/js/ui/mask.js b/src/js/ui/mask.js index 1e9d4a667..1d9e62cea 100644 --- a/src/js/ui/mask.js +++ b/src/js/ui/mask.js @@ -5,8 +5,9 @@ import templateHtml from './template/submenu/mask'; /** * Mask ui class * @class + * @ignore */ -export default class Mask extends Submenu { +class Mask extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'mask', @@ -63,3 +64,5 @@ export default class Mask extends Submenu { } } } + +export default Mask; diff --git a/src/js/ui/rotate.js b/src/js/ui/rotate.js index 93bd2d4e0..a50a1df31 100644 --- a/src/js/ui/rotate.js +++ b/src/js/ui/rotate.js @@ -10,8 +10,9 @@ const COUNTERCLOCKWISE = -30; /** * Rotate ui class * @class + * @ignore */ -export default class Rotate extends Submenu { +class Rotate extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'rotate', @@ -69,3 +70,5 @@ export default class Rotate extends Submenu { } } } + +export default Rotate; diff --git a/src/js/ui/shape.js b/src/js/ui/shape.js index 92ccebf11..3389c6ec7 100644 --- a/src/js/ui/shape.js +++ b/src/js/ui/shape.js @@ -14,8 +14,9 @@ const SHAPE_DEFAULT_OPTION = { /** * Shape ui class * @class + * @ignore */ -export default class Shape extends Submenu { +class Shape extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'shape', @@ -186,3 +187,4 @@ export default class Shape extends Submenu { } } +export default Shape; diff --git a/src/js/ui/submenuBase.js b/src/js/ui/submenuBase.js index fe12d14c2..417e26c85 100644 --- a/src/js/ui/submenuBase.js +++ b/src/js/ui/submenuBase.js @@ -1,8 +1,9 @@ /** * Submenu Base Class * @class + * @ignore */ -export default class Submenu { +class Submenu { constructor(subMenuElement, {name, iconStyle, menuBarPosition, templateHtml}) { this.selector = str => subMenuElement.querySelector(str); this.menuBarPosition = menuBarPosition; @@ -60,3 +61,5 @@ export default class Submenu { subMenuElement.appendChild(iconSubMenu); } } + +export default Submenu; diff --git a/src/js/ui/text.js b/src/js/ui/text.js index 6d814c57e..f5bf88554 100644 --- a/src/js/ui/text.js +++ b/src/js/ui/text.js @@ -8,8 +8,9 @@ import {defaultTextRangeValus} from '../consts'; /** * Crop ui class * @class + * @ignore */ -export default class Text extends Submenu { +class Text extends Submenu { constructor(subMenuElement, {iconStyle, menuBarPosition}) { super(subMenuElement, { name: 'text', @@ -152,3 +153,5 @@ export default class Text extends Submenu { }); } } + +export default Text; diff --git a/src/js/ui/theme/theme.js b/src/js/ui/theme/theme.js index 6165e9e44..188d7eff9 100644 --- a/src/js/ui/theme/theme.js +++ b/src/js/ui/theme/theme.js @@ -7,8 +7,9 @@ import standardTheme from './standard'; * Theme manager * @class * @param {Object} customTheme - custom theme + * @ignore */ -export default class Theme { +class Theme { constructor(customTheme) { this.styles = this._changeToObject(extend(standardTheme, customTheme)); styleLoad(this._styleMaker()); @@ -137,3 +138,5 @@ export default class Theme { return targetString.replace(/([A-Z])/g, ($0, $1) => `-${$1.toLowerCase()}`); } } + +export default Theme; diff --git a/src/js/ui/tools/colorpicker.js b/src/js/ui/tools/colorpicker.js index 6ff7d6788..3a802ca83 100644 --- a/src/js/ui/tools/colorpicker.js +++ b/src/js/ui/tools/colorpicker.js @@ -23,6 +23,7 @@ const PICKER_COLOR = [ /** * Colorpicker control class * @class + * @ignore */ class Colorpicker { constructor(colorpickerElement, defaultColor = '#7e7e7e') { diff --git a/src/js/ui/tools/range.js b/src/js/ui/tools/range.js index e2d3d7eff..740bea46b 100644 --- a/src/js/ui/tools/range.js +++ b/src/js/ui/tools/range.js @@ -4,6 +4,7 @@ import {toInteger} from '../../util'; /** * Range control class * @class + * @ignore */ class Range { constructor(rangeElement, options = {}) { From 313db0fdba645d0b132d017fa898f7057a1cdcd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 22 Jun 2018 16:43:55 +0900 Subject: [PATCH 150/158] fixed colorpicker position bug when top menubar --- src/css/colorpicker.styl | 1 - src/css/position.styl | 6 ++++++ src/js/ui/draw.js | 2 +- src/js/ui/filter.js | 6 +++--- src/js/ui/icon.js | 2 +- src/js/ui/shape.js | 4 ++-- src/js/ui/submenuBase.js | 1 + src/js/ui/text.js | 2 +- src/js/ui/tools/colorpicker.js | 11 ++++++++--- 9 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/css/colorpicker.styl b/src/css/colorpicker.styl index f5f921dc2..c7ca00d6a 100644 --- a/src/css/colorpicker.styl +++ b/src/css/colorpicker.styl @@ -37,7 +37,6 @@ border-radius: 100%; margin: 2px; .triangle - margin: 32px auto 0; width: 0; height: 0; border-right: 12px solid transparent; diff --git a/src/css/position.styl b/src/css/position.styl index fc396fe82..3bbc8cbf4 100644 --- a/src/css/position.styl +++ b/src/css/position.styl @@ -122,6 +122,12 @@ /* POSITION TOP */ .{prefix}-container &.top + .color-picker-control .triangle + top: -11px; + border-right: 12px solid transparent; + border-top: 0px; + border-left: 12px solid transparent; + border-bottom: 12px solid #fff; .{prefix}-size-wrap height: calc(100% - 64px); .{prefix}-main-container diff --git a/src/js/ui/draw.js b/src/js/ui/draw.js index 436c9a456..f0ea56787 100644 --- a/src/js/ui/draw.js +++ b/src/js/ui/draw.js @@ -22,7 +22,7 @@ class Draw extends Submenu { this._els = { lineSelectButton: this.selector('#tie-draw-line-select-button'), - drawColorpicker: new Colorpicker(this.selector('#tie-draw-color')), + drawColorpicker: new Colorpicker(this.selector('#tie-draw-color'), '#00a9ff', this.toggleDirection), drawRange: new Range(this.selector('#tie-draw-range'), defaultDrawRangeValus), drawRangeValue: this.selector('#tie-draw-range-value') }; diff --git a/src/js/ui/filter.js b/src/js/ui/filter.js index 110b2f1f0..2576f3c11 100644 --- a/src/js/ui/filter.js +++ b/src/js/ui/filter.js @@ -163,9 +163,9 @@ class Filter extends Submenu { selector('#tie-colorfilter-threshole-range'), FILTER_RANGE.colorfilterThresholeRange ), - filterTintColor: new Colorpicker(selector('#tie-filter-tint-color'), '#03bd9e'), - filterMultiplyColor: new Colorpicker(selector('#tie-filter-multiply-color'), '#515ce6'), - filterBlendColor: new Colorpicker(selector('#tie-filter-blend-color'), '#ffbb3b') + filterTintColor: new Colorpicker(selector('#tie-filter-tint-color'), '#03bd9e', this.toggleDirection), + filterMultiplyColor: new Colorpicker(selector('#tie-filter-multiply-color'), '#515ce6', this.toggleDirection), + filterBlendColor: new Colorpicker(selector('#tie-filter-blend-color'), '#ffbb3b', this.toggleDirection) }; this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl); this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl); diff --git a/src/js/ui/icon.js b/src/js/ui/icon.js index 06a1bac34..f49cb1559 100644 --- a/src/js/ui/icon.js +++ b/src/js/ui/icon.js @@ -25,7 +25,7 @@ class Icon extends Submenu { this._els = { registIconButton: this.selector('#tie-icon-image-file'), addIconButton: this.selector('#tie-icon-add-button'), - iconColorpicker: new Colorpicker(this.selector('#tie-icon-color'), '#ffbb3b') + iconColorpicker: new Colorpicker(this.selector('#tie-icon-color'), '#ffbb3b', this.toggleDirection) }; } diff --git a/src/js/ui/shape.js b/src/js/ui/shape.js index 3389c6ec7..1405b555e 100644 --- a/src/js/ui/shape.js +++ b/src/js/ui/shape.js @@ -32,8 +32,8 @@ class Shape extends Submenu { shapeColorButton: this.selector('#tie-shape-color-button'), strokeRange: new Range(this.selector('#tie-stroke-range'), defaultShapeStrokeValus), strokeRangeValue: this.selector('#tie-stroke-range-value'), - fillColorpicker: new Colorpicker(this.selector('#tie-color-fill'), ''), - strokeColorpicker: new Colorpicker(this.selector('#tie-color-stroke'), '#ffbb3b') + fillColorpicker: new Colorpicker(this.selector('#tie-color-fill'), '', this.toggleDirection), + strokeColorpicker: new Colorpicker(this.selector('#tie-color-stroke'), '#ffbb3b', this.toggleDirection) }; } diff --git a/src/js/ui/submenuBase.js b/src/js/ui/submenuBase.js index 417e26c85..399bbaa9c 100644 --- a/src/js/ui/submenuBase.js +++ b/src/js/ui/submenuBase.js @@ -7,6 +7,7 @@ class Submenu { constructor(subMenuElement, {name, iconStyle, menuBarPosition, templateHtml}) { this.selector = str => subMenuElement.querySelector(str); this.menuBarPosition = menuBarPosition; + this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up'; this._makeSubMenuElement(subMenuElement, { name, iconStyle, diff --git a/src/js/ui/text.js b/src/js/ui/text.js index f5bf88554..6ad6906b3 100644 --- a/src/js/ui/text.js +++ b/src/js/ui/text.js @@ -27,7 +27,7 @@ class Text extends Submenu { this._els = { textEffectButton: this.selector('#tie-text-effect-button'), textAlignButton: this.selector('#tie-text-align-button'), - textColorpicker: new Colorpicker(this.selector('#tie-text-color'), '#ffbb3b'), + textColorpicker: new Colorpicker(this.selector('#tie-text-color'), '#ffbb3b', this.toggleDirection), textRange: new Range(this.selector('#tie-text-range'), defaultTextRangeValus), textRangeValue: this.selector('#tie-text-range-value') }; diff --git a/src/js/ui/tools/colorpicker.js b/src/js/ui/tools/colorpicker.js index 3a802ca83..2631a59b5 100644 --- a/src/js/ui/tools/colorpicker.js +++ b/src/js/ui/tools/colorpicker.js @@ -26,11 +26,12 @@ const PICKER_COLOR = [ * @ignore */ class Colorpicker { - constructor(colorpickerElement, defaultColor = '#7e7e7e') { + constructor(colorpickerElement, defaultColor = '#7e7e7e', toggleDirection = 'up') { const title = colorpickerElement.getAttribute('title'); this._show = false; + this._toggleDirection = toggleDirection; this._makePickerButtonElement(colorpickerElement, defaultColor); this._makePickerLayerElement(colorpickerElement, title); this._color = defaultColor; @@ -150,10 +151,14 @@ class Colorpicker { */ _setPickerControlPosition() { const controlStyle = this.pickerControl.style; - const top = toInteger(window.getComputedStyle(this.pickerControl, null).height) + 12; const left = (toInteger(window.getComputedStyle(this.pickerControl, null).width) / 2) - 20; + let top = (toInteger(window.getComputedStyle(this.pickerControl, null).height) + 12) * -1; - controlStyle.top = `-${top}px`; + if (this._toggleDirection === 'down') { + top = 30; + } + + controlStyle.top = `${top}px`; controlStyle.left = `-${left}px`; } } From 50ebdfa9f28f04f3ccfad497bd4ff78e81297b1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Fri, 22 Jun 2018 16:57:59 +0900 Subject: [PATCH 151/158] add theme style property bisize --- examples/js/theme/black-theme.js | 2 ++ examples/js/theme/white-theme.js | 2 ++ src/js/ui/template/controls.js | 2 +- src/js/ui/template/mainContainer.js | 2 +- src/js/ui/template/style.js | 8 +++++++- src/js/ui/theme/standard.js | 2 ++ src/js/ui/theme/theme.js | 1 + 7 files changed, 16 insertions(+), 3 deletions(-) diff --git a/examples/js/theme/black-theme.js b/examples/js/theme/black-theme.js index 5e7ff2bb6..742e559dc 100644 --- a/examples/js/theme/black-theme.js +++ b/examples/js/theme/black-theme.js @@ -1,5 +1,7 @@ var blackTheme = { 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', + 'common.bisize.width': '251px', + 'common.bisize.height': '21px', 'common.backgroundImage': 'none', 'common.backgroundColor': '#1e1e1e', 'common.border': '0px', diff --git a/examples/js/theme/white-theme.js b/examples/js/theme/white-theme.js index 65503dddb..d1db0a84f 100644 --- a/examples/js/theme/white-theme.js +++ b/examples/js/theme/white-theme.js @@ -1,5 +1,7 @@ var whiteTheme = { 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', + 'common.bisize.width': '251px', + 'common.bisize.height': '21px', 'common.backgroundImage': './img/bg.png', 'common.backgroundColor': '#fff', 'common.border': '1px solid #c1c1c1', diff --git a/src/js/ui/template/controls.js b/src/js/ui/template/controls.js index 8cfb8c5fc..149475f76 100644 --- a/src/js/ui/template/controls.js +++ b/src/js/ui/template/controls.js @@ -1,7 +1,7 @@ export default ({biImage, iconStyle: {normal, active}, loadButtonStyle, downloadButtonStyle}) => (`
    • diff --git a/src/js/ui/template/mainContainer.js b/src/js/ui/template/mainContainer.js index 048566ece..f07461263 100644 --- a/src/js/ui/template/mainContainer.js +++ b/src/js/ui/template/mainContainer.js @@ -2,7 +2,7 @@ export default ({biImage, commonStyle, headerStyle, loadButtonStyle, downloadBut