Fix styling for mail and generating images, add copy button, add images
This commit is contained in:
Arkadiusz Wieczorek
parent
6e121234f1
commit
9a1287c35b
|
|
@ -29,7 +29,7 @@ h1 {
|
|||
}
|
||||
|
||||
&__content {
|
||||
height: 70vh;
|
||||
height: 50vh;
|
||||
overflow-y: scroll;
|
||||
padding: 1rem 2rem;
|
||||
color: $black-color;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Explainers } from './explainers';
|
|||
import { ParsedAnswers } from './parse-answers';
|
||||
import { v } from './verbs';
|
||||
import './email-content.scss';
|
||||
import { Fragment } from 'react';
|
||||
import { Fragment, useState } from 'react';
|
||||
|
||||
declare var PLUGIN_NAME: string;
|
||||
declare var PLUGIN_URL: string;
|
||||
|
|
@ -28,18 +28,26 @@ export default function EmailContent({
|
|||
.reduce((a, b) => a.concat(b), [])
|
||||
)
|
||||
).map((explainer_key) => Explainers[explainer_key]);
|
||||
const [copied, setCopy] = useState<boolean>(false);
|
||||
|
||||
function copyTextToClipboard() {
|
||||
// Should be changed in the future to Clipboard API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write#browser_compatibility)
|
||||
let r = document.createRange();
|
||||
r.selectNode(document.querySelector('.mail-container__content'));
|
||||
window.getSelection().addRange(r);
|
||||
document.execCommand('copy');
|
||||
window.getSelection().removeAllRanges();
|
||||
setCopy(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="generator-container">
|
||||
<h1>Treść maila</h1>
|
||||
<div className="mail-container">
|
||||
<div className="mail-container__header">
|
||||
<div className="mail-container__header--control">
|
||||
<button>Kopiuj</button>
|
||||
<div className="mail-container__header--control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
|
||||
<article className="mail-container__content">
|
||||
<p>Dzień dobry,</p>
|
||||
<p>
|
||||
|
|
@ -69,6 +77,11 @@ export default function EmailContent({
|
|||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<div className="buttons-container">
|
||||
<button className="sv_next_btn" onClick={() => copyTextToClipboard()}>
|
||||
{copied ? 'Skopiowano!' : 'Kopiuj'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,10 +11,16 @@ h2 {
|
|||
}
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
width: 100%;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 2rem 0;
|
||||
margin: 2rem 0 1rem;
|
||||
max-height: 45vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: clip;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.generator-container {
|
||||
|
|
@ -39,18 +45,16 @@ h2 {
|
|||
}
|
||||
|
||||
.browser {
|
||||
height: 9.667rem;
|
||||
width: 16rem;
|
||||
height: 8.667rem;
|
||||
font-weight: 800 !important;
|
||||
// box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
|
||||
color: $disabled-grey !important;
|
||||
border: 1px solid $disabled-grey;
|
||||
background-image: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
|
||||
animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
|
||||
|
||||
&--filled {
|
||||
background-size: contain;
|
||||
background-position-y: 18px;
|
||||
background-size: 100%;
|
||||
background-position-y: 19px;
|
||||
animation: none;
|
||||
|
||||
.browser__header {
|
||||
|
|
@ -83,6 +87,9 @@ h2 {
|
|||
font-weight: 400;
|
||||
padding-left: 0.25rem;
|
||||
color: #000;
|
||||
overflow: visible;
|
||||
word-break: break-all;
|
||||
inline-size: 10rem;
|
||||
}
|
||||
|
||||
&--controls {
|
||||
|
|
@ -92,6 +99,6 @@ h2 {
|
|||
}
|
||||
|
||||
&__content {
|
||||
height: 7.667rem;
|
||||
height: 6.667rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@ export default function ScreenshotGenerator({
|
|||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
response = await (await pollTask(path)).json();
|
||||
setImages((response as screenshotTask)?.images);
|
||||
document.querySelector('.images').scrollTo({
|
||||
top: document.querySelector('.images').scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
|
||||
if (response.status === taskState.FINISHED) {
|
||||
|
|
@ -117,6 +121,7 @@ export default function ScreenshotGenerator({
|
|||
setTaskId(urlArr[urlArr.length - 1]);
|
||||
const response = await subscribeTask(task.url);
|
||||
setImages(response.images);
|
||||
console.log('response.images', response.images);
|
||||
console.log('output', response);
|
||||
}}
|
||||
>
|
||||
|
|
@ -130,12 +135,10 @@ export default function ScreenshotGenerator({
|
|||
<Fragment>
|
||||
<h1>Przygotowujemy zrzuty ekranów</h1>
|
||||
<div className="container">
|
||||
<h2>To może chwilkę zająć</h2>
|
||||
<h2>To może chwilkę zająć...</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
|
||||
laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
|
||||
vel minus aliquid incidunt consequatur illo velit dolorem error
|
||||
exercitationem tempora?
|
||||
Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę i przygotowuje
|
||||
zrzuty ekranów narzędzi deweloperskich.
|
||||
</p>
|
||||
|
||||
<div className="images">
|
||||
|
|
@ -150,7 +153,7 @@ export default function ScreenshotGenerator({
|
|||
>
|
||||
<div className="browser__header">
|
||||
<div className="browser__header--address-bar">
|
||||
{screenshot.url}
|
||||
{screenshot.url.split('-').slice(-2).join('-')}
|
||||
</div>
|
||||
<div className="browser__header--controls">· · ·</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user