feat: prototype complete for default icon improve

nhn · jinwoo-kim-nhn · Mar 6, 2020 · Feb 25, 2020 · Feb 26, 2020 · Feb 26, 2020
commit f6db01d4b16890af49fd31f9366c66433d90d8e3
diff --git a/examples/js/theme/black-theme.js b/examples/js/theme/black-theme.js
@@ -25,24 +25,48 @@ var blackTheme = {
  'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
  'downloadButton.fontSize': '12px',
 
+ // // main icons
+ // 'menu.normalIcon.color': '#8a8a8a',
+ // 'menu.activeIcon.color': '#555555',
+ // 'menu.disabledIcon.color': '#434343',
+ // 'menu.hoverIcon.color': '#e9e9e9',
+ // 'menu.iconSize.width': '24px',
+ // 'menu.iconSize.height': '24px',
+
+ // // submenu icons
+ // 'submenu.normalIcon.color': '#8a8a8a',
+ // 'submenu.activeIcon.color': '#e9e9e9',
+ // 'submenu.iconSize.width': '32px',
+ // 'submenu.iconSize.height': '32px',
+
+ // // submenu primary color
+ // 'submenu.backgroundColor': '#1e1e1e',
+ // 'submenu.partition.color': '#3c3c3c',
+
  // main icons
- 'menu.normalIcon.color': '#8a8a8a',
- 'menu.activeIcon.color': '#555555',
- 'menu.disabledIcon.color': '#434343',
- 'menu.hoverIcon.color': '#e9e9e9',
+ 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
+ 'menu.normalIcon.name': 'icon-d',
+ 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
+ 'menu.activeIcon.name': 'icon-b',
+ 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
+ 'menu.disabledIcon.name': 'icon-a',
+ 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
+ 'menu.hoverIcon.name': 'icon-c',
  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
 
+ // submenu primary color
+ 'submenu.backgroundColor': 'transparent',
+ 'submenu.partition.color': '#e5e5e5',
+
  // submenu icons
- 'submenu.normalIcon.color': '#8a8a8a',
- 'submenu.activeIcon.color': '#e9e9e9',
+ 'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
+ 'submenu.normalIcon.name': 'icon-d',
+ 'submenu.activeIcon.path': '../dist/svg/icon-b.svg',
+ 'submenu.activeIcon.name': 'icon-b',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',
 
- // submenu primary color
- 'submenu.backgroundColor': '#1e1e1e',
- 'submenu.partition.color': '#3c3c3c',
-
  // submenu labels
  'submenu.normalLabel.color': '#8a8a8a',
  'submenu.normalLabel.fontWeight': 'lighter',

diff --git a/karma.conf.js b/karma.conf.js
@@ -158,6 +158,9 @@ module.exports = function(config) {
  }, {
  test: /\.styl$/,
  use: ['css-loader', 'stylus-loader']
+ }, {
+ test: /\.svg$/,
+ loader: 'svg-inline-loader'
  }
  ]
  }

diff --git a/src/js/ui.js b/src/js/ui.js
@@ -2,7 +2,7 @@ import snippet from 'tui-code-snippet';
 import {HELP_MENUS} from './consts';
 import util from './util';
 import mainContainer from './ui/template/mainContainer';
-import controls from './ui/template/controls';
+import {controls, partition} from './ui/template/controls';
 
 import Theme from './ui/theme/theme';
 import Shape from './ui/shape';
@@ -161,6 +161,7 @@ class Ui {
  * @ignore
  */
  changeHelpButtonEnabled(buttonType, enableStatus) {
+ console.log(buttonType, this._buttonElements[buttonType]);
  const buttonClassList = this._buttonElements[buttonType].classList;
 
  buttonClassList[enableStatus ? 'add' : 'remove']('enabled');
@@ -220,12 +221,13 @@ class Ui {
  this._makeMenuElement(menuName);
 
  // menu btn element
- this._buttonElements[menuName] = this._menuElement.querySelector(`#tie-btn-${menuName}`);
+ this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
 
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
  locale: this._locale,
  iconStyle: this.theme.getStyle('submenu.icon'),
+ svgIconMaker: this.theme.makeMenSvgIconSet.bind(this.theme),
  menuBarPosition: this.options.menuBarPosition,
  usageStatistics: this.options.usageStatistics
  });
@@ -253,7 +255,6 @@ class Ui {
  selectedElement.innerHTML = controls({
  locale: this._locale,
  biImage: this.theme.getStyle('common.bi'),
- iconStyle: this.theme.getStyle('menu.icon'),
  loadButtonStyle: this.theme.getStyle('loadButton'),
  downloadButtonStyle: this.theme.getStyle('downloadButton')
  }) +
@@ -275,26 +276,23 @@ class Ui {
  this._editorElement = selector('.tui-image-editor');
  this._menuElement = selector('.tui-image-editor-menu');
  this._subMenuElement = selector('.tui-image-editor-submenu');
-
  this._buttonElements = {
- 'undo': this._menuElement.querySelector('.tie-btn-undo'),
- 'redo': this._menuElement.querySelector('.tie-btn-redo'),
- 'reset': this._menuElement.querySelector('.tie-btn-reset'),
- 'delete': this._menuElement.querySelector('.tie-btn-delete'),
- 'deleteAll': this._menuElement.querySelector('.tie-btn-delete-all'),
  'download': this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),
  'load': this._selectedElement.querySelectorAll('.tui-image-editor-load-btn')
  };
- this._makeHelpMenuTooltip();
+
+ this._makeHelpMenu();
  }
 
- /**
- * Make tooltip for help menus
- * @private
- */
- _makeHelpMenuTooltip() {
+ _makeHelpMenu() {
+ // const helpMenuWithPartition = [...HELP_MENUS.slice(0, 3), '', ...HELP_MENUS.slice(4), ''];
+
  snippet.forEach(HELP_MENUS, menuName => {
- this._addTooltipAttribute(this._buttonElements[menuName], menuName);
+ // console.log('MENUNAME', menuName);
+ this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');
+ if (menuName) {
+ this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
+ }
  });
  }
 
@@ -303,20 +301,19 @@ class Ui {
  * @param {string} menuName - menu name
  * @private
  */
- _makeMenuElement(menuName) {
+ _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {
+ if (!menuName) {
+ console.log('ss');
+ this._menuElement.appendChild(partition());
+
+ return;
+ }
+
  const btnElement = document.createElement('li');
- const {normal, active, hover} = this.theme.getStyle('menu.icon');
- const menuItemHtml = `
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-${menuName}" class="normal normal-color"/>
- <use xlink:href="#ic-${menuName}" class="active active-color"/>
- <use xlink:href="#ic-${menuName}" class="hover hover-color"/>
- </svg>
- `;
+ const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);
 
  this._addTooltipAttribute(btnElement, menuName);
- btnElement.id = `tie-btn-${menuName}`;
- btnElement.className = 'tui-image-editor-item normal';
+ btnElement.className = `tie-btn-${menuName} tui-image-editor-item ${menuType}`;
  btnElement.innerHTML = menuItemHtml;
 
  this._menuElement.appendChild(btnElement);

diff --git a/src/js/ui/crop.js b/src/js/ui/crop.js
@@ -9,11 +9,12 @@ import templateHtml from './template/submenu/crop';
  * @ignore
  */
 class Crop extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'crop',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/draw.js b/src/js/ui/draw.js
@@ -12,11 +12,12 @@ const DRAW_OPACITY = 0.7;
  * @ignore
  */
 class Draw extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'draw',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/flip.js b/src/js/ui/flip.js
@@ -9,11 +9,12 @@ import templateHtml from './template/submenu/flip';
  * @ignore
  */
 class Flip extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'flip',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/icon.js b/src/js/ui/icon.js
@@ -11,11 +11,12 @@ import {defaultIconPath} from '../consts';
  * @ignore
  */
 class Icon extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'icon',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/mask.js b/src/js/ui/mask.js
@@ -8,11 +8,12 @@ import templateHtml from './template/submenu/mask';
  * @ignore
  */
 class Mask extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'mask',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/rotate.js b/src/js/ui/rotate.js
@@ -13,11 +13,12 @@ const COUNTERCLOCKWISE = -30;
  * @ignore
  */
 class Rotate extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'rotate',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/shape.js b/src/js/ui/shape.js
@@ -17,11 +17,12 @@ const SHAPE_DEFAULT_OPTION = {
  * @ignore
  */
 class Shape extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, iconStyle, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'shape',
  iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

diff --git a/src/js/ui/submenuBase.js b/src/js/ui/submenuBase.js
@@ -13,7 +13,7 @@ class Submenu {
  * @param {*} templateHtml - template for SubMenuElement
  * @param {boolean} [usageStatistics=false] - template for SubMenuElement
  */
- constructor(subMenuElement, {locale, name, iconStyle, menuBarPosition, templateHtml, usageStatistics}) {
+ constructor(subMenuElement, {locale, name, iconStyle, svgIconMaker, menuBarPosition, templateHtml, usageStatistics}) {
  this.subMenuElement = subMenuElement;
  this.menuBarPosition = menuBarPosition;
  this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
@@ -24,6 +24,7 @@ class Submenu {
  locale,
  name,
  iconStyle,
+ svgIconMaker,
  templateHtml
  });
  }
@@ -90,12 +91,13 @@ class Submenu {
  * @param {*} templateHtml - template for SubMenuElement
  * @private
  */
- _makeSubMenuElement({locale, name, iconStyle, templateHtml}) {
+ _makeSubMenuElement({locale, name, iconStyle, svgIconMaker, templateHtml}) {
  const iconSubMenu = document.createElement('div');
  iconSubMenu.className = `tui-image-editor-menu-${name}`;
  iconSubMenu.innerHTML = templateHtml({
  locale,
- iconStyle
+ iconStyle,
+ svgIconMaker
  });
 
  this.subMenuElement.appendChild(iconSubMenu);

diff --git a/src/js/ui/template/controls.js b/src/js/ui/template/controls.js
@@ -1,51 +1,9 @@
-export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
+export const controls = ({locale, biImage, loadButtonStyle, downloadButtonStyle}) => (`
  <div class="tui-image-editor-controls">
  <div class="tui-image-editor-controls-logo">
  <img src="${biImage}" />
  </div>
- <ul class="tui-image-editor-menu">
- <li class="tie-btn-undo tui-image-editor-item">
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-undo" class="enabled normal-color"/>
- <use xlink:href="#ic-undo" class="normal disabled-color"/>
- <use xlink:href="#ic-undo" class="hover hover-color"/>
- </svg>
- </li>
- <li class="tie-btn-redo tui-image-editor-item">
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-redo" class="enabled normal-color"/>
- <use xlink:href="#ic-redo" class="normal disabled-color"/>
- <use xlink:href="#ic-redo" class="hover hover-color"/>
- </svg>
- </li>
- <li class="tie-btn-reset tui-image-editor-item">
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-reset" class="enabled normal-color"/>
- <use xlink:href="#ic-reset" class="normal disabled-color"/>
- <use xlink:href="#ic-reset" class="hover hover-color"/>
- </svg>
- </li>
- <li class="tui-image-editor-item">
- <div class="tui-image-editor-icpartition"></div>
- </li>
- <li class="tie-btn-delete tui-image-editor-item">
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-delete" class="enabled normal-color"/>
- <use xlink:href="#ic-delete" class="normal disabled-color"/>
- <use xlink:href="#ic-delete" class="hover hover-color"/>
- </svg>
- </li>
- <li class="tie-btn-delete-all tui-image-editor-item">
- <svg class="svg_ic-menu">
- <use xlink:href="#ic-delete-all" class="enabled normal-color"/>
- <use xlink:href="#ic-delete-all" class="normal disabled-color"/>
- <use xlink:href="#ic-delete-all" class="hover hover-color"/>
- </svg>
- </li>
- <li class="tui-image-editor-item">
- <div class="tui-image-editor-icpartition"></div>
- </li>
- </ul>
+ <ul class="tui-image-editor-menu"></ul>
 
  <div class="tui-image-editor-controls-buttons">
  <div style="${loadButtonStyle}">
@@ -58,3 +16,9 @@ export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButt
  </div>
  </div>
 `);
+
+export const partition = () => (`
+ <li class="tui-image-editor-item">
+ <div class="tui-image-editor-icpartition"></div>
+ </li>
+`);