From c969887ecf058fd6be43bd8926ec9d75cc5866a6 Mon Sep 17 00:00:00 2001 From: Peter Cai Date: Tue, 18 Feb 2020 13:48:54 +0800 Subject: [PATCH] pastebin: add dialog to show result --- package-lock.json | 33 +++++++++++++++++++++++ package.json | 1 + src/web/pastebin.coffee | 38 ++++++++++++++++++++++---- src/web/styles/buttons.scss | 34 +++++++++++++++++++++++ src/web/styles/dialog.scss | 54 +++++++++++++++++++++++++++++++++++++ src/web/styles/index.scss | 22 +++++++++++++++ src/web/styles/vars.scss | 8 ++++++ 7 files changed, 185 insertions(+), 5 deletions(-) create mode 100644 src/web/styles/buttons.scss create mode 100644 src/web/styles/dialog.scss diff --git a/package-lock.json b/package-lock.json index 942a2fa..e23bfaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2645,6 +2645,12 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npm.taobao.org/exenv/download/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=", + "dev": true + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -5659,6 +5665,24 @@ "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==", "dev": true }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npm.taobao.org/react-lifecycles-compat/download/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I=", + "dev": true + }, + "react-modal": { + "version": "3.11.1", + "resolved": "https://registry.npm.taobao.org/react-modal/download/react-modal-3.11.1.tgz", + "integrity": "sha1-Kg1od8npjxI5OeqS0rtK1/paF/k=", + "dev": true, + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz", @@ -7204,6 +7228,15 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==", "dev": true }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npm.taobao.org/warning/download/warning-4.0.3.tgz", + "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=", + "dev": true, + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index b6f989f..ea3f000 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "raw-loader": "^4.0.0", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-modal": "^3.11.1", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "url-loader": "^3.0.0", diff --git a/src/web/pastebin.coffee b/src/web/pastebin.coffee index 642a22a..50cc776 100644 --- a/src/web/pastebin.coffee +++ b/src/web/pastebin.coffee @@ -1,4 +1,5 @@ import React from "react" +import ReactModal from "react-modal" import ContentEditable from "./util/contentEditable" class Pastebin extends React.Component @@ -7,6 +8,8 @@ class Pastebin extends React.Component @state = text: "" pasting: false + dialogMsg: null + dialogOpen: false onEditTextUpdate: (ev) => console.log ev.target.value @@ -27,12 +30,22 @@ class Pastebin extends React.Component 'content-type': 'text/plain' body: @state.text console.log resp - # Ok reponse + txt = await resp.text() + console.log txt if resp.ok - # Body is the paste url - url = await resp.text() - console.log url - # TODO: show a dialog or something + msg = + + https://{window.location.hostname}{txt} + + else + msg = txt + + @setState + text: "" + # Open dialog + dialogOpen: true + dialogMsg: msg + # Reset the button @setState pasting: false @@ -53,6 +66,21 @@ class Pastebin extends React.Component Paste + +

{@state.dialogMsg}

+
+ +
+ export default Pastebin \ No newline at end of file diff --git a/src/web/styles/buttons.scss b/src/web/styles/buttons.scss new file mode 100644 index 0000000..9827218 --- /dev/null +++ b/src/web/styles/buttons.scss @@ -0,0 +1,34 @@ +.content-buttons { + margin-top: $content-radius; +} + +@mixin base-button { + border: none; + outline: none; + color: white; + padding: 10px 24px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: $button-radius; + transition: background-color 0.2s linear; + + &:active, &:hover, &::-moz-focus-inner { + outline: none; + border: none; + } + + &:disabled, &:disabled:hover { + background-color: #757575; + } +} + +.button-blue { + @include base-button; + background-color: #2196f3; +} + +.button-blue:hover { + background-color: #64b5f6; +} \ No newline at end of file diff --git a/src/web/styles/dialog.scss b/src/web/styles/dialog.scss new file mode 100644 index 0000000..cdfb992 --- /dev/null +++ b/src/web/styles/dialog.scss @@ -0,0 +1,54 @@ +.ReactModal__Content_My { + display: flex; + flex-flow: column; + position: absolute; + width: $dialog-width; + height: $dialog-height; + left: calc((100vw - #{$dialog-width}) / 2); + top: $dialog-margin; + background-color: white; + outline: none; + border: none; + border-radius: $dialog-radius; + box-shadow: $shadow-large; + padding: $dialog-radius * 3; + + p { + display: inline-block; + flex: 1; + box-sizing: border-box; + white-space: pre-wrap; + overflow-wrap: break-word; + word-wrap: break-word; + } + + .dialog-buttons { + text-align: right; + } +} + +.ReactModal__Overlay { + opacity: 0; + transition: opacity 0.5s ease-in-out; + + .ReactModal__Content_My { + transform: translateY(-#{$dialog-height}); + transition: transform 0.5s ease-in-out; + } +} + +.ReactModal__Overlay--after-open { + opacity: 1; + + .ReactModal__Content_My { + transform: none; + } +} + +.ReactModal__Overlay--before-close { + opacity: 0; + + .ReactModal__Content_My { + transform: translateY(-#{$dialog-height}); + } +} \ No newline at end of file diff --git a/src/web/styles/index.scss b/src/web/styles/index.scss index 23fd5e1..b4739ae 100644 --- a/src/web/styles/index.scss +++ b/src/web/styles/index.scss @@ -2,6 +2,7 @@ @import './vars.scss'; // -- Styles -- @import './contentEditable.scss'; +@import './dialog.scss'; @import './home.scss'; @import './pastebin.scss'; @import './buttons.scss'; @@ -9,4 +10,25 @@ body, html { margin: 0px; padding: 0px; +} + +a { + color: #00bcd4; +} + +a:link { + text-decoration: none; +} + +a:visited { + color: #00bcd4; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a:active { + text-decoration: underline; } \ No newline at end of file diff --git a/src/web/styles/vars.scss b/src/web/styles/vars.scss index 3f43626..5679b2a 100644 --- a/src/web/styles/vars.scss +++ b/src/web/styles/vars.scss @@ -1,9 +1,17 @@ +// Material shadows +// +$shadow-large: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); // Configurations for contentEditable $editable-color: rgba(0, 0, 0, 0.1); $editable-color-active: rgba(0, 0, 0, 0.2); $editable-radius: 5px; // Button dimensions $button-radius: 5px; +// Dialogs +$dialog-width: 500px; +$dialog-height: 200px; +$dialog-margin: 50px; +$dialog-radius: 5px; // Dimensions of main content card $content-padding: 100px; $content-width: 1000px;