Skip to content

Commit 1d64f63

Browse files
mvladicmvladic
committed
properties panel cosmetic changes
1 parent 670a6ba commit 1d64f63

20 files changed

+435
-492
lines changed

‎packages/eez-studio-ui/_stylesheets/project-editor.less

+137-122
Original file line numberDiff line numberDiff line change
@@ -2454,6 +2454,7 @@
24542454

24552455
& > div {
24562456
border: 1px solid @panelBorderColor;
2457+
overflow: hidden;
24572458
}
24582459

24592460
& > div:nth-child(1) {
@@ -2489,6 +2490,10 @@
24892490
> .EezStudio_TreeRow.part {
24902491
padding-top: 5px;
24912492
}
2493+
2494+
.EezStudio_TreeRowLabel {
2495+
margin-left: 13px;
2496+
}
24922497
}
24932498

24942499
.EezStudio_TreeRowTriangle {
@@ -2526,14 +2531,24 @@
25262531
color: @inErrorTextColor;
25272532
background-color: @inErrorBackgroundColor;
25282533
}
2529-
padding-left: 10px;
2534+
padding-left: 5px;
2535+
padding-right: 5px;
25302536
display: flex;
25312537
align-items: baseline;
25322538
.EezStudio_LVGLStylesDefinition_Name {
2533-
font-size: 95%;
2534-
min-width: 120px;
2539+
white-space: nowrap;
2540+
overflow: hidden;
2541+
text-overflow: ellipsis;
2542+
width: 33%;
2543+
25352544
.form-check-label {
2536-
transform: translateY(-3px);
2545+
padding: 4px;
2546+
span {
2547+
font-size: 95%;
2548+
white-space: nowrap;
2549+
overflow: hidden;
2550+
text-overflow: ellipsis;
2551+
}
25372552
}
25382553
}
25392554
.EezStudio_LVGLStylesDefinition_Value {
@@ -2565,6 +2580,9 @@
25652580
.EezStudio_LVGLGeometryProperty {
25662581
width: 100%;
25672582
display: flex;
2583+
& > :first-child {
2584+
width: 100%;
2585+
}
25682586
& > select {
25692587
min-width: 95px;
25702588
margin-left: 2px;
@@ -2576,11 +2594,15 @@
25762594
width: 100%;
25772595
display: flex;
25782596
align-items: baseline;
2579-
justify-content: space-between;
2597+
2598+
& > :first-child {
2599+
width: 67%;
2600+
}
2601+
25802602
& > select {
2581-
min-width: 130px;
2603+
width: 33%;
2604+
max-width: 130px;
25822605
margin-left: 2px;
2583-
flex: 0;
25842606
}
25852607
}
25862608

@@ -2897,6 +2919,9 @@
28972919

28982920
margin-top: 2px;
28992921
margin-bottom: 2px;
2922+
&:last-child {
2923+
margin-bottom: 0;
2924+
}
29002925

29012926
input[type="color"] {
29022927
height: 28px;
@@ -2928,31 +2953,10 @@
29282953
min-height: auto;
29292954
}
29302955

2931-
table {
2932-
& > tbody {
2933-
& > tr.inError {
2934-
color: @inErrorTextColor;
2935-
background-color: @inErrorBackgroundColor;
2936-
}
2937-
& > td.highlighted {
2938-
background-color: #ff6666;
2939-
}
2940-
2941-
& > tr > td {
2942-
&:nth-child(2) {
2943-
padding-left: 10px;
2944-
width: 100%;
2945-
}
2946-
}
2947-
}
2948-
}
2949-
29502956
.EezStudio_ArrayPropertyContent {
29512957
position: relative;
29522958
border-top: 1px solid @borderColor;
29532959

2954-
border-radius: 0 0 4px px;
2955-
29562960
padding: 10px;
29572961
padding-bottom: 0;
29582962

@@ -2963,14 +2967,17 @@
29632967
border-radius: 4px;
29642968

29652969
margin-bottom: 10px;
2970+
&:last-item {
2971+
margin-bottom: 0;
2972+
}
29662973

29672974
.EezStudio_ArrayElementProperty_Header {
29682975
background-color: @panelHeaderColor;
29692976

29702977
border-radius: 4px 4px 0 0;
29712978

29722979
border-bottom: 1px solid @borderColor;
2973-
padding: 5px;
2980+
padding: 2px;
29742981

29752982
display: flex;
29762983
align-items: center;
@@ -2994,14 +3001,34 @@
29943001
background-color: @backgroundColor;
29953002

29963003
border-radius: 0 0 4px 4px;
2997-
}
29983004

2999-
table {
3000-
width: 100%;
3005+
.EezStudio_ArrayElementProperty_Body_Property {
3006+
display: flex;
3007+
align-items: baseline;
30013008

3002-
tr {
3003-
td:first-child {
3009+
& > div:first-child {
3010+
width: 33%;
30043011
white-space: nowrap;
3012+
overflow: hidden;
3013+
text-overflow: ellipsis;
3014+
}
3015+
& > div:nth-child(2) {
3016+
width: 100%;
3017+
}
3018+
3019+
&:not(:last-child) {
3020+
margin-bottom: 2px;
3021+
}
3022+
3023+
&.inError {
3024+
color: @inErrorTextColor;
3025+
background-color: @inErrorBackgroundColor;
3026+
padding: 2px;
3027+
margin: 0;
3028+
3029+
.form-text {
3030+
color: @inErrorTextColor;
3031+
}
30053032
}
30063033
}
30073034
}
@@ -3036,6 +3063,7 @@
30363063
}
30373064

30383065
.EezStudio_EmbeddedNonCollapsablePropertyGrid {
3066+
width: 100%;
30393067
& > div {
30403068
padding: 0;
30413069
overflow: hidden;
@@ -3045,7 +3073,6 @@
30453073

30463074
.EezStudio_PropertyGrid {
30473075
flex-grow: 1;
3048-
padding: 5px 2px 10px 0px;
30493076
overflow-x: hidden;
30503077
overflow-y: auto;
30513078

@@ -3088,115 +3115,102 @@
30883115
min-width: 15.39px;
30893116
}
30903117

3091-
& > table {
3092-
width: 100%;
3118+
& > .EezStudio_PropertyGrid_Group {
3119+
margin-bottom: 10px;
3120+
&:last-child {
3121+
margin-bottom: 0;
3122+
}
30933123

3094-
& > tbody {
3095-
& > tr {
3096-
&.inError {
3097-
color: @inErrorTextColor;
3098-
background-color: @inErrorBackgroundColor;
3124+
& > .EezStudio_PropertyGrid_Group_Header {
3125+
width: 100%;
30993126

3100-
.form-text {
3101-
color: @inErrorTextColor;
3102-
}
3103-
}
3127+
display: flex;
3128+
align-items: end;
31043129

3105-
&.highlighted {
3106-
background-color: #ff6666;
3107-
}
3130+
background-color: var(--bs-secondary-bg);
31083131

3109-
& > td {
3110-
vertical-align: baseline;
3111-
padding-top: 1px;
3112-
padding-bottom: 1px;
3113-
}
3132+
padding: 5px 0;
31143133

3115-
& > td:first-child {
3116-
padding-left: 20px;
3117-
&:not([colspan="2"]) {
3118-
padding-right: 10px;
3119-
}
3120-
}
3134+
font-size: 95%;
3135+
text-transform: uppercase;
3136+
font-weight: bold;
31213137

3122-
& > td > div.EezStudio_CodeEditor {
3123-
display: list-item;
3124-
}
3138+
cursor: pointer;
3139+
}
31253140

3126-
& > td.property-name {
3127-
white-space: nowrap;
3128-
height: 26px;
3141+
& > .EezStudio_PropertyGrid_Group_Body {
3142+
padding: 10px 10px 0 10px;
3143+
}
31293144

3130-
& > .collapsable {
3131-
transform: translateX(-10px);
3132-
cursor: pointer;
3133-
&:hover {
3134-
background-color: #eee;
3135-
}
3136-
}
3137-
}
3145+
&.collapsed {
3146+
& > .EezStudio_PropertyGrid_Group_Body {
3147+
display: none;
3148+
}
3149+
}
3150+
}
31383151

3139-
& > td:nth-child(2) {
3140-
width: 100%;
3141-
}
3152+
& .EezStudio_PropertyGrid_Property {
3153+
display: flex;
3154+
align-items: baseline;
31423155

3143-
& > td.group-cell {
3144-
padding-left: 0;
3145-
padding-right: 0;
3146-
& > div.group-container {
3147-
width: 100%;
3148-
display: flex;
3149-
justify-content: space-between;
3150-
align-items: center;
3151-
& > div.group-title {
3152-
font-size: 85%;
3153-
text-transform: uppercase;
3154-
font-weight: bold;
3155-
display: inline-flex;
3156-
align-items: center;
3157-
}
3156+
margin-bottom: 2px;
3157+
&:last-child {
3158+
margin-bottom: 0;
3159+
}
31583160

3159-
cursor: pointer;
3160-
&:hover {
3161-
background-color: #eee;
3162-
}
3163-
}
3164-
}
3161+
& > .property-name {
3162+
white-space: nowrap;
3163+
overflow: hidden;
3164+
text-overflow: ellipsis;
31653165

3166-
& > td.embedded-property-cell {
3167-
padding-left: 20px;
3168-
padding-right: 0;
3166+
height: 26px;
3167+
width: 33%;
31693168

3170-
& > .collapsable > div.collapsable-property-name {
3171-
margin-top: 4px;
3172-
transform: translateX(-10px);
3173-
cursor: pointer;
3174-
&:hover {
3175-
background-color: #eee;
3176-
}
3177-
}
3169+
& > .collapsable {
3170+
transform: translateX(-10px);
3171+
cursor: pointer;
3172+
&:hover {
3173+
background-color: #eee;
31783174
}
3175+
}
3176+
}
31793177

3180-
textarea.pre {
3181-
font-family: "EEZ Studio Font Monospace";
3182-
font-size: 0.72rem;
3178+
& > .embedded-property-cell {
3179+
width: 100%;
3180+
3181+
& > .collapsable > div.collapsable-property-name {
3182+
margin-top: 4px;
3183+
transform: translateX(-10px);
3184+
cursor: pointer;
3185+
&:hover {
3186+
background-color: #eee;
31833187
}
31843188
}
31853189
}
3186-
}
31873190

3188-
&.EezStudio_PropertyGrid_NoGroups {
3189-
padding: 5px;
3191+
&.inError {
3192+
color: @inErrorTextColor;
3193+
background-color: @inErrorBackgroundColor;
3194+
padding: 2px;
3195+
margin: 0;
31903196

3191-
& > table {
3192-
& > tbody {
3193-
& > tr {
3194-
& > td:first-child {
3195-
padding-left: 0px;
3196-
}
3197-
}
3197+
.form-text {
3198+
color: @inErrorTextColor;
31983199
}
31993200
}
3201+
3202+
&.highlighted {
3203+
background-color: #ff6666;
3204+
}
3205+
3206+
.EezStudio_CodeEditor {
3207+
display: list-item;
3208+
}
3209+
3210+
textarea.pre {
3211+
font-family: "EEZ Studio Font Monospace";
3212+
font-size: 0.72rem;
3213+
}
32003214
}
32013215
}
32023216

@@ -3212,6 +3226,7 @@
32123226
padding: 6px;
32133227
width: 20px;
32143228
height: 20px;
3229+
flex: 0;
32153230

32163231
&:hover {
32173232
background-color: #eee;

0 commit comments

Comments
 (0)