Changes

From SME Server
Jump to navigationJump to search

Server Manager2 create panel for contrib (view source)

Revision as of 13:17, 9 March 2022

1,840 bytes added ,  13:17, 9 March 2022
→‎The Partials files can be used to keep the structure in mulitple files.
Line 775: Line 775:  
</syntaxhighlight>
 
</syntaxhighlight>
 
Note the use of Javascript to present to user with dialogs for confirmation and the WinPopup msg. This was done in the original using extra panels. Although some do not like Javascript, I feel it is here to stay and presents opportunities in terms of interfaces that are best taken advantage of. The main challenge is to work out how to pass the various perl based data to and from the JS routines.  Note I use a hidden field for this in one case. And the html request parameters for the others.  It can be a challenge to get the mixture of double and single quotes correct!
 
Note the use of Javascript to present to user with dialogs for confirmation and the WinPopup msg. This was done in the original using extra panels. Although some do not like Javascript, I feel it is here to stay and presents opportunities in terms of interfaces that are best taken advantage of. The main challenge is to work out how to pass the various perl based data to and from the JS routines.  Note I use a hidden field for this in one case. And the html request parameters for the others.  It can be a challenge to get the mixture of double and single quotes correct!
 +
 +
==== Adding Javascript and CSS to the .ep file ====
 +
You can use the tag helpers "Javascript" and "Stylesheet"to add inline content to a .ep file, here is an example from the DHCPManager to add notification that the scan is being performed.  Under the AdminLTE theme, the button is changed to show a "Scanning" text and also a spinner. In the default theme thje text is shown, but the AdminLTE/Bootstrap spinner classes are ignored.
 +
 +
This code fits in between the final  html tags and the "%end" command:<syntaxhighlight lang="css">
 +
%= javascript begin
 +
  document.getElementById("scanLeases").style.display="none";
 +
  function showSpinner(){
 +
  document.getElementById("scanLeases").style.display="none";
 +
  document.getElementById("load").style.display="inline";
 +
  }
 +
%end
 +
 +
%= stylesheet begin
 +
.spinnerButtonOverlay,
 +
.spinnerButtonOverlay:hover,
 +
.spinnerButtonOverlay:any-link ,
 +
.spinnerButtonOverlay:focus ,
 +
.spinnerButtonOverlay:active {
 +
appearance: auto;
 +
    user-select: none;
 +
    align-items: flex-start;
 +
    cursor: default;
 +
    box-sizing: border-box;
 +
    background-color: #efefef;
 +
    color: black;
 +
    padding: 1px 6px;
 +
    border-width: 2px;
 +
    border-style: outset;
 +
    border-color: darkgrey;
 +
    border-image: initial;
 +
}
 +
%end
 +
</syntaxhighlight>For completion sake here is the replacement button (with AdminLTE spinner) html/mojolicious helper tags:<syntaxhighlight lang="html">
 +
%= button_to $c->l('dhcpd_CONNECTED_IP') => '/dhcpd1', onclick=>"showSpinner()", id=>"scanLeases"
 +
<button class ="btn btn-primary spinnerButtonOverlay"  type = "submit" id="load" style="display:true">
 +
  Scanning  <!--%= $c->l('dhcpd_CONNECTED_IP')-->
 +
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 +
</button>
 +
 +
</syntaxhighlight>Note the Id codes used to allow the JS to find the controls.
    
===Translation Strings files===
 
===Translation Strings files===
Retrieved from "https://wiki.koozali.org/Special:MobileDiff/40876"

Navigation menu