forked from alan-wu/MPB
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement snackbar for displaying messages.
- Loading branch information
Showing
8 changed files
with
171 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* The snackbar - position it at the bottom and in the middle of the screen */ | ||
| .snackbar { | ||
| min-width: 250px; /* Set a default minimum width */ | ||
| margin-left: -125px; /* Divide value of min-width by 2 */ | ||
| background-color: #333; /* Black background color */ | ||
| color: #fff; /* White text color */ | ||
| text-align: center; /* Centered text */ | ||
| border-radius: 2px; /* Rounded borders */ | ||
| padding: 16px; /* Padding */ | ||
| position: absolute; /* Sit on top of the screen */ | ||
| z-index: 100; /* Add a z-index if needed */ | ||
| left: 50%; /* Center the snackbar */ | ||
| bottom: 30px; /* 30px from the bottom */ | ||
| opacity: 0; | ||
| visibility: hidden; /* Show the snackbar */ | ||
| } | ||
|
|
||
| /* Show the snackbar when clicking on a button (class added with JavaScript) */ | ||
| .snackbar.show { | ||
| opacity: 1; | ||
| visibility: visible; /* Show the snackbar */ | ||
| /* Add animation: Take 0.5 seconds to fade in and out the snackbar. | ||
| However, delay the fade out process for 2.5 seconds */ | ||
| -webkit-animation: fadein 0.5s; | ||
| animation: fadein 0.5s; | ||
| } | ||
|
|
||
| /* Show the snackbar when clicking on a button (class added with JavaScript) */ | ||
| .snackbar.fadeHide { | ||
| /* Add animation: Take 0.5 seconds to fade in and out the snackbar. | ||
| However, delay the fade out process for 2.5 seconds */ | ||
| -webkit-animation: fadeout 0.5s; | ||
| animation: fadeout 0.5s; | ||
| } | ||
|
|
||
| /* Animations to fade the snackbar in and out */ | ||
| @-webkit-keyframes fadein { | ||
| from {bottom: 0; opacity: 0;} | ||
| to {bottom: 30px; opacity: 1;} | ||
| } | ||
|
|
||
| @keyframes fadein { | ||
| from {bottom: 0; opacity: 0;} | ||
| to {bottom: 30px; opacity: 1;} | ||
| } | ||
|
|
||
| @-webkit-keyframes fadeout { | ||
| from {bottom: 30px; opacity: 1;visibility:visible;} | ||
| to {bottom: 0; opacity: 0;visibility:hidden;} | ||
| } | ||
|
|
||
| @keyframes fadeout { | ||
| from {bottom: 30px; opacity: 1;;visibility: visible;} | ||
| to {bottom: 0; opacity: 0;visibility: hidden;} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| require("../styles/Snackbar.css"); | ||
|
|
||
| exports.Snackbar = function(containerIn) { | ||
| var element = undefined; | ||
| var container = containerIn; | ||
| var parent = undefined; | ||
| var template = '<div class="snackbar fadeHide"></div>'; | ||
| var _this = this; | ||
| var myTimeout = undefined; | ||
|
|
||
| var close = function() { | ||
| element.className = element.className.replace(" show", " fadeHide"); | ||
| } | ||
|
|
||
| /** | ||
| * Change the tooltip text. | ||
| * @param {String} text - Text to update the tooltip to. | ||
| */ | ||
| this.showMessage = function(text) { | ||
| if (element.className.indexOf("show") >= 0) { | ||
| if (myTimeout) { | ||
| clearTimeout(myTimeout); | ||
| myTimeout = undefined; | ||
| } | ||
| } else { | ||
| element.className = element.className.replace(" fadeHide", " show"); | ||
| } | ||
| element.innerHTML = text; | ||
| myTimeout = setTimeout(close, 4000); | ||
| } | ||
|
|
||
| var setupSnackbar = function() { | ||
| parent = $(template); | ||
| element = parent[0]; | ||
| container.appendChild(parent[0]); | ||
| } | ||
|
|
||
| setupSnackbar(); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters