From d59a984cdd91baa99218095a9bbbaad27c1d313c Mon Sep 17 00:00:00 2001 From: knoxfighter Date: Fri, 10 Aug 2018 23:54:28 +0200 Subject: [PATCH] changed swal to swal2 in SavesList --- ui/App/components/Saves/SavesList.jsx | 6 +- ui/App/components/Users/UserTable.jsx | 71 +++++++++++++-------- ui/js/customSwal.js | 4 +- ui/scss/customizations/sweetalert.scss | 85 ++++++++++---------------- 4 files changed, 81 insertions(+), 85 deletions(-) diff --git a/ui/App/components/Saves/SavesList.jsx b/ui/App/components/Saves/SavesList.jsx index 46f1ec7..3ee45d3 100644 --- a/ui/App/components/Saves/SavesList.jsx +++ b/ui/App/components/Saves/SavesList.jsx @@ -18,10 +18,9 @@ class SavesList extends React.Component { let self = this; ReactSwalDanger.fire({ title: "Are you sure?", - html:

Save: {saveName} will be deleted

, + html:

Save: {saveName} will be deleted

, type: "question", showCancelButton: true, - confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", showLoaderOnConfirm: true, preConfirm: () => { @@ -42,9 +41,7 @@ class SavesList extends React.Component { }); }); }, - allowOutsideClick: () => !ReactSwalDanger.isLoading() }).then((result) => { - console.log(result); if(result.value) { ReactSwalNormal.fire({ title: "Deleted!", @@ -54,7 +51,6 @@ class SavesList extends React.Component { } self.updateSavesList(); }).catch((result) => { - console.log(result); ReactSwalNormal.fire({ title: "An error occurred!", text: result, diff --git a/ui/App/components/Users/UserTable.jsx b/ui/App/components/Users/UserTable.jsx index 42f9aa4..2bd466a 100644 --- a/ui/App/components/Users/UserTable.jsx +++ b/ui/App/components/Users/UserTable.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import swal from 'sweetalert'; +import {ReactSwalDanger, ReactSwalNormal} from './../../../js/customSwal'; class UserTable extends React.Component { constructor(props) { @@ -9,31 +9,50 @@ class UserTable extends React.Component { } removeUser(user) { - /*swal({ - title: "Are you sure?", - text: "User: " + user + " will be deleted", - type: "warning", - showCancelButton: true, - confirmButtonColor: "#DD6B55", - confirmButtonText: "Yes, delete it!", - closeOnConfirm: false - }, - () => { - user = {username: user} - $.ajax({ - type: "POST", - url: "/api/user/remove", - dataType: "json", - data: JSON.stringify(user), - success: (resp) => { - if (resp.success === true) { - swal("Deleted!", resp.data, "success"); - } - } - }) - });*/ - - this.props.listUsers(); + ReactSwalDanger.fire({ + title: "Are you sure?", + html:

User {user} will be deleted!

, + type: "question", + showCancelButton: true, + confirmButtonText: "Yes, delete it!", + showLoaderOnConfirm: true, + preConfirm: () => { + return new Promise((resolve, reject) => { + user = {username: user}; + $.ajax({ + type: "POST", + url: "/api/user/remove", + dataType: "json", + data: JSON.stringify(user), + success: (resp) => { + if (resp.success === true) { + resolve(resp.data); + } else { + reject("Unknown error"); + } + }, + error: () => { + reject("Unknown error"); + } + }); + }); + } + }).then((result) => { + if (result.value) { + ReactSwalNormal.fire({ + title: "Deleted!", + text: result.value, + type: "success" + }); + this.props.listUsers(); + } + }).catch((result) => { + ReactSwalNormal.fire({ + title: "An error occurred!", + text: result, + type: "error" + }); + }); } diff --git a/ui/js/customSwal.js b/ui/js/customSwal.js index 71ed340..a0c7df4 100644 --- a/ui/js/customSwal.js +++ b/ui/js/customSwal.js @@ -6,7 +6,9 @@ const ReactSwalTemp = ReactSwal.mixin({ confirmButtonClass: "swal-btn btn-primary", cancelButtonClass: "swal-btn btn-secondary", customClass: "swal-design", - buttonsStyling: false + buttonsStyling: false, + + allowOutsideClick: () => !ReactSwalDanger.isLoading() }); export const ReactSwalNormal = ReactSwalTemp.mixin({ diff --git a/ui/scss/customizations/sweetalert.scss b/ui/scss/customizations/sweetalert.scss index da1203b..b285764 100644 --- a/ui/scss/customizations/sweetalert.scss +++ b/ui/scss/customizations/sweetalert.scss @@ -9,61 +9,40 @@ border-radius: 0; } -/*.swal2-popup .swal2-actions.swal2-loading .swal2-confirm { - width: 2.5em; - height: 2.5em; - margin: .46875em; - padding: 0; - border: .25em solid transparent; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: transparent; - border-radius: 100%; - border-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - background-color: transparent !important; - color: transparent; - cursor: default; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal; - animation: swal2-rotate-loading 1.5s linear 0s infinite normal; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -}*/ - -.swal2-popup .swal2-actions.swal2-loading { - .swal2-confirm { - width: 2.5em; - height: 2.5em; - margin: .46875em; - padding: 0; - border-radius: 100%; - background-color: transparent !important; - color: transparent; - cursor: default; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal; - animation: swal2-rotate-loading 1.5s linear 0s infinite normal; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - background-color: rgb(221, 107, 85); - border: .25em solid transparent; - border-right-color: rgb(221, 107, 85); - border-left-color: rgb(221, 107, 85); - display: flex; +.swal2-popup { + .swal2-content { + text-align: center; } - :not(.swal2-styled).swal2-confirm::after { - display: none; + .swal2-actions.swal2-loading { + .swal2-confirm { + width: 2.5em; + height: 2.5em; + margin: .46875em; + padding: 0; + border-radius: 100%; + background-color: transparent !important; + color: transparent; + cursor: default; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal; + animation: swal2-rotate-loading 1.5s linear 0s infinite normal; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: rgb(221, 107, 85); + border: .25em solid transparent; + border-right-color: rgb(221, 107, 85); + border-left-color: rgb(221, 107, 85); + display: flex; + } + + :not(.swal2-styled).swal2-confirm::after { + display: none; + } } }