Merge branch '1986-claim_draggable_pictures' of verdnatura/salix into dev

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

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;

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 {

front/salix/styles/photo-list.scss

@@ -11,7 +11,6 @@
         transition: all 0.5s;
         padding: $spacing-sm;
         position: relative;
-        opacity: 0.7;
         width: 28em;
 
         .image {
@@ -20,6 +19,7 @@
                         0 1px 5px 0 rgba(0,0,0,.12);
             background: no-repeat center center fixed;
             background-size: cover !important;
+            border: 2px solid transparent;
             overflow: hidden;
             cursor: zoom-in;
             height: 100%;
@@ -34,7 +34,7 @@
             top: 1em
         }
     }
-    .photo:hover {
+    .photo:hover .image {
-        opacity: 1
+        border: 2px solid $color-primary
     }
 }

modules/claim/front/dms/index/index.html

@@ -5,14 +5,11 @@
     data="$ctrl.photos">
 </vn-crud-model>
 
-<section class="drop-zone" vn-droppable="$ctrl.onDrop($event)">
+<vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
-    <section><vn-icon icon="add_circle"></vn-icon></section>
+    <section class="empty-rows" ng-if="!$ctrl.photos.length">
-    <section translate>Drag & Drop files here...</section>
+        <section><vn-icon icon="image"></vn-icon></section>
-</section>
+        <section translate>Drag & Drop photos here...</section>
-<vn-data-viewer
+    </section>
-    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 + ')'}"
@@ -28,8 +25,8 @@
             </vn-button>
         </section>
     </section>
-    </vn-horizontal>
+</vn-horizontal>
-</vn-data-viewer>
+
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor">
 </vn-worker-descriptor-popover>
@@ -39,3 +36,9 @@
     question="Are you sure you want to continue?"
     on-response="$ctrl.deleteDms($response)">
 </vn-confirm>
+<vn-float-button fixed-bottom-right
+    icon="add"
+    vn-tooltip="Select photo" 
+    vn-bind="+"
+    ng-click="$ctrl.openUploadDialog()">
+</vn-float-button>

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`;

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

modules/claim/front/dms/locale/en.yml

@@ -1,2 +0,0 @@
-FileDescription: Ticket id {{ticketId}} from client {{clientName}} id {{clientId}}
-ContentTypesInfo: Allowed file types {{allowedContentTypes}}

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!
+Select photo: Seleccionar foto

modules/claim/front/summary/style.scss

@@ -1,12 +1,10 @@
 @import "./variables";
 
 vn-claim-summary {
-    .photo {
+    section.photo {
-        height: 15.5em;
+        height: 15.5em
     }
     .photo .image {
-        border: 2px solid $color-bg-dark;
+        border-radius: 0.2em
-        border-radius: 0.2em;
     }
-   
 }