From 70d79a33baa9a70c1cb3ab758958664b54586f96 Mon Sep 17 00:00:00 2001 From: saragajic11 Date: Tue, 20 Aug 2024 16:01:36 +0200 Subject: [PATCH] Updates to acom widget UI --- acrobat/blocks/acom-widget/acom-widget.css | 57 +++++++++++++++++----- acrobat/blocks/acom-widget/acom-widget.js | 18 ++++++- acrobat/img/icons/upload-icon.svg | 11 +++++ 3 files changed, 71 insertions(+), 15 deletions(-) create mode 100644 acrobat/img/icons/upload-icon.svg diff --git a/acrobat/blocks/acom-widget/acom-widget.css b/acrobat/blocks/acom-widget/acom-widget.css index fbed218b..d8d951c5 100644 --- a/acrobat/blocks/acom-widget/acom-widget.css +++ b/acrobat/blocks/acom-widget/acom-widget.css @@ -9,10 +9,6 @@ color: initial; } -.acom-center.dragging { - border: 3px #7396ff solid; -} - .acom-legal { margin-top: 30px; font-size: 14px; @@ -28,7 +24,6 @@ min-width: 56px; background-image: url('../../img/icons/widget-icon.png'); background-size: cover; - margin-bottom: 24px; display: inline-flex; } @@ -85,7 +80,8 @@ } .acom-wrapper { - max-width: 1349px; + width: 75%; + max-width: 75%; margin-left: auto; margin-right: auto; display: flex; @@ -93,15 +89,17 @@ flex-direction: column; justify-content: center; border-radius: 20px; - border-style: dashed; - border-color: #d5d5d5; - border-width: 3px; + border: 3px dashed #d5d5d5; position: relative; background-color: #fff; - padding: 25px; min-height: 560px; } +.acom-wrapper.dragging { + background-color: #ecf5ff; + border: 3px #0265dc solid; +} + .acom-row { display: flex; justify-content: space-between; @@ -128,7 +126,23 @@ color: white; white-space: nowrap; font-weight: 700; - display: inline-flex; + display: flex; + justify-content: center; + align-items: center; + width: 30%; +} + +.acom-cta::before { + content: ''; + background-image: url('/acrobat/img/icons/upload-icon.svg'); + background-repeat: no-repeat; + background-size: 32px 28px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; + width: 32px; + height: 28px; } .acom-cta:hover { @@ -157,10 +171,27 @@ margin-bottom: 16px; } +.acom-header { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 24px; +} + +.acom-title { + font-size: 30px; + font-weight: bold; + color: black; + margin-left: 15px; +} + @media screen and (min-width: 768px) { .acom-container { - padding-left: 133px; - padding-right: 133px; + align-items: center; + display: flex; + flex: 1 1 55%; + flex-direction: row; + padding: 48px 0 48px 48px; } } diff --git a/acrobat/blocks/acom-widget/acom-widget.js b/acrobat/blocks/acom-widget/acom-widget.js index 839360ee..21985d75 100644 --- a/acrobat/blocks/acom-widget/acom-widget.js +++ b/acrobat/blocks/acom-widget/acom-widget.js @@ -129,6 +129,10 @@ const dropFiles = (ev, verb, errorState) => { } }; +const setDraggingClass = (widget, shouldToggle) => { + shouldToggle ? widget.classList.add('dragging') : widget.classList.remove('dragging'); +} + export default async function init(element) { const children = element.querySelectorAll(':scope > div'); const VERB = element.classList[1]; @@ -143,11 +147,14 @@ export default async function init(element) { const widgetRow = createTag('div', { class: 'acom-row' }); const widgetLeft = createTag('div', { class: 'acom-col' }); const widgetRight = createTag('div', { class: 'acom-col' }); + const widgetHeader = createTag('div', { class: 'acom-header' }); const widgetIcon = createTag('div', { class: 'acom-icon' }); + const widgetTitle = createTag('div', { class: 'acom-title' }, 'Acrobat'); const widgetCopy = createTag('p', { class: 'acom-copy' }, 'Drag and drop a PDF to use the Acrobat PDF form filler.'); const widgetButton = createTag('label', { for: 'file-upload', class: 'acom-cta' }, 'Select a file'); const button = createTag('input', { type: 'file', id: 'file-upload', class: 'hide' }); const errorState = createTag('div', { class: 'hide' }); + const widgetImage = createTag('img', { class: 'acom-image', src: children[1].querySelector('img')?.src }); const legal = createTag('p', { class: 'acom-legal' }, 'Your file will be securely handled by Adobe servers and deleted unless you sign in to save it. By using this service, you agree to the Adobe Terms of Use and Privacy Policy.'); const iconSecurity = createTag('div', { class: 'security-icon' }); @@ -156,8 +163,10 @@ export default async function init(element) { widget.append(widgetContainer); widgetContainer.append(widgetRow); + widgetRight.append(widgetImage); widgetRow.append(widgetLeft, widgetRight); - widgetLeft.append(widgetIcon, widgetHeading, widgetCopy, errorState, widgetButton, button); + widgetHeader.append(widgetIcon, widgetTitle); + widgetLeft.append(widgetHeader, widgetHeading, widgetCopy, errorState, widgetButton, button); element.append(widget, footer); @@ -170,10 +179,15 @@ export default async function init(element) { widget.addEventListener('dragover', (e) => { e.preventDefault(); - // make a function that does the CSS for drag state + setDraggingClass(widget, true); + }); + + widget.addEventListener('dragleave', (file) => { + setDraggingClass(widget, false); }); widget.addEventListener('drop', (e) => { dropFiles(e, VERB, errorState); + setDraggingClass(widget, false); }); } diff --git a/acrobat/img/icons/upload-icon.svg b/acrobat/img/icons/upload-icon.svg new file mode 100644 index 00000000..ff1d8e4f --- /dev/null +++ b/acrobat/img/icons/upload-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +