From 723cff61afe8966c8df9f05630b967cf1b94e48a Mon Sep 17 00:00:00 2001 From: Ralph Soika Date: Mon, 30 Jan 2023 13:26:25 +0100 Subject: [PATCH] first draft Issue #510 --- .../main/webapp/js/imixs-office.workitem.js | 109 +++++++----------- .../layout/css/office-theme-chronicle.css | 24 ++-- 2 files changed, 52 insertions(+), 81 deletions(-) diff --git a/imixs-office-workflow-app/src/main/webapp/js/imixs-office.workitem.js b/imixs-office-workflow-app/src/main/webapp/js/imixs-office.workitem.js index 808b777e..47f81686 100644 --- a/imixs-office-workflow-app/src/main/webapp/js/imixs-office.workitem.js +++ b/imixs-office-workflow-app/src/main/webapp/js/imixs-office.workitem.js @@ -15,7 +15,10 @@ var isWorkitemLoading=true; // indicates if the workitem is still loading var chornicleSize=1; // default cronicle size (33%) var chroniclePreview=true; // indicates if documetns should be shown in the cornicle column var callbackRegistrySaveWorkitem=[]; - +var isChronicleResizing=false // tangable divider +var sliderPosX; // current position of moving slider +var chronicleElement; // the chronical bar +var formElement; // the chronical bar /** * Init Method for the workitem page @@ -30,10 +33,10 @@ $(document).ready(function() { imixsOfficeMain.imixs_chronicle_nav=JSON.parse('{ "comment" : true, "files":true, "version":true, "reference":true }'); // read croncicle size form cookie - chornicleSize=imixsOfficeWorkitem.readCookie('imixs.office.document.chronicle.size'); - if (!chornicleSize || chornicleSize=="") { - chornicleSize=1; - } +// chornicleSize=imixsOfficeWorkitem.readCookie('imixs.office.document.chronicle.size'); +// if (!chornicleSize || chornicleSize=="") { +// chornicleSize=1; +// } // read croncicle document preview form cookie @@ -43,17 +46,38 @@ $(document).ready(function() { } else { chroniclePreview=false; } + - - // init... - $('.imixs-workitem-chronicle').css('transition','0.0s'); - imixsOfficeWorkitem.updateChronicleWidth(); - + // Init tangible slider + chronicleElement = document.querySelector('.imixs-workitem > .imixs-workitem-chronicle'); + formElement=document.querySelector('.imixs-workitem > .imixs-workitem-form'); + //formElement.parentElement.style.display = "none"; + + const lastFormWidth=imixsOfficeWorkitem.readCookie('imixs.office.document.workitem.formwidth'); + + imixsOfficeWorkitem.updateFormWidth(lastFormWidth); + + const sliderElement = document.querySelector('.imixs-workitem > .imixs-slider'); + sliderElement.addEventListener('mousedown', (e) => { + isChronicleResizing = true; + sliderPosX = e.clientX; + console.log('slider posX = '+ sliderPosX); + }); + window.addEventListener('mouseup', (e) => { + isChronicleResizing = false; + }); + window.addEventListener('mousemove', (e) => { + if (!isChronicleResizing) return; + let _newWidth=formElement.offsetWidth + (e.clientX - sliderPosX); + + imixsOfficeWorkitem.updateFormWidth(_newWidth); + sliderPosX = e.clientX; + imixsOfficeWorkitem.setCookie("imixs.office.document.workitem.formwidth",_newWidth,14); + }); + $('.document-nav').hide(); - imixsOfficeWorkitem.updateAttachmentLinks(); - // set the default preview frame documentPreviewIframe=document.getElementById('imixs_document_iframe_embedded'); @@ -62,6 +86,7 @@ $(document).ready(function() { imixsOfficeWorkitem.autoPreviewPDF(); isWorkitemLoading=false; + //formElement.parentElement.style.display = "block"; }); /* @@ -273,61 +298,15 @@ IMIXS.org.imixs.workflow.workitem = (function() { }, - /* - * reduce the with of the chronicle - */ - expandChronicle= function () { - if (chornicleSize<2) { - chornicleSize++; - } - //document.cookie = "imixs.office.document.chronicle.size=" + chornicleSize + "; path=/"; - imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.size",chornicleSize,14); - - $('.imixs-workitem-chronicle').css('transition','0.3s'); - updateChronicleWidth(); - }, - /* - * increase the with of the chronicle - */ - shrinkChronicle = function () { - if (chornicleSize>0) { - chornicleSize--; - } - //document.cookie = "imixs.office.document.chronicle.size=" + chornicleSize + "; path=/"; - imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.size",chornicleSize,14); - $('.imixs-workitem-chronicle').css('transition','0.3s'); - updateChronicleWidth(); - }, /* - * updates the screen size of the chronical frame + * updates the screen size of the form and chronical frame */ - updateChronicleWidth=function () { - - if (chornicleSize==2) { - $('.imixs-workitem-form').css('width','58.3333%'); - $('.imixs-workitem-chronicle').css('width','calc(41.6666% - 30px)'); - $('.imixs-slider-nav .expand').removeClass('typcn-media-play-reverse'); - $('.imixs-slider-nav .expand').addClass('typcn-media-play-reverse-outline'); - return; - } - if (chornicleSize==1) { - $('.imixs-workitem-form').css('width','66.6666%'); - $('.imixs-workitem-chronicle').css('width','calc(33.3333% - 30px)'); - $('.imixs-slider-nav .expand').removeClass('typcn-media-play-reverse-outline'); - $('.imixs-slider-nav .expand').addClass('typcn-media-play-reverse'); - $('.imixs-slider-nav .shrink').removeClass('typcn-media-play-outline'); - $('.imixs-slider-nav .shrink').addClass('typcn-media-play'); - return; - } - if (chornicleSize==0) { - $('.imixs-workitem-form').css('width','75%'); - $('.imixs-workitem-chronicle').css('width','calc(25% - 30px)'); - $('.imixs-slider-nav .shrink').removeClass('typcn-media-play'); - $('.imixs-slider-nav .shrink').addClass('typcn-media-play-outline'); - return; - } + updateFormWidth=function(_newWidth) { + const parent=formElement.parentElement; + formElement.style.width = `${_newWidth}px`; + chronicleElement.style.width = `${parent.offsetWidth-formElement.offsetWidth-40}px`; }, @@ -580,9 +559,7 @@ IMIXS.org.imixs.workflow.workitem = (function() { setCookie : setCookie, printQRCode : printQRCode, autoPreviewPDF : autoPreviewPDF, - expandChronicle : expandChronicle, - shrinkChronicle : shrinkChronicle, - updateChronicleWidth : updateChronicleWidth, + updateFormWidth : updateFormWidth, clearDocumentPreview : clearDocumentPreview, updateAttachmentLinks : updateAttachmentLinks, showDocument : showDocument, diff --git a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-chronicle.css b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-chronicle.css index 3783b18f..26a2d531 100644 --- a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-chronicle.css +++ b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-chronicle.css @@ -12,24 +12,19 @@ .imixs-workitem-form { - width: 66.666%; + xwidth: 66.666%; } .imixs-workitem-chronicle { - width: calc(33.333% - 20px); height: 100%; - display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; position: fixed; - right: 20px; + right: 40px; bottom: 0; - padding: 120px 10px 0; - - - transition: 0.3s; + padding: 120px 20px 0px 10px; } @@ -101,7 +96,7 @@ } .imixs-workitem-chronicle-content { - width: calc(100% - 30px); + xxwidth: calc(100% - 30px); min-height: 100px; overflow: auto; flex: 1; @@ -113,16 +108,15 @@ .imixs-slider { width: 16px; padding: 0; + cursor: col-resize; } + .imixs-slider-nav { margin: 0; padding: 6px 0; position: relative; top: 33%; - -ms-transform: translateY(-33%); - transform: translateY(-33%); - cursor: pointer; border-right: 1px dotted #e0e4e7; border-top: 1px dotted #e0e4e7; border-bottom: 1px dotted #e0e4e7; @@ -142,7 +136,7 @@ .imixs-workitem-form { - width: calc(66.6666% - 0px); + xxwidth: calc(66.6666% - 0px); margin-bottom: 40px; } @@ -236,9 +230,9 @@ .imixs-workitem-chronicle .filter { - position: absolute; + position: fixed; right:0; - padding-right:10px; + padding-right:20px; }