add context menu

This commit is contained in:
MaysWind 2016-12-10 23:04:03 +08:00
parent 4946fbf24a
commit 0752866448
4 changed files with 81 additions and 1 deletions

View file

@ -31,6 +31,7 @@
"sweetalert": "^1.1.3", "sweetalert": "^1.1.3",
"awesome-bootstrap-checkbox": "^0.3.7", "awesome-bootstrap-checkbox": "^0.3.7",
"jquery-slimscroll": "^1.3.8", "jquery-slimscroll": "^1.3.8",
"bootstrap-contextmenu": "^0.3.4",
"angular": "1.4.10", "angular": "1.4.10",
"angular-route": "1.4.10", "angular-route": "1.4.10",
"angular-sanitize": "1.4.10", "angular-sanitize": "1.4.10",

View file

@ -276,6 +276,7 @@
<script src="../bower_components/AdminLTE/dist/js/app.min.js"></script> <script src="../bower_components/AdminLTE/dist/js/app.min.js"></script>
<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script> <script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../bower_components/sweetalert/dist/sweetalert.min.js"></script> <script src="../bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="../bower_components/bootstrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script> <script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-moment/angular-moment.min.js"></script> <script src="../bower_components/angular-moment/angular-moment.min.js"></script>
<script src="../bower_components/angular-websocket/angular-websocket.min.js"></script> <script src="../bower_components/angular-websocket/angular-websocket.min.js"></script>

View file

@ -104,6 +104,10 @@ td {
margin-right: -10px; margin-right: -10px;
} }
.dropdown-menu > li.dropdown-submenu:hover {
background-color: #e1e3e9;
}
.dropdown-submenu:hover > a:after { .dropdown-submenu:hover > a:after {
border-left-color: #fff; border-left-color: #fff;
} }

View file

@ -33,7 +33,8 @@
</div> </div>
</div> </div>
<div class="task-table-body" ng-class="{'draggable': isSupportDragTask()}" dragula="'task-list'" dragula-model="taskContext.list"> <div class="task-table-body" ng-class="{'draggable': isSupportDragTask()}" dragula="'task-list'" dragula-model="taskContext.list">
<div class="row" ng-repeat="task in taskContext.list | filter: filterByTaskName | taskOrderBy: getOrderType()" data-gid="{{task.gid}}"> <div class="row" ng-repeat="task in taskContext.list | filter: filterByTaskName | taskOrderBy: getOrderType()"
data-gid="{{task.gid}}" data-toggle="context" data-target="#task-table-contextmenu">
<div class="col-md-8 col-sm-7 col-xs-12"> <div class="col-md-8 col-sm-7 col-xs-12">
<div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}"> <div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}">
<input id="{{'task_' + task.gid}}" type="checkbox" ng-model="taskContext.selected[task.gid]"/> <input id="{{'task_' + task.gid}}" type="checkbox" ng-model="taskContext.selected[task.gid]"/>
@ -71,5 +72,78 @@
</div> </div>
</div> </div>
</div> </div>
<div id="task-table-contextmenu">
<ul class="dropdown-menu" role="menu">
<li ng-show="isSpecifiedTaskSelected('paused')">
<a tabindex="-1" class="pointer-cursor" title="{{'Start' | translate}}" ng-click="changeTasksState('start')">
<i class="fa fa-play"></i>
<span translate>Start</span>
</a>
</li>
<li ng-show="isSpecifiedTaskSelected('active', 'waiting')">
<a tabindex="-1" class="pointer-cursor" title="{{'Pause' | translate}}" ng-click="changeTasksState('pause')">
<i class="fa fa-pause"></i>
<span translate>Pause</span>
</a>
</li>
<li ng-show="isTaskSelected()">
<a tabindex="-1" class="pointer-cursor" title="{{'Delete' | translate}}" ng-click="removeTasks()">
<i class="fa fa-trash-o"></i>
<span translate>Delete</span>
</a>
</li>
<li class="divider" ng-show="isTaskSelected()"></li>
<li class="dropdown dropdown-submenu">
<a tabindex="-1" title="{{'Display Order' | translate}}" href="javascript:void(0);">
<i class="fa fa-sort-alpha-asc"></i>
<span translate>Display Order</span>
</a>
<ul class="dropdown-menu" style="right: 160px;">
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('default:asc')">
<span translate>Default</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('default')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('name:asc')">
<span translate>By File Name</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('name')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('size:asc')">
<span translate>By File Size</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('size')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('percent:desc')">
<span translate>By Progress</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('percent')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('remain:asc')">
<span translate>By Remain Time</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('remain')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('dspeed:desc')">
<span translate>By Download Speed</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('dspeed')}"></i>
</a>
</li>
<li>
<a class="pointer-cursor" ng-click="changeDisplayOrder('uspeed:desc')">
<span translate>By Upload Speed</span>
<i class="fa" ng-class="{'fa-check': isSetDisplayOrder('uspeed')}"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div> </div>
</section> </section>