Skip to content

Commit

Permalink
UI improvements (3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@awawa-dev
awawa-dev committed Aug 9, 2023
1 parent 1a06c17 commit 4a5fdb4
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 39 deletions.
49 changes: 41 additions & 8 deletions www/css/hyperhdr.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,20 @@ body {
margin: 0 auto;
}

.dark-mode #new_modal_dialog .modal-dialog .modal-content {
.dark-mode #new_modal_dialog:not(.modal-hyperhdr-danger-warning-success) .modal-dialog .modal-content {
border-width: 3px;
border-style: solid;
border-radius: 10px;
border-color:#1074b1 !important;
}

.dark-mode #new_modal_dialog.modal-hyperhdr-danger-warning-success .modal-dialog .modal-content {
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color:#909090 !important;
}

.hyperhdr-vcenter {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -206,17 +213,27 @@ body:not(.dark-mode) .alert.parentAlert {


/*Modal icons*/
[class*="modal-icon"]{
padding:30px;
border-radius: 60px;
color:white;
font-size:50px !important;
@media (min-width: 768px){
[class*="modal-icon"]{
padding:30px;
border-radius: 60px;
color:white;
font-size:50px !important;
}
}
@media (max-width: 768px){
[class*="modal-icon"]{
padding:15px;
border-radius: 30px;
color:white;
font-size:25px !important;
}
}
.modal-icon-check{
background-color:#71c341;
background-color:#198754;
}
.modal-icon-warning{
background-color:#f7c44a;
background-color:#d07a12;
}
.modal-icon-error{
background-color:#d1322e;
Expand Down Expand Up @@ -350,6 +367,22 @@ body:not(.dark-mode) .modal-hyperhdr-header {
color:#FFFFFF !important;
}

.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-danger {
background-color:#d1322e !important;
border-color:#d1322e !important;
}


.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-success {
background-color:#198754 !important;
border-color:#198754 !important;
}

.modal-header.modal-hyperhdr-header.modal-hyperhdr-header-warning {
background-color:#d07a12 !important;
border-color:#d07a12 !important;
}

.card-default{
/*background-color:#fff !important;
border-color:#d0d0d0 !important;*/
Expand Down
2 changes: 1 addition & 1 deletion www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ <h4 data-i18n="dashboard_alert_message_disabled_t" class="bs-main-text"></h4>
<div id="new_modal_dialog" class="modal fade" style="z-index: 9999;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-hyperhdr-header">
<div class="modal-header modal-hyperhdr-header" id="new_modal_dialog_header">
<h5 class="modal-title" id="new_modal_dialog_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
Expand Down
95 changes: 65 additions & 30 deletions www/js/ui_utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,26 +278,66 @@ function toaster(type, header, message, delay)

function showInfoDialog(type,header,message)
{
if (type=="success")
{
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-check modal-icon-check">');
if(header == "")
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_success_title')+'</h4>');
$('#id_footer').html('<button type="button" class="btn btn-success" data-bs-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
}
else if (type=="warning")
{
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-warning">');
if(header == "")
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_warning_title')+'</h4>');
$('#id_footer').html('<button type="button" class="btn btn-warning" data-bs-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
}
else if (type=="error")
let headerControl = $('#new_modal_dialog_header');
let masterControl = $('#new_modal_dialog');

headerControl.removeClass("modal-hyperhdr-header-danger");
headerControl.removeClass("modal-hyperhdr-header-warning");
headerControl.removeClass("modal-hyperhdr-header-success");
masterControl.removeClass("modal-lg");
masterControl.removeClass("modal-hyperhdr-danger-warning-success");

if (type=="error" || type=="warning" || type=="success" || type == "confirm")
{
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-error">');
if(header == "")
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_general_error_title')+'</h4>');
$('#id_footer').html('<button type="button" class="btn btn-danger" data-bs-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
let selectedButton = "";
let selectedIcon = "";
let selectedButtonText = "";

if (type=="error")
{
if (header == "") header = $.i18n('infoDialog_general_error_title');
headerControl.addClass("modal-hyperhdr-header-danger");
selectedButton = 'btn-danger';
selectedIcon = 'fa-warning modal-icon-error';
selectedButtonText = $.i18n('general_btn_continue');
}
else if (type=="warning" || type == "confirm")
{
if (header == "") header = $.i18n('infoDialog_general_warning_title');
headerControl.addClass("modal-hyperhdr-header-warning");
selectedButton = 'btn-warning';
selectedIcon = 'fa-warning modal-icon-warning';
selectedButtonText = $.i18n('general_btn_continue');
}
else if (type=="success")
{
if (header == "") header = $.i18n('infoDialog_general_success_title');
headerControl.addClass("modal-hyperhdr-header-success");
selectedButton = 'btn-success';
selectedIcon = 'fa-check modal-icon-check';
selectedButtonText = $.i18n('general_btn_ok');
}


if (message.length > 120)
masterControl.addClass("modal-lg");
masterControl.addClass("modal-hyperhdr-danger-warning-success");

$('#new_modal_dialog_title').html('<h4 class="text-center">'+ header +'</h4>');
$('#new_modal_dialog_body').html('<div style="align-items: center; display: flex;">'+
'<div style="position: relative; left: 0px; ">'+
`<i class="fa ${selectedIcon}"></i>`+
'</div>'+
'<h5 class="ps-3">'+ message +'</h5>'+
'</div>');

if (type == "confirm")
{
$('#new_modal_dialog_footer').html('<button type="button" id="id_btn_confirm" class="btn btn-warning" data-bs-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_yes')+'</button>');
$('#new_modal_dialog_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
}
else
$('#new_modal_dialog_footer').html(`<button type="button" class="btn ${selectedButton}" data-bs-dismiss="modal" data-bs-target="#new_modal_dialog"><i class="fa fa-hand-paper-o fa-fw"></i>`+selectedButtonText+'</button>');
}
else if (type == "select")
{
Expand All @@ -322,29 +362,23 @@ function showInfoDialog(type,header,message)
$('#id_footer').html('<button type="button" id="id_btn_import" class="btn btn-warning" data-bs-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button>');
$('#id_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
}
else if (type == "confirm")
{
$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-warning">');
$('#id_footer').html('<button type="button" id="id_btn_confirm" class="btn btn-warning" data-bs-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_yes')+'</button>');
$('#id_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
}
else if (type == "delInst")
{
$('#new_modal_dialog_title').html('<div><h4><i class="fa fa-remove fa-fw"></i>'+ header +'</h4>');
$('#new_modal_dialog_title').html('<h4><i class="fa fa-remove fa-fw"></i>'+ header +'</h4>');
$('#new_modal_dialog_body').html('<div class="mb-3">'+ message +'</div>');
$('#new_modal_dialog_footer').html('<button type="button" id="id_btn_yes" class="btn btn-warning" data-bs-dismiss="modal" data-bs-target="#new_modal_dialog"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_yes')+'</button>');
$('#new_modal_dialog_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
}
else if (type == "renInst")
{
$('#new_modal_dialog_title').html('<div><h4><i class="fa fa-pencil fa-fw"></i>'+$.i18n('general_btn_rename')+'</h4>');
$('#new_modal_dialog_title').html('<h4><i class="fa fa-pencil fa-fw"></i>'+$.i18n('general_btn_rename')+'</h4>');
$('#new_modal_dialog_body').html('<div class="mb-3"><label class="form-label required">'+ header +'</label><input id="renInst_name" type="text" class="form-control"></div>');
$('#new_modal_dialog_footer').html('<button type="button" id="id_btn_ok" class="btn btn-success" data-bs-dismiss="modal" data-bs-target="#new_modal_dialog" disabled><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_ok')+'</button>');
$('#new_modal_dialog_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
}
else if (type == "changePassword")
{
$('#new_modal_dialog_title').html('<div><h4><i class="fa fa-key fa-fw"></i>'+header+'</h4>');
$('#new_modal_dialog_title').html('<h4><i class="fa fa-key fa-fw"></i>'+header+'</h4>');
$('#new_modal_dialog_body').html('<div class="mb-3"><label class="form-label required">'+$.i18n('modal_old_password')+'</label><input id="oldPw" type="text" class="form-control"></div>');
$('#new_modal_dialog_body').append('<div class="mb-3"><label class="form-label required">'+$.i18n('modal_new_password')+'</label><input id="newPw" type="text" class="form-control"></div>');
$('#new_modal_dialog_footer').html('<button type="button" id="id_btn_ok" class="btn btn-success" data-bs-dismiss="modal" data-bs-target="#new_modal_dialog" disabled><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_ok')+'</button>');
Expand All @@ -369,7 +403,7 @@ function showInfoDialog(type,header,message)
$('#id_footer').append('<button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="tok_deny_acc">'+$.i18n('general_btn_denyAccess')+'</button>');
}

if(type != "renInst" && type != "changePassword" && type != "delInst")
if(type != "confirm" && type != "renInst" && type != "changePassword" && type != "delInst" && type != "error" && type != "error" && type != "warning" && type != "success")
{
$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+header+'</h4>');
$('#id_body').append(message);
Expand All @@ -379,7 +413,8 @@ function showInfoDialog(type,header,message)
$('#id_body').append('<select id="id_select" class="form-select" style="margin-top:10px;width:auto;"></select>');


const myTarget = (type == "renInst" || type == "changePassword" || type == "delInst" ? "#new_modal_dialog" : "#modal_dialog");
const myTarget = ((type == "renInst" || type == "changePassword" || type == "delInst" ||
type=="error" || type=="warning" || type=="success" || type == "confirm") ? "#new_modal_dialog" : "#modal_dialog");

const modal = new bootstrap.Modal($(myTarget), {
backdrop : "static",
Expand Down

0 comments on commit 4a5fdb4

Please sign in to comment.