Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
142 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| {% load i18n %} | ||
| <style> | ||
| {#todo use css file#} | ||
| .kiwi-toolbar { | ||
| background: #fff; | ||
| padding-left: 45px; | ||
| padding-right: 15px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .kiwi-toolbar .find-and-reorder { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .find-and-reorder .btn-group { | ||
| padding-left: 10px; | ||
| } | ||
|
|
||
| .toolbar-separator { | ||
| border-right: 1px solid #d1d1d1; | ||
| padding-right: 10px; | ||
| } | ||
|
|
||
| .toolbar-search { | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| flex-grow: 1; | ||
| } | ||
| </style> | ||
| <div class="kiwi-toolbar"> | ||
| <div class="list-view-pf-checkbox"> | ||
| <input type="checkbox" class="btn dropdown-toggle"> | ||
| </div> | ||
| <div class="find-and-reorder toolbar-separator"> | ||
| <div class="toolbar-pf-filter toolbar-separator"> | ||
| <label class="sr-only" for="filter">Name</label> | ||
| <div class="input-group"> | ||
| <div class="input-group-btn"> | ||
| <button type="button" class="btn btn-default dropdown-toggle" id="input-filter-button" | ||
| data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name<span | ||
| class="caret"></span></button> | ||
| <ul class="dropdown-menu"> | ||
| <li class="selected"><a href="#">Name</a></li> | ||
| <li><a href="#">Category</a></li> | ||
| <li><a href="#">Priority</a></li> | ||
| <li><a href="#">Author</a></li> | ||
| <li><a href="#">Default Tester</a></li> | ||
| </ul> | ||
| </div><!-- /btn-group --> | ||
| <input type="text" class="form-control" id="filter" placeholder="Filter By Name..."> | ||
| </div><!-- /input-group --> | ||
| </div> | ||
| <div> | ||
| <div class="dropdown btn-group "> | ||
| <button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" | ||
| aria-haspopup="true" aria-expanded="false">Name<span class="caret"></span></button> | ||
| <ul class="dropdown-menu"> | ||
| <li class="selected"><a href="#">Name</a></li> | ||
| <li><a href="#">Id</a></li> | ||
| <li><a href="#">Status</a></li> | ||
| <li><a href="#">Priority</a></li> | ||
| </ul> | ||
| </div> | ||
| <button class="btn btn-link" type="button"> | ||
| <span class="fa fa-sort-alpha-asc"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="toolbar-separator"> | ||
| <div class="dropdown btn-group"> | ||
| <button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" | ||
| aria-haspopup="true" aria-expanded="false">Priority<span class="caret"></span></button> | ||
| <ul class="dropdown-menu"> | ||
| <li class="selected"><a href="#">P1</a></li> | ||
| <li><a href="#">P2</a></li> | ||
| <li><a href="#">P3</a></li> | ||
| <li><a href="#">P4</a></li> | ||
| <li><a href="#">P5</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="dropdown btn-group"> | ||
| <button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" | ||
| aria-haspopup="true" aria-expanded="false">Status<span class="caret"></span></button> | ||
| <ul class="dropdown-menu"> | ||
| <li class="selected"><a href="#">PROPOSED</a></li> | ||
| <li><a href="#">CONFIRMED</a></li> | ||
| <li><a href="#">DISABLED</a></li> | ||
| <li><a href="#">NEED UPDATE</a></li> | ||
| </ul> | ||
| </div> | ||
| <button class="btn btn-default" type="button">Default tester</button> | ||
| <button class="btn btn-default" type="button">Delete</button> | ||
| </div> | ||
| <div class="toolbar-pf-find toolbar-search"> | ||
| <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"> | ||
| {# todo should be populated by the js#} | ||
| <span class="find-pf-nums">1 of 1</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> | ||
|
|
||
| <script> | ||
| {# todo move to js file #} | ||
| (function($) { | ||
| $(document).ready(function() { | ||
| // Upon clicking the find button, show the find dropdown content | ||
| $(".btn-find").click(function() { | ||
| $(this).parent().find(".find-pf-dropdown-container").toggle(); | ||
| }); | ||
| // Upon clicking the find close button, hide the find dropdown content | ||
| $(".btn-find-close").click(function() { | ||
| $(".find-pf-dropdown-container").hide(); | ||
| }); | ||
| }); | ||
| })(jQuery); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters