mirror of
https://github.com/Cacti/cacti.git
synced 2026-10-25 12:37:47 +09:00
TheWitness
356f4ae813
* fix(graphs): reveal graph content area after tree branch loads The jstree select_node handler hides .cactiGraphContentArea (#navigation_right) before loading a branch's graphs via AJAX to avoid flashing the previous branch, but the only re-show was coupled to a window resize event that does not fire after the AJAX load. On themes that hide .cactiGraphContentArea by default (e.g. Deepness) the content area stayed display:none and the graphs/filters were invisible. Re-show it on loadUrl completion. * fix(filter): keep the Edit Filter dialog columns from collapsing The modern filter Edit dialog is created with jQuery UI width:'auto'. Its body is a table-based label/field grid, which jQuery UI measures at min-content, collapsing the dialog content to a sliver and pushing the fields off to the right. Floor the content min-width so the columns lay out. Validated in Deepness and Dark. * fix(graphs): centre single-column graphs in the graph view graphWrapperOuter > div:first-child is width:fit-content inside a (full-width for one column) flex wrapper, so the graph rendered flush-left. Add auto horizontal margins so it centres; the absolutely-positioned drilldown toggle continues to track the graph. * fix(graphs): don't re-show content area on aborted branch load A superseding tree branch click aborts the in-flight loadUrl; its .always() must not re-show the content area the new selection just hid, or stale graphs flash while the new branch loads. Skip completions whose textStatus is 'abort'.
137 lines
4.3 KiB
CSS
137 lines
4.3 KiB
CSS
/*
|
|
+-------------------------------------------------------------------------+
|
|
| Copyright (C) 2004-2026 The Cacti Group |
|
|
| |
|
|
| This program is free software; you can redistribute it and/or |
|
|
| modify it under the terms of the GNU General Public License |
|
|
| as published by the Free Software Foundation; either version 2 |
|
|
| of the License, or (at your option) any later version. |
|
|
+-------------------------------------------------------------------------+
|
|
*/
|
|
|
|
/*
|
|
* Common, theme-agnostic drilldown behaviour: the action icons are hidden
|
|
* behind a hamburger glyph overlaid on the top-right of the graph. Clicking
|
|
* the glyph opens the icon strip; it closes on a second click, on leaving the
|
|
* graph, or on an outside click (see initGraphDrilldown() in layout.js).
|
|
* Loaded after each theme's main.css so these rules win.
|
|
*/
|
|
|
|
.graphWrapperOuter > div:first-child {
|
|
position: relative;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
/* centre the fit-content graph within its (often full-width, single-column) wrapper */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.graphDrillDownToggle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
z-index: 6;
|
|
}
|
|
|
|
/* While a strip is open, lift its graph above neighbours so the icons that
|
|
overflow a short (thumbnail) graph stay on top and clickable, and hovering them
|
|
does not fall through to the graph beneath. */
|
|
.graphWrapperOuter.graphDrillActive {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.graphDrillDownToggle .graphDrillDownMenu {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
margin: 3px;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
line-height: 1;
|
|
font-size: 13px;
|
|
color: var(--cacti-dd-fg, #ffffff);
|
|
background: var(--cacti-dd-menu-bg, rgba(0, 0, 0, 0.55));
|
|
box-shadow: 0 0 0 1px var(--cacti-dd-border, transparent);
|
|
transition: opacity 0.12s ease-in-out;
|
|
}
|
|
|
|
/* Keep the toggle focusable (never display:none) and reveal it on hover,
|
|
keyboard focus, the open state, and on devices that cannot hover. Use
|
|
:focus-visible so a mouse click does not latch the reveal via :focus -
|
|
that is what previously forced a focus-destroying blur() on pointer exit. */
|
|
.graphDrillDownToggle.reveal .graphDrillDownMenu,
|
|
.graphDrillDownToggle .graphDrillDownMenu:focus-visible,
|
|
.graphDrillDownToggle.open .graphDrillDownMenu {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.graphDrillDownToggle .graphDrillDownMenu {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.graphDrillDownToggle.open .graphDrillDownMenu {
|
|
background: var(--cacti-dd-menu-bg-open, rgba(0, 0, 0, 0.82));
|
|
}
|
|
|
|
.graphDrillDownToggle .iconWrapper {
|
|
display: none;
|
|
}
|
|
|
|
.graphDrillDownToggle.open .iconWrapper {
|
|
display: table;
|
|
border-collapse: collapse;
|
|
margin: 0 3px 3px 3px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
background: var(--cacti-dd-panel-bg, rgba(0, 0, 0, 0.85));
|
|
box-shadow: 0 0 0 1px var(--cacti-dd-border, transparent), 0 3px 10px rgba(0, 0, 0, 0.4);
|
|
color: var(--cacti-dd-fg, #ffffff);
|
|
}
|
|
|
|
.graphDrillDownToggle.open .iconWrapper .iconLink {
|
|
display: table-row;
|
|
color: var(--cacti-dd-fg, #ffffff);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Theme-appropriate row highlight: a wash of the theme's drilldown accent (the
|
|
hamburger/panel hue), falling back to the current text colour. */
|
|
.graphDrillDownToggle.open .iconWrapper .iconLink:hover,
|
|
.graphDrillDownToggle.open .iconWrapper .iconLink:focus-visible {
|
|
background: color-mix(in srgb, var(--cacti-dd-accent, currentColor) 22%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
/* Label on the left; the vertical cell padding keeps a few pixels between rows. */
|
|
.graphDrillDownToggle.open .iconWrapper .iconLabel {
|
|
display: table-cell;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Glyphs stacked above one another in a fixed-width column, centred so each
|
|
icon sits in the middle of its cell; targets any glyph <i> so plugin icons
|
|
without the drillDown class align too. */
|
|
.graphDrillDownToggle.open .iconWrapper .iconLink > i {
|
|
display: table-cell;
|
|
width: 16px;
|
|
padding: 2px 8px 2px 2px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|