Customize In-Page Toolbars (new 2sxc 8.6)

11/7/2016

Maybe you want to hover the toolbar on the left side, or you want to align the "..." more button differently. Maybe you need Left-To-Right-support, or you just want to add custom CSS classes.

The ability to customize the edit UX was added in 2sxc 8.6. Here are the settings you can configure at toolbar-level (technical details in the wiki):

hover position (right is default, but you can also hover left or force-not-hover)
show behavior, because by default (if inside an area with the class sc-element) it will always require a hover. But if you create an admin-dashboard or something, you may want to always show it.
placement of the "..." (more) button - because when left-aligning a menu or when not-floating it, the position to the right is kind of annoying.
custom CSS classes for whatever reason / decoration you want to apply. This will be applied to the <ul> tag which contains the buttons.

Let's look at some examples (you can find them in the tutorial-app):

Toolbar alignments, floats and more-buttons

<div class="demobox sc-element">
    Box to show alignments floating left with more to the right (not very practical)
    <ul class="sc-menu" toolbar='' settings='{ "hover": "left" }'></ul>
</div>

<div class="demobox sc-element">
    Box to show alignments - same as above, but made with Razor
    @Edit.Toolbar(Content, toolbar: new {}, settings: new { hover = "left" })
</div>

<div class="demobox sc-element">
    Box to show alignments - Razor, now showing standard buttons, just left-aligned
    @Edit.Toolbar(Content, settings: new { hover = "left" })
</div>

<div class="demobox sc-element">
    Box to show alignments floating left with more to the left
    <ul class="sc-menu" toolbar='' settings='{ "hover": "left", "autoAddMore": "left" }'></ul>
</div>

<div class="demobox sc-element">
    Box to show alignments floating right with simpler toolbar-attribute
    <ul class="sc-menu" toolbar='' settings='{ "hover": "right" }'></ul>
</div>

<div class="demobox sc-element">
    Box to show alignments floating left without more (as custom buttons)
    <ul class="sc-menu" toolbar='[{ "action": "new", "contentType": "Dummy" }]' settings='{ "hover": "left" }'></ul>
</div>

<div class="demobox sc-element">
    <ul class="sc-menu" toolbar='' settings='{ "hover": "none", "autoAddMore": "left" }'></ul>
    Box to show not floating 
</div>

<div class="demobox sc-element">
    Box to show no-hide... 
    <ul class="sc-menu" toolbar='' settings='{ "hover": "left", "autoAddMore": "left", "show": "always" }'></ul>
</div>

<div class="demobox sc-element">
    Box to show no-float and no-hide... 
    <ul class="sc-menu" toolbar='' settings='{ "hover": "none", "autoAddMore": "left", "show": "always" }'></ul>
</div>

<style>
    .demobox { height: 50px; border-width: 1px; border-color: coral; border-style: dashed;}
</style>

TL;DR

This should help you create exactly the UI experience you want to provide. For anyhing more, you should try the tutorial App or read the 2sxc wiki, specifically the edit-overview.

Love from Switzerland,
iJungleboy

2sxc customize-edit-ui JavaScript, JS SPA view Layout

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.