Customize Edit UI/UX

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->

<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>2sxc Toolbar Customization</h2>
    <div>
      Since you can do so many things customizing the toolbar, we created a bunch of small examples for you. Note that we are basically providing a list of commands how the toolbar should be modified. You should also 
      <a href="https://docs.2sxc.org/how-to/customize-edit-ux/toolbars.html" target="_blank">read the docs</a> to learn more about this. 
    </div>
  </div>
</div>

<div class="alert alert-warning">
  Important: Normally only editors see these toolbars, so clicking on the buttons won't work, except for the ellipsis (&hellip;). <br>
  The toolbars would usually only appear on hover, but the Tutorial runs in Demo-Mode so you can see them right away. 
  The old samples still only work on hover. <br>
  Hover over the various boxes to see the result - like this: <br>
  <img loading="lazy" src="@App.Path/ui/assets/hover-example.jpg" width="100%">
</div>



<h2>Initial Setup, No Configuration</h2>

<div class="alert alert-success" @Kit.Toolbar.Default()>
  <h3>New syntax</h3>
  <div><code>@@Kit.Toolbar.Default()</code> without any Data</div>
</div>
<div class="alert alert-secondary" @Kit.Edit.TagToolbar()>
  <h3>Old syntax</h3>
  <div><code>@@Edit.TagToolbar()</code> without any Data</div>
</div>

<div class="alert alert-success" @Kit.Toolbar.Default(Content)>
  <h3>New syntax</h3>
  <div><code>@@Kit.Toolbar.Default(Content)</code> with a pre-set content-item</div>
  <div><code>@@Kit.Toolbar.Default().For(Content)</code> with a content-item which can be set later</div>
</div>

<div class="alert alert-secondary" @Edit.TagToolbar(Content)>
  <h3>Old syntax</h3>
  <div><code>@@Edit.TagToolbar(Content)</code> with a content-item</div>
</div>


<h2>Add / Remove Buttons</h2>

  <div class="alert alert-success" @Kit.Toolbar.Default(Content).Edit().New()>
    <h3>New syntax: Add two buttons </h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+edit", "+new"})>
    <h3>Old syntax: Add two buttons </h3>
  </div>


  <div class="alert alert-info" @Kit.Toolbar.Default().New(tweak: b=>b.Color("pink,black")).For(Content)>
    <h3>New syntax (tweak): Add <code>new</code> button with colors </h3>
  </div>
  
  <div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui:"color=pink,black")>
    <h3>New syntax (string): Add <code>new</code> button with colors </h3>
  </div>

  <div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui: new {
    color = "blue,white"
  })>
    <h3>New syntax (object): Add <code>new</code> button with colors </h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&color=pink,black"})>
  <h3>Old syntax: Add <code>new</code> button with colors </h3>
  </div>


  <div class="alert alert-info" @Kit.Toolbar.Default().New(tweak: b=>b.Position(-1)).For(Content)>
    <h3>New <em>tweak</em> syntax: Add <code>new</code> at the end of button-list</h3>
  </div>
  <div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui: "pos=-1")>
    <h3>New syntax: Add <code>new</code> at the end of button-list</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&pos=-1"})>
    <h3>Old syntax: Add <code>new</code> at the end of button-list</h3>
  </div>


  @{
    var moreButtonToolbar = Kit.Toolbar.Default().Settings(autoAddMore:"never");
  }
  <div class="alert alert-success" @moreButtonToolbar.For(Content)>
    <h3>New syntax: Remove <code>more</code> button</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "-more" })>
    <h3>Old syntax: Remove <code>more</code> button</h3>
  </div>


  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).Edit()>
    <h3>New syntax: Use empty toolbar template and add <code>edit</code></h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "toolbar=empty", "+edit"})>
    <h3>Old syntax: Use empty toolbar template and add <code>edit</code></h3>
  </div>





<h2>Add Buttons with SVG Icons (v14.08+)</h2>
<p>
  We've introduced a new feature to allow custom SVG icons for buttons. 
</p>

  @{
    // icon from https://fonts.google.com/icons?icon.query=func
    var svgIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M12 40v-3.15L25.75 24 12 11.15V8h24v5H19.8l11.75 11L19.8 35H36v5Z'/></svg>";
  }
  <div class="alert alert-info" @Kit.Toolbar.Empty().New(tweak: b=>b.Icon(svgIcon)).For(Content)>
    <h3>New syntax (tweak): Button with SVG Icon </h3>
  </div>

  <div class="alert alert-info" @Kit.Toolbar.Empty().New(tweak: b=>b.Icon(svgIcon).Color("darkgreen")).For(Content)>
    <h3>New syntax only: Button with SVG Icon and color </h3>
  </div>

  @{
    var uiWithSvgIcon = new {
      Icon = svgIcon
    };
  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: uiWithSvgIcon)>
    <h3>New syntax (tweak): Button with SVG Icon </h3>
  </div>

  @{
    // icon from https://fonts.google.com/icons?icon.query=func
    var uiSvgIconColored = new {
      Icon = svgIcon,
      color = "darkgreen"
    };
  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: uiSvgIconColored)>
    <h3>New syntax only: Button with SVG Icon and color </h3>
  </div>



<h2>Add Info-Button with Note (v15.08+)</h2>
<p>
  We've introduced a new feature to allow add notes to buttons - which we'll demo with the new info button.
  Mouse over it to see the effect.
</p>

  @{
    var toolbarWithInfoAndNotes = Kit.Toolbar.Empty()
      .Info(link: "https://www.2sxc.org/", tweak: b=>b.Note("This is a post-it info. Click to visit 2sxc.org", background: "yellow"))
      .New(tweak: b=>b.Note("This is a cool note"))
      .For(Content); 
  }
  <div class="alert alert-info" @toolbarWithInfoAndNotes>
    <h3>New syntax (tweak): Button with SVG Icon </h3>
  </div>



<h2>Modify a button</h2>
<p>
  When we modify a button, we don't add one, but change the look or behavior of an existing button.
</p>

  <div class="alert alert-info" @Kit.Toolbar.Default().Edit("-").Edit(tweak: b=>b.Color("red")).For(Content)>
    <h3>New syntax (tweak): Edit button is now red</h3>
  </div>

  <div class="alert alert-success" @Kit.Toolbar.Default().Edit("-").Edit(ui:"color=red").For(Content)>
    <h3>New syntax: Edit button is now red</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%edit&color=red"})>
    <h3>Old syntax: Edit button is now red</h3>
  </div>


  @{
    var categoryButtonsTweak = Kit.Toolbar.Default()
      .New("BlogPost", tweak: b=>b.Color("red").Tooltip("Blog-Post"))
      .New("Category", tweak: b=>b.Color("green").Tooltip("Category"));
  }
  <div class="alert alert-info" @categoryButtonsTweak.For(Content)>
    <h3>New syntax (tweak): New <code>BlogPost</code> is red, <code>Category</code> is green</h3>
  </div>

  @{
    var categoryButtonsToolbar = Kit.Toolbar.Default()
      .New("BlogPost", ui:"color=red&title=Blog-Post")
      .New("Category", ui:"color=green&title=Category");
  }
  <div class="alert alert-success" @categoryButtonsToolbar.For(Content)>
    <h3>New syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>
  </div>
  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "+new&color=red&title=Blog-Post?contentType=BlogPost",
    "+new&color=green&title=Category?contentType=Category",
  })>
    <h3>Old syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>
  </div>


  <div class="alert alert-success" @Kit.Toolbar.Default().Delete().For(Content)>
  <h3>New syntax: Always show <code>Delete</code></h3>
    <p>Note that you'll have to hit the ellipsis a few times to see it.</p>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%delete&show=true"})>
    <h3>Old syntax: Always show <code>Delete</code></h3>
    <p>Note that you'll have to hit the ellipsis a few times to see it.</p>
  </div>





<h2>Ways to provide the <code>ui</code>, <code>parameters</code>, <code>prefill</code></h2>
<p>
  Most buttons can have a <code>ui</code> and a <code>parameters</code> parameter.
  Some also have a <code>prefill</code>.
  In simple cases you will just use a <strong>string</strong> to configure this, 
  but in more advanced cases it's easier to use an <strong>object</strong>. 
</p>
<p>
  Objects and strings can also be <strong>merged</strong> with other objects and strings.

  A good reason to do this is to prepare a complex ui/parameters/prefill object, 
  and then use it in a loop where you may want small differences in the buttons of each toolbar.
</p>
<p>
  Note that all the following examples use the <code>ui</code> parameter as it's easy to see the effect.
  But the behavior is the same for <code>parameters</code> and <code>prefill</code>.
</p>

  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: "color=orange")>
    <h3><code>ui</code> as inline string </h3>
  </div>

  @{  var uiReuse = "color=magenta";  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).Edit(ui: uiReuse).New(ui: uiReuse)>
    <h3><code>ui</code> as string variable for reuse</h3>
  </div>

  @{
    var uiShared = "color=magenta&title=Default Title";
    var uiMerged = new object[] { uiShared, "title=Modified Title" };
  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).Edit(ui: uiShared).New(ui: uiMerged)>
    <h3><code>ui</code> as string for reuse and merge</h3>
    <p>Mouse over the buttons to see how we use/merge to ui configurations</p>
  </div>


  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: new { color = "orange"})>
    <h3><code>ui</code> as inline object </h3>
  </div>

  @{
    var uiPrepared = new {
      Icon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/></svg>",
      Color = "orange",
      Title = "This is the prepared object"
    };
  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: uiPrepared)>
    <h3><code>ui</code> as prepared object </h3>
  </div>

  @{
    // this uses uiPrepared from the previous example
    var uiObjMerged = new object[] { uiPrepared, new { Color ="purple"}};
  }
  <div class="alert alert-success" @Kit.Toolbar.Empty(Content).New(ui: uiPrepared).New(ui: uiObjMerged)>
    <h3><code>ui</code> as prepared object merged with other object</h3>
  </div>





<h2>Data Buttons with Filters</h2>
<p>
  <code>Data</code> buttons open the management view with a list of items to manage.
  You will often want to filter what to open - like only open items which have a certain property 
  or have one of 3 tags. 
  <br>
  <em>
    Important: These samples show how to do it, but it won't work in anonymous mode. 
    To see it in full action, you will need to install the tutorial and test it logged in as Admin.
  </em>
</p>

  <div class="alert alert-info" @Kit.Toolbar.Empty().Data("Books", tweak: b=>b.Filter("Title", "Good Omens"))>
    <h3><code>Data</code> button with <em>string</em> <code>filter</code> (tweak) </h3>
    <p>This will find all books with the title <em>Good Omens</em></p>
  </div>

  <div class="alert alert-success" @Kit.Toolbar.Empty().Data("Books", filter: "Title=Good Omens")>
    <h3><code>Data</code> button with <em>string</em> <code>filter</code> </h3>
    <p>This will find all books with the title <em>Good Omens</em></p>
  </div>

  <div class="alert alert-success" @Kit.Toolbar.Empty().Data("Books", filter: new { Title = "Good Omens" })>
    <h3><code>Data</code> button with <em>object</em> <code>filter</code> </h3>
    <p>This will find all books with the title <em>Good Omens</em></p>
  </div>


  @{
    var firstThreeAuthorIds = AsList(App.Data["Persons"])
      .Select(author => author.EntityId)
      .ToArray();

    var toolbarTop3 = Kit.Toolbar.Empty()
      .Data("Books", filter: new { Authors = firstThreeAuthorIds });
  }
  <div class="alert alert-success" @toolbarTop3>
    <h3><code>Data</code> buttons returning books which has any of 3 authors</h3>
  </div>

  @{
    var authorsToolbar = Kit.Toolbar.Empty();
    foreach (var auth in AsList(App.Data["Persons"])) {
      authorsToolbar = authorsToolbar.Data("Books",
        ui: new { Title = "Books by " + auth.FirstName + " " + auth.LastName},
        filter: new { Authors = new int[] { auth.EntityId } }
      );
    }
  }
  <div class="alert alert-success" @authorsToolbar>
    <h3>Many <code>Data</code> buttons each filtering for one related author</h3>
  </div>





<h2>Button Groups</h2>

  @{
    var buttonGroupToolbar = Kit.Toolbar.Default()
      .Group() // new in v14.07.05
      .New("BlogPost",ui:"color=red&title=Blog-Post")
      .New("Category", ui:"color=green&title=Category");
  }
  <div class="alert alert-success" @buttonGroupToolbar.For(Content)>
    <h3>New syntax: Add a button-group just for my buttons (v14.07.05+)</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "+group=my",
    "+new&group=my&color=red&title=Blog-Post?contentType=BlogPost",
    "+new&group=my&color=green&title=Category?contentType=Category",
  })>
    <h3>Old syntax: Add a button-group just for my buttons</h3>
  </div>


  @{
    var multipleGroupsToolbar = Kit.Toolbar.Default()
      .Group()
      .New("BlogPost", ui:"color=red&title=Blog-Post")
      .Group()
      .New("Category", ui:"color=green&title=Category");
  }
  <div class="alert alert-success" @multipleGroupsToolbar.For(Content)>
    <h3>New syntax: Add two button-groups</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "+group=my1",
    "+new&group=my1&color=red&title=Blog-Post?contentType=BlogPost",
    "+group=my2",
    "+new&group=my2&color=green&title=Category?contentType=Category",
  })>
    <h3>Old syntax: Add two button-groups</h3>
  </div>





<h2>Hover Behavior</h2>

  <div class="alert alert-success" @Kit.Toolbar.Default(Content).Settings(hover:"left")>
    <h3>New syntax: Hover Left</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "settings&hover=left",
  })>
    <h3>Old syntax: Hover Left</h3>
  </div>


  <div class="alert alert-success" @Kit.Toolbar.Default(Content).Settings(autoAddMore: "end", hover: "left")>
    <h3>New syntax: Hover Left and <code>more</code> button to the right</h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "settings&hover=left&autoAddMore=end",
  })>
    <h3>Old syntax: Hover Left and <code>more</code> button to the right</h3>
  </div>





<h2>Custom JavaScript Code</h2>

  <div class="alert alert-success" @Kit.Toolbar.Default().Code("showMsg1",ui:"title=Show%20Message").For(Content)>
    <h3>New syntax: Just call <code>showMsg1()</code> </h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "custom&title=Show%20Message?call=showMsg1",
  })>
    <h3>Old syntax: Just call <code>showMsg1()</code> </h3>
  </div>


  @{
    var customJsParamsToolbar = Kit.Toolbar.Default().Code("showMsg2", parameters:"id=42", ui:"title=Show%20Message");
  }
  <div class="alert alert-success" @customJsParamsToolbar.For(Content)>
    <h3>New syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>
  </div>

  <div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
    "custom&title=Show%20Message?call=showMsg2&id=42",
  })>
    <h3>Old syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>
  </div>


  @* 2sxclint:disable:no-inline-script *@
<script>
  function showMsg1() {
    alert('hello from my button!');
  }
  function showMsg2(context, event) {
    console.log(context, event);
    alert('hello from my Message - got this id:' + context.button.command.params.id);
  }
</script>


<h2>More Stuff</h2>
<div>
  You can do much more - like change icons, call call-parameters etc. 
  Read the 
  <a href="https://docs.2sxc.org/how-to/customize-edit-ux/toolbars.html" target="_blank">how-to</a> and the 
  <a href="https://docs.2sxc.org/specs/cms/toolbars/toolbar-builder.html" target="_blank">specs</a> for this.
</div>

@* 2sxclint:disable:no-inline-script *@

@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })