From f5b8ca64c07fae531aa8b0d919d16a2f42d29bd0 Mon Sep 17 00:00:00 2001 From: Nicola Carminati Date: Fri, 23 Nov 2018 10:28:13 +0100 Subject: [PATCH] Fix Load Programs modal --- Step/wwwroot/assets/styles/base/modals.less | 52 +++++++++++++++ Step/wwwroot/assets/styles/style.css | 64 ++++++++++++++++++- .../base-components/modal-load-program.ts | 21 ++++-- .../base-components/modal-load-program.vue | 28 ++++++-- 4 files changed, 150 insertions(+), 15 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less index 366bc457..af5ddbcd 100644 --- a/Step/wwwroot/assets/styles/base/modals.less +++ b/Step/wwwroot/assets/styles/base/modals.less @@ -1336,6 +1336,58 @@ justify-content: flex-end; border-top: solid 2px @color-whitethree; } + + .box-description{ + box-sizing: border-box; + padding-top: 10px; + height: 120px; + width: 100%; + border-top: solid 2px #e7e7e7; + } + .box-image{ + display: flex; + justify-content: flex-start; + flex-flow: column; + min-height: 415px; + width: 100%; + margin-top: 16px; + .box-image-container{ + display: flex; + justify-content: center; + align-items: center; + min-height: 329px; + width: 100%; + margin: 25px auto 23px auto; + img{ + max-width: 577px; + max-height: 329px; + box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); + } + } + .linenumber{ + display: flex; + justify-content: center; + align-items: center; + div{ + width: 32px; + height: 18px; + button{ + margin: auto 4px; + border: none; + padding: 0; + background: none; + font-size: 18px; + line-height: 1; + color: @color-greyish-brown; + } + .target{ + color: @color-clear-blue; + font-weight: 600; + } + + } + } + } } .@{modal}.modal-job-add-parameter { diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index c293bad6..1b302e1a 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -1417,6 +1417,64 @@ justify-content: flex-end; border-top: solid 2px #e7e7e7; } +.modal.modal-load-program .box-description, +.modal.modal-add-element-queue .box-description { + box-sizing: border-box; + padding-top: 10px; + height: 120px; + width: 100%; + border-top: solid 2px #e7e7e7; +} +.modal.modal-load-program .box-image, +.modal.modal-add-element-queue .box-image { + display: flex; + justify-content: flex-start; + flex-flow: column; + min-height: 415px; + width: 100%; + margin-top: 16px; +} +.modal.modal-load-program .box-image .box-image-container, +.modal.modal-add-element-queue .box-image .box-image-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 329px; + width: 100%; + margin: 25px auto 23px auto; +} +.modal.modal-load-program .box-image .box-image-container img, +.modal.modal-add-element-queue .box-image .box-image-container img { + max-width: 577px; + max-height: 329px; + box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4); +} +.modal.modal-load-program .box-image .linenumber, +.modal.modal-add-element-queue .box-image .linenumber { + display: flex; + justify-content: center; + align-items: center; +} +.modal.modal-load-program .box-image .linenumber div, +.modal.modal-add-element-queue .box-image .linenumber div { + width: 32px; + height: 18px; +} +.modal.modal-load-program .box-image .linenumber div button, +.modal.modal-add-element-queue .box-image .linenumber div button { + margin: auto 4px; + border: none; + padding: 0; + background: none; + font-size: 18px; + line-height: 1; + color: #4b4b4b; +} +.modal.modal-load-program .box-image .linenumber div .target, +.modal.modal-add-element-queue .box-image .linenumber div .target { + color: #1791ff; + font-weight: 600; +} .modal.modal-job-add-parameter { width: 704px; height: 608px; @@ -13840,13 +13898,13 @@ body { height: calc(100vh - 80px); background-color: #d8d8d8; z-index: 100; - transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); + transition: transform 0.5s ease-out; } #main-view .handle { display: none; } #main-view.liftedUp { - transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.1s ease-out 1s; + transition: transform 0.5s ease-out, box-shadow 0.1s ease-out 0.5s; box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2); } #main-view.turn-up, @@ -13860,7 +13918,7 @@ body { width: 100vw; box-shadow: none; z-index: 250; - transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); + transition: transform 0.5s ease-out; } #main-view-handler .handle { background-color: #d8d8d8; diff --git a/Step/wwwroot/src/modules/base-components/modal-load-program.ts b/Step/wwwroot/src/modules/base-components/modal-load-program.ts index d2440236..53ec5d49 100644 --- a/Step/wwwroot/src/modules/base-components/modal-load-program.ts +++ b/Step/wwwroot/src/modules/base-components/modal-load-program.ts @@ -60,6 +60,7 @@ export default class ModalLoadProgram extends Vue { currentFilterSecond: string = ""; navigationDepth: number = 0; + selectedNumberImage: number = 0; mounted() { if (typeof cmsClient != "undefined") { @@ -141,7 +142,8 @@ export default class ModalLoadProgram extends Vue { Name: i.name || i.Name, AbsolutePath: i.absolutePath || i.AbsolutePath, Path: i.path || i.Path, - IsDirectory: (i.isDirectory != null && i.isDirectory) || (i.IsDirectory != null && i.IsDirectory) + IsDirectory: (i.isDirectory != null && i.isDirectory) || (i.IsDirectory != null && i.IsDirectory), + IsJob: i.isJob || i.IsJob }; }); } @@ -185,7 +187,7 @@ export default class ModalLoadProgram extends Vue { } as FileInfo; } - async fileInfo(str, fromdepth: number) { + async fileInfo(str,isJob, fromdepth: number) { this.lastClickPath = str; if (fromdepth == 1) this.secondColumnData.splice(0, this.secondColumnData.length); @@ -194,15 +196,16 @@ export default class ModalLoadProgram extends Vue { this.selectedFile = this.toUpperCaseFileModel( JSON.parse(cmsClient.getProgramInfo(str)) ); - - this.selectedFileMetadata = JSON.parse(cmsClient.readJobMetadata(str)).metadata; - console.log(this.selectedFileMetadata); + this.selectedFile.IsJob = isJob; + if(isJob){ + this.selectedFileMetadata = JSON.parse(cmsClient.readJobMetadata(str)).metadata; + this.selectedNumberImage = 0; + } } - - if (!this.isLocalNavigation) this.selectedFile = this.toUpperCaseFileModel( await awaiter(fileService.getFileInfo(str))); + } close() { Factory.Get(MessageService).deleteChannel("esc_pressed"); @@ -252,5 +255,9 @@ export default class ModalLoadProgram extends Vue { // var result = await ModalHelper.ShowModalAsync(, jobMetadata); + } + + selectNumberImage(value) { + this.selectedNumberImage = value; } } diff --git a/Step/wwwroot/src/modules/base-components/modal-load-program.vue b/Step/wwwroot/src/modules/base-components/modal-load-program.vue index b37b1bd9..5ce3928b 100644 --- a/Step/wwwroot/src/modules/base-components/modal-load-program.vue +++ b/Step/wwwroot/src/modules/base-components/modal-load-program.vue @@ -46,7 +46,7 @@ :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath" :withArrow="val.IsDirectory == true" :iconType="val.IsDirectory? 'FOLDER':'FILE'" - @click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,1)"> + @click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,val.IsJob,1)">
@@ -68,7 +68,7 @@ :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath" :withArrow="val.IsDirectory == true" :iconType="val.IsDirectory? 'FOLDER':'FILE'" - @click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,2) "> + @click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,val.IsJob,2) "> @@ -89,19 +89,37 @@ -
+
- +
{{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}}
-
+
+
+
+
+ +
+
+
+
+
+
+
+ {{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}} +
+
+
+ {{selectedFileMetadata.generics.description}} +
+