Skip to content
colum_sorting_modal.xhtml 2.78 KiB
Newer Older
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:outputScript name="lib/jquery-ui.min.js" library="js" />
    <h:outputScript name="columns-sorter.js" library="js" />

    <div class="modal fade" tabindex="-1" role="dialog" id="columns-sorter">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#215;</span></button>
                    <h4 class="modal-title">Sort columns</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>
                                Unsorted columns
                                <a href="#" class="pull-right" id="shift-selection-unsorted">
                                    <span class="glyphicon glyphicon-arrow-right"></span>
                                </a>
                                <a href="#" class="pull-right margin-right" id="toggle-selection-unsorted">
                                    <span class="glyphicon glyphicon-check"></span>
                                </a>
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Sorted columns
                                <a href="#" class="pull-right" id="shift-selection-sorted">
                                    <span class="glyphicon glyphicon-arrow-left"></span>
                                </a>
                                <a href="#" class="pull-right margin-right" id="toggle-selection-sorted">
                                    <span class="glyphicon glyphicon-check"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="columns-list-wrapper">
                        <div class="columns-list-row">
                            <ul class="sortable" id="unsorted-columns"></ul>
                            <ul class="sortable" id="sorted-columns"></ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="TSM.saveColumnsOrder()">Save changes</button>