diff --git a/src/neuroglancer/datasource/graphene/frontend.ts b/src/neuroglancer/datasource/graphene/frontend.ts index a4033a09c..682957e83 100644 --- a/src/neuroglancer/datasource/graphene/frontend.ts +++ b/src/neuroglancer/datasource/graphene/frontend.ts @@ -61,10 +61,10 @@ import {Uint64} from 'neuroglancer/util/uint64'; import {makeDeleteButton} from 'neuroglancer/widget/delete_button'; import {DependentViewContext} from 'neuroglancer/widget/dependent_view_widget'; import {makeIcon} from 'neuroglancer/widget/icon'; -import {MultiscaleAnnotationSource} from 'src/neuroglancer/annotation/frontend_source'; -import {removeChildren} from 'src/neuroglancer/util/dom'; -import {getDefaultAnnotationListBindings} from 'src/neuroglancer/ui/default_input_event_bindings'; -import {MouseEventBinder} from 'src/neuroglancer/util/mouse_bindings'; +import {MultiscaleAnnotationSource} from 'neuroglancer/annotation/frontend_source'; +import {removeChildren} from 'neuroglancer/util/dom'; +import {getDefaultAnnotationListBindings} from 'neuroglancer/ui/default_input_event_bindings'; +import {MouseEventBinder} from 'neuroglancer/util/mouse_bindings'; function vec4FromVec3(vec: vec3, alpha = 0) { const res = vec4.clone([...vec]); @@ -1849,7 +1849,7 @@ class MulticutSegmentsTool extends LayerTool { const {body, header} = makeToolActivationStatusMessageWithHeader(activation); header.textContent = 'Multicut segments'; - body.classList.add('graphene-multicut-status'); + body.classList.add('graphene-tool-status', 'graphene-multicut'); body.appendChild(makeIcon({ text: 'Swap', title: 'Swap group', @@ -2120,7 +2120,7 @@ class MergeSegmentsTool extends LayerTool { }); const {body, header} = makeToolActivationStatusMessageWithHeader(activation); header.textContent = 'Merge segments'; - body.classList.add('graphene-merge-segments-status'); + body.classList.add('graphene-tool-status', 'graphene-merge-segments'); activation.bindInputEventMap(MERGE_SEGMENTS_INPUT_EVENT_MAP); const submitAction = async () => { if (merges.value.filter(x => x.locked).length) return; @@ -2237,7 +2237,7 @@ class FindPathTool extends LayerTool { const {body, header} = makeToolActivationStatusMessageWithHeader(activation); header.textContent = 'Find Path'; - body.classList.add('graphene-find-path-status'); + body.classList.add('graphene-tool-status', 'graphene-find-path'); const submitAction = () => { findPathState.triggerPathUpdate.dispatch(); @@ -2270,7 +2270,7 @@ class FindPathTool extends LayerTool { body.appendChild(label); const annotationElements = document.createElement('div'); - annotationElements.classList.add('graphene-find-path-status-annotations'); + annotationElements.classList.add('find-path-annotations'); body.appendChild(annotationElements); const bindings = getDefaultAnnotationListBindings(); diff --git a/src/neuroglancer/datasource/graphene/graphene.css b/src/neuroglancer/datasource/graphene/graphene.css index 380a40627..6fdea0967 100644 --- a/src/neuroglancer/datasource/graphene/graphene.css +++ b/src/neuroglancer/datasource/graphene/graphene.css @@ -10,12 +10,12 @@ color: #4444ff; } -/* .graphene-multicut-status { +.graphene-tool-status { display: flex; - flex-direction: row; -} */ + gap: 10px; +} -.graphene-multicut-status > .activeGroupIndicator { +.graphene-multicut > .activeGroupIndicator { padding: 2px; margin: auto 0; background-color: red; @@ -23,15 +23,15 @@ font-weight: 900; } -.graphene-multicut-status > .activeGroupIndicator.blueGroup { +.graphene-multicut > .activeGroupIndicator.blueGroup { background-color: blue; } -.graphene-multicut-status > .activeGroupIndicator::after { +.graphene-multicut > .activeGroupIndicator::after { content: "Red"; } -.graphene-multicut-status > .activeGroupIndicator.blueGroup::after { +.graphene-multicut > .activeGroupIndicator.blueGroup::after { content: "Blue"; } @@ -45,14 +45,7 @@ gap: 10px; } -.graphene-merge-segments-status, .graphene-multicut-status, .graphene-find-path-status{ - display: flex; - gap: 10px; -} - -.graphene-merge-segments-status .neuroglancer-icon, -.graphene-multicut-status .neuroglancer-icon, -.graphene-find-path-status .neuroglancer-icon +.graphene-tool-status .neuroglancer-icon { height: 100%; } @@ -76,26 +69,21 @@ display: none; } -.graphene-find-path-status { +.graphene-find-path > label { display: flex; - flex-direction: row; } -.graphene-find-path-status-annotations { - display: flex; - gap: 10px; -} - -.graphene-find-path-status > label { +.graphene-find-path > label > span { display: flex; + align-content: center; + flex-wrap: wrap; } -.graphene-find-path-status > label > span { +.find-path-annotations { display: flex; - align-content: center; - flex-wrap: wrap; + gap: 10px; } -.graphene-find-path-status-annotations > .neuroglancer-annotation-list-entry { +.find-path-annotations > .neuroglancer-annotation-list-entry { background-color: black; } diff --git a/src/neuroglancer/ui/tool.css b/src/neuroglancer/ui/tool.css index 745b7f1f1..c9b472078 100644 --- a/src/neuroglancer/ui/tool.css +++ b/src/neuroglancer/ui/tool.css @@ -68,7 +68,6 @@ .neuroglancer-tool-status-header { align-self: center; - white-space: nowrap; } .neuroglancer-tool-status-body {