forked from mystiq/hydrogen-web
add expand button to log items
This commit is contained in:
parent
17c2fad4b4
commit
be1650defc
2 changed files with 59 additions and 16 deletions
|
@ -72,6 +72,31 @@
|
||||||
grid-area: nav;
|
grid-area: nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timeline li:not(.expanded) > ol {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline li > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .toggleExpanded {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline .toggleExpanded:before {
|
||||||
|
content: "▶";
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline li.expanded > div > .toggleExpanded:before {
|
||||||
|
content: "▼";
|
||||||
|
}
|
||||||
|
|
||||||
.timeline ol {
|
.timeline ol {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0 0 0 20px;
|
padding: 0 0 0 20px;
|
||||||
|
@ -86,6 +111,13 @@
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.timeline div.item:not(.has-children) {
|
||||||
|
margin-left: calc(24px + 4px + 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline div.item .caption {
|
.timeline div.item .caption {
|
||||||
|
|
|
@ -13,6 +13,10 @@ main.addEventListener("click", event => {
|
||||||
selectedItemNode.classList.remove("selected");
|
selectedItemNode.classList.remove("selected");
|
||||||
selectedItemNode = null;
|
selectedItemNode = null;
|
||||||
}
|
}
|
||||||
|
if (event.target.classList.contains("toggleExpanded")) {
|
||||||
|
const li = event.target.parentElement.parentElement;
|
||||||
|
li.classList.toggle("expanded");
|
||||||
|
} else {
|
||||||
const itemNode = event.target.closest(".item");
|
const itemNode = event.target.closest(".item");
|
||||||
if (itemNode) {
|
if (itemNode) {
|
||||||
selectedItemNode = itemNode;
|
selectedItemNode = itemNode;
|
||||||
|
@ -29,6 +33,7 @@ main.addEventListener("click", event => {
|
||||||
}
|
}
|
||||||
showItemDetails(item, parent);
|
showItemDetails(item, parent);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function showItemDetails(item, parent) {
|
function showItemDetails(item, parent) {
|
||||||
|
@ -96,17 +101,23 @@ function normalizeValueKey(key) {
|
||||||
|
|
||||||
// returns the node and the total range (recursively) occupied by the node
|
// returns the node and the total range (recursively) occupied by the node
|
||||||
function itemToNode(item, path) {
|
function itemToNode(item, path) {
|
||||||
|
const hasChildren = !!itemChildren(item)?.length;
|
||||||
const className = {
|
const className = {
|
||||||
item: true,
|
item: true,
|
||||||
|
"has-children": hasChildren,
|
||||||
error: itemError(item),
|
error: itemError(item),
|
||||||
[`type-${itemType(item)}`]: !!itemType(item),
|
[`type-${itemType(item)}`]: !!itemType(item),
|
||||||
[`level-${itemLevel(item)}`]: true,
|
[`level-${itemLevel(item)}`]: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const li = t.li([
|
const li = t.li([
|
||||||
|
t.div([
|
||||||
|
hasChildren ? t.button({className: "toggleExpanded"}) : "",
|
||||||
t.div({className, "data-path": path.join("/")}, [
|
t.div({className, "data-path": path.join("/")}, [
|
||||||
t.span({class: "caption"}, itemCaption(item)),
|
t.span({class: "caption"}, itemCaption(item)),
|
||||||
t.span({class: "duration"}, `(${itemDuration(item)}ms)`),
|
t.span({class: "duration"}, `(${itemDuration(item)}ms)`),
|
||||||
])
|
])
|
||||||
|
])
|
||||||
]);
|
]);
|
||||||
if (itemChildren(item) && itemChildren(item).length) {
|
if (itemChildren(item) && itemChildren(item).length) {
|
||||||
li.appendChild(t.ol(itemChildren(item).map((item, i) => {
|
li.appendChild(t.ol(itemChildren(item).map((item, i) => {
|
||||||
|
|
Loading…
Reference in a new issue