Skip to content

Commit

Permalink
Merge pull request #543 from SergioCasCeb/maximize-minimize-button-se…
Browse files Browse the repository at this point in the history 
…rgion

Added a minimize/maximize button
  • Loading branch information
@egekorkan
egekorkan authored Dec 11, 2023
2 parents 0525001 + b68593a commit 1b83a3b
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 14 deletions.
34 changes: 32 additions & 2 deletions packages/web-new/src/scripts/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { validationView, validationTab } from './validation'
import { convertTDYamlToJson, detectProtocolSchemes } from '../../../core/dist/web-bundle.min.js'
import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS, resetValidationStatus } from './util'
import { editorList, getEditorData } from './editor'
import { textIcon } from './main.js'

/******************************************************************/
/* Console functionality */
Expand All @@ -36,11 +37,40 @@ import { editorList, getEditorData } from './editor'
//Main console elements
const errorContainer = document.querySelector(".console__content #console-error")
const errorTxt = document.querySelector(".console-error__txt")
export const visualizationOptions = document.querySelectorAll(".visualizations__option")
export const minMaxBtn = document.querySelector(".min-max")
export const visualizationOptions = document.querySelectorAll(".visualization__option")
export const visualizationContainers = document.querySelectorAll(".console-view")
const consoleElement = document.querySelector(".console")
const mainContentElement = document.querySelector(".main-content")

minMaxBtn.addEventListener("click", () => {

if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
mainContentElement.style.flex = "1 0"
consoleElement.style.flex = `0 40px`
minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")

textIcon.forEach(text => {
text.classList.remove("hiddenV")
})
} else {
textIcon.forEach(text => {
text.classList.add("hiddenV")
})

setTimeout(() => {
mainContentElement.style.flex = "0 200px"
consoleElement.style.flex = `1 0`
minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
}, 50);

}
})

/**
* Unchecks all visualizations btns and hides all visualization containers
* Unchecks all visualization btns and hides all visualization containers
*/
export function clearConsole() {
visualizationContainers.forEach(container => {
Expand Down
28 changes: 23 additions & 5 deletions packages/web-new/src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,14 @@ import './json-yaml'
import './settings-menu'
import './save-menu'
import './examples-menu'
import './console'
import {minMaxBtn} from './console'
import './open-api'
import './async-api'
import './aas'
import './defaults'
import './visualize'
import './validation'


/***********************************************************/
/* Loader */
/***********************************************************/
Expand All @@ -50,7 +49,7 @@ let stateCheck = setInterval(() => {
/***********************************************************/
/* Resizing functionality */
/***********************************************************/
const textIcon = document.querySelectorAll(".text-icon")
export const textIcon = document.querySelectorAll(".text-icon")
const resizerY = document.querySelector(".horizontal-divider")
const resizerX = document.querySelector(".vertical-divider")

Expand Down Expand Up @@ -163,9 +162,18 @@ function onmousemoveY(e) {
// DOWN
if (deltaY > 0) {
const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
b.style.flex = `0 ${h < 55 ? 50 : h}px`
b.style.flex = `0 ${h < 50 ? 40 : h}px`
t.style.flex = "1 0"
if (Math.round(parseInt(getComputedStyle(t).height) + deltaY) > 290) {

if(h > 39){
minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
}else{
minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
}

if (h > 290) {
textIcon.forEach(text => {
text.classList.remove("hiddenV")
})
Expand All @@ -176,6 +184,16 @@ function onmousemoveY(e) {
const h = Math.round(parseInt(getComputedStyle(t).height) + deltaY)
t.style.flex = `0 ${h < 210 ? 200 : h}px`
b.style.flex = "1 0"

if(h < 713){
minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
}else{
minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
}


if (h < 290) {
textIcon.forEach(text => {
text.classList.add("hiddenV")
Expand Down
27 changes: 26 additions & 1 deletion packages/web-new/src/styles/_console.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,32 @@
border-bottom: 2px solid var(--clr-primary-500);
padding: 0 1rem;

.visualizations {
.console-controllers {
display: flex;
align-items: center;
justify-content: center;

.min-max {
padding: 1rem .5rem;
appearance: none;
border: none;
background-color: var(--clr-neutral-50);
color: var(--clr-primary-500);
transition: color 250ms ease;

&:hover {
color: var(--clr-primary-900);
cursor: pointer;
}

&:disabled {
color: var(--clr-neutral-300);
cursor: auto;
}
}
}

.visualization {
height: 100%;
display: flex;
align-items: center;
Expand Down
27 changes: 26 additions & 1 deletion packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -692,8 +692,33 @@ main .console {
justify-content: space-between;
border-bottom: 2px solid var(--clr-primary-500);
padding: 0 1rem;
height: -moz-fit-content;
height: fit-content;
}
.console__tabs .console-controllers {
display: flex;
align-items: center;
justify-content: center;
}
.console__tabs .console-controllers .min-max {
padding: 1rem 0.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: var(--clr-neutral-50);
color: var(--clr-primary-500);
transition: color 250ms ease;
}
.console__tabs .console-controllers .min-max:hover {
color: var(--clr-primary-900);
cursor: pointer;
}
.console__tabs .console-controllers .min-max:disabled {
color: var(--clr-neutral-300);
cursor: auto;
}
.console__tabs .visualizations {
.console__tabs .visualization {
height: 100%;
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/styles.css.map
View file

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions packages/web-new/src/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,10 +239,13 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
<input type="radio" name="visualizations-option" id="aas-tab"
class="visualizations__option aas-tab-btn"
title="Conversion to Asset Administration Shell/Asset Interface Description">
<input type="radio" name="visualizations-option" id="defaults-tab"
class="visualizations__option defaults-tab-btn" title="Add or remove default values">
<input type="radio" name="visualizations-option" id="visualize-tab"
class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
<input type="radio" name="visualization-option" id="defaults-tab"
class="visualization__option defaults-tab-btn" title="Add or remove default values">
<input type="radio" name="visualization-option" id="visualize-tab"
class="visualization__option visualize-tab-btn" title="Tree or Graph TD visualizations">
</div>
<div class="console-controllers">
<button class="min-max"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></button>
</div>
</div>
<div class="console__content">
Expand Down

0 comments on commit 1b83a3b

Please sign in to comment.