From 075286644853c81d1960eec7544d087b57a8ccb9 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 10 Dec 2016 23:04:03 +0800
Subject: [PATCH] add context menu

---
 bower.json               |  1 +
 src/index.html           |  1 +
 src/styles/core/core.css |  4 +++
 src/views/list.html      | 76 +++++++++++++++++++++++++++++++++++++++-
 4 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index c57efb4..7bd6fc5 100644
--- a/bower.json
+++ b/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",
diff --git a/src/index.html b/src/index.html
index 5549771..03e51d5 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/styles/core/core.css b/src/styles/core/core.css
index 6c063eb..a74443c 100644
--- a/src/styles/core/core.css
+++ b/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;
 }
diff --git a/src/views/list.html b/src/views/list.html
index dd2876f..5924e83 100644
--- a/src/views/list.html
+++ b/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>