diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css index 4f04db211b8a1e1309930198cd4b1c29dddb0c07..c84642e94a86486f8dbc747d0b55162c81d2818b 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css +++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css @@ -72,3 +72,30 @@ border-bottom: solid 3px #79818d; margin-bottom: 0; } + +.fullscreen-tabs { + position: absolute !important; + top: 0px; + left: 0px; +} + +.fullscreen { + z-index: 9999; + width: 100%; + height: calc(100% - 40px); + position: fixed !important; + top: 40px; + left: 0; +} + +.toggle-fullscreen { + background-image: url("img/iconFullscreen.png"); + margin: 5px; + display: block; + background-size: cover; + background-position: center; + min-width: 20px; + max-width: 20px; + min-height: 20px; + max-height: 20px; +} diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..6d3c7e1c0d132f6dcb0451f538ef0b7d41e33688 Binary files /dev/null and b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/iconFullscreen.png differ diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css index b20c63e3e039f8f468d8e2bf4ef2df1ff36152eb..c7826d4f5120e786f338a3a092e1fd13179a04f5 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css +++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css @@ -110,15 +110,6 @@ span.select2 { height: 900px; } -.fullscreen { - z-index: 9999; - width: 100%; - height: 100%; - position: fixed !important; - top: 0; - left: 0; -} - .hidden { display: none !important; } @@ -323,7 +314,7 @@ span.select2 { color: white !important; } -.highlightsoft { +.highlight-soft { background-color: lightblue !important; fill: lightblue !important; color: black !important; diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js index 484a851b2c120c518bdd386cbd197112dbec57e5..881f4707b33c289f56715f893f6b11f270f91571 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js +++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js @@ -6,9 +6,9 @@ function performVerificationFix(verificationEntry, fix, id) { console.log("FIX", fix); // highlight row - $('.verification-container').removeClass('highlightsoft'); - $('#ver-entry-' + id).addClass('highlightsoft'); cleanHighlightFunction(); + $('.verification-container').removeClass('highlight-soft'); + $('#ver-entry-' + id).addClass('highlight-soft'); for (let i = 0; i < fix.actions.length; i++) { switch (fix.actions[i].actionType) { case 'SHOW': diff --git a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js index 221e7cd0341036880990007cae4e045fd7334967..b40ca4a69168be6b46cd19a141344da36a7bb5a0 100644 --- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js +++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js @@ -6,28 +6,6 @@ let CLASS_NAMES = { literalExpression: 'dmn-icon-literal-expression' }; -// Fullscreen functionality for dmn table -$(document).ready(function () { - $(".dmn-js-parent").dblclick(function () { - $(".dmn-js-parent").toggleClass('fullscreen'); - $("#root-dmn-verifier").toggleClass('hidden'); - $("#dmn-top").toggleClass('hidden'); - $(".editor-tabs").toggleClass('hidden'); - // calc height - if ($(".dmn-js-parent").hasClass('fullscreen')) { - $(".dmn-js-parent").css('height', ''); - } else { - let dmnModelerHeight = $(window).height() / 2.5; - $(".dmn-js-parent").css('height', dmnModelerHeight + 'px'); - } - // zoom to fit full viewport - var activeEditor = dmnModeler.getActiveViewer(); - // access active editor components - var canvas = activeEditor.get('canvas'); - canvas.zoom('fit-viewport'); - }); -}); - $tabs.delegate('.tab', 'click', function (e) { var viewIdx = parseInt(this.getAttribute('data-id'), 10); var view = dmnModeler.getViews()[viewIdx]; @@ -54,10 +32,16 @@ dmnModeler.on('views.changed', function (event) { var {views, activeView} = event; // clear tabs $tabs.empty(); + // add fullscreen + $tabs.append($(` + <div class="toggle-fullscreen clickable" onclick="toggleFullscreen()"> + </div> + `)); + // add tabs views.forEach(function (v, idx) { const className = CLASS_NAMES[v.type]; var tab = $(` - <div class="tab ${v === activeView ? 'active' : ''}" + <div class="tab clickable ${v === activeView ? 'active' : ''}" data-id="${idx}" id="tab-dec-${v.element.id}"> <span class="${className}"></span> ${v.element.name || v.element.id} @@ -111,6 +95,26 @@ function openDiagram(dmnXML) { }); } +function toggleFullscreen() { + $(".dmn-js-parent").toggleClass('fullscreen'); + $("#root-dmn-verifier").toggleClass('hidden'); + $("#dmn-top").toggleClass('hidden'); + $(".editor-tabs").toggleClass('fullscreen-tabs'); + // calc height + if ($(".dmn-js-parent").hasClass('fullscreen')) { + $(".dmn-js-parent").css('height', ''); + } else { + let dmnModelerHeight = $(window).height() / 2.5; + $(".dmn-js-parent").css('height', dmnModelerHeight + 'px'); + } + // zoom to fit full viewport + var activeEditor = dmnModeler.getActiveViewer(); + // access active editor components + var canvas = activeEditor.get('canvas'); + //canvas.zoom('fit-viewport'); +} + +// ----- let renderHighlightFunction = []; function performHighlightFunction() { @@ -120,7 +124,7 @@ function performHighlightFunction() { } function cleanHighlightFunction() { - $('.verification-container').removeClass('highlightsoft'); + $('.verification-container').removeClass('highlight-soft'); for (let i = 0; i < renderHighlightFunction.length; i++) { renderHighlightFunction[i].clean(); }