Skip to content

New and better styles for message box #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dalacost wants to merge 2 commits into
base: master
Choose a base branch
from
Open

New and better styles for message box #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c617f4
New and better styles for message box
dalacost May 15, 2017
a6ff4c0
Merge branch 'tinuzz:master' into master
dalacost Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,24 @@ Then, show a message/alert:
or, when implicitly used with the map:

map.messagebox.show( 'This is the message' );

more examples:

map.messagebox.show( 'this is a success message', map.messagebox.options.timeout, 'success');
map.messagebox.show( 'this is a error message', map.messagebox.options.timeout, 'error');
map.messagebox.show( 'this is a warning message', map.messagebox.options.timeout, 'warning');


## Available Options:

There are only two options:
There are only three options:

`position:` (string) The standard Leaflet.Control position parameter. Optional, defaults to 'topright'

`timeout:` (integer) The duration the messagebox/notification is shown in milliseconds. Optional, defaults to 3000 (3 sec).

`style:` (string) a especific style, beetween (default, warning, error or success )

## Styling ##

The messagebox can be styled with CSS, see [the css file]( leaflet-messagebox.css) for details.
Expand Down
Binary file added isa_framework/font/isabelc.eot
View file
Open in desktop
Binary file not shown.
40 changes: 40 additions & 0 deletions isa_framework/font/isabelc.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added isa_framework/font/isabelc.ttf
View file
Open in desktop
Binary file not shown.
Binary file added isa_framework/font/isabelc.woff
View file
Open in desktop
Binary file not shown.
Binary file added isa_framework/font/isabelc.woff2
View file
Open in desktop
Binary file not shown.
89 changes: 87 additions & 2 deletions leaflet-messagebox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,91 @@
@font-face {
font-family: 'isabelc';
src: url('isa_framework/font/isabelc.eot');
src: url('isa_framework/font/isabelc.eot#iefix') format('embedded-opentype'),
url('isa_framework/font/isabelc.woff2') format('woff2'),
url('isa_framework/font/isabelc.woff') format('woff'),
url('isa_framework/font/isabelc.ttf') format('truetype'),
url('isa_framework/font/isabelc.svg#isabelc') format('svg');
font-weight: normal;
font-style: normal;
}
.leaflet-control-messagebox {
display: none; /* Initially hidden */
border: 2px solid red;
background-color: white;
border: 1px solid #d2dbf4;
background-color: #f4f8fd;
padding: 3px 10px;
margin:5px;
}
.leaflet-control-messagebox::before {
top:0;
left:-5px;
font-family: isabelc;
font-style: normal;
font-weight: 400;
padding-right:10px;
content:'\e809';
font-weight: bold;
}

.leaflet-control-messagebox-error {
display: none; /* Initially hidden */
border: 1px solid #f1a899;
background-color: #fddfdf;
color: #5f3f3f;
padding: 3px 10px;
}
.leaflet-control-messagebox-error:before {
top:0;
left:-5px;
font-family: isabelc;
font-style: normal;
font-weight: 400;
padding-right:10px;
content:"\e80d Error:";
color:#1a1a1a;
font-weight: bold;
}



.leaflet-control-messagebox-warning {
display: none; /* Initially hidden */
border: 1px solid #dad55e;
background-color: #fffa90;
color: #777620;
padding: 3px 10px;
}
.leaflet-control-messagebox-warning:before {
top:0;
left:-5px;
font-family: isabelc;
font-style: normal;
font-weight: 400;
padding-right:10px;
content:"\e809 Advertencia:";
font-weight: bold;
color:#1a1a1a;
}

.leaflet-control-messagebox-success {
display: none; /* Initially hidden */
border: 1px solid #4F8A10;
background-color: #DFF2BF;
color: #4F8A10;
padding: 3px 10px;
}
.leaflet-control-messagebox-success:before {
top:0;
left:-5px;
font-family: isabelc;
font-style: normal;
font-weight: 400;
padding-right:10px;
content:'\e80c';
font-weight: bold;
color:#4F8A10;
}




18 changes: 16 additions & 2 deletions leaflet-messagebox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
L.Control.Messagebox = L.Control.extend({
options: {
position: 'topright',
timeout: 3000
timeout: 3000,
default_style: 'leaflet-control-messagebox'
},

onAdd: function (map) {
Expand All @@ -10,13 +11,26 @@ L.Control.Messagebox = L.Control.extend({
return this._container;
},

show: function (message, timeout) {
show: function (message, timeout, style) {
var elem = this._container;
elem.innerHTML = message;
elem.style.display = 'block';

timeout = timeout || this.options.timeout;
style = style || this.options.default_style;
elem.className = this.options.default_style;

if ( style == 'error') {
elem.classList.add('leaflet-control-messagebox-error');
}
if ( style == 'warning') {
elem.classList.add('leaflet-control-messagebox-warning');
}

if ( style == 'success') {
elem.classList.add('leaflet-control-messagebox-success');
}

if (typeof this.timeoutID == 'number') {
clearTimeout(this.timeoutID);
}
Expand Down