From 6a9b81def61752c6f5992d300ad88184276f1dbe Mon Sep 17 00:00:00 2001 From: Ralph Soika Date: Tue, 2 Jan 2024 16:11:29 +0100 Subject: [PATCH] impl Issue #563 --- .vscode/settings.json | 2 +- .../main/webapp/js/imixs-office.workitem.js | 1173 +++++++++-------- .../main/webapp/layout/css/office-theme.css | 334 +++-- .../webapp/pages/workitems/workitem.xhtml | 155 ++- 4 files changed, 864 insertions(+), 800 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 310bdcab..aa96d3a7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,7 @@ { // Organize Java Imports "editor.codeActionsOnSave": { - "source.organizeImports": true, + "source.organizeImports": "explicit" }, // Checkstile "java.checkstyle.configuration": "https://raw.githubusercontent.com/imixs/imixs-workflow/master/imixs-checkstyle-8.44.xml", 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 06d7b268..432f7f37 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 @@ -4,18 +4,18 @@ IMIXS.namespace("org.imixs.workflow.workitem"); -var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", - "Sep", "Okt", "Nov", "Dec" ]; +var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", + "Sep", "Okt", "Nov", "Dec"]; var documentPreview; // active document preview element var documentPreviewIframe; // active iFrame var documentPreviewURL; // URL for current displayed document -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 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 workitemElement; var workitemFormElement; // the chronical bar @@ -28,63 +28,63 @@ var workitemChronicleElement; * - set history nav * */ -$(document).ready(function() { - - imixsOfficeMain.imixs_document=true; // default - imixsOfficeMain.imixs_chronicle_comments=true; - imixsOfficeMain.imixs_chronicle_nav=JSON.parse('{ "comment" : true, "files":true, "version":true, "reference":true }'); - +$(document).ready(function () { + + imixsOfficeMain.imixs_document = true; // default + imixsOfficeMain.imixs_chronicle_comments = true; + imixsOfficeMain.imixs_chronicle_nav = JSON.parse('{ "comment" : true, "files":true, "version":true, "reference":true }'); + // read croncicle document preview form cookie - chroniclePreview=imixsOfficeWorkitem.readCookie('imixs.office.document.chronicle.preview'); + chroniclePreview = imixsOfficeWorkitem.readCookie('imixs.office.document.chronicle.preview'); if (chroniclePreview == "true") { - chroniclePreview=true; + chroniclePreview = true; } else { - chroniclePreview=false; + chroniclePreview = false; } // Init tangible slider workitemElement = document.querySelector('.imixs-workitem'); - workitemFormElement=document.querySelector('.imixs-workitem > .imixs-workitem-form'); - workitemChronicleElement=document.querySelector('.imixs-workitem > .imixs-workitem-chronicle'); + workitemFormElement = document.querySelector('.imixs-workitem > .imixs-workitem-form'); + workitemChronicleElement = document.querySelector('.imixs-workitem > .imixs-workitem-chronicle'); workitemSliderElement = document.querySelector('.imixs-workitem > .imixs-slider'); - let lastFormWidth=imixsOfficeWorkitem.readCookie('imixs.office.document.workitem.formwidth'); + let lastFormWidth = imixsOfficeWorkitem.readCookie('imixs.office.document.workitem.formwidth'); // set a default if cookie not yet defined if (!lastFormWidth) { - lastFormWidth=workitemElement.offsetWidth*0.75; - } - lastFormWidth=imixsOfficeWorkitem.validateFormMinMaxWidth(lastFormWidth); - imixsOfficeWorkitem.updateFormWidth(lastFormWidth); + lastFormWidth = workitemElement.offsetWidth * 0.75; + } + lastFormWidth = imixsOfficeWorkitem.validateFormMinMaxWidth(lastFormWidth); + imixsOfficeWorkitem.updateFormWidth(lastFormWidth); workitemSliderElement = document.querySelector('.imixs-workitem > .imixs-slider'); workitemSliderElement.addEventListener('mousedown', (e) => { - isChronicleResizing = true; - sliderPosX = e.clientX; + isChronicleResizing = true; + sliderPosX = e.clientX; }); window.addEventListener('mouseup', (e) => { - isChronicleResizing = false; + isChronicleResizing = false; }); window.addEventListener('mousemove', (e) => { - if (!isChronicleResizing) return; - let _newWidth=workitemFormElement.offsetWidth + (e.clientX - sliderPosX); - // adjust minwidth.... - _newWidth=imixsOfficeWorkitem.validateFormMinMaxWidth(_newWidth); - imixsOfficeWorkitem.updateFormWidth(_newWidth); - sliderPosX = e.clientX; - + if (!isChronicleResizing) return; + let _newWidth = workitemFormElement.offsetWidth + (e.clientX - sliderPosX); + // adjust minwidth.... + _newWidth = imixsOfficeWorkitem.validateFormMinMaxWidth(_newWidth); + imixsOfficeWorkitem.updateFormWidth(_newWidth); + sliderPosX = e.clientX; + }); $('.document-nav').hide(); - + imixsOfficeWorkitem.updateAttachmentLinks(); - + // set the default preview frame - documentPreviewIframe=document.getElementById('imixs_document_iframe_embedded'); - + documentPreviewIframe = document.getElementById('imixs_document_iframe_embedded'); + // autoload first pdf into preview if available.... imixsOfficeWorkitem.autoPreviewPDF(); imixsOfficeWorkitem.initSignaturePad(); - - isWorkitemLoading=false; + + isWorkitemLoading = false; }); /* @@ -93,30 +93,31 @@ $(document).ready(function() { * and loads pdf files into the preview window */ function onFileUploadChange() { - + $('.document-nav').hide(); // cancel current preview.... - documentPreviewIframe.src=""; + documentPreviewIframe.src = ""; //contentWindow.location.replace(""); - documentPreviewURL=""; - + documentPreviewURL = ""; + // update deep links imixsOfficeWorkitem.updateAttachmentLinks(); - + // auto preview $(".imixsFileUpload_uploadlist_name a").each( - function(index, element) { - var attachmentName=$(this).text(); - if (attachmentName.endsWith('.pdf') || attachmentName.endsWith('.PDF')) { - // if we have a pdf and screen is >1800 than maximize preview. - if (window.innerWidth>=1800 ) { + function (index, element) { + var attachmentName = $(this).text(); + if (attachmentName.endsWith('.pdf') || attachmentName.endsWith('.PDF')) { + // if we have a pdf and screen is >2200 than maximize preview. + if (window.innerWidth >= 2200) { imixsOfficeWorkitem.maximizeDocumentPreview(); } - var link=$(this).attr('href'); + + var link = $(this).attr('href'); // encode link... - var encodedAttachmentName=encodeURIComponent(attachmentName); - link=link.replace(attachmentName,encodedAttachmentName); - imixsOfficeWorkitem.showDocument($(this).text(),link); + var encodedAttachmentName = encodeURIComponent(attachmentName); + link = link.replace(attachmentName, encodedAttachmentName); + imixsOfficeWorkitem.showDocument($(this).text(), link); return false; } }); @@ -124,573 +125,576 @@ function onFileUploadChange() { // define core module -IMIXS.org.imixs.workflow.workitem = (function() { +IMIXS.org.imixs.workflow.workitem = (function () { if (!IMIXS.org.imixs.core) { console.error("ERROR - missing dependency: imixs-core.js"); } var imixs = IMIXS.org.imixs.core, - - readCookie = function(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(';'); - for (var i = 0; i < ca.length; i++) { - var c = ca[i]; - while (c.charAt(0) == ' ') c = c.substring(1, c.length); - if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); - } - return null; - }, - - setCookie = function(cname, cvalue, exdays=999) { - var d = new Date(); - d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); - var expires = "expires="+d.toUTCString(); - document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; - }, - - - /* - * This method loads the first pdf and starts a autopreview - * if chroniclePreview == true - */ - autoPreviewPDF = function() { - //if (!chroniclePreview) return; - $("[id$='dmslist'] .file-open-link").each( - function(index, element) { - var attachmentName=$(this).text(); - if (attachmentName.endsWith('.pdf') || attachmentName.endsWith('.PDF')) { - // if we have a pdf and screen is >1800 than maximize preview. - if (window.innerWidth>=1800 || chroniclePreview==false ) { - maximizeDocumentPreview(); + + readCookie = function (name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); + } + return null; + }, + + setCookie = function (cname, cvalue, exdays = 999) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires=" + d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; + }, + + + /* + * This method loads the first pdf and starts a autopreview + * if chroniclePreview == true + */ + autoPreviewPDF = function () { + //if (!chroniclePreview) return; + $("[id$='dmslist'] .file-open-link").each( + function (index, element) { + var attachmentName = $(this).text(); + if (attachmentName.endsWith('.pdf') || attachmentName.endsWith('.PDF')) { + // if we have a pdf and screen is >2200 than maximize preview. + if (window.innerWidth >= 2200 || chroniclePreview == false) { + maximizeDocumentPreview(); + } + if (window.innerWidth <= 1100) { + minimizeDocumentPreview(); + } + //$(this).click(); + showDocument($(this).text(), $(this).attr('href')); + return false; } - //$(this).click(); - showDocument($(this).text(),$(this).attr('href')); - return false; - } - }); - }, - - /* - * This method initializes a signature pad if part of the form. - * The signature widget supports a 2d canvas to draw a signature - * with the mouse cursor. - */ - initSignaturePad = function() { - const signatureCanvas = document.querySelector('.imixs-signature-pad canvas'); - if (!signatureCanvas) { - // no signature pad available - return; - } - const workitemForm = document.querySelector('#workitem_form'); - const signatureClearButton = document.querySelector('.imixs-signature-clear-action'); - const ctx = signatureCanvas.getContext('2d'); - ctx.lineWidth = 3; - ctx.lineJoin = ctx.lineCap = 'round'; - let writingMode = false; - - // add event listeners - signatureCanvas.addEventListener('pointerdown', (event) => { - writingMode = true; - ctx.beginPath(); - const positionX = event.clientX - event.target.getBoundingClientRect().x; - const positionY = event.clientY - event.target.getBoundingClientRect().y; - ctx.moveTo(positionX, positionY); - }, { passive: true } - ); - - signatureCanvas.addEventListener('pointerup', (event) => { - writingMode = false; - }, { passive: true }); - - signatureCanvas.addEventListener('pointermove', (event) => { - if (!writingMode) { + }); + }, + + /* + * This method initializes a signature pad if part of the form. + * The signature widget supports a 2d canvas to draw a signature + * with the mouse cursor. + */ + initSignaturePad = function () { + const signatureCanvas = document.querySelector('.imixs-signature-pad canvas'); + if (!signatureCanvas) { + // no signature pad available return; } - const positionX = event.clientX - event.target.getBoundingClientRect().x; - const positionY = event.clientY - event.target.getBoundingClientRect().y; - ctx.lineTo(positionX, positionY); - ctx.stroke(); - }, { passive: true }); - - // clear button - signatureClearButton.addEventListener('click', (event) => { - event.preventDefault(); - ctx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height); - }); + const workitemForm = document.querySelector('#workitem_form'); + const signatureClearButton = document.querySelector('.imixs-signature-clear-action'); + const ctx = signatureCanvas.getContext('2d'); + ctx.lineWidth = 3; + ctx.lineJoin = ctx.lineCap = 'round'; + let writingMode = false; + + // add event listeners + signatureCanvas.addEventListener('pointerdown', (event) => { + writingMode = true; + ctx.beginPath(); + const positionX = event.clientX - event.target.getBoundingClientRect().x; + const positionY = event.clientY - event.target.getBoundingClientRect().y; + ctx.moveTo(positionX, positionY); + }, { passive: true } + ); - // submit event - workitemForm.addEventListener('submit', (event) => { - // crate image url... - const imageURL = signatureCanvas.toDataURL(); - // find hidden field to store the url data... - let nextElement = signatureCanvas.nextElementSibling; - while (nextElement) { - if (nextElement.tagName === 'INPUT' && nextElement.type === 'hidden') { - nextElement.value=imageURL; - break; + signatureCanvas.addEventListener('pointerup', (event) => { + writingMode = false; + }, { passive: true }); + + signatureCanvas.addEventListener('pointermove', (event) => { + if (!writingMode) { + return; } - nextElement = nextElement.nextElementSibling; - } - }) - }, - - /* - * This helper method updates the attachment links - * in the chronicle main view and in the dms list. - * Attachments are opend in the preview window - */ - updateAttachmentLinks = function() { - // update the link action for each file - // we redirect the href into the iframe target - $("[id$='dmslist'] .file-open-link").each( - function(index, element) { - $(this).click(function(){ - var file_link=$(this).attr('href'); - //updateIframe(file_link); - showDocument($(this).text(),file_link); - // cancel link - return false; - }); + const positionX = event.clientX - event.target.getBoundingClientRect().x; + const positionY = event.clientY - event.target.getBoundingClientRect().y; + ctx.lineTo(positionX, positionY); + ctx.stroke(); + }, { passive: true }); + + // clear button + signatureClearButton.addEventListener('click', (event) => { + event.preventDefault(); + ctx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height); }); - - - // we redirect also the href from chronicle into the iframe target - - // chronicle-main attachmentlink - $("[id$='chronicle-main'] .attachmentlink").each( - function(index, element) { - $(this).click(function(){ - var file_link=$(this).attr('href'); - //updateIframe(file_link); - showDocument($(this).text(),file_link); - // cancel link - return false; + + // submit event + workitemForm.addEventListener('submit', (event) => { + // crate image url... + const imageURL = signatureCanvas.toDataURL(); + // find hidden field to store the url data... + let nextElement = signatureCanvas.nextElementSibling; + while (nextElement) { + if (nextElement.tagName === 'INPUT' && nextElement.type === 'hidden') { + nextElement.value = imageURL; + break; + } + nextElement = nextElement.nextElementSibling; + } + }) + }, + + /* + * This helper method updates the attachment links + * in the chronicle main view and in the dms list. + * Attachments are opend in the preview window + */ + updateAttachmentLinks = function () { + // update the link action for each file + // we redirect the href into the iframe target + $("[id$='dmslist'] .file-open-link").each( + function (index, element) { + $(this).click(function () { + var file_link = $(this).attr('href'); + //updateIframe(file_link); + showDocument($(this).text(), file_link); + // cancel link + return false; + }); }); - }); - - - // chronicle-main imixsFileUpload link - $(".imixsFileUpload_uploadlist_name a").each( - function(index, element) { - $(this).click(function(){ - // we need to encode the filename within the link - var attachmentName=$(this).text(); - var link=$(this).attr('href'); - // encode link... - var encodedAttachmentName=encodeURIComponent(attachmentName); - link=link.replace(attachmentName,encodedAttachmentName); - showDocument($(this).text(),link); - // cancel link - return false; + + + // we redirect also the href from chronicle into the iframe target + + // chronicle-main attachmentlink + $("[id$='chronicle-main'] .attachmentlink").each( + function (index, element) { + $(this).click(function () { + var file_link = $(this).attr('href'); + //updateIframe(file_link); + showDocument($(this).text(), file_link); + // cancel link + return false; + }); }); - }); - }, - - - - - /* - * This method clears the document preview - * the method is called after a remove click - */ - clearDocumentPreview = function(event) { - if (event.status === 'success') { - documentPreviewIframe.contentWindow.location.replace(""); - documentPreviewIframe.src=""; - documentPreviewURL=""; - updateAttachmentLinks(); - // autoload first pdf into preview if available.... - autoPreviewPDF(); - } - }, - - /* - * This helper method adjusts the minimum/maximum - * width of the from view - */ - validateFormMinMaxWidth = function (_width) { - // adjust minwidth.... - if (_width<500) { - _width=500; - isChronicleResizing = false; - } - if (_width>workitemElement.offsetWidth-340) { - _width=workitemElement.offsetWidth-340; - isChronicleResizing = false; - } - return _width; - }, - - /* - * This method hides the document preiview window - * and shows the history tab. - */ - closeDocumentPreview = function () { - minimizeDocumentPreview(); - // switch to chronicle - $(".chronicle-tab-history").click(); - }, - - /* - * The method hides the document preview window and opens - * the document in the minimized preview on the documents tab - */ - minimizeDocumentPreview =function () { - $('.imixs-workitem-form .imixs-form').removeClass('split'); - $('.imixs-workitem-form .imixs-document').removeClass('split'); - $('.imixs-workitem-form .imixs-document').hide(); - $('.imixs-workitem-document-embedded').show(); - - // set preview cookie - imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.preview","true",14); - documentPreview=$('.imixs-workitem-document-embedded'); - // update iframe - documentPreviewIframe=document.getElementById('imixs_document_iframe_embedded'); - documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); - - if (!isWorkitemLoading) { - $(".chronicle-tab-documents").click(); - } - }, - - - - /* - * The method shows the document preiview window - */ - maximizeDocumentPreview = function () { - $('.imixs-workitem-form .imixs-form').addClass('split'); - $('.imixs-workitem-form .imixs-document').addClass('split'); - $('.imixs-document').show(); - $('.imixs-workitem-document-embedded').hide(); - - // set preview cookie - //document.cookie = "imixs.office.document.chronicle.preview=false; path=/"; - imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.preview","false",14); - documentPreview=$('.imixs-document'); - // update iframe - documentPreviewIframe=document.getElementById('imixs_document_iframe'); - documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); - - }, - - - /* - * updates the workitem form width and update the corresponding cookie - */ - updateFormWidth=function(_newWidth) { - const chronicleWidth=workitemElement.offsetWidth - _newWidth - workitemSliderElement.offsetWidth; - workitemChronicleElement.style.flexBasis = `${chronicleWidth}px`; - imixsOfficeWorkitem.setCookie("imixs.office.document.workitem.formwidth",_newWidth,14); - }, - - /* - * reduce the with of the chronicle - */ - expandChronicle= function () { - let newSize=validateFormMinMaxWidth(workitemElement.offsetWidth/2); - imixsOfficeWorkitem.updateFormWidth(newSize); - }, - - /* - * increase the with of the chronicle - */ - shrinkChronicle = function () { - let newSize=validateFormMinMaxWidth(workitemElement.offsetWidth-340); - imixsOfficeWorkitem.updateFormWidth(newSize); - }, - - /* - * A document loads the current document (link) into the documentPreviewIframe - * and displays the document title. - - */ - showDocument=function (title, link) { - if (!link || link=="") { - return; // no url defined! - } - // cut title if length >64 chars - if (title.length>64) { - title=title.substring(0,64)+"..."; - } - $('.document-title',documentPreview).text(title); - documentPreviewURL=link; - documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); - - // update deeplink - $('.document-deeplink').attr('href',documentPreviewURL); - - // activate preview if minimized! - if (!isWorkitemLoading && documentPreviewIframe.id==='imixs_document_iframe_embedded') { - toggleChronicleDocuments(); - } - $('.document-nav').show(); - }, - - - /* - * This method toggles into the chronicle documents view - */ - toggleChronicleHistory=function () { - $('.chronicle-tab-history').parent().addClass('active'); - $('.chronicle-tab-documents').parent().removeClass('active'); - $('#imixs-workitem-chronicle-tab-documents').hide(); - $('#imixs-workitem-chronicle-tab-history').show(); - // set a right margin for history view only - $('.imixs-workitem-chronicle-content').css('width','calc(100% - 30px)'); - - }, - toggleChronicleDocuments=function () { - $('.chronicle-tab-documents').parent().addClass('active'); - $('.chronicle-tab-history').parent().removeClass('active'); - $('#imixs-workitem-chronicle-tab-history').hide(); - $('#imixs-workitem-chronicle-tab-documents').show(); - // set a right margin for history view only - $('.imixs-workitem-chronicle-content').css('width','calc(100% - 0px)'); - }, - - - registerSaveWorkitemListener=function (callback) { - callbackRegistrySaveWorkitem.push(callback); - }, - - /* - * Helper method handles registered callback methods - */ - saveWorkitemHandler=function (confirmMessage,uiWorkflowAction) { - if (confirmMessage) { - if (confirm(confirmMessage)==false) { - return false; + + + // chronicle-main imixsFileUpload link + $(".imixsFileUpload_uploadlist_name a").each( + function (index, element) { + $(this).click(function () { + // we need to encode the filename within the link + var attachmentName = $(this).text(); + var link = $(this).attr('href'); + // encode link... + var encodedAttachmentName = encodeURIComponent(attachmentName); + link = link.replace(attachmentName, encodedAttachmentName); + showDocument($(this).text(), link); + // cancel link + return false; + }); + }); + }, + + + + + /* + * This method clears the document preview + * the method is called after a remove click + */ + clearDocumentPreview = function (event) { + if (event.status === 'success') { + documentPreviewIframe.contentWindow.location.replace(""); + documentPreviewIframe.src = ""; + documentPreviewURL = ""; + updateAttachmentLinks(); + // autoload first pdf into preview if available.... + autoPreviewPDF(); } - } - // do we have callbacks? - if (callbackRegistrySaveWorkitem) { - for (const saveCallback of callbackRegistrySaveWorkitem) { - var callBackResult=saveCallback(uiWorkflowAction); - if (callBackResult===false) { - return false; - } - } - } - return true; - }, - - - /** - * WorkitemRef Input Widget - */ - - /* - * initializes an input element for autocompletion. - * the param 'resultlistid' is optional and defines the element - * containing the search result. - * The callback method is optional and triggered when a new element was selected - * from the suggest list - */ - workitemRefInitInput = function (inputElement,searchCallback, resultlistId, selectCallback) { - - // set id for result list element - if (!resultlistId || resultlistId==='') { - resultlistId='autocomplete-resultlist'; // default name - } - $(inputElement).attr('data-resultlist', resultlistId); - - // add a input event handler with delay to serach for suggestions.... - $(inputElement).on('input', delay(function() { - if (!autocompleteSearchReady) { - return; // start only after first key down! (see below) + }, + + /* + * This helper method adjusts the minimum/maximum + * width of the from view + */ + validateFormMinMaxWidth = function (_width) { + // adjust minwidth.... + if (_width < 500) { + _width = 500; + isChronicleResizing = false; } - // store the current input id - autocompleteInputID = inputElement.name; - currentSelectCallback=selectCallback; - - // get data options - var options=$(inputElement).attr('data-options'); - searchCallback({ phrase: this.value, options: options }); - }, 500)).trigger('input'); - - - // hide the suggest list on blur event - $(inputElement).on("blur", delay(function(event) { - $("[id$=" + $(this).data('resultlist') + "]").hide(); - }, 200)); - - - /*execute a function presses a key on the keyboard:*/ - $(inputElement).keydown(function(e) { - autocompleteSearchReady=true; // init serach mode - if (e.keyCode == 40) { - /*If the arrow DOWN key is pressed, - increase the currentFocus variable:*/ - autocompleteSelectNextElement(this); - } else if (e.keyCode == 38) { //up - /*If the arrow UP key is pressed, - decrease the currentFocus variable:*/ - autocompleteSelectPrevElement(this); - } else if (e.keyCode == 13) { - /*If the ENTER key is pressed, prevent the form from being submitted,*/ - e.preventDefault(); - selectActiveElement(this); + if (_width > workitemElement.offsetWidth - 340) { + _width = workitemElement.offsetWidth - 340; + isChronicleResizing = false; } - }); - - // turn autocomplete of - $(inputElement).attr('autocomplete', 'off'); - }, - - - /** - * Callback method for workiemLink Autocomplete feature - */ - addWorkitemRef = function(selection,inputSearchField) { - // find textarea.... - var inputField = $('textarea.workitemlink-textarea-input'); - var itemInput = $('textarea',inputSearchField.parent()); - var list= inputField.val(); - var list=inputField.val().split(/\r?\n/); - var newList= new Array(); - $.each(list, function( key, value ) { - if (value!='') { - if (!newList.includes(value)) { - newList.push(value); - } + return _width; + }, + + /* + * This method hides the document preiview window + * and shows the history tab. + */ + closeDocumentPreview = function () { + minimizeDocumentPreview(); + // switch to chronicle + $(".chronicle-tab-history").click(); + }, + + /* + * The method hides the document preview window and opens + * the document in the minimized preview on the documents tab + */ + minimizeDocumentPreview = function () { + $('.imixs-workitem-form .imixs-form').removeClass('split'); + $('.imixs-workitem-form .imixs-document').removeClass('split'); + $('.imixs-workitem-form .imixs-document').hide(); + $('.imixs-workitem-document-embedded').show(); + + // set preview cookie + imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.preview", "true", 14); + documentPreview = $('.imixs-workitem-document-embedded'); + // update iframe + documentPreviewIframe = document.getElementById('imixs_document_iframe_embedded'); + documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); + + if (!isWorkitemLoading) { + $(".chronicle-tab-documents").click(); } - }); - if (!newList.includes(selection)) { - newList.push(selection); - } - - var newValue=""; - $.each(newList, function( key, value ) { - if (key==0) { - newValue=newValue+value; - } else { - newValue=newValue + "\n"+value; + }, + + + + /* + * The method shows the document preiview window + */ + maximizeDocumentPreview = function () { + $('.imixs-workitem-form .imixs-form').addClass('split'); + $('.imixs-workitem-form .imixs-document').addClass('split'); + $('.imixs-document').show(); + $('.imixs-workitem-document-embedded').hide(); + + // set preview cookie + //document.cookie = "imixs.office.document.chronicle.preview=false; path=/"; + imixsOfficeWorkitem.setCookie("imixs.office.document.chronicle.preview", "false", 14); + documentPreview = $('.imixs-document'); + // update iframe + documentPreviewIframe = document.getElementById('imixs_document_iframe'); + documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); + + }, + + + /* + * updates the workitem form width and update the corresponding cookie + */ + updateFormWidth = function (_newWidth) { + const chronicleWidth = workitemElement.offsetWidth - _newWidth - workitemSliderElement.offsetWidth; + workitemChronicleElement.style.flexBasis = `${chronicleWidth}px`; + imixsOfficeWorkitem.setCookie("imixs.office.document.workitem.formwidth", _newWidth, 14); + }, + + /* + * reduce the with of the chronicle + */ + expandChronicle = function () { + let newSize = validateFormMinMaxWidth(workitemElement.offsetWidth / 2); + imixsOfficeWorkitem.updateFormWidth(newSize); + }, + + /* + * increase the with of the chronicle + */ + shrinkChronicle = function () { + let newSize = validateFormMinMaxWidth(workitemElement.offsetWidth - 340); + imixsOfficeWorkitem.updateFormWidth(newSize); + }, + + /* + * A document loads the current document (link) into the documentPreviewIframe + * and displays the document title. + + */ + showDocument = function (title, link) { + if (!link || link == "") { + return; // no url defined! } - }); + // cut title if length >64 chars + if (title.length > 64) { + title = title.substring(0, 64) + "..."; + } + $('.document-title', documentPreview).text(title); + documentPreviewURL = link; + documentPreviewIframe.contentWindow.location.replace(documentPreviewURL); - inputField.val(newValue); - - // clear input - inputSearchField.val(''); - - // update the item name (find next textarea) - if (itemInput && itemInput.length==1) { - var oldItemValue=itemInput.val(); - if (oldItemValue==='') { - itemInput.val(selection); - } else { - if (itemInput.val().indexOf(selection)==-1) { - itemInput.val(itemInput.val()+'\n' + selection); + // update deeplink + $('.document-deeplink').attr('href', documentPreviewURL); + + // activate preview if minimized! + if (!isWorkitemLoading && documentPreviewIframe.id === 'imixs_document_iframe_embedded') { + toggleChronicleDocuments(); + } + $('.document-nav').show(); + }, + + + /* + * This method toggles into the chronicle documents view + */ + toggleChronicleHistory = function () { + $('.chronicle-tab-history').parent().addClass('active'); + $('.chronicle-tab-documents').parent().removeClass('active'); + $('#imixs-workitem-chronicle-tab-documents').hide(); + $('#imixs-workitem-chronicle-tab-history').show(); + // set a right margin for history view only + $('.imixs-workitem-chronicle-content').css('width', 'calc(100% - 30px)'); + + }, + toggleChronicleDocuments = function () { + $('.chronicle-tab-documents').parent().addClass('active'); + $('.chronicle-tab-history').parent().removeClass('active'); + $('#imixs-workitem-chronicle-tab-history').hide(); + $('#imixs-workitem-chronicle-tab-documents').show(); + // set a right margin for history view only + $('.imixs-workitem-chronicle-content').css('width', 'calc(100% - 0px)'); + }, + + + registerSaveWorkitemListener = function (callback) { + callbackRegistrySaveWorkitem.push(callback); + }, + + /* + * Helper method handles registered callback methods + */ + saveWorkitemHandler = function (confirmMessage, uiWorkflowAction) { + if (confirmMessage) { + if (confirm(confirmMessage) == false) { + return false; } } - } - - // finally trigger on change event - inputSearchField.trigger('change'); - - }, - - - /* Deletes a given $uniqueid from the item $workitemref */ - deleteWorkitemRef = function(link) { - - // find the input field based on the given link. - var parent=$(link).closest( "span[id$='datalist']" ); - var inputSearchField=$(parent).prevAll('input'); - var itemInput = $('textarea',inputSearchField.parent()); - // find textarea.... - var inputField = $('textarea.workitemlink-textarea-input'); - var workitemref=$(link).data('workitemref'); - - // only multi list is supported - if (inputField.is("textarea")) { - var list=inputField.val().split(/\r?\n/); - var newList= new Array(); - $.each(list, function( key, value ) { - if (value!='' && value!=workitemref) { + // do we have callbacks? + if (callbackRegistrySaveWorkitem) { + for (const saveCallback of callbackRegistrySaveWorkitem) { + var callBackResult = saveCallback(uiWorkflowAction); + if (callBackResult === false) { + return false; + } + } + } + return true; + }, + + + /** + * WorkitemRef Input Widget + */ + + /* + * initializes an input element for autocompletion. + * the param 'resultlistid' is optional and defines the element + * containing the search result. + * The callback method is optional and triggered when a new element was selected + * from the suggest list + */ + workitemRefInitInput = function (inputElement, searchCallback, resultlistId, selectCallback) { + + // set id for result list element + if (!resultlistId || resultlistId === '') { + resultlistId = 'autocomplete-resultlist'; // default name + } + $(inputElement).attr('data-resultlist', resultlistId); + + // add a input event handler with delay to serach for suggestions.... + $(inputElement).on('input', delay(function () { + if (!autocompleteSearchReady) { + return; // start only after first key down! (see below) + } + // store the current input id + autocompleteInputID = inputElement.name; + currentSelectCallback = selectCallback; + + // get data options + var options = $(inputElement).attr('data-options'); + searchCallback({ phrase: this.value, options: options }); + }, 500)).trigger('input'); + + + // hide the suggest list on blur event + $(inputElement).on("blur", delay(function (event) { + $("[id$=" + $(this).data('resultlist') + "]").hide(); + }, 200)); + + + /*execute a function presses a key on the keyboard:*/ + $(inputElement).keydown(function (e) { + autocompleteSearchReady = true; // init serach mode + if (e.keyCode == 40) { + /*If the arrow DOWN key is pressed, + increase the currentFocus variable:*/ + autocompleteSelectNextElement(this); + } else if (e.keyCode == 38) { //up + /*If the arrow UP key is pressed, + decrease the currentFocus variable:*/ + autocompleteSelectPrevElement(this); + } else if (e.keyCode == 13) { + /*If the ENTER key is pressed, prevent the form from being submitted,*/ + e.preventDefault(); + selectActiveElement(this); + } + }); + + // turn autocomplete of + $(inputElement).attr('autocomplete', 'off'); + }, + + + /** + * Callback method for workiemLink Autocomplete feature + */ + addWorkitemRef = function (selection, inputSearchField) { + // find textarea.... + var inputField = $('textarea.workitemlink-textarea-input'); + var itemInput = $('textarea', inputSearchField.parent()); + var list = inputField.val(); + var list = inputField.val().split(/\r?\n/); + var newList = new Array(); + $.each(list, function (key, value) { + if (value != '') { if (!newList.includes(value)) { newList.push(value); - } + } } }); - - var newValue=""; - $.each(newList, function( key, value ) { - if (key==0) { - newValue=newValue+value; - } else { - newValue=newValue + "\n"+value; + if (!newList.includes(selection)) { + newList.push(selection); + } + + var newValue = ""; + $.each(newList, function (key, value) { + if (key == 0) { + newValue = newValue + value; + } else { + newValue = newValue + "\n" + value; } }); inputField.val(newValue); - + + // clear input + inputSearchField.val(''); + // update the item name (find next textarea) - if (itemInput && itemInput.length==1) { - var itemUpdateValue=itemInput.val(); - if (itemUpdateValue.indexOf(workitemref)>-1) { - itemUpdateValue=itemUpdateValue.replace(workitemref+ "\n", ""); - itemUpdateValue=itemUpdateValue.replace(workitemref, ""); - itemInput.val(itemUpdateValue); + if (itemInput && itemInput.length == 1) { + var oldItemValue = itemInput.val(); + if (oldItemValue === '') { + itemInput.val(selection); + } else { + if (itemInput.val().indexOf(selection) == -1) { + itemInput.val(itemInput.val() + '\n' + selection); + } } - itemInput.trigger('change'); } // finally trigger on change event inputSearchField.trigger('change'); - - } - }, + }, + + + /* Deletes a given $uniqueid from the item $workitemref */ + deleteWorkitemRef = function (link) { + + // find the input field based on the given link. + var parent = $(link).closest("span[id$='datalist']"); + var inputSearchField = $(parent).prevAll('input'); + var itemInput = $('textarea', inputSearchField.parent()); + // find textarea.... + var inputField = $('textarea.workitemlink-textarea-input'); + var workitemref = $(link).data('workitemref'); + + // only multi list is supported + if (inputField.is("textarea")) { + var list = inputField.val().split(/\r?\n/); + var newList = new Array(); + $.each(list, function (key, value) { + if (value != '' && value != workitemref) { + if (!newList.includes(value)) { + newList.push(value); + } + } + }); + + var newValue = ""; + $.each(newList, function (key, value) { + if (key == 0) { + newValue = newValue + value; + } else { + newValue = newValue + "\n" + value; + } + }); + + inputField.val(newValue); + + // update the item name (find next textarea) + if (itemInput && itemInput.length == 1) { + var itemUpdateValue = itemInput.val(); + if (itemUpdateValue.indexOf(workitemref) > -1) { + itemUpdateValue = itemUpdateValue.replace(workitemref + "\n", ""); + itemUpdateValue = itemUpdateValue.replace(workitemref, ""); + itemInput.val(itemUpdateValue); + } + itemInput.trigger('change'); + } + + // finally trigger on change event + inputSearchField.trigger('change'); - /** - * Opens a popup window with the QR-Code to print - */ - printQRCode=function () { - var qrCodeWindow = window + } + }, + + + /** + * Opens a popup window with the QR-Code to print + */ + printQRCode = function () { + var qrCodeWindow = window .open( - imixsOfficeMain.contextPath+"/pages/workitems/qrcode_print.jsf?id="+imixsOfficeMain.workitem_uid, - "message.print", - "width=300,height=280,status=no,scrollbars=no,resizable=yes"); - qrCodeWindow.focus(); - }, - - - /** - * Format IBAN in 4-digit blocks - */ - formatIBAN=function (inputElement) { - let value = inputElement.value.replace(/ /g, ''); // Entferne vorhandene Leerzeichen - let formattedIBAN = ''; - for (let i = 0; i < value.length; i += 4) { - let block = value.slice(i, i + 4); - formattedIBAN += block + ' '; - } - inputElement.value = formattedIBAN.trim().toUpperCase(); // Entferne Leerzeichen am Ende - }; - + imixsOfficeMain.contextPath + "/pages/workitems/qrcode_print.jsf?id=" + imixsOfficeMain.workitem_uid, + "message.print", + "width=300,height=280,status=no,scrollbars=no,resizable=yes"); + qrCodeWindow.focus(); + }, + + + /** + * Format IBAN in 4-digit blocks + */ + formatIBAN = function (inputElement) { + let value = inputElement.value.replace(/ /g, ''); // Entferne vorhandene Leerzeichen + let formattedIBAN = ''; + for (let i = 0; i < value.length; i += 4) { + let block = value.slice(i, i + 4); + formattedIBAN += block + ' '; + } + inputElement.value = formattedIBAN.trim().toUpperCase(); // Entferne Leerzeichen am Ende + }; + // public API return { - readCookie : readCookie, - setCookie : setCookie, - printQRCode : printQRCode, - autoPreviewPDF : autoPreviewPDF, - initSignaturePad : initSignaturePad, - updateFormWidth : updateFormWidth, - expandChronicle : expandChronicle, - shrinkChronicle : shrinkChronicle, - clearDocumentPreview : clearDocumentPreview, - updateAttachmentLinks : updateAttachmentLinks, - showDocument : showDocument, - toggleChronicleHistory : toggleChronicleHistory, + readCookie: readCookie, + setCookie: setCookie, + printQRCode: printQRCode, + autoPreviewPDF: autoPreviewPDF, + initSignaturePad: initSignaturePad, + updateFormWidth: updateFormWidth, + expandChronicle: expandChronicle, + shrinkChronicle: shrinkChronicle, + clearDocumentPreview: clearDocumentPreview, + updateAttachmentLinks: updateAttachmentLinks, + showDocument: showDocument, + toggleChronicleHistory: toggleChronicleHistory, toggleChronicleDocuments: toggleChronicleDocuments, - minimizeDocumentPreview : minimizeDocumentPreview, - maximizeDocumentPreview : maximizeDocumentPreview, - closeDocumentPreview : closeDocumentPreview, + minimizeDocumentPreview: minimizeDocumentPreview, + maximizeDocumentPreview: maximizeDocumentPreview, + closeDocumentPreview: closeDocumentPreview, saveWorkitemHandler: saveWorkitemHandler, registerSaveWorkitemListener: registerSaveWorkitemListener, validateFormMinMaxWidth: validateFormMinMaxWidth, @@ -698,14 +702,13 @@ IMIXS.org.imixs.workflow.workitem = (function() { addWorkitemRef: addWorkitemRef, deleteWorkitemRef: deleteWorkitemRef, formatIBAN: formatIBAN, - - onFileUploadChange : onFileUploadChange + + onFileUploadChange: onFileUploadChange }; -}()); - +}()); + // Define public namespace -var imixsOfficeWorkitem = IMIXS.org.imixs.workflow.workitem; - - - \ No newline at end of file +var imixsOfficeWorkitem = IMIXS.org.imixs.workflow.workitem; + + diff --git a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme.css b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme.css index a8cde4c5..e2597536 100644 --- a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme.css +++ b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme.css @@ -26,13 +26,11 @@ body.loading .imixs-wait { left: 0; height: 100%; width: 100%; - background: rgba(255, 255, 255, .8) url('../icons/ajax-loader.gif') 50% - 50% no-repeat; + background: rgba(255, 255, 255, .8) url('../icons/ajax-loader.gif') 50% 50% no-repeat; } .loading { - background: rgba(255, 255, 255, .8) url(../icons/ajax-loader.gif) 50% - 50% no-repeat; + background: rgba(255, 255, 255, .8) url(../icons/ajax-loader.gif) 50% 50% no-repeat; color: #ccc; } @@ -56,7 +54,7 @@ body.loading .imixs-wait { background-color: #145267; } -#imixs-header .branding { +#imixs-header .branding { min-width: 120px; } @@ -118,7 +116,8 @@ body.loading .imixs-wait { margin: 0em 0em 0em 2em; } -#footer1, #footer2 { +#footer1, +#footer2 { background-color: #f4f4f4; color: #888; } @@ -127,7 +126,8 @@ body.loading .imixs-wait { text-align: right; } -#footer2 li, #footer a { +#footer2 li, +#footer a { color: #888; } @@ -142,14 +142,22 @@ section { column-gap: 10px; } -button:hover, input[type="button"]:hover, input[type="submit"]:hover, - .button:hover, a.button:hover { +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover, +.button:hover, +a.button:hover { font-weight: 700; } -button:active, input[type="button"]:active, input[type="submit"]:active, - input[type="submit"]:focus, .button:active, a.button:active, button:focus, - input[type="button"]:focus { +button:active, +input[type="button"]:active, +input[type="submit"]:active, +input[type="submit"]:focus, +.button:active, +a.button:active, +button:focus, +input[type="button"]:focus { font-weight: 700; } @@ -173,8 +181,10 @@ select { color: #aaa; } -input[type="text"]:focus, input[type="password"]:focus, textarea:focus, - select:focus { +input[type="text"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -182,19 +192,17 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus, outline: 0; outline: thin dotted \9; border-color: rgba(204, 204, 204, 0.8); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px - rgba(102, 102, 102, 0.2); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px - rgba(102, 102, 102, 0.2); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px - rgba(102, 102, 102, 0.2); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 102, 102, 0.2); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 102, 102, 0.2); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 102, 102, 0.2); } dl dt { font-weight: bold; } -dl dt input[type="text"], dl dt input[type="password"] { +dl dt input[type="text"], +dl dt input[type="password"] { width: 100%; border: none; -webkit-box-shadow: none; @@ -315,6 +323,7 @@ dl dt input[type="text"]:hover { -moz-border-radius: 4px; border-radius: 4px; } + /* f4f4f4 145267 */ .imixs-historyentry { display: flex; @@ -356,7 +365,8 @@ dl dt input[type="text"]:hover { .imixs-historyentry.active { background-color: #fefefe; border-bottom: 4px solid #faa732; - color: #2a6496;; + color: #2a6496; + ; } .imixs-historyentry.active .image-block .imixs-typicon { @@ -447,13 +457,18 @@ dl dt input[type="text"]:hover { } /* --- Imixs-Form --------------------------- */ +.imixs-workitem .imixs-form-plane { + display: flex; +} + .imixs-form .imixs-header { padding: 0px 10px 10px 10px; margin-bottom: 5px; border-bottom: 2px solid #ddd; } -.imixs-form .imixs-header label, .imixs-form .imixs-footer label { +.imixs-form .imixs-header label, +.imixs-form .imixs-footer label { font-weight: bold; } @@ -461,8 +476,8 @@ dl dt input[type="text"]:hover { font-weight: bold; } -.imixs-form .imixs-body input[type="radio"]+label, .imixs-form .imixs-body input[type="checkbox"]+label - { +.imixs-form .imixs-body input[type="radio"]+label, +.imixs-form .imixs-body input[type="checkbox"]+label { font-weight: normal; } @@ -470,7 +485,9 @@ dl dt input[type="text"]:hover { margin: 5px auto; } -.imixs-form .imixs-header table, td, th { +.imixs-form .imixs-header table, +td, +th { padding: 0 10px 0 0; } @@ -487,16 +504,16 @@ dl dt input[type="text"]:hover { padding: 1em 0.4em; } -.imixs-form h1 { +.imixs-form h1 { font-size: 1.8em; margin-bottom: 0.3em; } -.imixs-form h2 { +.imixs-form h2 { font-size: 1.5em; } -.imixs-form h3 { +.imixs-form h3 { font-size: 1.5em; } @@ -516,8 +533,10 @@ dl dt input[type="text"]:hover { margin: 10px 0 0 0; } -.imixs-form-section, .imixs-form-section-1, .imixs-form-section-2, - .imixs-form-section-3 { +.imixs-form-section, +.imixs-form-section-1, +.imixs-form-section-2, +.imixs-form-section-3 { margin-left: 10px; margin-top: 10px; margin-bottom: 10px; @@ -531,7 +550,9 @@ dl dt input[type="text"]:hover { width: 100%; } -.imixs-form table, td, th { +.imixs-form table, +td, +th { border: none; } @@ -545,9 +566,11 @@ dl dt input[type="text"]:hover { row-gap: 10px; grid-template-columns: repeat(12, minmax(10px, 210px)); } + .imixs-form-section-flex dl dd { position: relative; } + /* --- Imixs-Form-Panel --------------------------- */ .imixs-form-panel { margin-top: 10px; @@ -557,6 +580,7 @@ dl dt input[type="text"]:hover { .imixs-form-panel h1 { padding-top: 10px; } + /* --- Imixs-Tabs ---------------------------------- */ .imixs-form .imixs-body .imixs-tabs { padding: 0; @@ -633,9 +657,10 @@ dl dt input[type="text"]:hover { margin-top: 20px; } -.imixs-comment-tabs .imixs-form-section, .imixs-comment-tabs .imixs-form-section-1, - .imixs-comment-tabs .imixs-form-section-2, .imixs-comment-tabs .imixs-form-section-3 - { +.imixs-comment-tabs .imixs-form-section, +.imixs-comment-tabs .imixs-form-section-1, +.imixs-comment-tabs .imixs-form-section-2, +.imixs-comment-tabs .imixs-form-section-3 { margin-top: 0px; } @@ -822,9 +847,7 @@ dl dt input[type="text"]:hover { /* * Search */ -.imixs-search .imixs-header { - -} +.imixs-search .imixs-header {} .search-result-summary { padding: 0 10px 10px; @@ -858,12 +881,15 @@ dl dt input[type="text"]:hover { font-size: 20px; } -.imixs-view table, td, th { +.imixs-view table, +td, +th { border: none; } /* #ECF3F8 #FFDF89 */ -.imixs-form-header, .imixs-view-header { +.imixs-form-header, +.imixs-view-header { background: #ECF3F8; padding: 5px 10px 5px; margin-bottom: 20px; @@ -873,7 +899,8 @@ dl dt input[type="text"]:hover { border-radius: 10px; } -.imixs-form-footer, .imixs-view-footer { +.imixs-form-footer, +.imixs-view-footer { background: #ECF3F8; padding: 10px 10px; margin-bottom: 20px; @@ -900,7 +927,7 @@ dl dt input[type="text"]:hover { /* --- Imixs Attachments ------------------------------ */ .imixs-form-panel-documentviewer .imixs-form-attachments .col-6, - .imixs-form-tab-documentviewer .imixs-form-attachments .col-6 { +.imixs-form-tab-documentviewer .imixs-form-attachments .col-6 { clear: both; float: none; width: 100% !important; @@ -937,7 +964,8 @@ dl dt input[type="text"]:hover { font-size: 1.4em; } -.imixs-form-attachments-upload .typcn, .imixs-document-storage .typcn { +.imixs-form-attachments-upload .typcn, +.imixs-document-storage .typcn { font-size: 1.6rem; } @@ -947,19 +975,22 @@ dl dt input[type="text"]:hover { } -.imixs-form .imixs-body .imixs-tabs { -} +.imixs-form .imixs-body .imixs-tabs {} + .ref-document-search-list {} + .ref-document-search-entry { - margin-bottom: 20px; + margin-bottom: 20px; } + .ref-document-search-entry-link { - font-size: 1.2rem; - border-bottom:1px solid #ccc; - width: 100%; + font-size: 1.2rem; + border-bottom: 1px solid #ccc; + width: 100%; } + .ref-document-search-entry-status { - font-weight: bold; + font-weight: bold; } @@ -997,9 +1028,7 @@ dl dt input[type="text"]:hover { } /* --- Imixs Workflow Actions ------------------------------ */ -.imixs-workflow-action.ui-button { - -} +.imixs-workflow-action.ui-button {} .imixs-close-action.ui-button { background: #faa732; @@ -1028,32 +1057,29 @@ dl dt input[type="text"]:hover { .imixs-suggest { width: 100% !important; - background: url(./idea_14.png) no-repeat scroll left center white - !important; + background: url(./idea_14.png) no-repeat scroll left center white !important; background-position: 4px 6px, center !important; padding-left: 22px !important; } .imixs-date { width: 110px !important; - background: url(./calendar_14.png) no-repeat scroll left center white - !important; + background: url(./calendar_14.png) no-repeat scroll left center white !important; background-position: 4px 6px, center !important; padding-left: 22px !important; } .imixs-suggest { width: 100% !important; - background: url(./idea_14.png) no-repeat scroll left center white - !important; + background: url(./idea_14.png) no-repeat scroll left center white !important; background-position: 4px 6px, center !important; padding-left: 22px !important; } -.imixs-username, .imixs-usergroup { +.imixs-username, +.imixs-usergroup { width: 100% !important; - background: url(./group_16.png) no-repeat scroll left center white - !important; + background: url(./group_16.png) no-repeat scroll left center white !important; background-position: 4px 6px, center !important; padding-left: 24px !important; } @@ -1065,13 +1091,12 @@ dl dt input[type="text"]:hover { width: 364px; height: 154px; } -.imixs-signature-pad canvas { -} -.imixs-signature-clear-action { -} +.imixs-signature-pad canvas {} + +.imixs-signature-clear-action {} -dl dd .imixs-datetime-picker select { +dl dd .imixs-datetime-picker select { width: 50px; } @@ -1097,7 +1122,8 @@ dl dd .imixs-datetime-picker select { border-bottom: 1px solid #206B87; } -.imixs-form .imixsdatatable td, th { +.imixs-form .imixsdatatable td, +th { padding: 5px; } @@ -1109,11 +1135,11 @@ dl dd .imixs-datetime-picker select { border: none; } -.imixsdatatable td { +.imixsdatatable td { border: 1px solid #ddd; } -.imixsdatatable td.ui-state-hover { +.imixsdatatable td.ui-state-hover { border: 1px solid #ddd; } @@ -1247,7 +1273,8 @@ dl dd .imixs-datetime-picker select { clear: left; } -.imixsFileUpload_button, .imixsLink_button { +.imixsFileUpload_button, +.imixsLink_button { width: 160px; margin-bottom: 5px; margin-right: 10px; @@ -1316,7 +1343,8 @@ dl dd .imixs-datetime-picker select { margin-left: 4px; } -.imixs-typicon a, .imixs-favorite a { +.imixs-typicon a, +.imixs-favorite a { color: inherit; } @@ -1328,8 +1356,10 @@ dl dd .imixs-datetime-picker select { color: #95CF5E; } -.icon-main.imixs-warning, .imixs-favorite .imixs-info { - color: #faa732;; +.icon-main.imixs-warning, +.imixs-favorite .imixs-info { + color: #faa732; + ; } .icon-main.imixs-error { @@ -1420,7 +1450,8 @@ dl dd .imixs-datetime-picker select { .icon-sub.imixs-warning { font-size: 14px; - background-color: #faa732;; + background-color: #faa732; + ; color: #fff; } @@ -1486,13 +1517,13 @@ dl dd .imixs-datetime-picker select { margin: 0; } -.imixs-timeline .imixs-timeline-entry-date { +.imixs-timeline .imixs-timeline-entry-date { margin: 10px 0 0 0; padding: 0; line-height: 10px; } -.imixs-timeline .workitemref-out .imixs-timeline-entry-date { +.imixs-timeline .workitemref-out .imixs-timeline-entry-date { text-align: right; } @@ -1540,7 +1571,8 @@ dl dd .imixs-datetime-picker select { font-style: italic; } -input[type="text"]:disabled, textarea:disabled { +input[type="text"]:disabled, +textarea:disabled { background-color: #fafafa; border: none; } @@ -1597,7 +1629,8 @@ input:disabled.imixs-date { } .roles-and-rights tr.acl-roles { - background: #ffe6c0;; + background: #ffe6c0; + ; } .roles-and-rights tr.processes { @@ -1639,23 +1672,27 @@ input:disabled.imixs-date { .imixs-portlet { grid-column-start: span 4; } + .imixs-portlet:nth-child(3n+3) { border-right: none; } - .imixs-form .imixs-body .imixs-form-tabs .col-8, .imixs-form .imixs-body .imixs-form-tabs .col-4 - { + + .imixs-form .imixs-body .imixs-form-tabs .col-8, + .imixs-form .imixs-body .imixs-form-tabs .col-4 { border-right: none; width: 100% !important; padding: 0; } - .imixs-form .imixs-body .row .col-8, .imixs-form .imixs-body .row .col-4 - { + + .imixs-form .imixs-body .row .col-8, + .imixs-form .imixs-body .row .col-4 { border-right: none; width: 100% !important; padding: 0; } - .imixs-form-panel-documentviewer .col-6, .imixs-form-tab-documentviewer .col-6 - { + + .imixs-form-panel-documentviewer .col-6, + .imixs-form-tab-documentviewer .col-6 { clear: both; float: none; width: 100% !important; @@ -1668,127 +1705,156 @@ input:disabled.imixs-date { #imixs-historynav { display: none; } + #imixs-header .imixs-about { display: none; } + #imixs-branding-text { font-size: 2.6rem; padding-top: 10px; } + .imixs-portlet { grid-column-start: span 6; } - .imixs-portlet.imixs-portlet-worklist, .imixs-portlet.imixs-portlet-favorites, - .imixs-portlet.startprocess { + + .imixs-portlet.imixs-portlet-worklist, + .imixs-portlet.imixs-portlet-favorites, + .imixs-portlet.startprocess { grid-column-start: span 6; } + .imixs-portlet:nth-child(1n+1) { border-right: 2px solid #ddd; } + .imixs-portlet:nth-child(2n+2) { border-right: none; } - .imixs-form, .imixs-view { + + .imixs-form, + .imixs-view { font-size: 1.1em; } - .imixs-footer .imixs-delete-action, .imixs-footer .imixs-workflow-action, - .imixs-footer .imixs-close-action, .imixs-footer .imixs-print-action { + + .imixs-footer .imixs-delete-action, + .imixs-footer .imixs-workflow-action, + .imixs-footer .imixs-close-action, + .imixs-footer .imixs-print-action { margin: 0 10px 10px 0; font-size: 1.1em; } + + .imixs-workitem .imixs-form-plane { + flex-direction: column; + } + .imixs-reports { display: none; } } /* 868 */ -@media -screen -and -(max-width: -768px) -{ -.imixs-portlet { - grid-column-start: span 12; -} +@media screen and (max-width: 768px) { + .imixs-portlet { + grid-column-start: span 12; + } -.imixs-portlet.imixs-portlet-worklist, .imixs-portlet.imixs-portlet-favorites, + .imixs-portlet.imixs-portlet-worklist, + .imixs-portlet.imixs-portlet-favorites, .imixs-portlet.startprocess { - grid-column-start: span 12; -} + grid-column-start: span 12; + } -.imixs-portlet { - border-right: none; -} + .imixs-portlet { + border-right: none; + } -.imixs-portlet:nth-child(1n+1) { - border-right: none; -} + .imixs-portlet:nth-child(1n+1) { + border-right: none; + } -#imixs-servicenav .toolbar { - border: none; -} + #imixs-servicenav .toolbar { + border: none; + } -#imixs-branding { - background-image: none; - display: none; -} + #imixs-branding { + background-image: none; + display: none; + } -.imixs-form, .imixs-view { - font-size: 1.2em; -} + .imixs-form, + .imixs-view { + font-size: 1.2em; + } -.imixs-footer .imixs-delete-action, .imixs-footer .imixs-workflow-action, - .imixs-footer .imixs-close-action, .imixs-footer .imixs-print-action { - margin: 0 10px 10px 0; - font-size: 1.1em; -} + .imixs-footer .imixs-delete-action, + .imixs-footer .imixs-workflow-action, + .imixs-footer .imixs-close-action, + .imixs-footer .imixs-print-action { + margin: 0 10px 10px 0; + font-size: 1.1em; + } -.imixsQrCode { - display: none; -} + .imixsQrCode { + display: none; + } -.imixs-form .imixs-body .imixs-form-instruction-right { - padding-left: 0px; -} + .imixs-form .imixs-body .imixs-form-instruction-right { + padding-left: 0px; + } } + @media screen and (max-width: 548px) { #imixs-servicenav .toolbar { padding: 0 8px; } + #imixs-servicenav .toolbar.login { float: right; } + #imixs-servicenav li { margin: 0em 0em 0em 0em; } + #imixs-content { padding: 0px; } - .imixs-header h1, .imixs-footer h1 { + + .imixs-header h1, + .imixs-footer h1 { font-size: 1.7em; } + #imixs-header .toolbar.search { margin-left: 0px; } + #imixs-header .toolbar.login span.login-name { display: none; } + .imixs-form-panel { border: none; } - .imixs-form, .imixs-view { + + .imixs-form, + .imixs-view { font-size: 1.2em; } + .imixs-workitem-chronicle .imixs-delete-action, - .imixs-workitem-chronicle .imixs-workflow-action, - .imixs-workitem-chronicle .imixs-close-action, - .imixs-workitem-chronicle .imixs-print-action { + .imixs-workitem-chronicle .imixs-workflow-action, + .imixs-workitem-chronicle .imixs-close-action, + .imixs-workitem-chronicle .imixs-print-action { width: 100%; margin: 0 0 15px 0; font-size: 1.2em; } + .imixs-tabs ul li { width: 100%; } diff --git a/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem.xhtml b/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem.xhtml index 55b438bc..f8f195db 100644 --- a/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem.xhtml +++ b/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem.xhtml @@ -1,11 +1,7 @@ - + @@ -22,7 +18,8 @@ - @@ -32,16 +29,16 @@ @@ -101,43 +97,43 @@ - - - -
-
- + +
+
+
+ +
+ + + +
+
+

+ + + + + + +

+ + +
- - - - -
-
- -

- - - - - - -

- - -
- - +
- - + +
@@ -147,18 +143,17 @@
- - - - - + + + + + - + - + - - + \ No newline at end of file