Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: document for svg icon setting #348

Merged
merged 11 commits into from
Mar 6, 2020
Merged

chore: document for svg icon setting #348

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9c05710
feat: default menu svg icon - middle commit
jinwoo-kim-nhn Feb 25, 2020
de73075
feat: default icon normal Check basic operation
jinwoo-kim-nhn Feb 26, 2020
f6db01d
feat: prototype complete for default icon improve
jinwoo-kim-nhn Feb 26, 2020
e1ea371
feat: complate default icon code
jinwoo-kim-nhn Feb 27, 2020
d72a50c
example file update for default icon setting
jinwoo-kim-nhn Feb 27, 2020
c5f8e42
chore: svg-loader dependency -> devdependency
jinwoo-kim-nhn Feb 27, 2020
c3bfeda
chore: document for svg icon setting
jinwoo-kim-nhn Feb 27, 2020
0b0e628
fixed some link at document
jinwoo-kim-nhn Feb 27, 2020
c5e2cd7
apply codereview
jinwoo-kim-nhn Mar 4, 2020
94115ed
Merge branch 'master' into chore/documentForSvgIconSetting
jinwoo-kim-nhn Mar 6, 2020
7c8ffba
apply codereview - 2
jinwoo-kim-nhn Mar 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: document for svg icon setting
  • Loading branch information
@jinwoo-kim-nhn
jinwoo-kim-nhn committed Feb 27, 2020
commit c3bfeda3377315784cfc2c7c4ce7f2f8091aa94e
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
* [Usage](#-usage)
* [HTML](#html)
* [JavaScript](#javascript)
* [Menu svg icon setting](#-menu-svg-icon-setting)
* [TypeScript](#-typescript)
* [Development](#-development)
* [Setup](#setup)
* [Run webpack-dev-server](#run-webpack-dev-server)
Expand Down Expand Up @@ -293,6 +295,15 @@ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
});
```

### Menu svg icon setting

#### There are two ways to set icons.

1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
2. There is a way to use the **actual physical svg file** and **set the file location manually**.

Can find more details in [this document]().

### TypeScript
If you using TypeScript, You must `import module = require('module')` on importing.
[`export =` and `import = require()`](https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require)
Expand Down
82 changes: 81 additions & 1 deletion docs/Basic-Tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,87 @@ imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')

<br>

### 4. Localization
### 4. Menu, Submenu svg icon setting

In the image below, the red and blue areas are set using the svg icon.

![svgIcon](https://user-images.githubusercontent.com/35218826/75416627-1ca5e780-5972-11ea-9a55-b179686536de.png)

#### Two ways to set the icon

1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
* This is the default setting for Image Editor.
* It's easy to change the color to match the icon state as shown below, but it uses the built-in default shape so you can't change the icon's appearance.
```js
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
...
theme: {
'menu.normalIcon.color': '#8a8a8a',
'menu.activeIcon.color': '#555555',
'menu.disabledIcon.color': '#434343',
'menu.hoverIcon.color': '#e9e9e9',
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#e9e9e9',
}
...
});
```

2. There is a way to use the **actual physical svg file** and **set the file location manually**.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actual physical svg file는 그냥 your svg file정도면 되지 않을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 정확하게 표현하고 싶어서 작업 하다보니 과했던거 같네요.. 반영하겠습니다.

* This is used when you want to completely reconfigure the svg icon itself rather than the built-in icon.
* The disadvantage is that the color must be set by modifying the svg file directly.
* Need to set the path and name for each icon state as shown below.
```js
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const로 합시다

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영하였습니다. 리뷰 감사합니다.

includeUI: {
...
theme: {
'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',
'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
'submenu.activeIcon.name': 'icon-c'
}
...
});
```
* How to get svg file sample
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

svg를 대문자로 쓰면 어떨까요?

  • How to get svg file sample

  • How to get SVG file sample

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 좋네요 ㅎㅎ svg 쓰인부분 일괄 반영하겠습니다.

* In the project folder where `tui-image-editor` is installed, the file is in the path described below
```bash
// or use cdn (https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg)
$ cd node_modules/tui-image-editor/dist/svg
```
* Or just get the file via cdn.
* https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg
* https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg
* https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg
* https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg


* Don't forget to use the icon name setting of the `includeUI.theme` option to match the $ {iconName} part of the file.
```svg
icon-a.svg file
submenu.activeIcon.name <-> iconName
...
<symbol id="${iconName}-ic-apply" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"/>
<path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
</g>
</symbol>
...
```


### 5. Localization
ImageEditor provide feature to customize all of inscriptions. Look at example.

```js
Expand Down
48 changes: 28 additions & 20 deletions src/js/ui/theme/standard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,30 +96,37 @@
'downloadButton.fontFamily': 'NotoSans, sans-serif',
'downloadButton.fontSize': '12px',

// main icons
'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',
// icons default
'menu.normalIcon.color': '#8a8a8a',
'menu.activeIcon.color': '#555555',
'menu.disabledIcon.color': '#434343',
'menu.hoverIcon.color': '#e9e9e9',
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#e9e9e9',

// icons (svg icon file setting)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 주석들은 기록용으로 남겨둔거예요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유저한테 다른 형식으로 사용할수 있다는걸 알려주려고 했는데, 어색한것 같네요. 문서에 충분히 설명을 했으니 빼버리겠습니다.

// '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',
// 'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
// 'submenu.normalIcon.name': 'icon-a',
// 'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
// 'submenu.activeIcon.name': 'icon-c',

'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',

// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',

// submenu icons
'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
'submenu.activeIcon.name': 'icon-c',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',

// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'lighter',
Expand Down Expand Up @@ -181,16 +188,17 @@ export default {

// main icons
'menu.normalIcon.color': '#8a8a8a',
// 'menu.normalIcon.path': '#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',

'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',

'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',

Expand Down