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/08/07 08:22:28 UTC
[wicket] branch WICKET-6666_modal-dialog-2 updated: WICKET-6666
modal dialog layout theme
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 8a67758 WICKET-6666 modal dialog layout theme
8a67758 is described below
commit 8a67758e12d9471077644b8730e761cb8e9aa77c
Author: Sven Meier <sv...@apache.org>
AuthorDate: Wed Aug 7 09:27:39 2019 +0200
WICKET-6666 modal dialog layout theme
tweaking default layout
---
.../ajax/builtin/modal/ModalDialogPage.html | 43 ++++++++------
.../ajax/builtin/modal/ModalDialogPage.java | 23 ++++++--
.../ajax/builtin/modal/ModalDialogPage.properties | 1 +
.../ajax/builtin/modal/MyDialogLayout.html | 34 -----------
.../ajax/builtin/modal/MyDialogLayout.java | 38 -------------
.../ajax/markup/html/modal/ModalDialog.html | 5 +-
.../ajax/markup/html/modal/theme/theme.css | 66 ++++++++++++++--------
7 files changed, 87 insertions(+), 123 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 bf34917..73051e8 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
@@ -5,22 +5,22 @@
<style>
.modal-dialog {
border-radius: 5px;
- overflow: hidden;
}
- h1.example-header {
+ .modal-dialog .modal-dialog-header {
+ border-radius: 5px 5px 0px 0px;
background: #ffb158;
+ margin: 0;
padding-top: 4px;
text-align: center;
}
- .example-content {
+ .modal-dialog .modal-dialog-body {
padding: 20px;
- min-width: 100px;
- min-height: 100px;
- overflow-x: hidden;
- overflow-y: auto;
- resize: both;
+ }
+
+ .modal-dialog .modal-dialog-footer {
+ padding: 5px;
}
</style>
</wicket:head>
@@ -38,24 +38,31 @@
<div wicket:id="stackedDialogs"></div>
<wicket:fragment wicket:id="fragment">
- <p>
- <input type="text" wicket:id="text" placeholder="Focus and press ENTER to open dialog" size="32" autofocus="autofocus"/>
- </p>
-
- <div wicket:id="nestedDialog"></div>
+ <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>
- <p>
+ <div wicket:id="nestedDialog"></div>
+ </div>
+
+ <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>
|
via Ajax by pressing ESC
</span>
- </p>
+ </div>
</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 aad0eca..7cbf732 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
@@ -28,6 +28,7 @@ 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.html.WebMarkupContainer;
+import org.apache.wicket.markup.html.basic.MultiLineLabel;
import org.apache.wicket.markup.html.form.Radio;
import org.apache.wicket.markup.html.form.RadioGroup;
import org.apache.wicket.markup.html.form.TextField;
@@ -146,13 +147,25 @@ public class ModalDialogPage extends BasePage
findParent(ModalDialog.class).close(null);
}
});
+
+ final MultiLineLabel lorem = new MultiLineLabel("lorem", "");
+ lorem.setOutputMarkupId(true);
+ queue(lorem);
+
+ queue(new AjaxLink<Void>("ipsum") {
+ @Override
+ public void onClick(AjaxRequestTarget target)
+ {
+ lorem.setDefaultModelObject(lorem.getDefaultModelObject() + "\n\n" + getString("lorem"));
+
+ target.add(lorem);
+ }
+ });
}
private void openDialog(AjaxRequestTarget target)
{
- Component content = new MyDialogLayout(ModalDialog.CONTENT_ID, Model.of("Dialog"),
- new ModalFragment(ModalDialog.CONTENT_ID));
-
+ ModalFragment fragment = new ModalFragment(ModalDialog.CONTENT_ID);
if (stacked)
{
// stack a new dialog
@@ -167,13 +180,13 @@ public class ModalDialogPage extends BasePage
dialog.add(new DefaultTheme());
dialog.trapFocus();
dialog.closeOnEscape();
- dialog.setContent(content);
+ dialog.setContent(fragment);
stackedDialogs.append(dialog, target).open(target);
}
else
{
// use the nested dialog
- nestedDialog.open(content, target);
+ nestedDialog.open(fragment, target);
}
}
}
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.properties b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.properties
new file mode 100644
index 0000000..5c8805d
--- /dev/null
+++ b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/ModalDialogPage.properties
@@ -0,0 +1 @@
+lorem = Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\ No newline at end of file
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.html b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.html
deleted file mode 100644
index 56af543..0000000
--- a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<html>
- <head>
- <wicket:head>
- <style>
- .modal-dialog {
- border-radius: 5px;
- overflow: hidden;
- }
-
- h1.example-header {
- background: #ffb158;
- padding-top: 4px;
- text-align: center;
- }
-
- .example-content {
- padding: 20px;
- min-width: 100px;
- min-height: 100px;
- overflow-x: hidden;
- overflow-y: auto;
- resize: both;
- }
- </style>
- </wicket:head>
- </head>
- <body>
- <wicket:panel xmlns:wicket="http://wicket.apache.org">
- <h1 wicket:id="header" class="example-header"></h1>
- <div wicket:id="content" class="example-content"></div>
- </wicket:panel>
- </body>
-</html>
\ No newline at end of file
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.java b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.java
deleted file mode 100644
index 506447e..0000000
--- a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/modal/MyDialogLayout.java
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You 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.
- */
-package org.apache.wicket.examples.ajax.builtin.modal;
-
-import org.apache.wicket.markup.html.WebMarkupContainer;
-import org.apache.wicket.markup.html.basic.Label;
-import org.apache.wicket.markup.html.panel.Panel;
-import org.apache.wicket.model.IModel;
-
-/**
- * @author svenmeier
- */
-public class MyDialogLayout extends Panel
-{
-
- public MyDialogLayout(String id, IModel<String> header, WebMarkupContainer content)
- {
- super(id);
-
- add(new Label("header", header));
-
- add(content);
- }
-}
\ No newline at end of file
diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.html b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.html
index 35b7bef..7c1de89 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.html
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.html
@@ -17,9 +17,8 @@
-->
<wicket:panel xmlns:wicket="http://wicket.apache.org">
<div wicket:id="overlay" class="modal-dialog-overlay">
- <div wicket:id="dialog" class='modal-dialog'>
- <div class='modal-dialog-content'>
- <div wicket:id="content"></div>
+ <div wicket:id="dialog" class="modal-dialog">
+ <div wicket:id="content" class="modal-dialog-content">
</div>
</div>
</div>
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 1b99eae..4ff58a1 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
@@ -23,66 +23,82 @@
margin: 0;
padding: 0;
z-index: 1000;
+
+ background: rgba(0, 0, 0, 0.2);
/* flex-box to center .modal-dialog */
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
- flex-direction: column;
-}
-
-.dialog-theme-default .modal-dialog-overlay::before {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- margin: 0;
-
- background: rgba(0, 0, 0, 0.2);
}
.dialog-theme-default .modal-dialog {
position: absolute;
top: 10%;
-
+
background: white;
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 {
- margin-top: 32px;
- margin-left: 32px;
+ margin-top: 16px;
+ margin-left: 16px;
}
.dialog-theme-default .modal-dialog .modal-dialog .modal-dialog {
- margin-top: 64px;
- margin-left: 64px;
+ margin-top: 32px;
+ margin-left: 32px;
}
.dialog-theme-default .modal-dialog .modal-dialog .modal-dialog .modal-dialog {
- margin-top: 96px;
- margin-left: 96px;
+ margin-top: 48px;
+ margin-left: 48px;
}
/* shift sibling dialogs */
.dialog-theme-default ~ .dialog-theme-default .modal-dialog {
- margin-top: 32px;
- margin-left: 32px;
+ margin-top: 16px;
+ margin-left: 16px;
}
.dialog-theme-default ~ .dialog-theme-default ~ .dialog-theme-default .modal-dialog {
- margin-top: 64px;
- margin-left: 64px;
+ margin-top: 32px;
+ margin-left: 32px;
}
.dialog-theme-default ~ .dialog-theme-default ~ .dialog-theme-default ~ .dialog-theme-default .modal-dialog {
- margin-top: 96px;
- margin-left: 96px;
+ margin-top: 48px;
+ margin-left: 48px;
}
\ No newline at end of file