Enhance Dashboard Tab Styles and Capture Logic
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Added isolation and improved z-index management in CSS for active and inactive dashboard tab panes, enhancing visual clarity. - Updated styles for inactive tabs to improve layout handling and visibility transitions. - Modified tab preview capture styles to ensure consistent display and layout during rendering, improving user experience.
This commit is contained in:
parent
969f5fece2
commit
0aee5b410f
@ -4015,6 +4015,7 @@ body.objectKanbanColumnResizing * {
|
|||||||
|
|
||||||
.dashboard-tab-panes {
|
.dashboard-tab-panes {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -4035,23 +4036,30 @@ body.objectKanbanColumnResizing * {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-tab-pane-active {
|
.dashboard-tab-pane-active {
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
pointer-events: auto;
|
isolation: isolate;
|
||||||
|
display: flex;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-tab-pane-inactive {
|
.dashboard-tab-pane-inactive {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translate(-100%, 0);
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-tab-pane-inactive.dashboard-tab-pane-capturing {
|
.dashboard-tab-pane-inactive.dashboard-tab-pane-capturing {
|
||||||
/* Stay translated off-screen so capture cannot cover the active tab.
|
/* Preview render: show and size the pane, but keep it off-screen. */
|
||||||
Layout size stays 100% of the host for SnapDOM. */
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-tab-preview-popover .ant-popover-inner {
|
.dashboard-tab-preview-popover .ant-popover-inner {
|
||||||
|
|||||||
@ -115,11 +115,12 @@ const tabPreviewPlugin = {
|
|||||||
styles.right = 'auto'
|
styles.right = 'auto'
|
||||||
styles.bottom = 'auto'
|
styles.bottom = 'auto'
|
||||||
styles.zIndex = '2'
|
styles.zIndex = '2'
|
||||||
|
styles.display = 'flex'
|
||||||
|
styles.flexDirection = 'column'
|
||||||
styles.opacity = '1'
|
styles.opacity = '1'
|
||||||
styles.visibility = 'visible'
|
styles.visibility = 'visible'
|
||||||
styles.translate = 'none'
|
styles.translate = 'none'
|
||||||
styles.transform = 'none'
|
styles.transform = 'none'
|
||||||
styles.pointerEvents = 'none'
|
|
||||||
styles.overflow = 'hidden'
|
styles.overflow = 'hidden'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user