lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-14 00:24:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: service control indicators and button rework; closes #1562

Browse Source 
While here, use fontawesome icons and make the legacy and MVC
header section match in layout terms.
This commit is contained in:
Franco Fichtner 2017-11-22 11:45:42 +00:00
parent f228940d97
commit 70f5acad06
9 changed files with 120 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/etc/inc/services.inc
View File

@ -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'
);
}

73
src/opnsense/mvc/app/views/layouts/default.volt
View File

@ -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>

10
src/opnsense/www/js/opnsense_ui.js
View File

@ -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);
}

20
src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
View File

@ -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;
}

14
src/opnsense/www/themes/opnsense/build/css/main.css
View File

@ -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; }

49
src/www/fbegin.inc
View File

@ -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>

6
src/www/status_openvpn.php
View File

@ -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>

4
src/www/status_services.php
View File

@ -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

5
src/www/widgets/widgets/services_status.widget.php
View File

@ -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