reply modal design

2026-08-03 07:41:04 +02:00 · 2023-03-17 14:35:03 +01:00
parent 4db61aad23
commit 42ddbaece6
5 changed files with 352 additions and 11 deletions
@@ -0,0 +1,290 @@
+import React from 'react';
+import useBoardStore from '../useBoardStore';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+import Draggable from 'react-draggable';
+
+
+const StyledModal = styled(Modal)`
+  .hide-modal-overlay {
+    display: none;
+  }
+
+  .modal-content {
+    position: fixed;
+    top: calc(50% - 150px);
+    left: calc(50% - 150px);
+    display: block;
+    padding: 2px;
+    font-size: 10pt;
+    border-left: none;
+    border-top: none;
+  }
+
+  .modal-header {
+    font-size: 10pt;
+    text-align: center;
+    margin-bottom: 1px;
+    padding: 0;
+    height: 18px;
+    line-height: 18px;
+    cursor: move;
+    font-weight: 700;
+  }
+
+  .icon {
+    all: unset;
+    float: right;
+    cursor: pointer;
+    margin-bottom: -4px;
+    width: 18px;
+    height: 18px;
+    border: none;
+  }
+
+  #name {
+    border: 1px solid #aaa;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10pt;
+    outline: medium none;
+    width: 298px;
+    padding: 2px;
+  }
+
+  textarea {
+    min-width: 296px;
+    float: left;
+    font-size: 10pt;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  #captcha-container {
+    position: relative;
+    clear: both;
+    width: 302px;
+    overflow: hidden;
+    margin-bottom: 3px;
+  }
+
+  #response {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 11px;
+    height: 18px;
+    margin: 0px;
+    padding: 0px 2px;
+    font-family: monospace;
+    vertical-align: middle;
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    margin-top: 2px;
+    position: relative;
+    display: block;
+  }
+
+  #next {
+    float: right;
+    margin: 0;
+    width: 75px;
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .modal-content {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }
+
+        .modal-header {
+          background-color: #ea8;
+          color: #800;
+          border: 1px solid #800;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_red.png);
+        }
+
+        span {
+          color: maroon;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .modal-content {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }
+
+        .modal-header {
+          background-color: #98e;
+          color: #000;
+          border: 1px solid #000;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_blue.png);
+        }
+
+        span {
+          color: #000;
+        }`;
+
+      case 'Futaba':
+        return `
+        .modal-content {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }
+
+        .modal-header {
+          background-color: #ea8;
+          color: #800;
+          border: 1px solid #800;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_red.png);
+        }
+
+        span {
+          color: maroon;
+        }`;
+
+      case 'Burichan':
+        return `
+        .modal-content {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }
+
+        .modal-header {
+          background-color: #98e;
+          color: #000;
+          border: 1px solid #000;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_blue.png);
+        }
+
+        span {
+          color: #000;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .modal-content {
+          background-color: #282a2e;
+          border: 1px solid #111;
+        }
+
+        .modal-header {
+          background-color: #282a2e;
+          color: #c5c8c6;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_dark.png);
+        }
+
+        #name {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          border: 1px solid #515151;
+          width: 296px;
+        }
+
+        textarea {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          border: 1px solid #515151;
+        }
+
+        #response {
+          background-color: #282a2e;
+          color: #c5c8c6;
+          outline: none;
+          border: 1px solid #515151;
+        }
+
+        span {
+          color: #c5c8c6;
+        }
+        
+        #next {
+          filter: brightness(80%);
+        }`;
+
+      case 'Photon':
+        return `
+        .modal-content {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+        }
+
+        .modal-header {
+          background-color: #ddd;
+          color: #333;
+        }
+
+        .icon {
+          background-image: url(/assets/buttons/cross_photon.png);
+        }
+
+        span {
+          color: #333;
+        }`; 
+    }
+  }}
+`;
+
+
+const ReplyModal = ({ isOpen, closeModal }) => {
+  const selectedStyle = useBoardStore(state => state.selectedStyle);
+
+  const handleCloseModal = () => {
+    closeModal();
+  };
+
+  return (
+    <StyledModal
+    isOpen={isOpen}
+    onRequestClose={closeModal}
+    contentLabel="Reply Modal"
+    shouldCloseOnEsc={false}
+    shouldCloseOnOverlayClick={false}
+    selectedStyle={selectedStyle}
+    overlayClassName="hide-modal-overlay">
+      <Draggable handle=".modal-header">
+        <div className="modal-content">
+          <div className="modal-header">
+            Reply to Thread
+            <button className="icon" onClick={handleCloseModal} title="close" />
+          </div>
+          <div id="form">
+            <div>
+              <input id="name" type="text" placeholder="Name" disabled></input>
+            </div>
+            <div>
+              <textarea rows="4" placeholder="Comment" wrap="soft" disabled></textarea>
+            </div>
+            <div>
+              <span>Challenge 1 of 3</span>
+              <button id="next">Next</button>
+            </div>
+          </div>
+        </div>
+      </Draggable>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default ReplyModal;