From c12f792425322332263c1c6d27f81e75d8c1c048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 1 Nov 2022 21:15:28 +0000
Subject: [PATCH] feat: new modal behaviour
---
examples/web/react/components/modal/modal.css | 13 +++++++------
examples/web/react/components/modal/modal.tsx | 12 ++++++++++--
examples/web/react/components/tiles/tiles.css | 11 +++++++++++
examples/web/react/components/tiles/tiles.tsx | 2 +-
4 files changed, 29 insertions(+), 9 deletions(-)
diff --git a/examples/web/react/components/modal/modal.css b/examples/web/react/components/modal/modal.css
index f1e5fd39..bcc2c27c 100644
--- a/examples/web/react/components/modal/modal.css
+++ b/examples/web/react/components/modal/modal.css
@@ -33,6 +33,7 @@
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
-webkit-opacity: 1.0;
+ pointer-events: initial;
transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-ms-transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -49,12 +50,12 @@
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
- box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
- -o-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
- -ms-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
- -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
- -khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
- -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
+ box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -ms-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin-top: 30px;
max-width: 100%;
padding: 24px 24px 24px 24px;
diff --git a/examples/web/react/components/modal/modal.tsx b/examples/web/react/components/modal/modal.tsx
index 4ed68660..c72f6761 100644
--- a/examples/web/react/components/modal/modal.tsx
+++ b/examples/web/react/components/modal/modal.tsx
@@ -9,6 +9,7 @@ type ModalProps = {
title?: string;
text?: string;
visible?: boolean;
+ overlayClose?: boolean;
style?: string[];
onConfirm?: () => void;
onCancel?: () => void;
@@ -18,6 +19,7 @@ export const Modal: FC<ModalProps> = ({
title = "Alert",
text = "Do you confirm the following operation?",
visible = false,
+ overlayClose = true,
style = [],
onConfirm,
onCancel
@@ -38,9 +40,15 @@ export const Modal: FC<ModalProps> = ({
const getTextHtml = (separator = /\n/g) => ({
__html: text.replace(separator, "<br/>")
});
+ const onWindowClick = (
+ event: React.MouseEvent<HTMLDivElement, MouseEvent>
+ ) => {
+ if (!overlayClose) return;
+ event.stopPropagation();
+ };
return (
- <div className={classes()}>
- <div className="modal-window">
+ <div className={classes()} onClick={onCancel}>
+ <div className="modal-window" onClick={onWindowClick}>
<div className="modal-top-buttons">
<Button
text={""}
diff --git a/examples/web/react/components/tiles/tiles.css b/examples/web/react/components/tiles/tiles.css
index e69de29b..59b7d182 100644
--- a/examples/web/react/components/tiles/tiles.css
+++ b/examples/web/react/components/tiles/tiles.css
@@ -0,0 +1,11 @@
+.tiles > .canvas {
+ background-color: #1b1a17;
+ border: 2px solid #50cb93;
+ box-sizing: content-box;
+ -o-box-sizing: content-box;
+ -ms-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ -khtml-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ padding: 8px 8px 8px 8px;
+}
diff --git a/examples/web/react/components/tiles/tiles.tsx b/examples/web/react/components/tiles/tiles.tsx
index 7556be8d..a74354d7 100644
--- a/examples/web/react/components/tiles/tiles.tsx
+++ b/examples/web/react/components/tiles/tiles.tsx
@@ -17,7 +17,7 @@ export const Tiles: FC<TilesProps> = ({
interval = 500,
style = []
}) => {
- const classes = () => ["title", ...style].join(" ");
+ const classes = () => ["tiles", ...style].join(" ");
const onCanvas = (structure: CanvasStructure) => {
setInterval(() => {
for (let index = 0; index < 384; index++) {
--
GitLab