Skip to content

Commit

Permalink
chore: run fix formatting command for merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@seankmartin
seankmartin committed Oct 28, 2024
1 parent f045680 commit b992557
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 65 deletions.
70 changes: 45 additions & 25 deletions src/ui/screenshot_menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,47 @@
* limitations under the License.
*/


:root {
:root {
--blue: #1e90ff;
--white: #ffffff;
--gray300: #D0D5DD;
--gray300: #d0d5dd;
--gray600: #141415;
--gray500: #F7F7F7;
--gray100: #EBEBEB;
--gray50: #E6E6E6;
--gray500: #f7f7f7;
--gray100: #ebebeb;
--gray50: #e6e6e6;
--gray800: #344054;
--primary500: #0069EB;
--primary700: #0474FF;
--gray700: rgba(20, 20, 21, 0.60);
--gray400: rgba(20, 20, 21, 0.40);
--gray200: rgba(20, 20, 21, 0.80);
--primary500: #0069eb;
--primary700: #0474ff;
--gray700: rgba(20, 20, 21, 0.6);
--gray400: rgba(20, 20, 21, 0.4);
--gray200: rgba(20, 20, 21, 0.8);
}
.neuroglancer-screenshot-overlay {
overflow-x: hidden;
overflow-y: auto;
}
.neuroglancer-screenshot-overlay div, span, a, img, h1, h2, h3, h4, h5, h6, p, form, input, textarea, select, strong, table, tr, td, th, tbody, button {
.neuroglancer-screenshot-overlay div,
span,
a,
img,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
input,
textarea,
select,
strong,
table,
tr,
td,
th,
tbody,
button {
box-sizing: border-box;
outline: 0;
}
Expand Down Expand Up @@ -108,7 +128,8 @@
align-items: center;
gap: 0.5rem;
}
.neuroglancer-screenshot-filename-and-buttons .neuroglancer-screenshot-title-subheading {
.neuroglancer-screenshot-filename-and-buttons
.neuroglancer-screenshot-title-subheading {
font-size: 0.938rem;
font-weight: 590;
margin: 0;
Expand All @@ -119,7 +140,7 @@
}

.neuroglancer-screenshot-dialog .neuroglancer-screenshot-close-button {
background: url('../../src/ui/images/close.svg') no-repeat;
background: url("../../src/ui/images/close.svg") no-repeat;
text-indent: -9999px;
border: 0;
}
Expand Down Expand Up @@ -153,7 +174,6 @@
font-weight: 400;
color: var(--gray700);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

}
.neuroglancer-screenshot-name-input:disabled {
background: var(--gray500);
Expand Down Expand Up @@ -227,7 +247,7 @@
border-bottom: 1px solid var(--gray50);
background: var(--gray500);
width: 100%;
padding:1rem;
padding: 1rem;
}
.neuroglancer-screenshot-resolution-preview-container h2 {
font-size: 0.938rem;
Expand Down Expand Up @@ -268,7 +288,7 @@
font-weight: 400;
}
.neuroglancer-screenshot-size-text button {
background: url('../../src/ui/images/content_copy.svg') no-repeat;
background: url("../../src/ui/images/content_copy.svg") no-repeat;
outline: 0;
border: 0;
cursor: pointer;
Expand All @@ -291,7 +311,8 @@
.neuroglancer-screenshot-dialog .neuroglancer-icon:hover {
background: none;
}
.neuroglancer-screenshot-resolution-table + .neuroglancer-screenshot-resolution-table {
.neuroglancer-screenshot-resolution-table
+ .neuroglancer-screenshot-resolution-table {
border: 0;
}
.neuroglancer-screenshot-resolution-table th {
Expand Down Expand Up @@ -392,7 +413,8 @@
padding: 0.75rem 1rem;
border-top: 1px solid var(--gray50);
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-progress-text {
.neuroglancer-screenshot-footer-container
.neuroglancer-screenshot-progress-text {
margin: 0;
flex: 1;
font-weight: 590;
Expand All @@ -412,20 +434,18 @@
color: var(--gray800);
margin: 0 0 0 0.25rem;
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-button:disabled {
.neuroglancer-screenshot-footer-container
.neuroglancer-screenshot-button:disabled {
display: none;
}



.neuroglancer-screenshot-copy-icon {
position: relative;
cursor: pointer;
width: 33.33% !important;
justify-content: flex-end;
}


.neuroglancer-screenshot-copy-icon::after {
content: attr(data-tooltip);
position: absolute;
Expand Down Expand Up @@ -455,7 +475,7 @@
content: "";
position: absolute;
top: 100%; /* Adjust this to move the arrow closer to the tooltip */
left:88%;
left: 88%;
margin-top: -0.375rem;
transform: translateX(100%);
border-width: 0.375rem;
Expand All @@ -471,4 +491,4 @@
.neuroglancer-screenshot-copy-icon:hover::before {
opacity: 1;
visibility: visible;
}
}
92 changes: 52 additions & 40 deletions src/ui/screenshot_menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,20 +161,32 @@ export class ScreenshotDialog extends Overlay {
private setupHelpTooltips() {
const generalSettingsTooltip = makeIcon({ svg: svg_help });
generalSettingsTooltip.classList.add("neuroglancer-screenshot-tooltip");
generalSettingsTooltip.setAttribute("data-tooltip",
"In the main viewer, see the settings (cog icon, top right) for options to turn off the axis line indicators, the scale bar, and the default annotations (yellow bounding box)");
generalSettingsTooltip.setAttribute(
"data-tooltip",
"In the main viewer, see the settings (cog icon, top right) for options to turn off the axis line indicators, the scale bar, and the default annotations (yellow bounding box)",
);

const orthographicSettingsTooltip = makeIcon({ svg: svg_help });
orthographicSettingsTooltip.classList.add("neuroglancer-screenshot-tooltip");
orthographicSettingsTooltip.setAttribute("data-tooltip",
"In the main viewer, press 'o' to toggle between perspective and orthographic views");
orthographicSettingsTooltip.classList.add(
"neuroglancer-screenshot-tooltip",
);
orthographicSettingsTooltip.setAttribute(
"data-tooltip",
"In the main viewer, press 'o' to toggle between perspective and orthographic views",
);

const scaleFactorHelpTooltip = makeIcon({ svg: svg_help });
scaleFactorHelpTooltip.classList.add("neuroglancer-screenshot-tooltip");
scaleFactorHelpTooltip.setAttribute("data-tooltip",
"Adjusting the scale will zoom out 2D cross-section panels by that factor unless the box is ticked to keep FOV fixed with scale changes. 3D panels always have fixed FOV regardless of the setting and scale factor.");

return { generalSettingsTooltip, orthographicSettingsTooltip, scaleFactorHelpTooltip };
scaleFactorHelpTooltip.setAttribute(
"data-tooltip",
"Adjusting the scale will zoom out 2D cross-section panels by that factor unless the box is ticked to keep FOV fixed with scale changes. 3D panels always have fixed FOV regardless of the setting and scale factor.",
);

return {
generalSettingsTooltip,
orthographicSettingsTooltip,
scaleFactorHelpTooltip,
};
}

private initializeUI() {
Expand All @@ -185,9 +197,7 @@ export class ScreenshotDialog extends Overlay {
}

const titleText = document.createElement("h2");
titleText.classList.add(
"neuroglancer-screenshot-title-heading",
);
titleText.classList.add("neuroglancer-screenshot-title-heading");
titleText.textContent = "Screenshot";

this.closeMenuButton = this.createButton(
Expand All @@ -197,7 +207,7 @@ export class ScreenshotDialog extends Overlay {
svg_close,
"Close",
);

this.cancelScreenshotButton = this.createButton("Cancel screenshot", () =>
this.cancelScreenshot(),
);
Expand All @@ -212,9 +222,7 @@ export class ScreenshotDialog extends Overlay {
"neuroglancer-screenshot-filename-and-buttons",
);
const menuText = document.createElement("h3");
menuText.classList.add(
"neuroglancer-screenshot-title-subheading",
);
menuText.classList.add("neuroglancer-screenshot-title-subheading");
menuText.textContent = "Settings";
const tooltip = this.setupHelpTooltips();
menuText.appendChild(tooltip.generalSettingsTooltip);
Expand All @@ -234,7 +242,7 @@ export class ScreenshotDialog extends Overlay {
closeAndHelpContainer.appendChild(this.closeMenuButton);

this.content.appendChild(closeAndHelpContainer);

this.content.appendChild(this.filenameAndButtonsContainer);
this.content.appendChild(this.createScaleRadioButtons());
// this.content.appendChild(tooltip.orthographicSettingsTooltip);
Expand All @@ -244,23 +252,20 @@ export class ScreenshotDialog extends Overlay {
"neuroglancer-screenshot-resolution-preview-container",
);
const settingsPreview = document.createElement("div");
settingsPreview.classList.add(
"neuroglancer-screenshot-resolution-table",
);
settingsPreview.classList.add("neuroglancer-screenshot-resolution-table");
const previewLabel = document.createElement("h2");
previewLabel.textContent="Preview";
previewLabel.textContent = "Preview";

this.screenshotSizeText = document.createElement("div");
this.screenshotSizeText.classList.add("neuroglancer-screenshot-size-text");
const screenshotLabel = document.createElement("h3");
screenshotLabel.textContent="Screenshot size";
screenshotLabel.textContent = "Screenshot size";
this.screenshotSelectedValues = document.createElement("span");
this.screenshotSelectedValues.textContent = `${this.screenshotWidth}px, ${this.screenshotHeight}px`;

const screenshotCopyBtn = makeCopyButton({
title: "Copy to clipboard",
onClick: () => {
}
onClick: () => {},
});
screenshotCopyBtn.classList.add("neuroglancer-screenshot-copy-icon");
screenshotCopyBtn.setAttribute("data-tooltip", "Copy to clipboard");
Expand All @@ -283,13 +288,17 @@ export class ScreenshotDialog extends Overlay {
"neuroglancer-screenshot-footer-container",
);
this.progressText = document.createElement("p");
this.progressText.classList.add(
"neuroglancer-screenshot-progress-text",
);
this.progressText.classList.add("neuroglancer-screenshot-progress-text");
this.footerScreenshotActionBtnsContainer.appendChild(this.progressText);
this.footerScreenshotActionBtnsContainer.appendChild(this.cancelScreenshotButton);
this.footerScreenshotActionBtnsContainer.appendChild(this.takeScreenshotButton);
this.footerScreenshotActionBtnsContainer.appendChild(this.forceScreenshotButton);
this.footerScreenshotActionBtnsContainer.appendChild(
this.cancelScreenshotButton,
);
this.footerScreenshotActionBtnsContainer.appendChild(
this.takeScreenshotButton,
);
this.footerScreenshotActionBtnsContainer.appendChild(
this.forceScreenshotButton,
);
this.content.appendChild(this.footerScreenshotActionBtnsContainer);

this.updateUIBasedOnMode();
Expand Down Expand Up @@ -333,7 +342,7 @@ export class ScreenshotDialog extends Overlay {
onClick: () => void,
cssClass: string = "",
svgUrl: string | null = null,
svgAlt: string = ''
svgAlt: string = "",
): HTMLButtonElement {
const button = document.createElement("button");
if (svgUrl) {
Expand All @@ -356,7 +365,7 @@ export class ScreenshotDialog extends Overlay {
// scaleMenu.appendChild(this.screenshotSizeText);

const scaleLabel = document.createElement("label");
scaleLabel.classList.add('neuroglancer-screenshot-scale-factor')
scaleLabel.classList.add("neuroglancer-screenshot-scale-factor");
scaleLabel.textContent = "Screenshot scale factor";

const tooltip = this.setupHelpTooltips();
Expand All @@ -380,7 +389,7 @@ export class ScreenshotDialog extends Overlay {
input.classList.add("neuroglancer-screenshot-scale-radio");

label.appendChild(input);

label.appendChild(document.createTextNode(`${scale}x`));

scaleMenu.appendChild(label);
Expand All @@ -393,7 +402,9 @@ export class ScreenshotDialog extends Overlay {
scaleMenu.appendChild(this.warningElement);

const keepSliceFOVFixedDiv = document.createElement("div");
keepSliceFOVFixedDiv.classList.add('neuroglancer-screenshot-keep-slice-label');
keepSliceFOVFixedDiv.classList.add(
"neuroglancer-screenshot-keep-slice-label",
);
keepSliceFOVFixedDiv.textContent = "Keep slice FOV fixed with scale change";

const keepSliceFOVFixedCheckbox = document.createElement("input");
Expand Down Expand Up @@ -436,13 +447,14 @@ export class ScreenshotDialog extends Overlay {
const descriptionRow = this.statisticsTable.createTHead().insertRow();
const descriptionkeyHeader = document.createElement("th");
descriptionkeyHeader.colSpan = 2;

descriptionkeyHeader.textContent = "Screenshot will take when all the chunks are loaded. If GPU memory is full, screenshot will only take the successfully loaded chunks.";


descriptionkeyHeader.textContent =
"Screenshot will take when all the chunks are loaded. If GPU memory is full, screenshot will only take the successfully loaded chunks.";

// It can be used to point to a docs page when complete
// const descriptionLearnMoreLink = document.createElement("a");
// descriptionLearnMoreLink.text = "Learn more";

// descriptionkeyHeader.appendChild(descriptionLearnMoreLink);
descriptionRow.appendChild(descriptionkeyHeader);

Expand Down Expand Up @@ -668,14 +680,14 @@ export class ScreenshotDialog extends Overlay {
this.forceScreenshotButton.disabled = true;
this.cancelScreenshotButton.disabled = true;
this.takeScreenshotButton.disabled = false;
this.progressText.textContent = ""
this.progressText.textContent = "";
this.closeMenuButton.disabled = false;
this.forceScreenshotButton.title = "";
} else {
this.forceScreenshotButton.disabled = false;
this.cancelScreenshotButton.disabled = false;
this.takeScreenshotButton.disabled = true;
this.progressText.textContent = "Screenshot in progress..."
this.progressText.textContent = "Screenshot in progress...";
this.closeMenuButton.disabled = true;
this.forceScreenshotButton.title =
"Force a screenshot of the current view without waiting for all data to be loaded and rendered";
Expand Down

0 comments on commit b992557

Please sign in to comment.