[Image Load Issue] svg files still missing

denzndhauz commented 5 years ago

Version

"tui-image-editor": "^3.5.1"

Development Environment

Platform: Windows 10 Browser: Chrome 73.0.3683.75

Current Behavior

I already copied the SVG generated from tui-image-editor/dist/svg/ folder to a custom path ./assets/svg/ folder. then edit the theme config. Here's the them config code.

const blackTheme = {
    'common.bi.image': 'http://blaqpromote.local/images/site_logo_small.png',
    'common.bisize.width': '151px',
    'common.bisize.height': '21px',
    'common.backgroundImage': 'none',
    'common.backgroundColor': '#fff',
    'common.border': '0px',

    // header
    'header.backgroundImage': 'none',
    'header.backgroundColor': 'transparent',
    'header.border': '0px',

    // load button
    'loadButton.backgroundColor': '#fff',
    'loadButton.border': '1px solid #ddd',
    'loadButton.color': '#222',
    'loadButton.fontFamily': 'NotoSans, sans-serif',
    'loadButton.fontSize': '12px',

    // download button
    'downloadButton.backgroundColor': '#fdba3b',
    'downloadButton.border': '1px solid #fdba3b',
    'downloadButton.color': '#fff',
    'downloadButton.fontFamily': 'NotoSans, sans-serif',
    'downloadButton.fontSize': '12px',

    // main icons
    'menu.normalIcon.path': '../assets/svg/icon-b.svg',
    'menu.normalIcon.name': 'icon-b',
    'menu.activeIcon.path': '../assets/svg/icon-a.svg',
    'menu.activeIcon.name': 'icon-a',
    'menu.iconSize.width': '24px',
    'menu.iconSize.height': '24px',

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

    // submenu icons
    'submenu.normalIcon.path': '../assets/svg/icon-a.svg',
    'submenu.normalIcon.name': 'icon-a',
    'submenu.activeIcon.path': '../assets/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',
    'submenu.activeLabel.color': '#fff',
    'submenu.activeLabel.fontWeight': 'lighter',

    // checkbox style
    'checkbox.border': '1px solid #ccc',
    'checkbox.backgroundColor': '#fff',

    // rango style
    'range.pointer.color': '#fff',
    'range.bar.color': '#666',
    'range.subbar.color': '#d1d1d1',
    'range.value.color': '#fff',
    'range.value.fontWeight': 'lighter',
    'range.value.fontSize': '11px',
    'range.value.border': '1px solid #353535',
    'range.value.backgroundColor': '#151515',
    'range.title.color': '#fff',
    'range.title.fontWeight': 'lighter',

    // colorpicker style
    'colorpicker.button.border': '1px solid #1e1e1e',
    'colorpicker.title.color': '#fff'
};

But there are still images are not found. (See image below)

and got this error.

Expected Behavior

It should load all the svg images based on the theme config above.

denzndhauz commented 5 years ago

I check the li class attribute and it seems that the other buttons are hidden. (See Image Below)

junghwan-park commented 5 years ago

@denzndhauz Have you set blackTheme to options.includeUI.theme correctly?

const blackTheme = {
    // main icons
    'menu.normalIcon.path': '../assets/svg/icon-d.svg',
    'menu.activeIcon.path': '../assets/svg/icon-b.svg',
    'menu.disabledIcon.path': '../assets/svg/icon-a.svg',
    'menu.hoverIcon.path': '../assets/svg/icon-c.svg',

    // submenu icons
    'submenu.normalIcon.path': '../assets/svg/icon-d.svg',
    'submenu.activeIcon.path': '../assets/svg/icon-c.svg',
};

const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
    includeUI: {
        loadImage: {
            path: 'img/sampleImage2.png',
            name: 'SampleImage'
        },
        theme: blackTheme,
        initMenu: 'filter',
        menuBarPosition: 'bottom'
     }
});

denzndhauz commented 5 years ago

@junghwan-park I just missed the disabledIcon and hoverIcon path. Sorry my bad.


const blackTheme = {
    // main icons
    'menu.normalIcon.path': '../assets/svg/icon-a.svg',
    'menu.activeIcon.path': '../assets/svg/icon-b.svg',
    'menu.disabledIcon.path': '../assets/svg/icon-c.svg',
    'menu.hoverIcon.path': '../assets/svg/icon-d.svg',
};

Thanks by the way. I'm going to close this issue now.

nhn / tui.image-editor