AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

convert left action menu to hover/pop

Browse source
This commit is contained in:
Stewart Allen 2022-04-21 19:52:59 -04:00
commit 910e5cef08
2 changed files with 82 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/mesh/build.js
View file

@ -355,51 +355,65 @@ function ui_build() {
h.div([
// create and bind file loading elements
h.div({ _: "file", class: "head" }),
h.button({ _: 'import', onclick: file.import }, [
h.input({
id: "import", type: "file", class: ["hide"], multiple: true,
onchange(evt) { broker.send.load_files(evt.target.files) }
})
]),
h.button({ _: 'export', onclick: file.export }),
]),
h.div([
h.div({ _: "view", class: "head" }),
h.button({ _: 'bounds', onclick() { selection.boundsBox({ toggle: true }) } }),
h.button({ _: 'normals', onclick() { api.normals() } }),
h.button({ _: 'gridlines', onclick() { api.grid() } }),
h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
]),
h.div([
h.div({ _: "model", class: "head" }),
h.button({ _: 'duplicate', onclick: tool.duplicate }),
h.button({ _: 'regroup', onclick: tool.regroup }),
h.button({ _: 'merge', onclick: tool.merge }),
h.button({ _: 'mirror', onclick: tool.mirror }),
h.button({ _: 'split', onclick: call.edit_split }),
]),
h.div([
h.div({ _: "bool", class: "head" }),
h.button({ _: 'union', onclick: tool.union }),
h.button({ _: 'subtract', onclick: tool.subtract }),
h.button({ _: 'intersect', onclick: tool.intersect }),
]),
h.div([
h.div({ _: "normal", class: "head" }),
h.button({ _: 'invert', onclick: tool.invert }),
h.div({ class: "pop"}, [
h.button({ _: 'import', onclick: file.import }, [
h.input({
id: "import", type: "file", class: ["hide"], multiple: true,
onchange(evt) { broker.send.load_files(evt.target.files) }
})
]),
h.button({ _: 'export', onclick: file.export }),
])
]),
h.div([
h.div({ _: "add", class: "head" }),
h.button({ _: 'cylinder', onclick: add.cylinder }),
h.button({ _: 'cube', onclick: add.cube }),
h.div({ class: "pop"}, [
h.button({ _: 'cylinder', onclick: add.cylinder }),
h.button({ _: 'cube', onclick: add.cube }),
])
]),
h.div([
h.div({ _: "view", class: "head" }),
h.div({ class: "pop"}, [
h.button({ _: 'bounds', onclick() { selection.boundsBox({ toggle: true }) } }),
h.button({ _: 'normals', onclick() { api.normals() } }),
h.button({ _: 'gridlines', onclick() { api.grid() } }),
h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
])
]),
h.div([
h.div({ _: "model", class: "head" }),
h.div({ class: "pop"}, [
h.button({ _: 'duplicate', onclick: tool.duplicate }),
h.button({ _: 'regroup', onclick: tool.regroup }),
h.button({ _: 'merge', onclick: tool.merge }),
h.button({ _: 'mirror', onclick: tool.mirror }),
h.button({ _: 'split', onclick: call.edit_split }),
])
]),
h.div([
h.div({ _: "boolean", class: "head" }),
h.div({ class: "pop"}, [
h.button({ _: 'union', onclick: tool.union }),
h.button({ _: 'subtract', onclick: tool.subtract }),
h.button({ _: 'intersect', onclick: tool.intersect }),
])
]),
h.div([
h.div({ _: "normal", class: "head" }),
h.div({ class: "pop"}, [
h.button({ _: 'invert', onclick: tool.invert }),
])
]),
h.div([
h.div({ _: "repair", class: "head" }),
h.button({ _: 'analyze', onclick: tool.analyze }),
h.button({ _: 'isolate', onclick: tool.isolate }),
h.button({ _: 'patch', onclick: tool.repair }),
// h.button({ _: 'rebuild', onclick: tool.rebuild }),
h.button({ _: 'clean', onclick: tool.clean }),
h.div({ class: "pop"}, [
h.button({ _: 'analyze', onclick: tool.analyze }),
h.button({ _: 'isolate', onclick: tool.isolate }),
h.button({ _: 'patch', onclick: tool.repair }),
// h.button({ _: 'rebuild', onclick: tool.rebuild }),
h.button({ _: 'clean', onclick: tool.clean }),
])
]),
]);

38
web/mesh/index.css
View file

@ -376,6 +376,10 @@ button:hover {
/** common look & feel */
.dark #logger, .dark #modal_frame, .dark #actions > div, .dark #grouplist > div, .dark #actions .pop {
border: 1px solid #bbb;
}
#logger, #modal_frame, #actions > div, #grouplist > div {
border: 1px solid gray;
border-radius: 3px;
@ -469,6 +473,39 @@ button.selected:hover {
gap: 1px;
}
#actions .pop {
display: none;
position: absolute;
align-items: center;
justify-content: center;
flex-direction: column;
transform: translateX(100%);
right: -1px;
top: -1px;
gap: 3px;
margin: 0;
padding: 3px;
border-radius: 3px;
border: 1px solid gray;
background-color: rgba(255,255,255,0.5);
}
.pop button {
width: 100%;
}
.dark #actions > div:hover {
background-color: #999;
}
#actions > div:hover {
background-color: #eee;
}
#actions > div:hover .pop {
display: flex;
}
#actions > div {
flex-direction: column;
gap: 2px;
@ -482,7 +519,6 @@ button.selected:hover {
font-weight: lighter;
font-size: smaller;
border-radius: 3px;
background-color: rgba(150,150,150,0.05);
}
#actions .head:hover {