Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-06 21:45:43 +01:00
Code Issues Packages Projects Releases Activity

Merged in feature/using_same_modal_classes_for_modals (pull request #176)

Browse Source 
Feature/using same modal classes for modals

Approved-by: Florian Scholdei <florian.scholdei@cloudogu.com>
This commit is contained in:
Florian Scholdei
2019-02-07 16:17:14 +00:00
parent b9803ec7f2 5a8e3fcc53
commit 6095bcf64a
7 changed files with 119 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css
View File

@@ -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;
}
}

78
scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
View File

@@ -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 "./ConfirmAlert.css";
import ReactDOM from "react-dom";
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 (
<div className="react-confirm-alert-overlay">
<div className="react-confirm-alert">
{
<div className="react-confirm-alert-body">
{title && <h1>{title}</h1>}
{message}
<div className="react-confirm-alert-button-group">
{buttons.map((button, i) => (
<button
key={i}
onClick={() => this.handleClickButton(button)}
href="javascript:void(0);"
>
{button.label}
</button>
))}
</div>
</div>
}
</div>
const body = <>{message}</>;
const footer = (
<div className="field is-grouped">
{buttons.map((button, i) => (
<p className="control">
<a
className="button is-info"
key={i}
onClick={() => this.handleClickButton(button)}
>
{button.label}
</a>
</p>
))}
</div>
);
return (
<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;

54
scm-ui-components/packages/ui-components/src/modals/Modal.js Normal file
View File

@@ -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);

1
scm-ui-components/packages/ui-components/src/modals/index.js
View File

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