add context menu

bower.json

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

src/index.html

@@ -276,6 +276,7 @@
 <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/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-moment/angular-moment.min.js"></script>
 <script src="../bower_components/angular-websocket/angular-websocket.min.js"></script>

src/styles/core/core.css

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

src/views/list.html

@@ -33,7 +33,8 @@
             </div>
         </div>
         <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="checkbox checkbox-primary" ng-class="{'checkbox-hide': !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 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>
 </section>