-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue #510
- Loading branch information
Showing
5 changed files
with
156 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
imixs-office-workflow-app/src/main/webapp/layout/test/test.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
|
|
||
| .imixs-workitem { | ||
| display: flex; /* or inline-flex */ | ||
| flex-direction: row ; | ||
| } | ||
|
|
||
|
|
||
| .imixs-workitem-form { | ||
| flex-basis: 600px; | ||
| } | ||
| .imixs-slider { | ||
| xwidth:60px; | ||
| xmin-width: 60px; | ||
| background: #ccc; | ||
| flex-basis: 60px; | ||
| } | ||
|
|
||
| .imixs-workitem-chronicle { | ||
| flex-basis: 0; | ||
| flex-grow: 1; | ||
| xmin-width:0; | ||
| xoverflow: hidden; | ||
| } |
42 changes: 42 additions & 0 deletions
42
imixs-office-workflow-app/src/main/webapp/layout/test/test.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Insert title here</title> | ||
| <link href="test.css" charset="UTF-8" type="text/css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="test.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
| <h1>Flex Demo</h1> | ||
| </header> | ||
|
|
||
| <div class="imixs-workitem"> | ||
|
|
||
|
|
||
| <div class="imixs-workitem-form"> | ||
| <h2>The Form</h2> | ||
| <p>Note that that browser support for these values is nuanced. | ||
| For example, space-between never got support from some versions of | ||
| Edge, and start/end/left/right aren’t in Chrome yet. MDN has | ||
| detailed charts. The safest values are flex-start, flex-end, and | ||
| center. There are also two additional keywords you can pair with | ||
| these values: safe and unsafe. Using safe ensures that however you | ||
| do this type of positioning, you can’t push an element such that it | ||
| renders off-screen (e.g. off the top) in such a way the content | ||
| can’t be scrolled too (called “data loss”).</p> | ||
| </div> | ||
| <div class="imixs-slider"></div> | ||
| <div class="imixs-workitem-chronicle"> | ||
| <h2>The Chronicle</h2> | ||
| <p> | ||
| nowrap top. | ||
|
|
||
|
|
||
| start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center. There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it</p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
45 changes: 45 additions & 0 deletions
45
imixs-office-workflow-app/src/main/webapp/layout/test/test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
|
|
||
| let sliderPosX; | ||
| let isChronicleResizing; | ||
| let chronicleElement; | ||
| let formElement; | ||
|
|
||
| window.onload = function () { | ||
|
|
||
| console.log('Dokument geladen'); | ||
| chronicleElement = document.querySelector('.imixs-workitem > .imixs-workitem-chronicle'); | ||
| formElement=document.querySelector('.imixs-workitem > .imixs-workitem-form'); | ||
|
|
||
| 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; | ||
|
|
||
| const parent=formElement.parentElement; | ||
| console.log('parent width = '+ parent.offsetWidth); | ||
| console.log('slider posX = '+ sliderPosX); | ||
| console.log('current width='+formElement.offsetWidth); | ||
| let _newWidth=formElement.offsetWidth + (e.clientX - sliderPosX); | ||
| console.log('new width='+_newWidth); | ||
|
|
||
|
|
||
| formElement.style.width = `${_newWidth}px`; | ||
| // formElement.setAttribute('style', `${_newWidth}px`); | ||
| formElement.style.flexBasis = `${_newWidth}px`; | ||
|
|
||
| // chronicleElement.style.width = `${parent.offsetWidth-formElement.offsetWidth-60}px`; | ||
|
|
||
|
|
||
| sliderPosX = e.clientX; | ||
|
|
||
| }); | ||
|
|
||
| } | ||
|
|