Merged in feature/using_same_modal_classes_for_modals (pull request #176)

Feature/using same modal classes for modals

Approved-by: Florian Scholdei <florian.scholdei@cloudogu.com>

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css

@@ -1,102 +0,0 @@
-/*modified from https://github.com/GA-MO/react-confirm-alert*/
-.react-confirm-alert-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  background: rgba(255, 255, 255, 0.9);
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  opacity: 0;
-  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-}
-
-.react-confirm-alert-body {
-  font-family: Arial, Helvetica, sans-serif;
-  width: 400px;
-  padding: 30px;
-  text-align: left;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-  color: #666;
-}
-
-.react-confirm-alert-body > h1 {
-  margin-top: 0;
-}
-
-.react-confirm-alert-body > h3 {
-  margin: 0;
-  font-size: 16px;
-}
-
-.react-confirm-alert-button-group {
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 20px;
-}
-
-.react-confirm-alert-button-group > button {
-  outline: none;
-  background: #333;
-  border: none;
-  display: inline-block;
-  padding: 6px 18px;
-  color: #eee;
-  margin-right: 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-@-webkit-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-o-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js

@@ -1,9 +1,7 @@
 // @flow
-//modified from https://github.com/GA-MO/react-confirm-alert
-
 import * as React from "react";
-import { render, unmountComponentAtNode } from "react-dom";
+import ReactDOM from "react-dom";
-import "./ConfirmAlert.css";
+import Modal from "./Modal";
 
 type Button = {
   label: string,
@@ -25,59 +23,47 @@ class ConfirmAlert extends React.Component<Props> {
   };
 
   close = () => {
-    removeElementReconfirm();
+    ReactDOM.unmountComponentAtNode(document.getElementById("modalRoot"));
   };
 
   render() {
     const { title, message, buttons } = this.props;
 
-    return (
+    const body = <>{message}</>;
-      <div className="react-confirm-alert-overlay">
+
-        <div className="react-confirm-alert">
+    const footer = (
-          {
+      <div className="field is-grouped">
-            <div className="react-confirm-alert-body">
-              {title && <h1>{title}</h1>}
-              {message}
-              <div className="react-confirm-alert-button-group">
         {buttons.map((button, i) => (
-                  <button
+          <p className="control">
+            <a
+              className="button is-info"
               key={i}
               onClick={() => this.handleClickButton(button)}
-                    href="javascript:void(0);"
             >
               {button.label}
-                  </button>
+            </a>
+          </p>
         ))}
       </div>
-            </div>
+    );
-          }
+
-        </div>
+    return (
-      </div>
+      <Modal
+        title={title}
+        closeFunction={() => this.close()}
+        body={body}
+        active={true}
+        footer={footer}
+      />
     );
   }
 }
 
-function createElementReconfirm(properties: Props) {
-  const divTarget = document.createElement("div");
-  divTarget.id = "react-confirm-alert";
-  if (document.body) {
-    document.body.appendChild(divTarget);
-    render(<ConfirmAlert {...properties} />, divTarget);
-  }
-}
-
-function removeElementReconfirm() {
-  const target = document.getElementById("react-confirm-alert");
-  if (target) {
-    unmountComponentAtNode(target);
-    if (target.parentNode) {
-      target.parentNode.removeChild(target);
-    }
-  }
-}
-
 export function confirmAlert(properties: Props) {
-  createElementReconfirm(properties);
+  const root = document.getElementById("modalRoot");
+  if (root) {
+    ReactDOM.render(<ConfirmAlert {...properties} />, root);
+  }
 }
 
 export default ConfirmAlert;

scm-ui-components/packages/ui-components/src/modals/Modal.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+type Props = {
+  title: string,
+  closeFunction: () => void,
+  body: any,
+  footer?: any,
+  active: boolean,
+  classes: any
+};
+
+const styles = {
+  resize: {
+    maxWidth: "100%",
+    width: "auto !important",
+    display: "inline-block"
+  }
+};
+
+class Modal extends React.Component<Props> {
+  render() {
+    const { title, closeFunction, body, footer, active, classes } = this.props;
+
+    const isActive = active ? "is-active" : null;
+
+    let showFooter = null;
+    if (footer) {
+      showFooter = <footer className="modal-card-foot">{footer}</footer>;
+    }
+
+    return (
+      <div className={classNames("modal", isActive)}>
+        <div className="modal-background" />
+        <div className={classNames("modal-card", classes.resize)}>
+          <header className="modal-card-head">
+            <p className="modal-card-title">{title}</p>
+            <button
+              className="delete"
+              aria-label="close"
+              onClick={closeFunction}
+            />
+          </header>
+          <section className="modal-card-body">{body}</section>
+          {showFooter}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(Modal);

scm-ui-components/packages/ui-components/src/modals/index.js

@@ -1,4 +1,5 @@
 // @create-index
 
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert.js";
+export { default as Modal } from "./Modal.js";
 

scm-ui/public/index.mustache

@@ -21,6 +21,8 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="modalRoot"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import { Button, SubmitButton } from "@scm-manager/ui-components";
+import { Button, SubmitButton, Modal } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
@@ -38,6 +38,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const verbSelectBoxes = Object.entries(verbs).map(e => (
       <PermissionCheckbox
+        key={e[0]}
         disabled={readOnly}
         name={e[0]}
         checked={e[1]}
@@ -49,21 +50,9 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
       <SubmitButton label={t("permission.advanced.dialog.submit")} />
     ) : null;
 
-    return (
+
-      <div className={"modal is-active"}>
+    const body = (
-        <div className="modal-background" />
+      <>
-        <div className="modal-card">
-          <header className="modal-card-head">
-            <p className="modal-card-title">
-              {t("permission.advanced.dialog.title")}
-            </p>
-            <button
-              className="delete"
-              aria-label="close"
-              onClick={() => onClose()}
-            />
-          </header>
-          <section className="modal-card-body">
         <div className="content">{verbSelectBoxes}</div>
         <form onSubmit={this.onSubmit}>
           {submitButton}
@@ -72,9 +61,16 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
             action={onClose}
           />
         </form>
-          </section>
+      </>
-        </div>
+    );
-      </div>
+
+    return (
+      <Modal
+        title={t("permission.advanced.dialog.title")}
+        closeFunction={() => onClose()}
+        body={body}
+        active={true}
+      />
     );
   }
 

scm-ui/styles/scm.scss

@@ -351,6 +351,14 @@ $fa-font-path: "webfonts";
     margin-bottom: 0;
   }
 }
+
+// modal
+.modal {
+  .modal-card-foot {
+    justify-content: flex-end; // pulled-right
+  }
+}
+
 .sub-menu li {
   line-height: 1;