Updated styles
gitea/salix/1986-claim_draggable_pictures This commit looks good
Details
gitea/salix/1986-claim_draggable_pictures This commit looks good
Details
This commit is contained in:
parent
a979a17482
commit
df7493ff14
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ vn-app {
|
|||
ui-view {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: inherit;
|
||||
height: 100%;
|
||||
|
||||
&.ng-enter {
|
||||
animation-name: nothing, slideIn;
|
||||
|
|
|
@ -87,6 +87,8 @@ vn-layout {
|
|||
& > * {
|
||||
display: block;
|
||||
padding: $spacing-md;
|
||||
box-sizing: border-box;
|
||||
height: 100%
|
||||
}
|
||||
&.ng-enter {
|
||||
vn-side-menu {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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`;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
FileDescription: Ticket id {{ticketId}} from client {{clientName}} id {{clientId}}
|
||||
ContentTypesInfo: Allowed file types {{allowedContentTypes}}
|
|
@ -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
|
Loading…
Reference in New Issue