You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by sv...@apache.org on 2019/09/05 12:13:29 UTC
[wicket] branch WICKET-6666_modal-dialog-2 updated: WICKET-6666
moved dialog's interior styling to example css
This is an automated email from the ASF dual-hosted git repository.
svenmeier pushed a commit to branch WICKET-6666_modal-dialog-2
in repository https://gitbox.apache.org/repos/asf/wicket.git
The following commit(s) were added to refs/heads/WICKET-6666_modal-dialog-2 by this push:
new 5b01f23 WICKET-6666 moved dialog's interior styling to example css
5b01f23 is described below
commit 5b01f231b7cf56b389596efd004bf1e800fe25c3
Author: Sven Meier <sv...@apache.org>
AuthorDate: Thu Sep 5 14:12:19 2019 +0200
WICKET-6666 moved dialog's interior styling to example css
show Form usage
---
.../ajax/builtin/modal/ModalDialogPage.html | 71 ++++++++--------------
.../ajax/builtin/modal/ModalDialogPage.java | 20 +++++-
.../wicket/examples/ajax/builtin/modal/dialog.css | 51 ++++++++++++++++
.../ajax/markup/html/modal/theme/theme.css | 32 +---------
4 files changed, 95 insertions(+), 79 deletions(-)
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.html b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.html
index 73051e8..a2bb939 100644
--- a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.html
+++ b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.html
@@ -1,30 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<html>
- <head>
- <wicket:head>
- <style>
- .modal-dialog {
- border-radius: 5px;
- }
-
- .modal-dialog .modal-dialog-header {
- border-radius: 5px 5px 0px 0px;
- background: #ffb158;
- margin: 0;
- padding-top: 4px;
- text-align: center;
- }
-
- .modal-dialog .modal-dialog-body {
- padding: 20px;
- }
-
- .modal-dialog .modal-dialog-footer {
- padding: 5px;
- }
- </style>
- </wicket:head>
- </head>
<body>
<wicket:extend xmlns:wicket="http://wicket.apache.org">
@@ -38,31 +13,33 @@
<div wicket:id="stackedDialogs"></div>
<wicket:fragment wicket:id="fragment">
- <h1 class="modal-dialog-header">Header</h1>
-
- <div class="modal-dialog-body">
- <p>
- <input type="text" wicket:id="text" placeholder="Focus and press ENTER to open dialog" size="32" autofocus="autofocus"/>
- </p>
-
- <div wicket:id="lorem"></div>
- <a wicket:id="ipsum">Lorem...</a>
-
- <div wicket:id="nestedDialog"></div>
- </div>
+ <form wicket:id="form" class="modal-dialog-form">
+ <h1 class="modal-dialog-header">Header</h1>
+
+ <div class="modal-dialog-body">
+ <p>
+ <input type="text" wicket:id="text" placeholder="Focus and press ENTER to open dialog" size="32" autofocus="autofocus"/>
+ </p>
- <div class="modal-dialog-footer">
- <a wicket:id="openDialog">Open dialog</a>
- |
- <a wicket:id="ajaxOpenDialog">via Ajax</a>
+ <div wicket:id="lorem"></div>
+ <a wicket:id="ipsum">Lorem...</a>
+
+ <div wicket:id="nestedDialog"></div>
+ </div>
- <span wicket:id="closing">
+ <div class="modal-dialog-footer">
+ <a wicket:id="openDialog">Open dialog</a>
+ |
+ <a wicket:id="ajaxOpenDialog">via Ajax</a>
+
+ <span wicket:id="closing">
+ |
+ <a wicket:id="close">Close dialog</a>
|
- <a wicket:id="close">Close dialog</a>
- |
- via Ajax by pressing ESC
- </span>
- </div>
+ via Ajax by pressing ESC
+ </span>
+ </div>
+ </form>
</wicket:fragment>
</wicket:extend>
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.java b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.java
index 7cbf732..665b100 100644
--- a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.java
+++ b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.java
@@ -27,8 +27,11 @@ import org.apache.wicket.examples.ajax.builtin.BasePage;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalDialog;
import org.apache.wicket.extensions.ajax.markup.html.modal.theme.DefaultTheme;
import org.apache.wicket.extensions.ajax.markup.html.repeater.AjaxListPanel;
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.MultiLineLabel;
+import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.Radio;
import org.apache.wicket.markup.html.form.RadioGroup;
import org.apache.wicket.markup.html.form.TextField;
@@ -36,6 +39,7 @@ import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.markup.html.panel.Fragment;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.PropertyModel;
+import org.apache.wicket.request.resource.CssResourceReference;
/**
* @author Igor Vaynberg (ivaynberg)
@@ -71,6 +75,15 @@ public class ModalDialogPage extends BasePage
queue(stackedDialogs);
}
+ @Override
+ public void renderHead(IHeaderResponse response)
+ {
+ super.renderHead(response);
+
+ response.render(CssHeaderItem.forReference(new CssResourceReference(ModalDialogPage.class,
+ "dialog.css")));
+ }
+
private class ModalFragment extends Fragment
{
@@ -80,6 +93,9 @@ public class ModalDialogPage extends BasePage
{
super(id, "fragment", ModalDialogPage.this);
+ Form<Void> form = new Form<Void>("form");
+ queue(form);
+
nestedDialog = new ModalDialog("nestedDialog");
nestedDialog.add(new DefaultTheme());
nestedDialog.trapFocus();
@@ -110,13 +126,13 @@ public class ModalDialogPage extends BasePage
protected void updateAjaxAttributes(AjaxRequestAttributes attributes)
{
super.updateAjaxAttributes(attributes);
-
+
attributes.getAjaxCallListeners().add(new AjaxCallListener()
{
@Override
public CharSequence getPrecondition(Component component)
{
- return "return Wicket.Event.keyCode(attrs.event) == 13;";
+ return "if (Wicket.Event.keyCode(attrs.event) != 13) return false; Wicket.Event.fix(attrs.event).preventDefault(); return true;";
}
});
}
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/dialog.css b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/dialog.css
new file mode 100644
index 0000000..09a8731
--- /dev/null
+++ b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/dialog.css
@@ -0,0 +1,51 @@
+.modal-dialog {
+ border-radius: 5px;
+}
+
+.modal-dialog .modal-dialog-content {
+ /* size */
+ min-width: 20vw;
+ max-width: 80vw;
+ min-height: 20vh;
+ max-height: 80vh;
+ overflow: hidden;
+ resize: both;
+
+ /* flex children */
+ display: flex;
+ flex-direction: column;
+}
+
+.modal-dialog .modal-dialog-form {
+ /* size */
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+
+ /* flex in parent */
+ flex: 1;
+
+ /* flex children */
+ display: flex;
+ flex-direction: column;
+}
+
+.modal-dialog .modal-dialog-header {
+ border-radius: 5px 5px 0px 0px;
+ background: #ffb158;
+ margin: 0;
+ padding-top: 4px;
+ text-align: center;
+}
+
+.modal-dialog .modal-dialog-body {
+ /* size */
+ flex: 1;
+ overflow-y: auto;
+
+ padding: 20px;
+}
+
+.modal-dialog .modal-dialog-footer {
+ padding: 5px;
+}
diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/theme/theme.css b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/theme/theme.css
index 4ff58a1..1e84c6c 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/theme/theme.css
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/theme/theme.css
@@ -26,7 +26,7 @@
background: rgba(0, 0, 0, 0.2);
- /* flex-box to center .modal-dialog */
+ /* center .modal-dialog */
display: flex;
flex-direction: column;
align-items: center;
@@ -41,34 +41,6 @@
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.7);
}
-/* content */
-.dialog-theme-default .modal-dialog-content {
- /* re-sizing */
- min-width: 20vw;
- max-width: 80vw;
- min-height: 20vh;
- max-height: 80vh;
- overflow: hidden;
- resize: both;
-
- /* flex children */
- display: flex;
- flex-direction: column;
-}
-
-.dialog-theme-default .modal-dialog-header {
-}
-
-.dialog-theme-default .modal-dialog-body {
- overflow-y: auto;
-
- /* flex grow */
- flex: 1;
-}
-
-.dialog-theme-default .modal-dialog-footer {
-}
-
/* shift nested dialogs */
.dialog-theme-default .modal-dialog .modal-dialog {
@@ -86,7 +58,7 @@
margin-left: 48px;
}
-/* shift sibling dialogs */
+/* shift stacked dialogs */
.dialog-theme-default ~ .dialog-theme-default .modal-dialog {
margin-top: 16px;