toolbar.html

63 lines | 2.899 kB Blame History Raw Download
<div class="row toolbar-pf table-view-pf-toolbar" id="{{include.toolbarId}}">
  <div class="col-sm-12">
    <form class="toolbar-pf-actions">
      <div class="form-group toolbar-pf-filter">
        <label class="sr-only" for="filter">Rendering Engine</label>
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rendering Engine <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#" id="{{include.filterId1}}">Rendering Engine</a></li>
              <li><a href="#" id="{{include.filterId2}}">Browser</a></li>
              <li><a href="#" id="{{include.filterId3}}">Platform(s)</a></li>
              <li><a href="#" id="{{include.filterId4}}">Engine Version</a></li>
              <li><a href="#" id="{{include.filterId5}}">CSS Grade</a></li>
            </ul>
          </div>
          <input type="text" class="form-control" placeholder="Filter By Rendering Engine..." autocomplete="off" id="filterInput">
        </div>
      </div>
      <div class="form-group">
        <button class="btn btn-default" type="button" id="{{include.actionId1}}">Delete Rows</button>
        <button class="btn btn-default" type="button" id="{{include.actionId2}}" disabled>Restore Rows</button>
        {% include widgets/kebab.html dropmenuType="dropdown btn-group" dropmenuId="dropdownKebab" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="toolbar-pf-action-right">
        <div class="form-group toolbar-pf-find">
          <button class="btn btn-link btn-find" type="button">
            <span class="fa fa-search"></span>
          </button>
          <div class="find-pf-dropdown-container">
            <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
            <div class="find-pf-buttons">
              <span class="find-pf-nums">1 of 3</span>
              <button class="btn btn-link" type="button">
                <span class="fa fa-angle-up"></span>
              </button>
              <button class="btn btn-link" type="button">
                <span class="fa fa-angle-down"></span>
              </button>
              <button class="btn btn-link btn-find-close" type="button">
                <span class="pficon pficon-close"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="row toolbar-pf-results">
      <div class="col-sm-9">
        <div class="hidden">
          <h5>0 Results</h5>
          <p>Active filters:</p>
          <ul class="list-inline"></ul>
          <p><a href="#">Clear All Filters</a></p>
        </div>
      </div>
      <div class="col-sm-3 table-view-pf-select-results">
        <strong>0</strong> of <strong>0</strong> selected
      </div>
    </div>
  </div>
</div>