Permalink
Browse files

feature: Autofocus for Dialogs, fixes #20

  • Loading branch information...
MikeMitterer committed Aug 19, 2015
1 parent 4fd2f45 commit b1887f7378e6202becdd7ec814dea153fe58bf0f
@@ -2,14 +2,27 @@
samplename: dialog
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/master/example/mdlx_dialog/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="demo-preview-block">
<div class="demo-button">
<button id="alertdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Alert dialog</button>
<button id="confirmdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Confirm dialog</button>
<button id="customdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom dialog</button>
<button id="alertdialog"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Alert
dialog
</button>
<button id="confirmdialog"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Confirm
dialog
</button>
<button id="customdialog1"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom
dialog I
</button>
<button id="customdialog2"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom
dialog II
</button>
</div>
</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> -->
@@ -1,13 +1,13 @@
/**
* Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
* IT-Consulting and Development Limited.
*
*
* All Rights Reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
@@ -17,56 +17,28 @@
* limitations under the License.
*/
library mdl_dialog_sample.customdialog1;
import 'package:mdl/mdl.dart';
import "package:mdl/mdldialog.dart";
@MdlComponentModel
class CustomDialog extends MaterialDialog {
static const String _DEFAULT_YES_BUTTON = "Yes";
static const String _DEFAULT_NO_BUTTON = "No";
import 'package:di/di.dart' as di;
@override
String template = """
<div class="mdl-dialog custom-dialog">
<div class="mdl-dialog__content">
{{#hasTitle}}
<h5>{{title}}</h5>
{{/hasTitle}}
<p>
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees,
cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all
belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it
has been distributed worldwide to become one of the most cultivated fruits in the tropics.
</p>
<img style="margin: auto; max-width: 100%;" src="assets/images/mangues.jpg">
<p>
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of
India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and
leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
</p>
</div>
<div class="mdl-dialog__actions" layout="row">
<button class="mdl-button mdl-js-button" data-mdl-click="onNo()">
{{noButton}}
</button>
<button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onYes()">
{{yesButton}}
</button>
</div>
</div>
""".trim().replaceAll(new RegExp(r"\s+")," ");
@MdlComponentModel @di.Injectable()
class CustomDialog1 extends MaterialDialog {
static const String _DEFAULT_YES_BUTTON = "Yes";
static const String _DEFAULT_NO_BUTTON = "No";
String title = "";
String yesButton = _DEFAULT_YES_BUTTON;
String noButton = _DEFAULT_NO_BUTTON;
CustomDialog() : super(new DialogConfig());
CustomDialog1() : super(new DialogConfig());
CustomDialog call({ final String title: "",
final String yesButton: _DEFAULT_YES_BUTTON, final String noButton: _DEFAULT_NO_BUTTON }) {
final String yesButton: _DEFAULT_YES_BUTTON, final String noButton: _DEFAULT_NO_BUTTON }) {
this.title = title;
this.yesButton = yesButton;
@@ -89,4 +61,38 @@ class CustomDialog extends MaterialDialog {
// - private ----------------------------------------------------------------------------------
// - template ----------------------------------------------------------------------------------
@override
String template = """
<div class="mdl-dialog custom-dialog1">
<div class="mdl-dialog__content">
{{#hasTitle}}
<h5>{{title}}</h5>
{{/hasTitle}}
<p>
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees,
cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all
belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it
has been distributed worldwide to become one of the most cultivated fruits in the tropics.
</p>
<img style="margin: auto; max-width: 100%;" src="demo-images/mangues.jpg">
<p>
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of
India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and
leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
</p>
</div>
<div class="mdl-dialog__actions" layout="row">
<button class="mdl-button mdl-js-button" data-mdl-click="onNo()">
{{noButton}}
</button>
<button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onYes()">
{{yesButton}}
</button>
</div>
</div>
""";
}
@@ -0,0 +1,88 @@
/**
* Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
* IT-Consulting and Development Limited.
*
* All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import 'package:mdl/mdl.dart';
import "package:mdl/mdldialog.dart";
import 'package:di/di.dart' as di;
@MdlComponentModel @di.Injectable()
class CustomDialog2 extends MaterialDialog {
static const String _DEFAULT_SUBMIT_BUTTON = "Submit";
static const String _DEFAULT_CANCEL_BUTTON = "Cancel";
String title = "";
String yesButton = _DEFAULT_SUBMIT_BUTTON;
String noButton = _DEFAULT_CANCEL_BUTTON;
CustomDialog2() : super(new DialogConfig());
CustomDialog call({ final String title: "",
final String yesButton: _DEFAULT_SUBMIT_BUTTON, final String noButton: _DEFAULT_CANCEL_BUTTON }) {
this.title = title;
this.yesButton = yesButton;
this.noButton = noButton;
return this;
}
bool get hasTitle => (title != null && title.isNotEmpty);
// - EventHandler -----------------------------------------------------------------------------
void onSubmit() {
close(MdlDialogStatus.OK);
}
void onCancel() {
close(MdlDialogStatus.CANCEL);
}
// - private ----------------------------------------------------------------------------------
// - template ----------------------------------------------------------------------------------
@override
String template = """
<div class="mdl-dialog custom-dialog2">
<div class="mdl-dialog__content">
{{#hasTitle}}<h5>{{title}}</h5>{{/hasTitle}}
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name" autofocus/>
<label class="mdl-textfield__label" for="name">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="address"/>
<label class="mdl-textfield__label" for="address">Address</label>
</div>
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button" data-mdl-click="onCancel()">
{{noButton}}
</button>
<button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onSubmit()">
{{yesButton}}
</button>
</div>
</div>
""";
}
@@ -20,6 +20,7 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--dialog, .demo-section--dialog {
.demo-button {
display: flex;
flex-direction: row;
@@ -39,28 +40,36 @@
}
}
}
}
.custom-dialog {
h5 {
background-color: #B3D38D;
// Defined outside of .demo-page--dialog, .demo-section--dialog because
// dialogs (dialog-container) will be added at the bottom of your HTML-page (just before </body>
.custom-dialog1 {
h5 {
background-color: #B3D38D;
position: absolute;
left: 0;
top: 0 !important;
right: 0;
padding: 24px;
}
position: absolute;
left: 0;
top: 0 !important;
right: 0;
padding: 24px;
}
.mdl-dialog__content {
margin-top: 68px; // padding * 2 + font-size (20)
p {
font-size: 14px;
}
.mdl-dialog__content {
margin-top: 68px; // padding * 2 + font-size (20)
p {
font-size: 14px;
}
}
.mdl-dialog__actions {
border-top: 1px solid rgb(231, 231, 231);
}
.mdl-dialog__actions {
border-top: 1px solid rgb(231, 231, 231);
}
}
.custom-dialog2 {
.mdl-textfield {
width: 100%;
}
}
@@ -48,13 +48,26 @@
<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--dialog">
<div class="demo-preview-block">
<div class="demo-preview-block">
<div class="demo-button">
<button id="alertdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Alert dialog</button>
<button id="confirmdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Confirm dialog</button>
<button id="customdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom dialog</button>
<button id="alertdialog"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Alert
dialog
</button>
<button id="confirmdialog"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Confirm
dialog
</button>
<button id="customdialog1"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom
dialog I
</button>
<button id="customdialog2"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom
dialog II
</button>
</div>
</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> -->
@@ -6,7 +6,8 @@ import 'package:console_log_handler/console_log_handler.dart';
import 'package:mdl/mdl.dart';
import "package:mdl/mdldialog.dart";
import "package:mdl_dialog_sample/customdialog.dart";
import "package:mdl_dialog_sample/customdialog1.dart";
import "package:mdl_dialog_sample/customdialog2.dart";
main() {
final Logger _logger = new Logger('dialog.Main');
@@ -16,13 +17,16 @@ main() {
registerMdl();
componentFactory().run().then((_) {
final MaterialButton btnAlertDialog = MaterialButton.widget(dom.querySelector("#alertdialog"));
final MaterialButton btnConfirmDialog = MaterialButton.widget(dom.querySelector("#confirmdialog"));
final MaterialButton btnCustomDialog = MaterialButton.widget(dom.querySelector("#customdialog"));
final MaterialButton btnCustomDialog1 = MaterialButton.widget(dom.querySelector("#customdialog1"));
final MaterialButton btnCustomDialog2 = MaterialButton.widget(dom.querySelector("#customdialog2"));
final MaterialAlertDialog alertDialog = new MaterialAlertDialog();
final MdlConfirmDialog confirmDialog = new MdlConfirmDialog();
final CustomDialog customDialog = new CustomDialog();
final CustomDialog1 customDialog1 = new CustomDialog1();
final CustomDialog2 customDialog2 = new CustomDialog2();
int mangoCounter = 0;
@@ -40,15 +44,23 @@ main() {
});
});
btnCustomDialog.onClick.listen((_) {
btnCustomDialog1.onClick.listen((_) {
_logger.info("Click on ConfirmButton");
customDialog(title: "Mango #${mangoCounter} (Fruit)",
customDialog1(title: "Mango #${mangoCounter} (Fruit)",
yesButton: "I buy it!", noButton: "Not now").show().then((final MdlDialogStatus status) {
_logger.info(status);
mangoCounter++;
});
});
btnCustomDialog2.onClick.listen((_) {
_logger.info("Click on ConfirmButton");
customDialog2(title: "Form-Sample").show().then((final MdlDialogStatus status) {
_logger.info(status);
});
});
});
}
Oops, something went wrong.

0 comments on commit b1887f7

Please sign in to comment.