Bug: Sublayer Menu doesn't appear for dynamic layers with only one layer

[green3g]

It turns out dynamic layers are built differently when they only have one layer...some logic needs to be added to add sublayer menus to dynamic layers with only one sublayer.

P.S. you can assign me, I'll make a pull request to fix sometime in the next week I hope

[AESMM]

Hi, thanks for the fix. Is there any way for this to function like the sub layer menus? They appear as blue hyperlinked items with the sub menu appearing when clicked. This would make the "Open Attribute Table" function more consistent with the sub layer options. Or is it possible to add the menu "hamburger" button appear for sub-layers with menu items - this would make the entire UI consistent.

Thanks.

[green3g]

That is true, they are somewhat inconsistent currently. I think the first option would be best since having lots of hamburgers (one for each layer) might clutter the ui up. Plus, too many hamburgers can be bad for your health.

[AESMM]

Hi, any luck with the change to this yet? Thanks.

[tmcgee]

@AESMM @roemhildtg Is this just a stylistic change that can be handled through CSS?

[green3g]

No, the sublayer menu is set up on the sublayer's name, while the main layer's menu is set up underneath its 'hamburger'. I haven't had time to look into switching it yet.

Quick thought, having menus in two different places is a bit confusing for the end user. Should we consider moving the "hamburger" menu to the layer name menu?

[tmcgee]

Depending on the individual requirements, you can setup a hamburger menu icon using css in your application. Not suggesting you should have separate icons/colors for each menu (bad UX IMHO), but you could do that if you really wanted too...

.layerControlDijit .menuLink {
    color: inherit;
}

.layerControlDijit .menuLink:hover {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.layerControlDijit .menuLink:first-child:after {
    color: #00B;
    content:  '\f0c9';
    font-family: FontAwesome;
    margin-left:  10px;
}

.layerControlDijit #louisvillePubSafety-2-sublayer-control .menuLink:first-child:after {
    color:  #B00;
    content:  '\f05a';
}

.layerControlDijit #louisvillePubSafety-4-sublayer-control .menuLink:first-child:after {
    color:  #000;
    content:  '\f19d';
}

.layerControlDijit #louisvillePubSafety-5-sublayer-control .menuLink:first-child:after {
    color:  #00B;
    content:  '\f0fd';
}

.layerControlDijit #louisvillePubSafety-8-sublayer-control .menuLink:first-child:after {
    color:  #666;
    content:  '\f03d';
}

note that I had to use first-child in the css selector because there are 2 span tags. the second one is empty and does trigger the menu.

[AESMM]

Guys, I certainly like the idea of a single UI element for accessing the menus. Users are now used to the hamburgers for the top level menus and I don't think they'll have difficulty using those for the attribute table etc in future.

Thanks for all your help.

[tmcgee]

@AESMM Agreed. I think the placement of the sub layer menu icon is as important as the icon itself. If they were lined up directly below the layer menu, it would align nicely visually but perhaps overwhelming to have so many of the same icons to choose from all in a single column. The placement shown above with the menu positioned just to the right of the sub layer's name is a more obvious association between the menu and the sub layer though less visually pleasing. Perhaps if the sub layer menu icons were all aligned with each other, indented about 20px to the left of the layer menu and possibly a different color? This would appear positioned much like the Damage Assessment menu icon for all sub layers.

Related: Long layer/sublayer names in a narrow sidebar could (should?) be truncated with

text-overflow: ellipsis;

[tmcgee]

@roemhildtg I think the initial issue has been addressed. Do you agree?

Do you have a thought on what we should do to address the second issue raised here?

[green3g]

I'm not sure, I am all for standardizing the ui a bit but the icon is a lot smaller than the highlighted layer, and perhaps not as easy to click on a mobile phone. That's my concern.

[tmcgee]

The small icon size is valid concern and true for all of the icons in layerControl. issue #264 references and is still open.

The CSS classes I suggested above do not replace the text as a clickable hyperlink. The link color is removed and an icon added intending to provide a more consistent visual UI for desktop.

[green3g]

I tested out the css, and I like it. I think I'll submit a pull request shortly

[tmcgee]

Addressed in PR #680