Skip to content

Commit a571c78

Browse files
syahmizulsyahmizul
authored
UI : Preset positioning for elements in OSD (#4516)
* feat : Added preset positioning for elements in OSD * fix : Memory leak fix * fix : Global click handler is (re)bound once per field – memory-leak & duplicate callback risk * feat & fix : made this actually work with advanced elements and now it should account the height * refactor : reverted the change done on searchLimitsElement * refactor : css cleanup * fix : modified the z-index value since the tooltip was blocking it * fix : some more missing fixes * fix : more coderabbit fixes * refactor : moved the menu hiding function to the module scope ,also renamed the function * fix : coderabbit changes suggestion * feat: recoded everything. * fix : coderabbit changes * refactor: modularize grid setup functions for better readability and maintainability * refactor : coderabbit changes * fix: clarify comments for inclusive range calculation and offset adjustments in OSD positioning * fix: improve null checks and simplify error logging in OSD position application * fix : fixed an issue where this didn't work on an actual device * fix : fixed an issue where it was firing applyPosition multiple times - It seems that if applyPosition is fired multiple times,the decode function would randomly fail.
1 parent 3052b32 commit a571c78

File tree

2 files changed

+687
-3
lines changed

2 files changed

+687
-3
lines changed

‎src/css/tabs/osd.less

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.tab-osd {
2+
--context-menu-z-index: 10001;
3+
24
.info {
35
margin: 10px 0 0 0;
46
position: relative;
@@ -276,6 +278,7 @@
276278
}
277279
}
278280
.switchable-field {
281+
flex: 1;
279282
padding: 3px;
280283
border: 1px solid transparent;
281284
border-bottom: 1px solid var(--surface-500);
@@ -311,6 +314,14 @@
311314
margin: 0 0 5px 0.5rem;
312315
}
313316
}
317+
.switchable-field-wrapper {
318+
display: flex;
319+
gap: 5px;
320+
flex-direction: row;
321+
flex-wrap: nowrap;
322+
align-items: center;
323+
justify-content: space-between;
324+
}
314325
.switchable-field-flex {
315326
display: flex;
316327
gap: 0.5rem;
@@ -488,4 +499,167 @@
488499
}
489500
}
490501
}
502+
503+
.preset-pos-btn-wrapper {
504+
position: relative;
505+
display: inline-block;
506+
}
507+
508+
.preset-pos-btn {
509+
width: 20px;
510+
height: 20px;
511+
cursor: pointer;
512+
display: flex;
513+
align-items: center;
514+
justify-content: center;
515+
background-color: var(--surface-500);
516+
color: var(--text);
517+
border: 1px solid var(--primary-800);
518+
transition:
519+
background-color 0.25s,
520+
transform 0.25s;
521+
&:hover {
522+
background-color: var(--surface-700);
523+
transform: scale(1.1);
524+
}
525+
&:active {
526+
transform: scale(0.9);
527+
}
528+
}
529+
530+
.context-menu {
531+
position: absolute;
532+
display: inline-block;
533+
min-width: 180px;
534+
top: 0;
535+
left: 20px;
536+
padding: 5px;
537+
width: 0;
538+
opacity: 0;
539+
pointer-events: none;
540+
z-index: var(--context-menu-z-index);
541+
background-color: var(--surface-50);
542+
border-radius: 5px;
543+
transition: opacity 0.5s;
544+
545+
&.show {
546+
display: inline-block;
547+
548+
opacity: 1;
549+
pointer-events: all;
550+
}
551+
}
552+
553+
.context-menu-item {
554+
position: relative;
555+
}
556+
557+
// The list "item"
558+
.context-menu-item div.context-menu-item-display {
559+
position: relative;
560+
padding: 5px;
561+
display: flex;
562+
align-items: center;
563+
justify-content: space-between;
564+
cursor: pointer;
565+
font-size: 13px;
566+
transition: all 0.25s;
567+
border-radius: 0;
568+
&:hover {
569+
background-color: var(--surface-700);
570+
border-radius: 5px;
571+
}
572+
}
573+
574+
.context-menu-item span.context-menu-item-content-wrapper {
575+
position: absolute;
576+
}
577+
// The "content" of the item itself
578+
.context-menu-item div.context-menu-item-content {
579+
position: absolute;
580+
left: 10px;
581+
top: -10px;
582+
display: none;
583+
opacity: 0;
584+
pointer-events: none;
585+
min-width: 200px;
586+
z-index: var(--context-menu-z-index);
587+
588+
&.show {
589+
display: inline-block;
590+
opacity: 1;
591+
pointer-events: all;
592+
}
593+
}
594+
595+
#preset-pos-grid-wrapper {
596+
background-color: var(--surface-50);
597+
border-radius: 5px;
598+
padding: 10px;
599+
gap: 10px;
600+
display: flex;
601+
flex-direction: column;
602+
justify-content: center;
603+
align-items: center;
604+
}
605+
606+
#preset-pos-text {
607+
font-weight: 600;
608+
}
609+
610+
#preset-pos-grid {
611+
display: grid;
612+
grid-template-columns: repeat(3, 1fr);
613+
grid-template-rows: repeat(5, 1fr);
614+
gap: 6px;
615+
width: 150px;
616+
height: 120px;
617+
padding: 10px;
618+
background-color: var(--surface-100);
619+
border-radius: 5px;
620+
border: 2px solid var(--surface-700);
621+
}
622+
623+
.preset-pos-grid-cell {
624+
position: relative;
625+
display: flex;
626+
align-items: center;
627+
justify-content: center;
628+
width: 100%;
629+
height: 100%;
630+
font-size: 8px;
631+
cursor: pointer;
632+
background-color: color-mix(in srgb, var(--surface-700) 50%, var(--primary-500) 50%);
633+
border-radius: 5px;
634+
transition: transform 0.25s;
635+
.preset-pos-cell-tooltip {
636+
position: absolute;
637+
top: -25px;
638+
font-size: 8px;
639+
white-space: nowrap;
640+
color: var(--text);
641+
background-color: color-mix(in srgb, var(--surface-300) 70%, var(--primary-500) 30%);
642+
opacity: 0;
643+
transition: opacity 0.25s;
644+
pointer-events: none;
645+
padding: 5px;
646+
border-radius: 5px;
647+
}
648+
&:hover {
649+
transform: scale(1.25);
650+
.preset-pos-cell-tooltip {
651+
opacity: 1;
652+
}
653+
}
654+
// The dots
655+
&::after {
656+
content: "";
657+
position: absolute;
658+
width: 4px;
659+
height: 4px;
660+
background: currentColor;
661+
border-radius: 50%;
662+
opacity: 0.8;
663+
}
664+
}
491665
}

0 commit comments

Comments
 (0)