From 201c62d60c581bad6f4619bb1685fca4f9cc5876 Mon Sep 17 00:00:00 2001
From: NOYB <Al_Stu@Frontier.com>
Date: Fri, 26 Jan 2018 20:34:34 -0800
Subject: [PATCH] Widgets Controls on Touch Screen - Update (Chrome)

This works with both Android and Desktop Chrome (v63) as well as IE 11.
exception: there is apparently an incompatibility between Chrome and JQuery sortable.  So drag/drop sort doesn't work in Chrome.

This is a modification of the previous:
https://github.com/opnsense/core/commit/3f7ee41b5307204fdc4819d09a09aef9e254dbc5

Touch events not working with the widget controls (link, buttons, drag/drop sort).
Add distance, delay and touch-action css for the widget controls to work with touch screen input.

Widget controls not working correctly with touch screen input
https://github.com/opnsense/core/issues/2092
---
 .../www/themes/opnsense/assets/stylesheets/main.scss        | 3 +++
 src/opnsense/www/themes/opnsense/build/css/main.css         | 3 +++
 src/www/index.php                                           | 6 ++++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index 6c0759e94..9f133354e 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
@@ -125,6 +125,9 @@ body{
   min-width: 320px;
 }
 
+.widget_sort_handle {
+  touch-action: none; }
+
 .page-head{
   background: map-get($colors, darkgrey);
   top: 0;
diff --git a/src/opnsense/www/themes/opnsense/build/css/main.css b/src/opnsense/www/themes/opnsense/build/css/main.css
index 21ee6acb9..7a9f49d41 100644
--- a/src/opnsense/www/themes/opnsense/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense/build/css/main.css
@@ -5478,6 +5478,9 @@ body {
   touch-action: manipulation;
   min-width: 320px; }
 
+.widget_sort_handle {
+  touch-action: none; }
+
 .page-head {
   background: #3C3C3B;
   top: 0;
diff --git a/src/www/index.php b/src/www/index.php
index f5f8f3f89..118d167e1 100644
--- a/src/www/index.php
+++ b/src/www/index.php
@@ -275,7 +275,7 @@ include("fbegin.inc");?>
 
       // sortable widgets
       $(".dashboard_grid_column").sortable({
-        handle: '.content-box-head',
+        handle: '.widget_sort_handle',
         delay: 50,
         distance: 2,
         group: 'dashboard_grid_column',
@@ -371,7 +371,7 @@ include("fbegin.inc");?>
           }?>
           <section class="widgetdiv" data-sortkey="<?=$widgetItem['sortKey'] ?>" id="<?=$widgetItem['name'];?>"  style="display:<?=$divdisplay;?>;">
             <div class="content-box">
-              <header class="content-box-head container-fluid" style="touch-action: none">
+              <header class="content-box-head container-fluid">
                 <ul class="list-inline __nomb">
                   <li><h3>
 <?php
@@ -394,6 +394,8 @@ include("fbegin.inc");?>
                     </div>
                   </li>
                 </ul>
+                <div class="container-fluid widget_sort_handle">
+                </div>
               </header>
               <div class="content-box-main collapse in" id="<?= $widgetItem['name'] ?>-container" style="display:<?= $mindiv ?>">
                 <input type="hidden" value="<?= $inputdisplay ?>" id="<?= $widgetItem['name'] ?>-config" name="<?= $widgetItem['name'] ?>-config" />