Announcement

**Blama** · 27 Feb 2018, 08:12

Hi Isomorphic,

please also see this issue. Add this code to the end of MyWindow:

Code:

            IButton pngTestIButton = new IButton("PNG Test");
            pngTestIButton.setIcon("[SKINIMG]DateChooser/arrow_left.png");
            addItem(pngTestIButton);

            IButton svgTestIButton = new IButton("SVG Test");
            svgTestIButton.setIcon("[SKINIMG]NavigationBar/miniNav_up.svg");
            addItem(svgTestIButton);

As you can see, the SVG-IButton does not display the test "SVG Test" next to the icon, while the PNG-IButton does.

Best regards
Blama

**Blama** · 28 Feb 2018, 07:22

Hi Isomorphic,

I retested using v11.1p_2018-02-28. The issues of #14 are gone, but the last one from #16 is still open. This also affects other parts, e.g. SectionStackSections with an SVG as icon - these also don't show a title then - compared to a PNG as icon.

Also I'm getting many warnings like:

Code:

[ERROR] [builtinds] - 16:20:49.598:TMR3:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:49.736:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:51.146:TMR2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:52.738:TMR1:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:53.166:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:53.714:TMR4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:55.132:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:56.801:TMR3:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.560:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.811:FCS4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.815:MDN2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.903:MUP7:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:58.160:TMR6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:58.316:BLR4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:01.830:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:02.634:TMR4:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:03.634:TMR3:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:04.140:MDN4:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:04.218:MUP8:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:06.405:BLR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:06.477:FCS7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:07.769:BLR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:08.443:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:08.457:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:09.503:TMR9:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:09.618:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:10.295:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:10.307:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:11.040:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:11.103:TMR7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.196:TMR7:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.530:MDN3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.631:MUP8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.011:BLR9:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.014:FCS0:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.017:MDN8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.111:MUP2:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:15.791:MDN9:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:15.876:MUP3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.245:MDN6:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.327:MUP7:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.762:TMR3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.826:TMR8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.862:TMR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:18.195:TMR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.398:TMR0:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.454:TMR7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.654:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.706:BLR5:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:20.710:FCS6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.713:MDN4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.775:MUP8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:21.529:TMR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:21.871:BLR2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.292:TMR8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.474:FCS6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.477:MDN4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.533:MUP8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:26.247:TMR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:29.503:BLR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found

Best regards
Blama

**Blama** · 1 Mar 2018, 05:08

Hi Isomorphic,

I collected all the open issues in one self-descriptive testcase. There are two more issues, one more general related to showRollOverIcon:true + showRollOver:false, where it is not possible to control those independently. And one introduced with 2018-02-28 (not in 2018-02-27), where the ":hover"-pseudoclass is not recognized anymore. See the end of the video for how it worked in v11.1p_2018-02-27 (does not in v11.1p_2018-02-28).

This is the testcase and the image needed for test 7:

BuiltInDS.java:

Code:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(800);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setTitle("img- vs object-tag issue" + getTitle());
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            {
                Label label = new Label("1: Problem with setShowRollOverIcon(true) for SVG-ImgButton");
                addItem(label);
                ImgButton imgButton = new SVGImgButton();
                imgButton.setShowRollOver(true);
                imgButton.setShowRollOverIcon(true);
                addItem(imgButton);
            }
            {
                Label label = new Label("2: No problem with PNG-ImgButton");
                addItem(label);
                ImgButton imgButton = new PNGImgButton();
                imgButton.setShowRollOver(true);
                imgButton.setShowRollOverIcon(true);
                addItem(imgButton);
            }
            {
                Label label = new Label(
                        "3: General problem with ImgButton showRollOverIcon:true + showRollOver:false (not possible to control those independently)");
                addItem(label);
                ImgButton imgButton = new PNGImgButton();
                imgButton.setShowRollOverIcon(true);
                imgButton.setShowRollOver(false);
                addItem(imgButton);
            }
            {
                Label label = new Label("5: No Problem with PNG-IButton");
                addItem(label);
                PNGButton button = new PNGButton("Title visible");
                addItem(button);
            }
            {
                Label label = new Label("6: Title not visible with SVG-IButton");
                addItem(label);
                SVGButton button = new SVGButton("Title not visible");
                addItem(button);
            }
            {
                Label label = new Label(
                        "7: SVG Hover problem with CSS hovers that worked in 2018-02-27, but not in 2018-02-28 (normal green, on hover red is the expectation)");
                addItem(label);
                SVGImgButton imgButton = new SVGImgButton();
                imgButton.setSrc("/miniNav_up.svg");
                addItem(imgButton);
            }
        }
    }

    private class SVGImgButton extends ImgButton {
        public SVGImgButton() {
            super();
            setSrc("[SKINIMG]NavigationBar/miniNav_up.svg");
            setIconSize(16);
        }
    }

    private class PNGImgButton extends ImgButton {
        public PNGImgButton() {
            super();
            setSrc("[SKINIMG]DateChooser/arrow_left.png");
            setIconSize(16);
        }
    }

    private class SVGButton extends Button {
        public SVGButton(String title) {
            super(title);
            setIcon("[SKINIMG]NavigationBar/miniNav_up.svg");
            setIconSize(16);
        }
    }

    private class PNGButton extends Button {
        public PNGButton(String title) {
            super(title);
            setIcon("[SKINIMG]DateChooser/arrow_left.png");
            setIconSize(16);
        }
    }
}

built-in-ds\war\svg_styles.css (linked from SVG in attachment):

Code:

svg > path {fill: green !important;}
svg:hover > path {fill: red !important;}

built-in-ds\war\miniNav_up.svg (see attachment, rename to remove "txt")

Best regards
Blama

Attached Files

miniNav_up.svg.txt (609 Bytes, 337 views)

**Blama** · 4 Mar 2018, 23:21

Hi Isomorphic,

additionally to #18. the clickHandler fix you did in #15 does not fix the same issue in FormItemIcons using v11.1p_2018-03-03.
See this modified sample, where a click on the icon does not open the expected window:

Code:

isc.DynamicForm.create({
    ID: "dateForm",
    width: 620,
    fixedColWidths: true,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Date Controls",
    fields : [{
        name: "dateItem", title: "Date", hint: "<nobr>Picklist based date input</nobr>", 
        editorType: "DateItem",
        pickerIconSrc:"[SKINIMG]NavigationBar/miniNav_up.svg",
    },
    {
        name: "mdri", title: "Mini Date Range", 
        editorType: "MiniDateRangeItem",
        pickerIconSrc:"[SKINIMG]NavigationBar/miniNav_up.svg",
    }
    ]
});

Best regards
Blama

**Blama** · 12 Mar 2018, 02:59

Hi Isomorphic,

any update on this one? This here and this one are places were I'm currently stuck with half finished features.

Best regards
Blama

**Isomorphic** · 12 Mar 2018, 09:15

This feature is under development.

**Isomorphic** · 15 Mar 2018, 09:55

With regard to the styling you reported as working in #13, can you provide an example of the "dummy.svg" files you were using? Where did you place that CSS? In the skin's skin_style.css?

**Blama** · 15 Mar 2018, 10:50

Hi Isomorphic,

no, the CSS is in a single file and referenced from the SVG. See #1. You could also put it in skin_styles.css and link that from the SVG (and the main page), but I assume that is creates overhead for the browser, as all the normal rules are not needed there. I'll therefore go with a (single rule?) CSS file referenced from all my SVG files.

Best regards
Blama

**Isomorphic** · 15 Mar 2018, 11:42

For the original test.svg in #1, we see that the original svg-stylesheet.css from #1 works, but what you posted in #13 doesn't. For example:

Code:

svg > path {fill: red !important;}

Were you assuming a slightly different test.svg file?

**Isomorphic** · 15 Mar 2018, 12:42

That CSS styling appears to only apply to explicit <path> elements in the SVG, and doesn't apply to <circle>, though one might assume "path" to be a generic tag matching all SVG shapes.

We'll proceed under the assumption you were speaking abstractly when referencing "path" in that CSS, since you didn't provide any specific SVG for the example of #9.

**Blama** · 15 Mar 2018, 14:18

Hi Isomorphic,

that assumption is correct. I thought you meant how the CSS is included. The icons I use are from FontAwesome, so far all of them use path.

Best regards
Blama

**Isomorphic** · 16 Mar 2018, 13:47

For the issue in post #18 (item 7), are you assuming the sample SVG you provided is installed to miniNav_up_Over.svg as well, since that's what will be rendered during a hover? You can see such stateful behavior in item 2 when the png disappears (it's actually a broken link for us) and #1 will have similar behavior as well.

**Isomorphic** · 19 Mar 2018, 09:24

Note that the issue you report in post #18 (item 7) cannot be easily solved in our Framework at this time. In order to address the problem of the SVG swallowing events for button clicks, etc., we need to set the "pointer-events: none" attribute on the <object> tag in the containing page. However, this has the impact of also preventing any "hover" events from triggering the CSS in the SVG. (That's why you appeared to see a regression when the other problem got fixed.)

So instead of using CSS in your SVG like:

Code:

svg:hover > path {fill: red !important;}

you'll need to define your XXX_Over.svg variant to apply the hover style. You could either have that SVG apply a different CSS sheet, or set a class attribute on its <svg> tag that you then key off in a common CSS.

Similarly, this CSS won't work,

Code:

.imgButtonOver > svg > path {fill: red !important;}

because the CSS classes applied to the <object> tag or its parent <divs> in the containing page don't jump the doc boundary. The solution is the same as for the other problem.

**ICPP** · 19 Mar 2018, 12:19

I've hit some regressions because of these changes. I use some svg images as button and dialog icons but these are now rendered way too large and become clipped. Furthermore, icons stopped being clickable and the mouse cursor stopped being a hand. This is one of the images.

Any thoughts on this other than converting the svg images to png (which seems to be the wrong way around) or reverting to a version before these changes? Currently using v11.1p_2018-03-17/PowerEdition and Google Chrome 65.

**Isomorphic** · 20 Mar 2018, 14:46

The changes to correct some of the issues you mention - though not the problem with hover CSS not tripping - will be going into SC 11.1p today and be in tomorrow's build. Today's build of SC 12.0d already includes those fixes so you can take a look now if that's easy for you.

Once you have the release with the changes, you can enumerate the remaining issues. There's already a (currently undocumented) flag to force <image> to be used rather than <object> (the previous behavior). If you mean you want a way to disable the "pointer-events: none" CSS so that hover CSS in your SVG works (fixing your cursor as well), that would be easy enough and would perhaps work for an Img, but for a ImgButton it may not make much sense, as it would mean the Framework wouldn't get any clicks.

We're not sure why icon sizing would be affected as it appears that we currently write out explicit sizes on the <object> tag for icons, but if it remains a problem after the mentioned changes, we can take a look if you can provide repro code.

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment