N°3723 Restyle attachment drag and drop and add a better user experience

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

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('<div id="ibo-attachment--upload-file">');
+		$this->oPage->add('<div id="ibo-attachment--upload-file--upload-button-container">');
 		$this->oPage->add(Dict::S('Attachments:AddAttachment'));
 		$oAddButton = FileSelectUIBlockFactory::MakeStandard('file', 'file');
 		$oAddButton->SetShowFilename(false);
 		$this->oPage->AddUiBlock($oAddButton);
 		$this->oPage->add('<span style="display:none;" id="attachment_loading"><img src="../images/indicator.gif"></span> '.$sMaxUploadLabel);
+		$this->oPage->add('</div>');
+		$this->oPage->add('<div class="ibo-attachment--upload-file--drop-zone-hint ibo-svg-illustration--container">');
+		$this->oPage->add(file_get_contents(utils::GetAbsoluteUrlAppRoot().'images/illustrations/undraw_upload.svg'));
+		$this->oPage->add(Dict::S('UI:Attachments:DropYourFileHint').'</div>');
 		
 
 		$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('<input type="hidden" id="attachment_plugin" name="attachment_plugin"/>');
 		$this->oPage->add('</div>');
-
-		$this->oPage->add_style(<<<CSS
-.drag_in {
-	-webkit-box-shadow:inset 0 0 10px 2px #1C94C4;
-	box-shadow:inset 0 0 10px 2px #1C94C4;
-}
-CSS
-		);
 	}
 
 	protected function GetAttachmentContainerId($iAttachmentId)
@@ -354,9 +350,9 @@ CSS
 			null,
 			"btn_remove_".$iAttId);
 		$oButton->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(
 			<<<JS
 CombodoGlobalToolbox.InitTooltipFromMarkup($('#$sTrId [data-tooltip-content]'));
 JS
-
 		);
 		return  $aAttachmentLine;
 	}

dictionaries/ui/pages/en.dictionary.itop.attachments.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+// Navigation menu
+Dict::Add('EN US', 'English', 'English', array(
+	'UI:Attachments:DropYourFileHint' => 'Drop files anywhere in this area',
+));
+