From bdec220d7e91ef195cf848c2dcceae1aa2f0767f Mon Sep 17 00:00:00 2001 From: Stephen Abello Date: Wed, 17 Feb 2021 11:04:38 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B03723=20Restyle=20attachment=20drag=20and?= =?UTF-8?q?=20drop=20and=20add=20a=20better=20user=20experience?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/backoffice/pages/_attachments.scss | 52 +++++++++++++++++++ .../renderers.itop-attachments.php | 50 +++++++++--------- .../pages/en.dictionary.itop.attachments.php | 24 +++++++++ images/illustrations/undraw_upload.svg | 1 + 4 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 dictionaries/ui/pages/en.dictionary.itop.attachments.php create mode 100644 images/illustrations/undraw_upload.svg diff --git a/css/backoffice/pages/_attachments.scss b/css/backoffice/pages/_attachments.scss index f91530a38..c88b836e4 100644 --- a/css/backoffice/pages/_attachments.scss +++ b/css/backoffice/pages/_attachments.scss @@ -5,6 +5,18 @@ $ibo-attachment--datatable--line-height: $ibo-attachment--datatable--icon-previe $ibo-attachment--datatable--first-column--line-height: 0px !default; +$ibo-attachment--drag-in--border: 2px $ibo-color-grey-400 dashed !default; +$ibo-attachment--upload-file--drop-zone-hint--max-height: 200px !default; +$ibo-attachment--upload-file--drop-zone-hint--margin: 22px 0px !default; +$ibo-attachment--upload-file--drop-zone-hint--color: $ibo-color-grey-700 !default; +$ibo-attachment--upload-file--drop-zone-hint--image--margin-bottom: 5px !default; + +$ibo-attachment--tab-header--drop-in--background-color: $ibo-color-blue-200 !default; +$ibo-attachment--tab-header--drop-in--color: $ibo-color-blue-800 !default; +$ibo-attachment--tab-header--drop-in--icon--padding-left: 8px !default; +$ibo-attachment--tab-header--drop-in--icon--content: "\f382" !default; +$ibo-attachment--tab-header--drop-in--icon--color: $ibo-color-blue-600 !default; + #ibo-attachment--upload-file{ .ibo-input-file-select--container{ display: inline-block; @@ -20,4 +32,44 @@ $ibo-attachment--datatable--first-column--line-height: 0px !default; } .ibo-attachment--datatable tbody tr td:nth-child(1){ line-height: $ibo-attachment--datatable--first-column--line-height; +} + +.ibo-attachment--upload-file--drop-zone-hint{ + display: none; +} + +.ibo-drag-in { + border: $ibo-attachment--drag-in--border; + .ibo-attachment--upload-file--drop-zone-hint { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + max-height: $ibo-attachment--upload-file--drop-zone-hint--max-height; + margin: $ibo-attachment--upload-file--drop-zone-hint--margin; + color: $ibo-attachment--upload-file--drop-zone-hint--color; + > svg{ + margin-bottom: $ibo-attachment--upload-file--drop-zone-hint--image--margin-bottom; + } + } + + #ibo-attachment--upload-file--upload-button-container { + display: none; + } +} + +.ibo-tab-container--tab-header{ + &.ibo-drag-in{ + border: none; + background-color: $ibo-attachment--tab-header--drop-in--background-color; + color: $ibo-attachment--tab-header--drop-in--color; + > a::after{ + padding-left: $ibo-attachment--tab-header--drop-in--icon--padding-left; + font-family: "Font Awesome 5 Free"; + content: $ibo-attachment--tab-header--drop-in--icon--content; + font-weight: 900; + color: $ibo-color-blue-600; + } + } } \ No newline at end of file diff --git a/datamodels/2.x/itop-attachments/renderers.itop-attachments.php b/datamodels/2.x/itop-attachments/renderers.itop-attachments.php index f9261d0d9..d387d955d 100644 --- a/datamodels/2.x/itop-attachments/renderers.itop-attachments.php +++ b/datamodels/2.x/itop-attachments/renderers.itop-attachments.php @@ -184,11 +184,16 @@ abstract class AbstractAttachmentsRenderer $sFileTooBigLabel = Dict::Format('Attachments:Error:FileTooLarge', $sMaxUploadLabel); $sFileTooBigLabelForJS = addslashes($sFileTooBigLabel); $this->oPage->add('
'); + $this->oPage->add('
'); $this->oPage->add(Dict::S('Attachments:AddAttachment')); $oAddButton = FileSelectUIBlockFactory::MakeStandard('file', 'file'); $oAddButton->SetShowFilename(false); $this->oPage->AddUiBlock($oAddButton); $this->oPage->add(' '.$sMaxUploadLabel); + $this->oPage->add('
'); + $this->oPage->add('
'); + $this->oPage->add(file_get_contents(utils::GetAbsoluteUrlAppRoot().'images/illustrations/undraw_upload.svg')); + $this->oPage->add(Dict::S('UI:Attachments:DropYourFileHint').'
'); $this->oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/jquery.iframe-transport.js'); @@ -281,23 +286,22 @@ abstract class AbstractAttachmentsRenderer if (!bFiles) return; // Not dragging files - var dropZone = $('#file').closest('fieldset'); - if (!dropZone.is(':visible')) + window.dropZone = $('#file').closest('.ibo-tab'); + if (!IsElementVisibleToTheUser(dropZone[0])) { - // Hidden, but inside an inactive tab? Higlight the tab - var sTabId = dropZone.closest('.ui-tabs-panel').attr('aria-labelledby'); + // Hidden, but inside an inactive tab? Highlight the tab + var sTabId = dropZone.closest('.ibo-tab-container--tab-container').attr('aria-labelledby'); dropZone = $('#'+sTabId).closest('li'); } - timeout = window.dropZoneTimeout; - if (!timeout) { - dropZone.addClass('drag_in'); - } else { - clearTimeout(timeout); - } - window.dropZoneTimeout = setTimeout(function () { - window.dropZoneTimeout = null; - dropZone.removeClass('drag_in'); - }, 300); + + window.dropZone.addClass('ibo-drag-in'); + }); + + $(document).bind('dragleave dragend drop', function(){ + if(window.dropZone){ + window.dropZone.removeClass('ibo-drag-in'); + } + window.dropZone = null; }); // check if the attachments are used by inline images @@ -324,14 +328,6 @@ JS ); $this->oPage->p(''); $this->oPage->add('
'); - - $this->oPage->add_style(<<AddCSSClass('btn_hidden') - ->SetOnClickJsCode("RemoveAttachment('.$iAttId.');"); + ->SetOnClickJsCode("RemoveAttachment(".$iAttId.");"); - return BlockRenderer::RenderBlockTemplates($oButton); + return $oButton; } protected function GetDeleteAttachmentJs() @@ -535,13 +531,15 @@ class TableDetailsAttachmentsRenderer extends AbstractAttachmentsRenderer if ($bWithDeleteButton) { $sDeleteButton = $this->GetDeleteAttachmentButton($iAttachmentId); - $aAttachmentLine['delete'] = $sDeleteButton; + + $oBlockRenderer = new BlockRenderer($sDeleteButton); + $this->oPage->add_ready_script($oBlockRenderer->RenderJsInline($sDeleteButton::ENUM_JS_TYPE_ON_INIT)); + $aAttachmentLine['delete'] = $oBlockRenderer->RenderHtml(); } $this->oPage->add_ready_script( << 'Drop files anywhere in this area', +)); + diff --git a/images/illustrations/undraw_upload.svg b/images/illustrations/undraw_upload.svg new file mode 100644 index 000000000..11f947f79 --- /dev/null +++ b/images/illustrations/undraw_upload.svg @@ -0,0 +1 @@ + \ No newline at end of file