rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix placement of tour messages for icons

Browse source 
The tour pop-ups were getting stuck in the tab icon container.
Explicitly specifying that they could overflow said container,
and setting them to show to the right, seems to have fixed this issue.
This commit is contained in:
Richard Bowman 2021-02-06 15:32:27 +00:00
parent 8e4d34205f
commit afbb71607d
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
openflexure_microscope/api/static/src/App.vue
View file

@ -115,6 +115,14 @@ export default {
};
},
tourSteps: function() {
let tabPopperParams = {
modifiers: {
preventOverflow: {
boundariesElement: "window"
}
},
placement: "right"
};
return [
{
target: "#tour-header", // We're using document.querySelector() under the hood
@ -131,35 +139,40 @@ export default {
header: {
title: "Capture gallery"
},
content: `View and download your microscope images from the gallery tab`
content: `View and download your microscope images from the gallery tab`,
params: tabPopperParams
},
{
target: "#navigate-tab-icon",
header: {
title: "Navigate around your sample"
},
content: `Move your microscope stage and perform autofocus from the navigate tab`
content: `Move your microscope stage and perform autofocus from the navigate tab`,
params: tabPopperParams
},
{
target: "#capture-tab-icon",
header: {
title: "Capture microscope images"
},
content: `Take images and simple tile scans from the capture tab`
content: `Take images and simple tile scans from the capture tab`,
params: tabPopperParams
},
{
target: "#settings-tab-icon",
header: {
title: "Change settings"
},
content: `Change app and microscope settings, including microscope calibration, from the settings tab`
content: `Change app and microscope settings, including microscope calibration, from the settings tab`,
params: tabPopperParams
},
{
target: "#extension-tab-divider",
header: {
title: "Microscope extensions"
},
content: `Extensions installed on your microscope will appear below this line`
content: `Extensions installed on your microscope will appear below this line`,
params: tabPopperParams
}
];
}