Fix styling for mail and generating images, add copy button, add images

This commit is contained in:
Arkadiusz Wieczorek 2022-07-03 14:28:42 +02:00
parent 6e121234f1
commit 9a1287c35b
4 changed files with 45 additions and 22 deletions

View File

@ -29,7 +29,7 @@ h1 {
}
&__content {
height: 70vh;
height: 50vh;
overflow-y: scroll;
padding: 1rem 2rem;
color: $black-color;

View File

@ -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>
);

View File

@ -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;
}
}

View File

@ -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>