added ngTouch to allow deleting objects using touch screen devices where

double click doesn't work.
abbr · Dec 26, 2013 · b976aa1 · b976aa1
1 parent cc8bc3d
commit b976aa1
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 25 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -16,7 +16,7 @@ Array.prototype.splicePositiveIndex = function() {
   return Array.prototype.splice.apply(this, arguments);
 };
 
-angular.module('formMailerServiceApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.bootstrap', 'ui.validate' ]).config(function($routeProvider, $locationProvider) {
+angular.module('formMailerServiceApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.bootstrap', 'ui.validate', 'ngTouch' ]).config(function($routeProvider, $locationProvider) {
   $routeProvider.when('/', {
     templateUrl : 'partials/login',
     controller : 'LoginCtrl'

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -73,6 +73,17 @@ body {
   display: none !important;
 }
 
+.leftContent{
+	display: inline-block; 
+	width: 69%
+}
+.rightContent{
+	display: inline-block; 
+	width: 29%; 
+	height: 100%; 
+	vertical-align: middle
+}
+
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
     .container {

diff --git a/app/views/index.html b/app/views/index.html
@@ -93,6 +93,7 @@ <h3 class="text-muted">FormMailer Service Administration</h3>
   <script src="bower_components/angular-cookies/angular-cookies.js"></script>
   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
+  <script src="bower_components/angular-touch/angular-touch.js"></script>
   <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
   <script
     src="bower_components/angular-ui-utils/modules/validate/validate.js"></script>

diff --git a/app/views/partials/admin.html b/app/views/partials/admin.html
@@ -8,18 +8,26 @@
   <table class="table table-striped">
     <tbody>
       <tr ng-repeat='site in sites | filter:query'>
-        <td>
-          <h4>{{site.name}}</h4>
-          <p>
-            <abbr id='{{site.id}}' title='posting URL'>{{
-              $location.absUrl().substr(0,$location.absUrl().lastIndexOf('/')+1)
-              + 'site/' + site.id }}</abbr> <span class='icon-download-alt'
-              copy-it data-clipboard-target='{{site.id}}'></span>
-          </p> <a class='btn btn-primary' ng-click='editSite(site)'>Edit</a>
-          <a class='btn btn-info' ng-click='cloneSite(site)'>Clone</a>
-          <a class='btn btn-warning' tooltip-trigger='click'
-          tooltip='double click to delete'
-          ng-dblclick='removeSite(site.id)'>X</a>
+        <td ng-swipe-right="showActions = true">
+          <div class='leftContent'>
+            <h4>{{site.name}}</h4>
+            <p>
+              <abbr id='{{site.id}}' title='posting URL'>{{
+                $location.absUrl().substr(0,$location.absUrl().lastIndexOf('/')+1)
+                + 'site/' + site.id }}</abbr> <span class='icon-download-alt'
+                copy-it data-clipboard-target='{{site.id}}'></span>
+            </p>
+            <button class='btn btn-primary' ng-click='editSite(site)'>Edit</button>
+            <button class='btn btn-info' ng-click='cloneSite(site)'>Clone</button>
+            <button class='btn btn-warning' ng-click="showActions = !showActions">X</button>
+          </div>
+          <div ng-show="showActions" class='rightContent'>
+            <button class='btn btn-danger' ng-click="removeSite(site.id)"
+              style='float: right; margin-left: 5px'>Delete</button> <button
+              class='btn' ng-click="showActions = false"
+              style='float: right;'>Cancel</button>
+          </div>
+
         </td>
       </tr>
     </tbody>

diff --git a/app/views/partials/users.html b/app/views/partials/users.html
@@ -7,13 +7,26 @@
   <table class="table table-striped">
     <tbody>
       <tr ng-repeat='user in users | filter:query'>
-        <td>
-          <h4>{{user.username}}</h4>
-          <p><abbr title='Super Admin has full privilege'>{{ user.superAdmin?'Super Admin':'' }}</abbr></p> <a class='btn btn-primary'
-          ng-click='editUser(user)'>Edit</a> <a class='btn btn-warning'
-          tooltip-trigger='click' tooltip='double click to delete'
-          ng-dblclick='removeUser(user.username)'
-          ng-if='cu.username != user.username'>X</a>
+        <td
+          ng-swipe-right="showActions = (cu.username != user.username)">
+          <div class='leftContent'>
+            <h4>{{user.username}}</h4>
+            <p>
+              <abbr title='Super Admin has full privilege'>{{
+                user.superAdmin?'Super Admin':'' }}</abbr>
+            </p>
+            <button class='btn btn-primary' ng-click='editUser(user)'>Edit</button>
+            <button class='btn btn-warning'
+              ng-show='cu.username != user.username'
+              ng-click="showActions = !showActions">X</button>
+          </div>
+          <div ng-show="showActions" class='rightContent'>
+            <button class='btn btn-danger'
+              ng-click="removeUser(user.username)"
+              style='float: right; margin-left: 5px'>Delete</button> <button
+              class='btn' ng-click="showActions = false"
+              style='float: right;'>Cancel</button>
+          </div>
         </td>
       </tr>
     </tbody>

diff --git a/bower.json b/bower.json
@@ -6,21 +6,22 @@
     "json3": "~3.2.4",
     "es5-shim": "~2.1.0",
     "jquery": "~1.10.2",
-    "jquery-ui" : "~1.10.0",
+    "jquery-ui": "~1.10.0",
     "sass-bootstrap": "~2.3.0",
     "angular-resource": "~1.2.0",
     "angular-cookies": "~1.2.0",
     "angular-sanitize": "~1.2.0",
     "angular-route": "~1.2.0",
     "angular-bootstrap": "~0.7.0",
-    "angular-ui-utils" : "~0.0.0",
-    "zeroclipboard" : "~1.2.0"
+    "angular-ui-utils": "~0.0.0",
+    "angular-touch": "~1.2.0",
+    "zeroclipboard": "~1.2.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.2.0",
     "angular-scenario": "~1.2.0"
   },
   "resolutions": {
-    "angular": "1.2.4"
-   }
+    "angular": ">=1"
+  }
 }