rhodecode/templates/debug_style/buttons.html

<%inherit file="/debug_style/index.html"/>

<%def name="breadcrumbs_links()">
    ${h.link_to(_('Style'), h.route_path('debug_style_home'))}
    &raquo;
    ${c.active}
</%def>


<%def name="real_main()">
<div class="box">
    <div class="title">
        ${self.breadcrumbs()}
    </div>

    <div class='sidebar-col-wrapper'>
    ${self.sidebar()}

    <div class="main-content">

      <h2>Buttons</h2>

      <p>
        Form buttons in various sizes. Buttons are always capitalised.
        Use the following classes:
      </p>

      <ul>
        ## TODO: lisa: Are we actually using three sizes of buttons??
        <li><code>.btn-lg</code> for large buttons</li>
        <li><code>.btn-sm</code> for small buttons</li>
        <li><code>.btn-xs</code> for xtra small buttons</li>
      </ul>

      <p>Note that <code>.btn-mini</code> is supported for legacy reasons.</p>

      <div class="bs-example">
        ## TODO: johbo: Should also work without the form element
        <form method='post' action=''>
          <div class='form'>

              <div class="buttons">
                <input type="submit" value="Save .btn-lg" id="example_save" class="btn btn-lg">
                <input type="reset" value="Reset" id="example_reset" class="btn btn-lg">
                <button class="btn btn-lg">Large</button>
                <a class="btn btn-lg" href="#">A link as button</a>
              </div>

              <div class="buttons">
                <input type="submit" value="Save" id="example_save" class="btn">
                <input type="reset" value="Reset" id="example_reset" class="btn">
                <button class="btn">Normal</button>
                <button class="btn btn-danger">Normal</button>
                <a class="btn" href="#">A link as button</a>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-sm" id="example_save" class="btn btn-sm">
                <input type="reset" value="Reset" id="example_reset" class="btn btn-sm">
                <button class="btn btn-sm">Small</button>
                <button class="btn btn-sm btn-danger">Small</button>
                <a class="btn btn-sm" href="#">A link as button</a>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-xs" id="example_save" class="btn btn-xs">
                <input type="reset" value="Reset" id="example_reset" class="btn btn-xs">
                <button class="btn btn-xs">XSmall</button>
                <button class="btn btn-xs btn-danger">XSmall</button>
                <a class="btn btn-xs" href="#">A link as button</a>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-mini" id="example_save" class="btn btn-mini">
                <input type="reset" value="Reset" id="example_reset" class="btn btn-mini">
              </div>

              <div class="buttons">
                Buttons of style <code>.btn-link</code>:
                <input type="reset" value="Reset" id="example_reset" class="btn btn-link">
                <button class="btn btn-link">Edit</button>
                <button class="btn btn-danger btn-link">Delete</button>
              </div>
          </div>
         </form>
      </div>

    
      <h2>Buttons as Links</h2>
      <p>
        Most of our Edit/Delete buttons come in the following form.
        Inside of a table, these are "action buttons", and while an 
        Edit <em>link</em> is a typical blue link, a Delete <em>button</em>
        is red as per the 'btn-danger' styling and use <code>.btn-link</code>.
      </p>
      <p>
        We use "Delete" when the thing being deleted cannot be undone;
        "Reset", and "Revoke" are used where applicable.
      </p>
      <p>
        Note: Should there be a need for a change in the wording, be
        aware that corresponding documentation may also need updating.
      </p>
    <div class="bs-example">
      <table class="rctable edit_fields">
        <tr><td></td><td></td></tr>
        <tr>
          <td></td>
          <td class=" td-action">
           <div class="grid_edit">
              <a href="/_admin/repo_groups/breads/edit" title="Edit">Edit</a>
           </div>
           <div class="grid_delete">
              <form action="/_admin/repo_groups/breads" method="post"><div style="display:none">
          <input name="_method" type="hidden" value="delete">
          </div>
          <div style="display: none;"><input id="csrf_token" name="csrf_token" type="hidden" value="03d6cc48726b885039b2f7675e85596b7dae6ecf"></div>
                  <button class="btn btn-link btn-danger" type="submit" onclick="return confirm('" +_ungettext('confirm="" to="" delete="" this="" group:="" %s="" with="" repository','confirm="" repositories',gr_count)="" %="" (repo_group_name,="" gr_count)+"');"="">
                    Delete
                  </button>
              </form>
           </div>
          </td>
        </tr>
      </table>
      <div class="highlight-html"><xmp>
    <a href="some-link" title="${_('Edit')}">${_('Edit')}</a>

    <button class="btn btn-link btn-danger" type="submit"
        onclick="return confirm('${_('Confirm to remove this field: Field')}');">
        ${_('Delete')}
    </button>
      </xmp></div>
    </div>


      <h2>Buttons disabled</h2>

      <p>Note that our application still uses the class <code>.disabled</code>
         in some places. Interim we support both but prefer to use the
         attribute <code>disabled</code> where possible.</p>

      <div class="bs-example">
        ## TODO: johbo: Should also work without the form element
        <form method='post' action=''>
          <div class='form'>

              <div class="buttons">
                <input type="submit" value="Save .btn-lg" id="example_save" class="btn btn-lg" disabled>
                <input type="reset" value="Reset" id="example_reset" class="btn btn-lg" disabled>
                <button class="btn btn-lg" disabled>Large</button>
              </div>

              <div class="buttons">
                <input type="submit" value="Save" id="example_save" class="btn" disabled>
                <input type="reset" value="Reset" id="example_reset" class="btn" disabled>
                <button class="btn" disabled>Normal</button>
                <button class="btn btn-danger" disabled>Normal</button>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-sm" id="example_save" class="btn btn-sm" disabled>
                <input type="reset" value="Reset" id="example_reset" class="btn btn-sm" disabled>
                <button class="btn btn-sm" disabled>Small</button>
                <button class="btn btn-sm btn-danger" disabled>Small</button>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-xs" id="example_save" class="btn btn-xs" disabled>
                <input type="reset" value="Reset" id="example_reset" class="btn btn-xs" disabled>
                <button class="btn btn-xs" disabled>XSmall</button>
                <button class="btn btn-xs btn-danger" disabled>XSmall</button>
              </div>

              <div class="buttons">
                <input type="submit" value="Save .btn-mini" id="example_save" class="btn btn-mini" disabled>
                <input type="reset" value="Reset" id="example_reset" class="btn btn-mini" disabled>
              </div>

              <div class="buttons">
                Buttons of style <code>.btn-link</code>:
                <input type="reset" value="Reset" id="example_reset" class="btn btn-link" disabled>
                <button class="btn btn-link" disabled>Edit</button>
                <button class="btn btn-link btn-danger" disabled>Delete</button>
              </div>

          </div>
         </form>
      </div>



      </div>
    </div>  <!-- .main-content  --> 
  </div> <!-- .box -->
</%def>