3 Action Bar

The Action Bar sits at the top of an object detail page and allows for saving, cancelling, going back, and other actions upon the object. General guidelines for this pattern are as follows:

  • The Action Bar sits at the top of the page
  • When users come to a new/create object, the Cancel and Save are both visible and enabled.
  • When there is a primary button other than Save, the Primary button should always be active (see screenshots).  There is no Cancel link in this case.
  • On an object page in edit mode, before any edits have been made Cancel and Save are not visible or enabled. A user must click or tap inside a field to make visible and enable the Save and Cancel actions.
  • In the new or edit scenario if a user clicks on Cancel, the form is cleared and the user is taken back to the page they came from.
  • If the user leaves a page in the middle of create or edit, they should receive a confirmation dialogue asking them to confirm whether they want to leave the page without saving (see screenshot)

3.1

<div id="demo-page-background">
<div class="navbar navbar-default y-navbar-centered y-navbar-lg">
<div class="container-fluid">
    <div class="navbar-left">
        <div class="y-toolbar">
            <div class="y-toolbar-cell">
               <button class="btn-subordinate btn navbar-btn">
                 <span class="hyicon hyicon-back"></span> <span class="hidden-xs">Back</span>
               </button>
            </div>
        </div>
    </div>
    <div class="y-navbar-center">
        <div class="y-navbar-center-content">
            <h1>Long Page Title</h1>
        </div>
    </div>
    <div class="navbar-right">
        <div class="y-toolbar">
            <div class="y-toolbar-cell">
                <button class="btn btn-subordinate navbar-btn">Cancel
                </button>
            </div>
            <div class="y-toolbar-cell">
                <button class="btn btn-warning navbar-btn">Save
                </button>
            </div>
        </div>
    </div>
</div>
</div>