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"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
<a href={txt} target="_blank">
|
||||
https://{window.location.hostname}{txt}
|
||||
</a>
|
||||
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
|
||||
</button>
|
||||
</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>
|
||||
|
||||
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';
|
||||
// -- 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;
|
||||
}
|
||||
|
|
@ -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
|
||||
$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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue