Show Content Pane Labels

[ohine]

Description

When in edit mode > hover over a module > there is a Move flyout menu with content panes listed to reposition the module on a page.

Admins need a way to easily identify the name of each content pane in order for this to be a usable feature.

Originally created by @tpluscode at dnnsoftware/Dnn.EditBar#25

[ohine]

Comment by @OllyHodgson

Recently I've worked around this by making sure all of my content panes have a data-name attribute the same as the ID, e.g. <div runat="server" id="Fullwidth_Central" data-name="Fullwidth_Central"> and used CSS to show that attribute:

.dnn-mode-edit .content-areas .dnnModuleManager::before {
    content: attr(data-name);
    display: inline-block;
    padding: 2px 3px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    font-size: 11px;
    color: $white;
    background: rgba(0,0,0,0.3);
}

It shows up like this when editing the page (extra icons are because it's an Evoq install):

[tpluscode]

Actually, I like @OllyHodgson's code better. I would still consider hover style instead though.

@zyhfish, would you adapt your solution to use similar method to achieve this goal?

[OllyHodgson]

@tpluscode

I would still consider hover style instead though.

If DNN's editing experience is ever going to be good on touch only devices (iPad, etc) remember hover state doesn't really exist there :)