Skip to content
This repository has been archived by the owner on Jul 11, 2019. It is now read-only.

Commit

Permalink
feature: Notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeMitterer
MikeMitterer committed Jun 23, 2015
1 parent c2d249e commit 71e9492
Show file tree
Hide file tree
Showing 10 changed files with 332 additions and 120 deletions.
9 changes: 1 addition & 8 deletions example/_templates/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,6 @@
</a>
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
<div class="mdl-notification-container is-deletable is-visible">
<div class="mdl-notification mdl-upgraded" id="mdl-element-412428882-0" style="border: 1px solid red;"><i
class="mdl-icon material-icons mdl-notification__close" data-mdl-click="onClose($event)">clear</i> <span
class="mdl-notification__flex">Hi 0</span></div>
<div class="mdl-notification mdl-upgraded" id="mdl-element-412428882-2" style="border: 1px solid red;"><i
class="mdl-icon material-icons mdl-notification__close" data-mdl-click="onClose($event)">clear</i> <span
class="mdl-notification__flex">Hi 1</span></div>
</div>

</body>
</html>
42 changes: 35 additions & 7 deletions example/mdlx_notification/.sitegen/html/_content/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,43 @@
samplename: notification
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/mdlx_notification/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="demo-preview-block">
<div class="form">

<div class="demo-button">
<button id="notification" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="title"/>
<label class="mdl-textfield__label" for="title">Title</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="subtitle" />
<label class="mdl-textfield__label" for="subtitle">Subtitle</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea class="mdl-textfield__input" type="text" rows="2" id="content" ></textarea>
<label class="mdl-textfield__label" for="content">Content</label>
</div>

<div id="notification-type" class="mdl-radio-group">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-debug">
<input type="radio" id="type-debug" class="mdl-radio__button" name="type[]" value="debug" />
<span class="mdl-radio__label">Debug</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-info">
<input type="radio" id="type-info" class="mdl-radio__button" name="type[]" value="info" checked/>
<span class="mdl-radio__label">Info</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-warning">
<input type="radio" id="type-warning" class="mdl-radio__button" name="type[]" value="warning" />
<span class="mdl-radio__label">Warning</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-error">
<input type="radio" id="type-error" class="mdl-radio__button" name="type[]" value="error" />
<span class="mdl-radio__label">Error</span>
</label>
</div>
<button id="notification"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled>
Add notification
</button>
</div>
</div>
<!-- start Autogenerated with gensamples.dart -->
<!-- <script type="application/dart" src="main.dart"></script> -->
<!-- <script type="text/javascript" src="packages/browser/dart.js"></script> -->
<!-- end Autogenerated with gensamples.dart -->
52 changes: 17 additions & 35 deletions example/mdlx_notification/web/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,43 +21,25 @@
@import "packages/mdl/assets/styles/notification/notification";


.demo-page--snackbar, .demo-section--snackbar {
.demo-button {
display: inline-block;
margin: 20px 20px 20px 0;
}

.container {
position: relative;
border: 1px dotted black;
min-height: 200px;
border-radius: 5px;
padding: 5px;
}

.status {
margin: 12px;
span {
font-weight: bold;
}
}

.position {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; // ⇾
align-content: space-between; // ||
align-items: flex-start; // ↓

margin-left: 24px;

> * {
margin-right: 10px;
.demo-page--notification, .demo-section--notification {
.form {
.mdl-radio-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; // ⇾
align-content: space-between; // ||
align-items: flex-start; // ↓

.mdl-radio {
margin-right: 1em;
}

margin-bottom: 16px;
}

.mdl-checkbox {
width: 80px;
.mdl-button {
margin-left: 0;
}
}
}
Expand Down
49 changes: 34 additions & 15 deletions example/mdlx_notification/web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,44 @@
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<section class="demo-section demo-section--notification">
<div class="demo-preview-block">
<div class="demo-button">
<button id="notification" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
<div class="demo-preview-block">
<div class="form">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="title"/>
<label class="mdl-textfield__label" for="title">Title</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="subtitle" />
<label class="mdl-textfield__label" for="subtitle">Subtitle</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea class="mdl-textfield__input" type="text" rows="2" id="content" ></textarea>
<label class="mdl-textfield__label" for="content">Content</label>
</div>
<div id="notification-type" class="mdl-radio-group">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-debug">
<input type="radio" id="type-debug" class="mdl-radio__button" name="type[]" value="debug" />
<span class="mdl-radio__label">Debug</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-info">
<input type="radio" id="type-info" class="mdl-radio__button" name="type[]" value="info" checked/>
<span class="mdl-radio__label">Info</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-warning">
<input type="radio" id="type-warning" class="mdl-radio__button" name="type[]" value="warning" />
<span class="mdl-radio__label">Warning</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-error">
<input type="radio" id="type-error" class="mdl-radio__button" name="type[]" value="error" />
<span class="mdl-radio__label">Error</span>
</label>
</div>
<button id="notification"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled>
Add notification
</button>
</div>
</div>
<!-- start Autogenerated with gensamples.dart -->
<!-- <script type="application/dart" src="main.dart"></script> -->
<!-- <script type="text/javascript" src="packages/browser/dart.js"></script> -->
<!-- end Autogenerated with gensamples.dart -->
</section>
</div>
</div>
Expand All @@ -75,13 +102,5 @@
</a>
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
<div class="mdl-notification-container is-deletable is-visible">
<div class="mdl-notification mdl-upgraded" id="mdl-element-412428882-0" style="border: 1px solid red;"><i
class="mdl-icon material-icons mdl-notification__close" data-mdl-click="onClose($event)">clear</i> <span
class="mdl-notification__flex">Hi 0</span></div>
<div class="mdl-notification mdl-upgraded" id="mdl-element-412428882-2" style="border: 1px solid red;"><i
class="mdl-icon material-icons mdl-notification__close" data-mdl-click="onClose($event)">clear</i> <span
class="mdl-notification__flex">Hi 1</span></div>
</div>
</body>
</html>
24 changes: 23 additions & 1 deletion example/mdlx_notification/web/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,35 @@ main() {

componentFactory().run().then((_) {
final MaterialButton btnNotification = MaterialButton.widget(dom.querySelector("#notification"));
final MaterialTextfield title = MaterialTextfield.widget(dom.querySelector("#title"));
final MaterialTextfield subtitle = MaterialTextfield.widget(dom.querySelector("#subtitle"));
final MaterialTextfield content = MaterialTextfield.widget(dom.querySelector("#content"));
final MaterialRadioGroup notificationtype = MaterialRadioGroup.widget(dom.querySelector("#notification-type"));

title.hub.onKeyUp.listen((_) => btnNotification.enabled = title.value.isNotEmpty);

int counter = 0;
btnNotification.onClick.listen( (_) {
_logger.info("Click on Notification");

NotificationType type = NotificationType.INFO;
if(notificationtype.hasValue) {
switch(notificationtype.value) {
case "debug": type = NotificationType.DEBUG; break;
case "info": type = NotificationType.INFO; break;
case "warning": type = NotificationType.WARNING; break;
case "error": type = NotificationType.ERROR; break;
default: type = NotificationType.INFO;
}
}
_logger.info("NT ${notificationtype.value} - ${notificationtype.hasValue}");

final MaterialNotification notification = new MaterialNotification();
notification("Hi ${counter}").show().then((final MdlDialogStatus status) {

notification("${title.value} (#${counter})",
content.value,
type: type,subtitle: subtitle.value).show().then((final MdlDialogStatus status) {

_logger.info(status);
});
counter++;
Expand Down
Loading

0 comments on commit 71e9492

Please sign in to comment.