From 70f5acad06e7359f310b6a35bf71dcbefec6e17e Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Wed, 22 Nov 2017 11:45:42 +0000
Subject: [PATCH] ui: service control indicators and button rework; closes
 #1562

While here, use fontawesome icons and make the legacy and MVC
header section match in layout terms.
---
 src/etc/inc/services.inc                      | 31 ++++----
 .../mvc/app/views/layouts/default.volt        | 73 +++++++++----------
 src/opnsense/www/js/opnsense_ui.js            | 10 ++-
 .../opnsense/assets/stylesheets/main.scss     | 20 +++++
 .../www/themes/opnsense/build/css/main.css    | 14 ++++
 src/www/fbegin.inc                            | 49 ++++++-------
 src/www/status_openvpn.php                    |  6 +-
 src/www/status_services.php                   |  4 +-
 .../widgets/services_status.widget.php        |  5 +-
 9 files changed, 120 insertions(+), 92 deletions(-)

diff --git a/src/etc/inc/services.inc b/src/etc/inc/services.inc
index 8eff32593..f4ecb0509 100644
--- a/src/etc/inc/services.inc
+++ b/src/etc/inc/services.inc
@@ -1777,26 +1777,25 @@ function get_service_status($service)
 }
 
 
-function get_service_status_icon($service, $withtext = true, $smallicon = false)
+function get_service_status_icon($service, $xs = false)
 {
-    $output = "";
+    $output = '';
+
     if (get_service_status($service)) {
-        $statustext = gettext("Running");
-        $output .= '<span class="btn btn-success glyphicon glyphicon-play" title="'.sprintf(gettext('%s Service is'),$service['name']).' '.$statustext.'" data-toggle="tooltip"></span>' . PHP_EOL;
+        $output .= '<span class="label label-opnsense label-opnsense-%s label-success"><i class="fa fa-play fa-fw"></i></span>' . PHP_EOL;
     } else {
-        $statustext = gettext("Stopped") ;
-        $output .= '<span class="btn btn-danger glyphicon glyphicon-stop" title="'.sprintf(gettext('%s Service is'),$service['name']).' '.$statustext.'" data-toggle="tooltip"></span>' . PHP_EOL;
+        $output .= '<span class="label label-opnsense label-opnsense-%s label-danger"><i class="fa fa-stop fa-fw"></i></span>' . PHP_EOL;
     }
-    return $output;
+
+    return sprintf($output, $xs ? 'xs' : 'sm');
 }
 
-function get_service_control_links($service, $addname = false)
+function get_service_control_links($service, $xs = false)
 {
     $service_id = isset($service['id']) ? $service['id'] : '';
-    $service_title = $addname ? $service['name'] . ' ' : '';
 
     $template  = '<span data-service_id="%s" data-service_action="%s" data-service="%s" ';
-    $template .= 'data-toggle="tooltip" title="%s" class="btn btn-default %s %s"></span>' . PHP_EOL;
+    $template .= 'class="btn btn-%s btn-default %s"><i class="%s"></i></span>' . PHP_EOL;
 
     $output = '';
 
@@ -1806,9 +1805,9 @@ function get_service_control_links($service, $addname = false)
             $service_id,
             'restart',
             $service['name'],
-            sprintf(gettext('Restart %sService'), $service_title),
+            $xs ? 'xs' : 'sm',
             'srv_status_act',
-            'glyphicon glyphicon-refresh'
+            'fa fa-refresh fa-fw'
         );
         if (empty($service['nocheck'])) {
             $output .= sprintf(
@@ -1816,9 +1815,9 @@ function get_service_control_links($service, $addname = false)
                 $service_id,
                 'stop',
                 $service['name'],
-                sprintf(gettext('Stop %sService'), $service_title),
+                $xs ? 'xs' : 'sm',
                 'srv_status_act',
-                'glyphicon glyphicon-stop'
+                'fa fa-stop fa-fw'
             );
         }
     } else {
@@ -1827,9 +1826,9 @@ function get_service_control_links($service, $addname = false)
             $service_id,
             'start',
             $service['name'],
-            sprintf(gettext('Start %sService'), $service_title),
+            $xs ? 'xs' : 'sm',
             'srv_status_act',
-            'glyphicon glyphicon-play'
+            'fa fa-play fa-fw'
         );
     }
 
diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt
index f964e98f5..56192c79c 100644
--- a/src/opnsense/mvc/app/views/layouts/default.volt
+++ b/src/opnsense/mvc/app/views/layouts/default.volt
@@ -231,52 +231,45 @@
   </header>
 
   <main class="page-content col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2">
-
-    <!-- menu system -->
-    {{ partial("layout_partials/base_menu_system") }}
-
-    <div class="row">
-            <!-- page header -->
-      <header class="page-content-head">
-        <div class="container-fluid">
+      <!-- menu system -->
+      {{ partial("layout_partials/base_menu_system") }}
+      <div class="row">
+        <!-- page header -->
+        <header class="page-content-head">
+          <div class="container-fluid">
             <ul class="list-inline">
-              <li class="__mb"><h1>{{title | default("")}}</h1></li>
-
-              <li class="btn-group-container" id="service_status_container">
-                                <!-- placeholder for service status buttons -->
-              </li>
+              <li><h1>{{title | default("")}}</h1></li>
+              <li class="btn-group-container" id="service_status_container"></li>
             </ul>
-        </div>
-      </header>
-            <!-- page content -->
-      <section class="page-content-main">
-        <div class="container-fluid">
-          <div class="row">
-              <section class="col-xs-12">
-                  <div id="messageregion"></div>
-                      {{ content() }}
-              </section>
           </div>
-        </div>
-      </section>
-
-    </div>
-
-        <!-- page footer -->
-    <footer class="page-foot col-sm-push-3 col-lg-push-2">
-      <div class="container-fluid">
-        <a target="_blank" href="{{ product_website }}" class="redlnk">{{ product_name }}</a>
-        (c) {{ product_copyright_years }}
-        <a href="{{ product_copyright_url }}" class="tblnk">{{ product_copyright_owner }}</a>
+        </header>
+        <!-- page content -->
+        <section class="page-content-main">
+          <div class="container-fluid">
+            <div class="row">
+                <section class="col-xs-12">
+                    <div id="messageregion"></div>
+                        {{ content() }}
+                </section>
+            </div>
+          </div>
+        </section>
       </div>
-    </footer>
-
-  </main>
+      <!-- page footer -->
+      <footer class="page-foot col-sm-push-3 col-lg-push-2">
+        <div class="container-fluid">
+          <a target="_blank" href="{{ product_website }}" class="redlnk">{{ product_name }}</a>
+          (c) {{ product_copyright_years }}
+          <a href="{{ product_copyright_url }}" class="tblnk">{{ product_copyright_owner }}</a>
+        </div>
+      </footer>
+    </main>
 
     <!-- bootstrap script -->
-  <script type="text/javascript" src="/ui/js/bootstrap.min.js"></script>
-  <script type="text/javascript" src="/ui/js/bootstrap-select.min.js"></script>
+    <script type="text/javascript" src="/ui/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="/ui/js/bootstrap-select.min.js"></script>
     <!-- bootstrap dialog -->
     <script src="/ui/js/bootstrap-dialog.min.js"></script>
-    </body>
+
+  </body>
 </html>
diff --git a/src/opnsense/www/js/opnsense_ui.js b/src/opnsense/www/js/opnsense_ui.js
index d1efd5581..9824f5865 100644
--- a/src/opnsense/www/js/opnsense_ui.js
+++ b/src/opnsense/www/js/opnsense_ui.js
@@ -138,15 +138,17 @@ function mapDataToFormUI(data_get_map) {
  */
 function updateServiceStatusUI(status) {
 
-    var status_html = '<span class="glyphicon glyphicon-play btn ';
+    var status_html = '<span class="label label-opnsense label-opnsense-sm ';
 
     if (status == "running") {
-        status_html += 'btn-success' ;
+        status_html += 'label-success';
     } else if (status == "stopped") {
-        status_html += 'btn-danger' ;
+        status_html += 'label-danger';
+    } else {
+        status_html += 'hidden';
     }
 
-    status_html += '"></span>';
+    status_html += '"><i class="fa fa-play fa-fw"/></span>';
 
     $('#service_status_container').html(status_html);
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index 2945e09da..dff97bd52 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
@@ -587,6 +587,26 @@ table{
     padding: 10px 20px;
 }
 
+.label-opnsense {
+  /* emulates btn */
+  border: 1px solid transparent;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.label-opnsense-sm {
+  /* emulates btn-sm */
+  padding: 5px 10px;
+}
+
+.label-opnsense-xs {
+  /* emulates btn-xs */
+  padding: 1px 5px;
+}
+
 ::-webkit-scrollbar {
   width: 8px;
 }
diff --git a/src/opnsense/www/themes/opnsense/build/css/main.css b/src/opnsense/www/themes/opnsense/build/css/main.css
index 24f507b66..4607de558 100644
--- a/src/opnsense/www/themes/opnsense/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense/build/css/main.css
@@ -5816,6 +5816,20 @@ table {
 .navbar-brand {
   padding: 10px 20px; }
 
+.label-opnsense {
+  border: 1px solid transparent;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px; }
+
+.label-opnsense-sm {
+  padding: 5px 10px; }
+
+.label-opnsense-xs {
+  padding: 1px 5px; }
+
 ::-webkit-scrollbar {
   width: 8px; }
 
diff --git a/src/www/fbegin.inc b/src/www/fbegin.inc
index 19a732dbc..6d1efbd17 100644
--- a/src/www/fbegin.inc
+++ b/src/www/fbegin.inc
@@ -149,35 +149,34 @@ if($need_alert_display == true) {
   <div class="row">
     <header class="page-content-head">
       <div class="container-fluid">
-          <form action="<?=$_SERVER['REQUEST_URI'];?>" method="post">
         <ul class="list-inline">
-          <li class="__mb"><h1><?= gentitle($menuBreadcrumbs) ?></h1></li>
+          <li><h1><?= gentitle($menuBreadcrumbs) ?></h1></li>
           <li class="btn-group-container">
-            <?php
-            if (isset($service_hook)) {
-              $ssvc = find_service_by_name($service_hook);
-              if (!empty($ssvc)) {
-                echo get_service_status_icon($ssvc, false);
-                echo get_service_control_links($ssvc, false);
-              }
-            }
-            ?>
-            <?php if (!empty($main_buttons)): foreach ($main_buttons as $button): ?>
-              <a href="<?=$button['href'];?>" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign __iconspacer"></span><?=$button['label'];?></a>
-            <?php endforeach; endif; ?>
+            <form action="<?=$_SERVER['REQUEST_URI'];?>" method="post">
+              <?php
+              if (isset($service_hook)) {
+                $ssvc = find_service_by_name($service_hook);
+                if (!empty($ssvc)) {
+                  echo get_service_status_icon($ssvc);
+                  echo get_service_control_links($ssvc);
+                }
+              } ?>
+              <?php if (!empty($main_buttons)): foreach ($main_buttons as $button): ?>
+                <a href="<?=$button['href'];?>" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign __iconspacer"></span><?=$button['label'];?></a>
+              <?php endforeach; endif; ?>
 
-            <?php if (isset($widgetCollection)): ?>
-              <a href="#" id="updatepref" style="display:none" onclick="return updatePref();" class="btn btn-primary"><?=gettext("Save Settings");?></a>
-              <button id="add_widget_btn" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal_widgets"><span class="glyphicon glyphicon-plus-sign __iconspacer"></span><?= gettext('Add widget') ?></button>
-              <select class="selectpicker" data-width="120px" id="column_count">
-                  <option value="1" <?=$pconfig['column_count'] == "1" ? 'selected="selected"' : "";?>><?=gettext("1 column");?></option>
-                  <option value="2" <?=$pconfig['column_count'] == "2" ? 'selected="selected"' : "";?>><?=gettext("2 columns");?></option>
-                  <option value="3" <?=$pconfig['column_count'] == "3" ? 'selected="selected"' : "";?>><?=gettext("3 columns");?></option>
-                  <option value="4" <?=$pconfig['column_count'] == "4" ? 'selected="selected"' : "";?>><?=gettext("4 columns");?></option>
-              </select>
-            <?php endif; ?>
+              <?php if (isset($widgetCollection)): ?>
+                <a href="#" id="updatepref" style="display:none" onclick="return updatePref();" class="btn btn-primary"><?=gettext("Save Settings");?></a>
+                <button id="add_widget_btn" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal_widgets"><span class="glyphicon glyphicon-plus-sign __iconspacer"></span><?= gettext('Add widget') ?></button>
+                <select class="selectpicker" data-width="120px" id="column_count">
+                    <option value="1" <?=$pconfig['column_count'] == "1" ? 'selected="selected"' : "";?>><?=gettext("1 column");?></option>
+                    <option value="2" <?=$pconfig['column_count'] == "2" ? 'selected="selected"' : "";?>><?=gettext("2 columns");?></option>
+                    <option value="3" <?=$pconfig['column_count'] == "3" ? 'selected="selected"' : "";?>><?=gettext("3 columns");?></option>
+                    <option value="4" <?=$pconfig['column_count'] == "4" ? 'selected="selected"' : "";?>><?=gettext("4 columns");?></option>
+                </select>
+              <?php endif; ?>
+             </form>
           </li>
         </ul>
-          </form>
       </div>
     </header>
diff --git a/src/www/status_openvpn.php b/src/www/status_openvpn.php
index f8cee1a50..57a9eec56 100644
--- a/src/www/status_openvpn.php
+++ b/src/www/status_openvpn.php
@@ -175,7 +175,7 @@ $( document ).ready(function() {
                 <tr>
                   <td colspan="2">
                     <?php $ssvc = find_service_by_name('openvpn', array('id' => $server['vpnid'])); ?>
-                    <?= get_service_status_icon($ssvc, true, true); ?>
+                    <?= get_service_status_icon($ssvc, true); ?>
                     <?= get_service_control_links($ssvc, true); ?>
                   </td>
                   <td colspan="6">&nbsp;</td>
@@ -254,7 +254,7 @@ $( document ).ready(function() {
                   <td>
                     <div>
                       <?php $ssvc = find_service_by_name('openvpn', array('id' => $sk_server['vpnid'])); ?>
-                      <?= get_service_status_icon($ssvc, false, true); ?>
+                      <?= get_service_status_icon($ssvc, true); ?>
                       <?= get_service_control_links($ssvc, true); ?>
                     </div>
                   </td>
@@ -294,7 +294,7 @@ $( document ).ready(function() {
                   <td>
                     <div>
                       <?php $ssvc = find_service_by_name('openvpn', array('id' => $client['vpnid'])); ?>
-                      <?= get_service_status_icon($ssvc, false, true); ?>
+                      <?= get_service_status_icon($ssvc, true); ?>
                       <?= get_service_control_links($ssvc, true); ?>
                     </div>
                   </td>
diff --git a/src/www/status_services.php b/src/www/status_services.php
index f8e7aba53..ccbe3ea87 100644
--- a/src/www/status_services.php
+++ b/src/www/status_services.php
@@ -83,8 +83,8 @@ include("head.inc");
                     <td><?=$service['name'];?></td>
                     <td><?=$service['description'];?></td>
                     <td>
-                      <?=get_service_status_icon($service, true, true);?>
-                      <?=get_service_control_links($service, false);?>
+                      <?=get_service_status_icon($service);?>
+                      <?=get_service_control_links($service);?>
                     </td>
                 </tr>
 <?php
diff --git a/src/www/widgets/widgets/services_status.widget.php b/src/www/widgets/widgets/services_status.widget.php
index cadb663ae..ad3e4651b 100644
--- a/src/www/widgets/widgets/services_status.widget.php
+++ b/src/www/widgets/widgets/services_status.widget.php
@@ -85,8 +85,9 @@ if (isset($_POST['servicestatusfilter'])) {
         <tr>
           <td><?=$service['name'];?></td>
           <td><?=$service['description'];?></td>
-          <td><?=str_replace('btn ', 'btn btn-xs ', get_service_status_icon($service, false, true));?>
-              <?=str_replace('btn ', 'btn btn-xs ', get_service_control_links($service));?>
+          <td style="white-space: nowrap;">
+             <?= get_service_status_icon($service, true) ?>
+             <?= get_service_control_links($service, true) ?>
           </td>
         </tr>
 <?php