Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-06 06:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Made the confirmation modal consistent with the currently applied theme (#2656)

Browse source 
* made the confirmation modal  consistent with the currently applied theme

* made the request confirmation before query run to behave consistently according to applied theme

* made confirmation modal of query run consistent with the applied theme
This commit is contained in:
Manish Kushare 2022-03-29 21:27:08 +05:30 committed by GitHub
parent 9706de80cb
commit 8682e481fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Editor/Editor.jsx
View file

@ -973,6 +973,7 @@ class Editor extends React.Component {
onConfirm={(queryConfirmationData) => onQueryConfirm(this, queryConfirmationData)}
onCancel={() => onQueryCancel(this)}
queryConfirmationData={this.state.queryConfirmationData}
darkMode={this.props.darkMode}
/>
<Confirm
show={showDataQueryDeletionConfirmation}
@ -980,6 +981,7 @@ class Editor extends React.Component {
confirmButtonLoading={isDeletingDataQuery}
onConfirm={() => this.executeDataQueryDeletion()}
onCancel={() => this.cancelDeleteDataQuery()}
darkMode={this.props.darkMode}
/>
<DndProvider backend={HTML5Backend}>
<div className="header">

10
frontend/src/Editor/Viewer/Confirm.jsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationData }) {
export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationData, darkMode }) {
const [showModal, setShow] = useState(show);
useEffect(() => {
@ -21,7 +21,13 @@ export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationD
return (
<>
<Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
<Modal
show={showModal}
onHide={handleClose}
size="sm"
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
>
<div className="modal-status bg-danger"></div>
<Modal.Body>{message}</Modal.Body>
<Modal.Footer>

1
frontend/src/HomePage/HomePage.jsx
View file

@ -501,6 +501,7 @@ class HomePage extends React.Component {
confirmButtonLoading={isDeletingApp}
onConfirm={() => this.executeAppDeletion()}
onCancel={() => this.cancelDeleteAppDialog()}
darkMode={this.props.darkMode}
/>
<ConfirmDialog

10
frontend/src/_components/ConfirmDialog.jsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButtonLoading }) {
export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButtonLoading, darkMode }) {
const [showModal, setShow] = useState(show);
useEffect(() => {
@ -20,7 +20,13 @@ export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButto
return (
<>
<Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
<Modal
show={showModal}
onHide={handleClose}
size="sm"
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
>
<div className="modal-status bg-danger"></div>
<Modal.Body>{message}</Modal.Body>
<Modal.Footer>