Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Dismissible notification boxes
02-20-2018, 01:10 AM
Post: #1
Dismissible notification boxes
Within webERP, on some screens and under certain conditions, one can be confronted with up to 3 or 4 alert/notification messages at once, which can take up half of your screen.

I've experimented with dismissible alert boxes, using simple css and javascript, and have found the result to be a benefit.
There is a X on the right side of the message boxes, which when clicked, fades-out the box and then hides it completely.
The javascript needs to run after the rest of the page has loaded, so I have added it to a new file 'MiscFunctionsFooter.js', which is included just before the closing '</body> tag within footer.php.
I have added some jazzy styling to my theme of choice, xenos. Please see example attached image below.

   

With the exception of the dismissive functionality, new icons, and some tidy-up, I have left the other themes otherwise untouched, so far.

Unless there are any objections, I will commit the changes.

As an aside, I have noticed that the position of the message boxes varies between screens - sometimes above the page title, sometimes below - there may be an opportunity for consistency here.

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
02-20-2018, 01:25 AM
Post: #2
RE: Dismissible notification boxes
I have mine showing together as the last thing before the footer appears. This works well mainly but sometimes you don't notice them.
Visit this user's website Find all posts by this user
Quote this message in a reply
02-20-2018, 01:58 AM
Post: #3
RE: Dismissible notification boxes
Do you get them to display consistently at the base of the page with the use of css? Could the same be done to position them at the top of the page, above the page title, irrespective of where the prnMsg() functions occur within the code?

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
02-20-2018, 02:24 AM
Post: #4
RE: Dismissible notification boxes
Hi Andy, what I do is to change the prnMsg() function to store all the messages in an array, so the function looks like:

function prnMsg($Msg, $Type = 'info', $Prefix = '') {
global $Messages;
$Messages[] = array(
$Msg,
$Type,
$Prefix
);

}

Then at the place in the code I want them printed (top of footer.php in my case) I then just cycle through the array $Messages printing them out.

Tim
Visit this user's website Find all posts by this user
Quote this message in a reply
02-20-2018, 02:39 AM (This post was last modified: 02-20-2018 02:47 AM by TurboPT.)
Post: #5
RE: Dismissible notification boxes
I have also crossed a place where the error message is never seen, as the prnMsg() was used at a point during table creation, for example, and then causes page trouble.
Having seen this one example, I don't know if this could be happening in other places?

Where I've crossed the situation (so far), is with InternalStockRequestInquiry. I do not have any departments, and this how the screen looks:

[Image: 207tb4m.png]

...and upon viewing the page source, the problem is exposed:

[Image: m7qm2t.png]

...hovering the error div, the browser says:

[Image: 280uo1w.png]

I've not yet come back around to fix this yet, as I'm working a Stocks page handling issue and improved sorting changes at the moment.

It looks like collecting the message(s), as Tim has mentioned, to be displayed at a later point is likely a better way to handle the messages, though opinions could vary?
Find all posts by this user
Quote this message in a reply
02-20-2018, 02:44 AM
Post: #6
RE: Dismissible notification boxes
Agreed, Paul.
I will add the array approach to my mods.

Thanks Tim.

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
02-20-2018, 03:04 AM
Post: #7
RE: Dismissible notification boxes
Hi Andy, I am not sure I understand the need for the new JS file and loading it on </body>

As an experiment I created the following in MiscFunctions.js:

function HideMessage(t) {
t.parentNode.style["display"] = "none";
}

and add:

onclick="HideMessage(this)"

to the cross on the message box. Clicking the cross now removes the whole message.

Tim
Visit this user's website Find all posts by this user
Quote this message in a reply
02-20-2018, 03:42 AM
Post: #8
RE: Dismissible notification boxes
Hi Tim,

Initially I used onclick="this.parentElement.style.display=\'none\';", which worked fine.

Your function simplifies the above some what.

The javascript I am playing with simplifies further, by looping thru all the alert boxes, referring to their class name (no need for onclick), and also enables the fade-out (opacity & transition) followed by display = none.

Here is the javascript

Code:
var close = document.getElementsByClassName("AlertCloseButton");
var i;

for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}

Mods to MiscFunctions.php at line 56

Code:
return '<div class="Alert '.$Class.'">
            <span class="AlertCloseButton">&times;</span>
            <b>' . $Prefix . '</b> : ' .$Msg . '</div>';

Example of css changes in xenos theme

Code:
div.Alert {
    border-radius:10px;
    padding:10px 10px 10px 36px;
    margin:5px;
    opacity: 1;
    transition: opacity 0.6s; /* 600ms to fade out */
}
div.Alert.error {
    background:#ffecec url('images/alert-error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
div.Alert.success {
    background:#e9ffd9 url('images/alert-success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
div.Alert.info {
    background:#e3f7fc url('images/alert-info.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}
div.Alert.warn {
    background:#fff8c4 url('images/alert-warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.AlertCloseButton {
    margin-left: 15px;
    color: #C8C8C8;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 17px;
    cursor: pointer;
    transition: 0.3s;
}
.AlertCloseButton:hover {
    color: #606060;
}

My objective was to create something a bit 'flashy' without the use of jQuery, just good old fashioned css and js.

I couldn't get the javascript to work from the existing MiscFunctions.js in the header, so resorted to the new file MiscFunctionsFooter.js in the footer.
I realise that the additional file is probably undesirable, and if their is no appetite for the dynamic effects, we can fall back to the onclick method.

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
02-20-2018, 04:00 AM (This post was last modified: 02-20-2018 05:46 AM by TurboPT.)
Post: #9
RE: Dismissible notification boxes
Unless there were possible js errors, did you clear cache with the MiscFunctions file changes?

I've had to do that with some other minor changes that I applied to the file, and then reload the page to see my changes.
Find all posts by this user
Quote this message in a reply
02-20-2018, 08:06 AM
Post: #10
RE: Dismissible notification boxes
Hi Andy, I agree with what you are doing, adding eye candy with css and js without the overhead of jquery is great.

There is a function initial() in the MiscFunctions.js file that should get run on page load and I use it for the sort of things you are looking at doing here.

Thanks
Tim
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)