Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Stephan Lonntorp 195 posts 212 karma points
    Jan 05, 2010 @ 14:22
    Stephan Lonntorp
    0

    Custom icon in Context menu.

    Ok, so here we go again with this context menu business.

    I've implemented my own creation dialog, in order to have a few default values automatically added to my newly created content node.

    Now here's my problem.

    If i specify an image as the value of my Icon property of the IAction implementation, it gets added to the context menu as a background-image of the <ins /> element, which is hidden with display: none;.

    If i instead use a css class name, as ".sprNew", it gets added as a css-sprite and is shown perfectly.

    Compare the two:

    <li>
    <a class="0" rel="0" href="#">
    <ins style="background-image: url(images/new.png);"> </ins>
    <span>My Custom Creation Dialog</span>
    </a>
    </li>

    <li>
    <a class="1 " rel="1" href="#">
    <ins> </ins>
    <span>
    <div class="menuSpr sprNew"/>
    <div class="menuLabel">Create</div>
    </span>
    </a>
    </li>

     

    Now, my question is: is it possible to define my own css-sprite somehow?

    Is this by design, or a bug?
    I know that the image references are marked as [deprecated] in umbraco 4.0, but what's the new recommended way to extend the UI then?

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 16, 2010 @ 20:51
    Matt Brailsford
    0

    Hey Stephen,

    Did you find a solution to this?

    Matt

  • Morten Christensen 596 posts 2773 karma points admin hq c-trib
    Jul 16, 2010 @ 22:38
    Morten Christensen
    0

    In 4.5 the standard umbraco sprites are defined in this css:
    wwwroot\umbraco_client\Tree\menuIcons.css

    if you add your own definition here like:

    .menuSpr
    {
    float: left;
    background-image: url(sprites.png);
    background-position: -7px -8px;
    margin-top: 1px;
    width: 17px;
    height: 16px;
    margin: 1px 13px 1px 0px;
    }

    .sprNew
    {
    background-position: -7px -339px;
    }

    it'll show up, but you should probably look into adding your own css to the backend instead to leave the standard umbraco stuff intact ;-)  -- especially if you are creating a package. I'm not sure exactly how to add your own css to work throughout the backend, but the standard tree uses ClientDependency to do so:

    <umb:CssInclude ID="CssInclude3" runat="server" FilePath="Tree/menuIcons.css" PathNameAlias="UmbracoClient" Priority="11" />

    taken from TreeControl.ascx in the umbraco.controls.Tree namespace.

    Hope this helps you on the right track.

    - Morten

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 16, 2010 @ 22:44
    Matt Brailsford
    0

    Hey Morten,

    Fix didn't work. Looking into it, it seems to be a little more involved as there is a CSS class always setting ins to display none. Disabling this does make the icon display, but it screws up the layout. Looking back at the source though in firebug, the markup for a standard item is:

    <li>
    <a class="2 " rel="2" href="#">
    <ins>&nbsp;</ins>
    <span>
    <div class="menuSpr sprExportDocumentType"></div>
    <div class="menuLabel">Export Document Type</div>
    </span>
    </a>
    </li>

    Notice how the icon class is now on a div, inside the span and not on the ins element. Strangly this doesn't seem to be what is output by the js file, so I'm not sure if some other majic is going on.

    Suggestion for adding a custom CSS file might be to hook into the umbracoPage.Load event and indect it? Though not sure if that applies to the tree side.

    Matt

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 16, 2010 @ 23:13
    Matt Brailsford
    0

    Hey Morten,

    I reckon a change is needed in umbraco.controls.Tree in the Serialize method which is currently

    if (action.Icon.StartsWith("."))
    {
    StringBuilder builder = new StringBuilder();
    builder.Append(string.Format("<div class='menuSpr {0}'>", action.Icon.TrimStart(new char[] { '.' })));
    builder.Append("</div>");
    builder.Append("<div class='menuLabel'>");
    builder.Append(dictionary["label"].ToString());
    builder.Append("</div>");
    dictionary["label"] = builder.ToString();
    }
    else
    {
    dictionary.Add("icon", action.Icon);
    }

    As it's the divs in the first part is where the icons are actualy applied, i'd imaging you'd need something built up in a similar manor but with a BG image instead?

    Matt

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 16, 2010 @ 23:40
    Matt Brailsford
    0

    Ok, i'm trying to fix this by changing jquery.tree.contextmenu.js but for some reason changes aren't being applied, it's still using the same js as before even after app pool restart

    This is what I'm trying to do

    //if (opts.items[i].icon) str += "<ins " + (opts.items[i].icon.indexOf("/") == -1 ? " class=\"" + opts.items[i].icon + "\" " : " style=\"background-image:url('" + opts.items[i].icon + "');\" ") + ">&nbsp;</ins>";
    //else str += "<ins>&nbsp;</ins>";
    //str += "<span>" + opts.items[i].label + '</span></a></li>';
    str += "<ins>&nbsp;</ins>";
    str += "<span>";
    if (opts.items[i].icon && opts.items[i].icon.indexOf("/") >= 0) {
    str += "<div class=\"menuSpr\" style=\"background-image:url('"+ opts.items[i].icon +"');\"></div><div class='menuLabel'>"+ opts.items[i].label +"</div>";
    } else {
    str += opts.items[i].label;
    }
    str += '</span></a></li>'

    I've commented out the old code, with new code below. So I am keeping the empty <ins> tag, and am recreating the divs the icon is an image, but this time with background-image style attribute.

    I just need to figure out why this isn't updating on the site. How can you clear ClientDependacy cache?

    Matt

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 16, 2010 @ 23:56
    Matt Brailsford
    3

    Ok, here is the fix

    In umbraco_client\Tree\jquery.tree.contextmenu.js, line 50, change:

    if (opts.items[i].icon) str += "<ins " + (opts.items[i].icon.indexOf("/") == -1 ? " class=\"" + opts.items[i].icon + "\" " : " style=\"background-image:url('" + opts.items[i].icon + "');\" ") + ">&nbsp;</ins>";
    else str += "<ins>&nbsp;</ins>";
    str += "<span>" + opts.items[i].label + '</span></a></li>';

    To:

    str += "<ins>&nbsp;</ins>";
    str += "<span>";
    if (opts.items[i].icon && opts.items[i].icon.indexOf("/") >= 0) {
    str += "<div class=\"menuSpr\" style=\"background:transparent url('"+ opts.items[i].icon +"') center center no-repeat;\"></div><div class='menuLabel'>"+ opts.items[i].label +"</div>";
    } else {
    str += opts.items[i].label;
    }
    str += '</span></a></li>';

    Then go into ~/App_Data/ClientDependancy/ and delete everything. This will force the ClientDepndency framework to reload you script.

    And there you have it, custom icons.

    Matt

    NB The ins tag should have a html encoded none breaking space in, but the forum won't display it.

  • Morten Christensen 596 posts 2773 karma points admin hq c-trib
    Jul 17, 2010 @ 12:02
    Morten Christensen
    0

    For other people checkin in on this, the discussion started in this thread:
    http://our.umbraco.org/forum/developers/extending-umbraco/10243-Custom-action-icons-in-context-menu-not-showing-up

    and a codeplex issue has been created - please go vote it up: http://umbraco.codeplex.com/workitem/28119?ProjectName=umbraco

    - Morten

  • Matt Brailsford 4124 posts 22220 karma points MVP 9x c-trib
    Jul 18, 2010 @ 09:50
    Matt Brailsford
    0

    Hey Guys,

    I've come up with another fix, that theoreticaly, should work, even if the fix is applied, so you should be able to use custom icons now. Now it is a bit of a hack, but it does work.

    Within your custom action, define your Icon as follows:

    public string Icon
    {
        get { return ".sprChangeMasterDocType' style='background: transparent url(/umbraco/images/umbraco/change_master_doc_type.png) center center no-repeat"; }
    }

    So, you first define a dummy class name, then inject the style tag to insert the custom icon.

    Matt

  • Matt Taylor 873 posts 2086 karma points
    Jul 24, 2014 @ 15:37
    Matt Taylor
    0

    Thanks Matt,

    Just worked for me in v6.1.

Please Sign in or register to post replies

Write your reply to:

Draft