upstream/opnsense-core
1
0
Fork 0
mirror of https://github.com/opnsense/core.git synced 2026-05-28 04:34:51 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: use space in apply box for the apply reminder (#10103)

Browse source 
It's a good way to use existing space and move the
message to where it matters most -- the apply button
itself. This also matches the legacy apply box style.
This commit is contained in:
Franco Fichtner 2026-04-28 13:52:05 +02:00 committed by GitHub
parent 34db4ec6d7
commit 9b21321593
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/opnsense/mvc/app/views/layout_partials/base_apply_button.volt
View file

@ -1,24 +1,20 @@
<section class="page-content-main" style="padding: 15px 0 0">
<div class="content-box grid-bottom-reserve">
<div class="col-md-12">
<br/>
<button class="btn btn-primary" id="{{ button_id|default('reconfigureAct') }}"
data-endpoint="{{ data_endpoint }}"
data-label="{{ lang._(data_label|default('Apply')) }}"
data-error-title="{{ lang._(data_error_title|default('Error reconfiguring service.')) }}"
<section class="page-content-main grid-bottom-reserve">
<div class="alert content-box" style="display: flex; align-items: center; margin-bottom: 0;">
<button class="btn btn-primary __mr" id="{{ button_id|default('reconfigureAct') }}"
data-endpoint="{{ data_endpoint }}"
data-label="{{ lang._(data_label|default('Apply')) }}"
data-error-title="{{ lang._(data_error_title|default('Error reconfiguring service.')) }}"
{% if data_service_widget is defined %}
data-service-widget="{{ data_service_widget }}"
data-service-widget="{{ data_service_widget }}"
{% endif %}
{% if data_grid_reload is defined %}
data-grid-reload="{{ data_grid_reload }}"
data-grid-reload="{{ data_grid_reload }}"
{% endif %}
type="button">
</button>
<br/><br/>
data-message-id="{{ message_id|default('change_message_base_form') }}"
type="button">
</button>
<div id="{{ message_id|default('change_message_base_form') }}" style="display: none">
{{ lang._(data_change_message_content | default('After changing settings, please remember to apply them.')) }}
</div>
</div>
</section>
<div id="{{ message_id|default('change_message_base_form') }}" class="alert alert-info" style="display: none" role="alert">
{{ lang._(data_change_message_content | default('After changing settings, please remember to apply them.')) }}
</div>

20
src/opnsense/www/js/opnsense_bootgrid.js
View file

@ -2056,25 +2056,7 @@ class UIBootgrid {
showSaveAlert(event) {
let editAlert = this.$compatElement.attr('data-editAlert');
if (editAlert !== undefined) {
const $el = $("#" + editAlert);
const rect = $(".page-content-head").first()[0].getBoundingClientRect();
const top = $('.navbar').first().outerHeight() + 5;
const centerX = rect.left + (rect.width / 2);
$el.css({
position: "fixed",
top: top + "px",
left: centerX + "px",
right: "auto",
zIndex: 9999,
transform: "translateX(-50%)"
});
$el.slideDown(1000, function () {
setTimeout(function () {
$el.not(":animated").slideUp(2000);
}, 2000);
});
$("#" + editAlert).show().parent('.alert').addClass('alert-info').removeClass('content-box');
}
}

2
src/opnsense/www/js/opnsense_ui.js
View file

@ -684,6 +684,8 @@ $.fn.SimpleActionButton = function (params) {
setIcon(icon, 'fa fa-check fa-spinner fa-pulse', 'fa fa-spinner fa-pulse');
} else {
setIcon(icon, 'fa fa-spinner fa-pulse', 'fa fa-check');
$("#" + this_button.data('message-id')).hide();
this_button.parent('.alert').addClass('content-box').removeClass('alert-info');
hideCheckTimeout = setTimeout(function () {
setIcon(icon, 'fa fa-check', '');