Skip to content

Commit

Permalink
#NA-356 Screenshot UI pr updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vidhya-metacell
vidhya-metacell committed Oct 21, 2024
1 parent 12ad19d commit 71bb1a8
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 110 deletions.
175 changes: 79 additions & 96 deletions src/ui/screenshot_menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,8 @@
* limitations under the License.
*/

* {
box-sizing: border-box;
outline: 0;
}
:root {

:root {
--blue: #1e90ff;
--white: #ffffff;
--gray300: #D0D5DD;
Expand All @@ -33,8 +30,13 @@
--gray400: rgba(20, 20, 21, 0.40);
--gray200: rgba(20, 20, 21, 0.80);
}
.overlay {
overflow: auto;
.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 {
box-sizing: border-box;
outline: 0;
}
.neuroglancer-screenshot-dialog {
width: 46.875rem;
Expand All @@ -46,7 +48,7 @@
top: auto;
border-radius: 0.5rem;
}
.neuroglancer-screenshot-dialog * {
.neuroglancer-screenshot-dialog {
font-family: sans-serif;
}
.neuroglancer-screenshot-dialog .neuroglancer-screenshot-close-and-help {
Expand All @@ -59,14 +61,7 @@
align-items: center;
gap: 10px;
}
.neuroglancer-screenshot-tooltip {
cursor: pointer;
}
.neuroglancer-screenshot-dialog .neuroglancer-screenshot-close-and-help .neuroglancer-screenshot-tooltip {
position: absolute;
right: 0.875rem;
top: 4.4rem;
}

.neuroglancer-screenshot-dialog .neuroglancer-screenshot-title-heading {
font-size: 0.938rem;
font-weight: 590;
Expand All @@ -83,40 +78,13 @@
margin-right: 2.125rem;
}
.neuroglancer-screenshot-scale-menu .neuroglancer-screenshot-scale-radio {
-webkit-appearance: none;
margin: 0 0.188rem 0 0;
}
.neuroglancer-screenshot-scale-menu .neuroglancer-screenshot-scale-radio::after {
content: "";
background: url('../../src/ui/images/radio_base.svg') no-repeat;
width: 1rem;
height: 1rem;
display: block;
cursor: pointer;
position: relative;
top: 0.25rem;
}
.neuroglancer-screenshot-scale-menu .neuroglancer-screenshot-scale-radio:checked::after {
background: url('../../src/ui/images/radio_active.svg') no-repeat;
}

.neuroglancer-screenshot-keep-slice-fov-checkbox {
-webkit-appearance: none;
margin: 0;
}
.neuroglancer-screenshot-keep-slice-fov-checkbox::after {
content: "";
background: url('../../src/ui/images/checkbox_base.svg') no-repeat;
width: 1rem;
height: 1rem;
display: block;
top: 0;
left: 0;
cursor: pointer;
}

.neuroglancer-screenshot-keep-slice-fov-checkbox:checked::after {
background: url('../../src/ui/images/checkbox_active.svg') no-repeat;
}
.neuroglancer-screenshot-size-text,
.neuroglancer-screenshot-keep-slice-label,
.neuroglancer-screenshot-scale-menu .neuroglancer-screenshot-scale-factor {
Expand All @@ -131,15 +99,11 @@
align-items: center;
gap: 0.15rem;
}
.neuroglancer-screenshot-tooltip.screenshot-tooltip {
position: absolute;
top: 10.688rem;
left: 10.375rem;
}
.neuroglancer-screenshot-keep-slice-label {
display: flex;
flex-direction: row-reverse;
margin: 2rem 0;
margin: 1.25rem 0;
width: 100%;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
Expand Down Expand Up @@ -209,7 +173,7 @@
}

.neuroglancer-screenshot-statistics-title {
padding: 1.5rem 1rem;
padding: 1rem;
}

.neuroglancer-screenshot-statistics-table {
Expand Down Expand Up @@ -263,7 +227,7 @@
border-bottom: 1px solid var(--gray50);
background: var(--gray500);
width: 100%;
padding: 1.5rem 1rem;
padding:1rem;
}
.neuroglancer-screenshot-resolution-preview-container h2 {
font-size: 0.938rem;
Expand Down Expand Up @@ -312,8 +276,20 @@
height: 1rem;
margin-left: auto;
}
.neuroglancer-screenshot-size-text .neuroglancer-icon {
background-color:red;
.neuroglancer-screenshot-dialog .neuroglancer-icon svg {
stroke: rgba(20, 20, 21, 0.4);
width: 1rem;
height: 1rem;
}
.neuroglancer-screenshot-dialog .neuroglancer-icon {
width: 1rem;
height: 1rem;
min-width: inherit;
min-height: inherit;
padding: 0;
}
.neuroglancer-screenshot-dialog .neuroglancer-icon:hover {
background: none;
}
.neuroglancer-screenshot-resolution-table + .neuroglancer-screenshot-resolution-table {
border: 0;
Expand All @@ -331,6 +307,8 @@
.neuroglancer-screenshot-resolution-table th .neuroglancer-screenshot-tooltip {
display: inline-block;
margin-left: 0.25rem;
position: relative;
top: 0.13rem;
}
.neuroglancer-screenshot-resolution-table td {
font-size: 0.813rem;
Expand All @@ -341,53 +319,20 @@

.neuroglancer-screenshot-warning {
color: red;
width: 100%;
width: auto;
font-size: 0.75rem;
margin: 0.12rem 0 0 -1.25rem;
}

.neuroglancer-screenshot-tooltip {
user-select: none;
background: url('../../src/ui/images/help_outline.svg') no-repeat;
text-indent: -9999px;
flex: none;
cursor: pointer;
width: 1rem;
height: 1rem;
background-size: contain;
}
.neuroglancer-screenshot-footer-container {
margin: 0;
display: flex;
padding: 0.75rem 1rem;
border-top: 1px solid var(--gray50);
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-progress-text {
margin: 0;
flex: 1;
font-weight: 590;
cursor: pointer;
padding: 0;
font-size: 0.813rem;
align-self: center;
color: var(--primary700);
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-button {
border-radius: 0.5rem;
border: 1px solid var(--gray300);
background: white;
padding: 0.5rem 0.75rem;
font-size: 0.813rem;
font-weight: 590;
color: var(--gray800);
margin: 0 0 0 0.25rem;
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-button:disabled {
display: none;
}

.neuroglancer-screenshot-tooltip {
position: relative;
cursor: pointer;
}

.neuroglancer-screenshot-tooltip::after {
content: attr(data-tooltip);
position: absolute;
Expand All @@ -397,6 +342,7 @@
transform: translate(-50%, 0%);
text-indent: 0;
color: white;
white-space: normal;
padding: 0.5rem 0.75rem;
margin-top: 0.375rem;
border-radius: 5px;
Expand Down Expand Up @@ -435,20 +381,57 @@
opacity: 1;
visibility: visible;
}
.neuroglancer-screenshot-close-and-help .neuroglancer-screenshot-tooltip {
position: absolute;
right: 0.875rem;
top: 4.4rem;
}
.neuroglancer-screenshot-footer-container {
margin: 0;
display: flex;
padding: 0.75rem 1rem;
border-top: 1px solid var(--gray50);
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-progress-text {
margin: 0;
flex: 1;
font-weight: 590;
cursor: pointer;
padding: 0;
font-size: 0.813rem;
align-self: center;
color: var(--primary700);
}
.neuroglancer-screenshot-footer-container .neuroglancer-screenshot-button {
border-radius: 0.5rem;
border: 1px solid var(--gray300);
background: white;
padding: 0.5rem 0.75rem;
font-size: 0.813rem;
font-weight: 590;
color: var(--gray800);
margin: 0 0 0 0.25rem;
}
.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;
left: 50%;
right: 0%;
top: 100%; /* Place the tooltip above the element */
left: 0;
transform: translate(-50%, 0%);
transform: translate(50%, 0%);
text-indent: 0;
color: white;
padding: 0.5rem 0.75rem;
Expand All @@ -472,9 +455,9 @@
content: "";
position: absolute;
top: 100%; /* Adjust this to move the arrow closer to the tooltip */
left: 50%;
left:88%;
margin-top: -0.375rem;
transform: translateX(-50%);
transform: translateX(100%);
border-width: 0.375rem;
border-style: solid;
border-color: transparent transparent var(--gray600) transparent; /* Arrow pointing upwards */
Expand Down
27 changes: 13 additions & 14 deletions src/ui/screenshot_menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,29 +160,29 @@ export class ScreenshotDialog extends Overlay {

private setupHelpTooltips() {
const generalSettingsTooltip = makeIcon({ svg: svg_help });
// const generalSettingsTooltip = document.createElement("div");
// generalSettingsTooltip.classList.add("neuroglancer-screenshot-tooltip");
generalSettingsTooltip.setAttribute("title",
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.textContent = "?";

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

const scaleFactorHelpTooltip = makeIcon({ svg: svg_help });
// scaleFactorHelpTooltip.classList.add("neuroglancer-screenshot-tooltip");
scaleFactorHelpTooltip.setAttribute("title",
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.");
// scaleFactorHelpTooltip.textContent = "?";

return { generalSettingsTooltip, orthographicSettingsTooltip, scaleFactorHelpTooltip };
}

private initializeUI() {
this.content.classList.add("neuroglancer-screenshot-dialog");
const parentElement = this.content.parentElement;
if (parentElement) {
parentElement.classList.add("neuroglancer-screenshot-overlay");
}

const titleText = document.createElement("h2");
titleText.classList.add(
Expand Down Expand Up @@ -262,9 +262,8 @@ export class ScreenshotDialog extends Overlay {
onClick: () => {
}
});
// const screenshotCopyBtn = document.createElement("button");
// screenshotCopyBtn.classList.add("neuroglancer-screenshot-copy-icon");
// screenshotCopyBtn.setAttribute("data-tooltip", "Copy to clipboard");
screenshotCopyBtn.classList.add("neuroglancer-screenshot-copy-icon");
screenshotCopyBtn.setAttribute("data-tooltip", "Copy to clipboard");

this.screenshotSizeText.appendChild(screenshotLabel);
this.screenshotSizeText.appendChild(this.screenshotSelectedValues);
Expand Down

0 comments on commit 71bb1a8

Please sign in to comment.