Updated styles
gitea/salix/1986-claim_draggable_pictures This commit looks good Details

This commit is contained in:
Joan Sanchez 2020-01-08 17:03:08 +01:00
parent a979a17482
commit df7493ff14
8 changed files with 54 additions and 36 deletions

View File

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

View File

@ -7,7 +7,7 @@ vn-app {
ui-view {
display: block;
box-sizing: border-box;
height: inherit;
height: 100%;
&.ng-enter {
animation-name: nothing, slideIn;

View File

@ -87,6 +87,8 @@ vn-layout {
& > * {
display: block;
padding: $spacing-md;
box-sizing: border-box;
height: 100%
}
&.ng-enter {
vn-side-menu {

View File

@ -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>
</vn-confirm>
<vn-float-button fixed-bottom-right
icon="add"
vn-tooltip="Select photo"
vn-bind="+"
ng-click="$ctrl.openUploadDialog()">
</vn-float-button>

View File

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

View File

@ -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

View File

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

View File

@ -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!
Photo uploaded!: Foto subida!
Select photo: Seleccionar foto