pastebin: add dialog to show result
This commit is contained in:
parent
4238027024
commit
c969887ecf
33
package-lock.json
generated
33
package-lock.json
generated
|
@ -2645,6 +2645,12 @@
|
||||||
"strip-eof": "^1.0.0"
|
"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": {
|
"expand-brackets": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
|
||||||
|
@ -5659,6 +5665,24 @@
|
||||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
|
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
|
||||||
"dev": true
|
"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": {
|
"read-pkg": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz",
|
"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==",
|
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
|
||||||
"dev": true
|
"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": {
|
"watchpack": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
"raw-loader": "^4.0.0",
|
"raw-loader": "^4.0.0",
|
||||||
"react": "^16.12.0",
|
"react": "^16.12.0",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
|
"react-modal": "^3.11.1",
|
||||||
"sass-loader": "^8.0.2",
|
"sass-loader": "^8.0.2",
|
||||||
"style-loader": "^1.1.3",
|
"style-loader": "^1.1.3",
|
||||||
"url-loader": "^3.0.0",
|
"url-loader": "^3.0.0",
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
|
import ReactModal from "react-modal"
|
||||||
import ContentEditable from "./util/contentEditable"
|
import ContentEditable from "./util/contentEditable"
|
||||||
|
|
||||||
class Pastebin extends React.Component
|
class Pastebin extends React.Component
|
||||||
|
@ -7,6 +8,8 @@ class Pastebin extends React.Component
|
||||||
@state =
|
@state =
|
||||||
text: ""
|
text: ""
|
||||||
pasting: false
|
pasting: false
|
||||||
|
dialogMsg: null
|
||||||
|
dialogOpen: false
|
||||||
|
|
||||||
onEditTextUpdate: (ev) =>
|
onEditTextUpdate: (ev) =>
|
||||||
console.log ev.target.value
|
console.log ev.target.value
|
||||||
|
@ -27,12 +30,22 @@ class Pastebin extends React.Component
|
||||||
'content-type': 'text/plain'
|
'content-type': 'text/plain'
|
||||||
body: @state.text
|
body: @state.text
|
||||||
console.log resp
|
console.log resp
|
||||||
# Ok reponse
|
txt = await resp.text()
|
||||||
|
console.log txt
|
||||||
if resp.ok
|
if resp.ok
|
||||||
# Body is the paste url
|
msg =
|
||||||
url = await resp.text()
|
<a href={txt} target="_blank">
|
||||||
console.log url
|
https://{window.location.hostname}{txt}
|
||||||
# TODO: show a dialog or something
|
</a>
|
||||||
|
else
|
||||||
|
msg = txt
|
||||||
|
|
||||||
|
@setState
|
||||||
|
text: ""
|
||||||
|
# Open dialog
|
||||||
|
dialogOpen: true
|
||||||
|
dialogMsg: msg
|
||||||
|
|
||||||
# Reset the button
|
# Reset the button
|
||||||
@setState
|
@setState
|
||||||
pasting: false
|
pasting: false
|
||||||
|
@ -53,6 +66,21 @@ class Pastebin extends React.Component
|
||||||
Paste
|
Paste
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<ReactModal
|
||||||
|
isOpen={@state.dialogOpen}
|
||||||
|
className="ReactModal__Content_My"
|
||||||
|
closeTimeoutMS={500}
|
||||||
|
>
|
||||||
|
<p>{@state.dialogMsg}</p>
|
||||||
|
<div className="dialog-buttons">
|
||||||
|
<button
|
||||||
|
className="button-blue"
|
||||||
|
onClick={(e) => @setState { dialogOpen: false }}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ReactModal>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
export default Pastebin
|
export default Pastebin
|
34
src/web/styles/buttons.scss
Normal file
34
src/web/styles/buttons.scss
Normal file
|
@ -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;
|
||||||
|
}
|
54
src/web/styles/dialog.scss
Normal file
54
src/web/styles/dialog.scss
Normal file
|
@ -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});
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,6 +2,7 @@
|
||||||
@import './vars.scss';
|
@import './vars.scss';
|
||||||
// -- Styles --
|
// -- Styles --
|
||||||
@import './contentEditable.scss';
|
@import './contentEditable.scss';
|
||||||
|
@import './dialog.scss';
|
||||||
@import './home.scss';
|
@import './home.scss';
|
||||||
@import './pastebin.scss';
|
@import './pastebin.scss';
|
||||||
@import './buttons.scss';
|
@import './buttons.scss';
|
||||||
|
@ -9,4 +10,25 @@
|
||||||
body, html {
|
body, html {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 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;
|
||||||
}
|
}
|
|
@ -1,9 +1,17 @@
|
||||||
|
// Material shadows
|
||||||
|
// <https://codepen.io/sdthornton/pen/wBZdXq>
|
||||||
|
$shadow-large: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||||
// Configurations for contentEditable
|
// Configurations for contentEditable
|
||||||
$editable-color: rgba(0, 0, 0, 0.1);
|
$editable-color: rgba(0, 0, 0, 0.1);
|
||||||
$editable-color-active: rgba(0, 0, 0, 0.2);
|
$editable-color-active: rgba(0, 0, 0, 0.2);
|
||||||
$editable-radius: 5px;
|
$editable-radius: 5px;
|
||||||
// Button dimensions
|
// Button dimensions
|
||||||
$button-radius: 5px;
|
$button-radius: 5px;
|
||||||
|
// Dialogs
|
||||||
|
$dialog-width: 500px;
|
||||||
|
$dialog-height: 200px;
|
||||||
|
$dialog-margin: 50px;
|
||||||
|
$dialog-radius: 5px;
|
||||||
// Dimensions of main content card
|
// Dimensions of main content card
|
||||||
$content-padding: 100px;
|
$content-padding: 100px;
|
||||||
$content-width: 1000px;
|
$content-width: 1000px;
|
||||||
|
|
Loading…
Reference in a new issue