Skip to content

Commit

Permalink
increase the height of variable type dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvladic
mvladic committed Nov 10, 2024
1 parent 65faa6d commit 95fbe0f
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 99 deletions.
44 changes: 20 additions & 24 deletions packages/eez-studio-ui/_stylesheets/project-editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -592,34 +592,30 @@
margin: 0;

border-radius: 4px;
overflow: hidden;
overflow: auto;

& > div {
height: 240px;
overflow: auto;
ul {
margin: 0;
padding: 5px;
& > ul {
margin: 0;
padding: 5px;

& > div {
> div:nth-child(1) {
margin-top: 5px;
text-transform: uppercase;
font-weight: bold;
font-size: smaller;
}
> div:nth-child(2) {
margin-left: 20px;
}
& > div {
> div:nth-child(1) {
margin-top: 5px;
text-transform: uppercase;
font-weight: bold;
font-size: smaller;
}
> div:nth-child(2) {
margin-left: 20px;
}
}

li {
list-style: none;
cursor: pointer;
&:hover {
color: @selectionColor;
background-color: @selectionBackgroundColor;
}
li {
list-style: none;
cursor: pointer;
&:hover {
color: @selectionColor;
background-color: @selectionBackgroundColor;
}
}
}
Expand Down
143 changes: 68 additions & 75 deletions packages/project-editor/features/variable/value-type.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,7 @@ export const VariableTypeSelect = observer(
dropDownLeft = 0;
dropDownTop = 0;
dropDownWidth = 0;
dropDownHeight = 0;

constructor(props: any) {
super(props);
Expand All @@ -500,6 +501,7 @@ export const VariableTypeSelect = observer(
dropDownLeft: observable,
dropDownTop: observable,
dropDownWidth: observable,
dropDownHeight: observable,
setDropDownOpen: action
});
}
Expand Down Expand Up @@ -545,20 +547,14 @@ export const VariableTypeSelect = observer(
this.dropDownTop = rectInputGroup.bottom;
this.dropDownWidth = rectInputGroup.width;

if (
this.dropDownLeft + this.dropDownWidth >
window.innerWidth
) {
this.dropDownLeft = window.innerWidth - this.dropDownWidth;
this.dropDownHeight = window.innerHeight - this.dropDownTop;
if (this.dropDownHeight > 640) {
this.dropDownHeight = 640;
}

const DROP_DOWN_HEIGHT = 270;
if (
this.dropDownTop + DROP_DOWN_HEIGHT + 20 >
window.innerHeight
) {
this.dropDownTop =
window.innerHeight - (DROP_DOWN_HEIGHT + 20);
if (this.dropDownHeight < 240) {
this.dropDownHeight = 240;
this.dropDownTop = window.innerHeight - this.dropDownHeight;
}
}
});
Expand Down Expand Up @@ -761,77 +757,74 @@ export const VariableTypeSelect = observer(
display: this.dropDownOpen ? "block" : "none",
left: this.dropDownLeft,
top: this.dropDownTop,
width: this.dropDownWidth
width: this.dropDownWidth,
maxHeight: this.dropDownHeight
}}
>
<div>
<ul>
<div className="font-monospace">{basicTypes}</div>

{objectTypes.length > 0 && (
<div>
<div>Objects</div>
<div className="font-monospace">
{objectTypes}
</div>
</div>
)}

{enums.length > 0 && (
<div>
<div>Enums</div>
<div className="font-monospace">
{enums}
</div>
<ul>
<div className="font-monospace">{basicTypes}</div>

{objectTypes.length > 0 && (
<div>
<div>Objects</div>
<div className="font-monospace">
{objectTypes}
</div>
)}

{structures.length > 0 && (
<div>
<div>Structures</div>
<div className="font-monospace">
{structures}
</div>
</div>
)}

{enums.length > 0 && (
<div>
<div>Enums</div>
<div className="font-monospace">{enums}</div>
</div>
)}

{structures.length > 0 && (
<div>
<div>Structures</div>
<div className="font-monospace">
{structures}
</div>
)}

{arrayOfBasicTypes.length > 0 && (
<div>
<div>Arrays</div>
<div className="font-monospace">
{arrayOfBasicTypes}
</div>
</div>
)}

{arrayOfBasicTypes.length > 0 && (
<div>
<div>Arrays</div>
<div className="font-monospace">
{arrayOfBasicTypes}
</div>
)}

{arrayOfObjects.length > 0 && (
<div>
<div>Array of Objects</div>
<div className="font-monospace">
{arrayOfObjects}
</div>
</div>
)}

{arrayOfObjects.length > 0 && (
<div>
<div>Array of Objects</div>
<div className="font-monospace">
{arrayOfObjects}
</div>
)}

{arrayOfEnums.length > 0 && (
<div>
<div>Array of Enumerations</div>
<div className="font-monospace">
{arrayOfEnums}
</div>
</div>
)}

{arrayOfEnums.length > 0 && (
<div>
<div>Array of Enumerations</div>
<div className="font-monospace">
{arrayOfEnums}
</div>
)}

{arrayOfStructures.length > 0 && (
<div>
<div>Array of Structures</div>
<div className="font-monospace">
{arrayOfStructures}
</div>
</div>
)}

{arrayOfStructures.length > 0 && (
<div>
<div>Array of Structures</div>
<div className="font-monospace">
{arrayOfStructures}
</div>
)}
</ul>
</div>
</div>
)}
</ul>
</div>,
document.body
);
Expand Down

0 comments on commit 95fbe0f

Please sign in to comment.