From df7493ff14f91208e38a18f7785e6b7e7bed7a18 Mon Sep 17 00:00:00 2001
From: Joan Sanchez <joan@verdnatura.es>
Date: Wed, 8 Jan 2020 17:03:08 +0100
Subject: [PATCH] Updated styles

---
 front/core/directives/droppable.scss     |  4 +-
 front/salix/components/app/style.scss    |  2 +-
 front/salix/components/layout/style.scss |  2 +
 modules/claim/front/dms/index/index.html | 53 +++++++++++++-----------
 modules/claim/front/dms/index/index.js   | 13 ++++++
 modules/claim/front/dms/index/style.scss |  9 ++--
 modules/claim/front/dms/locale/en.yml    |  2 -
 modules/claim/front/dms/locale/es.yml    |  5 ++-
 8 files changed, 54 insertions(+), 36 deletions(-)
 delete mode 100644 modules/claim/front/dms/locale/en.yml

diff --git a/front/core/directives/droppable.scss b/front/core/directives/droppable.scss
index 97e6f8a19..f2e18a3ad 100644
--- a/front/core/directives/droppable.scss
+++ b/front/core/directives/droppable.scss
@@ -11,11 +11,9 @@
 
 .vn-droppable,
 [vn-droppable] {
-    display: block;
-
     &.dropping {
         background-color: $color-hover-cd;
-        border-color: $color-bg-dark;
+        border-color: $color-font-secondary;
     }
 }
 
diff --git a/front/salix/components/app/style.scss b/front/salix/components/app/style.scss
index aab37c8a3..96d6a6193 100644
--- a/front/salix/components/app/style.scss
+++ b/front/salix/components/app/style.scss
@@ -7,7 +7,7 @@ vn-app {
     ui-view {
         display: block;
         box-sizing: border-box;
-        height: inherit;
+        height: 100%;
 
         &.ng-enter {
             animation-name: nothing, slideIn;
diff --git a/front/salix/components/layout/style.scss b/front/salix/components/layout/style.scss
index 9a9d903a6..b66c620ad 100644
--- a/front/salix/components/layout/style.scss
+++ b/front/salix/components/layout/style.scss
@@ -87,6 +87,8 @@ vn-layout {
         & > * {
             display: block;
             padding: $spacing-md;
+            box-sizing: border-box;
+            height: 100%
         }
         &.ng-enter {
             vn-side-menu {
diff --git a/modules/claim/front/dms/index/index.html b/modules/claim/front/dms/index/index.html
index bd6b9a21d..88d7931cf 100644
--- a/modules/claim/front/dms/index/index.html
+++ b/modules/claim/front/dms/index/index.html
@@ -5,31 +5,28 @@
     data="$ctrl.photos">
 </vn-crud-model>
 
-<section class="drop-zone" vn-droppable="$ctrl.onDrop($event)">
-    <section><vn-icon icon="add_circle"></vn-icon></section>
-    <section translate>Drag & Drop files here...</section>
-</section>
-<vn-data-viewer
-    model="model"
-    class="vn-w-xl">
-    <vn-horizontal class="photo-list">
-        <section class="photo" ng-repeat="photo in $ctrl.photos">
-            <section class="image vn-shadow" on-error-src 
-                ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-                zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
-            </section>
-            <section class="actions">
-                <vn-button
-                    class="round"
-                    ng-click="$ctrl.showDeleteConfirm($index)"
-                    title="{{'Remove file' | translate}}"
-                    tabindex="-1"
-                    icon="delete">
-                </vn-button>
-            </section>
+<vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
+    <section class="empty-rows" ng-if="!$ctrl.photos.length">
+        <section><vn-icon icon="insert_drive_file"></vn-icon></section>
+        <section translate>Drag & Drop photos here...</section>
+    </section>
+    <section class="photo" ng-repeat="photo in $ctrl.photos">
+        <section class="image vn-shadow" on-error-src 
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
+            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
         </section>
-    </vn-horizontal>
-</vn-data-viewer>
+        <section class="actions">
+            <vn-button
+                class="round"
+                ng-click="$ctrl.showDeleteConfirm($index)"
+                title="{{'Remove file' | translate}}"
+                tabindex="-1"
+                icon="delete">
+            </vn-button>
+        </section>
+    </section>
+</vn-horizontal>
+
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor">
 </vn-worker-descriptor-popover>
@@ -38,4 +35,10 @@
     message="This file will be deleted"
     question="Are you sure you want to continue?"
     on-response="$ctrl.deleteDms($response)">
-</vn-confirm>
\ No newline at end of file
+</vn-confirm>
+<vn-float-button fixed-bottom-right
+    icon="add"
+    vn-tooltip="Select photo" 
+    vn-bind="+"
+    ng-click="$ctrl.openUploadDialog()">
+</vn-float-button>
diff --git a/modules/claim/front/dms/index/index.js b/modules/claim/front/dms/index/index.js
index 20eba62a3..e83204000 100644
--- a/modules/claim/front/dms/index/index.js
+++ b/modules/claim/front/dms/index/index.js
@@ -68,6 +68,19 @@ class Controller {
         });
     }
 
+    openUploadDialog() {
+        const element = document.createElement('input');
+        element.setAttribute('type', 'file');
+        element.setAttribute('multiple', true);
+        element.click();
+
+        element.addEventListener('change', () =>
+            this.setDefaultParams().then(() => {
+                this.dms.files = element.files;
+                this.create();
+            })
+        );
+    }
 
     create() {
         const query = `claims/${this.claim.id}/uploadFile`;
diff --git a/modules/claim/front/dms/index/style.scss b/modules/claim/front/dms/index/style.scss
index e7e957cd8..28f9db6fc 100644
--- a/modules/claim/front/dms/index/style.scss
+++ b/modules/claim/front/dms/index/style.scss
@@ -2,13 +2,16 @@
 
 vn-claim-dms-index {
     .drop-zone {
-        border: 2px dashed $color-font-secondary;
         color: $color-font-secondary;
         box-sizing: border-box;
-        padding: 2em $spacing-md;
         border-radius: 0.5em;
         text-align: center;
-        font-size: 1.4em;
+        min-height: 100%;
+        
+        .empty-rows {
+            padding: 5em $spacing-md;
+            font-size: 1.4em
+        }
 
         vn-icon {
             font-size: 3em
diff --git a/modules/claim/front/dms/locale/en.yml b/modules/claim/front/dms/locale/en.yml
deleted file mode 100644
index a202e8bf2..000000000
--- a/modules/claim/front/dms/locale/en.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-FileDescription: Ticket id {{ticketId}} from client {{clientName}} id {{clientId}}
-ContentTypesInfo: Allowed file types {{allowedContentTypes}}
\ No newline at end of file
diff --git a/modules/claim/front/dms/locale/es.yml b/modules/claim/front/dms/locale/es.yml
index 3e765ae78..8ccc1dba4 100644
--- a/modules/claim/front/dms/locale/es.yml
+++ b/modules/claim/front/dms/locale/es.yml
@@ -1,4 +1,5 @@
 Are you sure you want to continue?: ¿Seguro que quieres continuar?
-Drag & Drop files here...: Arrastra y suelta archivos aquí...
+Drag & Drop photos here...: Arrastra y suelta fotos aquí...
 Photo deleted: Foto eliminada
-Photo uploaded!: Foto subida!
\ No newline at end of file
+Photo uploaded!: Foto subida!
+Select photo: Seleccionar foto
\ No newline at end of file