agregando modal de confirmacion para convertirse en proyectistas

DemocraciaEnRed · Jul 4, 2023 · 1feb095 · 1feb095
1 parent 0b68e7d
commit 1feb095
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/ext/lib/site/banner-proyectistas/component.js b/ext/lib/site/banner-proyectistas/component.js
@@ -2,6 +2,9 @@ import React, { Component } from 'react'
 import { Link } from 'react-router'
 import userConnector from 'lib/site/connectors/user'
 import config from 'lib/config'
+import NanoModal from 'nanomodal';
+
+let modalRef = null
 
 class BannerProyectistas extends Component {
   constructor (props) {
@@ -11,6 +14,37 @@ class BannerProyectistas extends Component {
     }
   }
 
+  componentDidMount() {
+    // Crea una instancia de NanoModal y asigna su referencia al ref del componente
+    modalRef = NanoModal("¿Querés inscribirte como proyectista?", {
+      classes: 'modalContent',
+      overlayClose: true, // Can't close the modal by clicking on the overlay.
+      buttons: [{
+        text: "SI",
+        handler: (modal) => {
+          // do something...
+          this.onButtonPressed()
+          modal.hide();
+        },
+        classes: 'boton boton-primary',
+      }, {
+        text: "NO",
+        classes: 'boton boton-error',
+        handler: "hide"
+      }],
+    });
+    modalRef.customShow = function (defaultShow, modalAPI) {
+      modalAPI.overlay.el.style.position = 'fixed'
+      modalAPI.overlay.el.style.display = 'block';
+      modalAPI.modal.el.style.display = 'block';
+    };
+  }
+
+  openModal = () => {
+    modalRef.customShow(modalRef.show, modalRef);
+    // Abre el modal cuando se hace clic en el botón
+  }
+
   onButtonPressed = () => {
     // send a post to /api/settings/proyectistas/join using fetch
     let obj = {apa: 'apa'}
@@ -71,7 +105,7 @@ class BannerProyectistas extends Component {
           }
           if (this.props.user.state.fulfilled && !this.props.user.state.value.proyectista && !buttonPressed) {
             return (
-              <button type="button" onClick={this.onButtonPressed} className="boton-ser-proyectista">QUIERO SER PROYECTISTA</button>
+              <button type="button" onClick={this.openModal} className="boton-ser-proyectista">QUIERO SER PROYECTISTA</button>
             )
           }
         })()

diff --git a/ext/lib/site/banner-proyectistas/styles.styl b/ext/lib/site/banner-proyectistas/styles.styl
@@ -102,3 +102,46 @@
     img
       width:25px;
       margin-right:10px;
+
+
+.modalContent
+  position: fixed
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding:0;
+  width: 40%;
+  text-align: center;
+  margin: 0
+
+.nanoModalContent
+  margin: 32px 56px;
+
+
+.nanoModalButtons
+  display: flex!important;
+  justify-content: space-between;
+
+.boton
+  margin:24px;
+  border: none;
+  border-radius: 5px;
+  padding: 15px 30px;
+  display: inline-block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font: inherit!important;
+.boton-primary
+  color: #fff
+  box-shadow: 0px 4px 4px rgba(255,255,255,0.25), inset -6px -6px 10px rgba(140,3,117,0.5), inset 6px 6px 10px rgba(255,136,201,0.5)
+  background: #bf4588
+  color: #fff
+  &:hover
+    color: #fff
+    background-color: #9c3b6e
+.boton-error
+  background: #aaaaaa
+  color: #fff
+  &:hover
+    color: #fff
+    background-color: #898989