Skip to content

Commit

Permalink
Merge pull request #46 from MetaCell/feature/NA-362-screenshot
Browse files Browse the repository at this point in the history 
NA-362 screenshot styling updates
  • Loading branch information
@seankmartin
seankmartin authored Nov 6, 2024
2 parents 5a1f605 + 92af1f2 commit 4b9b04e
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 48 deletions.
167 changes: 123 additions & 44 deletions src/ui/screenshot_menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
outline: 0;
}
.neuroglancer-screenshot-dialog {
width: 46.875rem;
width: 48.75rem;
padding: 0;
margin: 1.25rem auto;
position: relative;
Expand All @@ -85,8 +85,6 @@
gap: 10px;
}

/* TODO implement proper scroll - this is to ensure div class is setup right */
/* TODO Make tooltips work with this */
.neuroglancer-screenshot-main-body-container {
height: auto !important;
max-height: calc(100vh - 200px) !important;
Expand Down Expand Up @@ -134,7 +132,7 @@
.neuroglancer-screenshot-keep-slice-label {
display: flex;
flex-direction: row-reverse;
margin: 1.25rem 0;
margin: 1rem 0;
width: 100%;
justify-content: flex-end;
align-items: center;
Expand All @@ -160,15 +158,15 @@
}

.neuroglancer-screenshot-filename-and-buttons {
padding: 1.5rem 1rem 1.25rem;
padding: 1rem 1rem 0.75rem 1rem;
}
.neuroglancer-screenshot-filename-and-buttons label {
color: var(--gray800);
font-size: 0.813rem;
font-style: normal;
font-weight: 590;
display: block;
margin: 1rem 0 0.5rem;
margin: 0.75rem 0 0.375rem;
}
.neuroglancer-screenshot-name-input {
width: 100%;
Expand All @@ -184,6 +182,7 @@
font-weight: 400;
color: var(--gray700);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
line-height: 20px;
}
.neuroglancer-screenshot-name-input:disabled {
background: var(--gray500);
Expand Down Expand Up @@ -231,12 +230,7 @@
font-weight: 400;
padding-bottom: 0.75rem;
}
.neuroglancer-screenshot-resolution-table tr:first-child {
border-bottom: 0.75rem solid transparent;
}
.neuroglancer-screenshot-resolution-table tr:last-child {
border-bottom: 0.4rem solid transparent;
}

.neuroglancer-screenshot-statistics-table th[colspan="2"] a {
font-weight: 590;
cursor: pointer;
Expand Down Expand Up @@ -267,14 +261,39 @@
margin: 0;
color: var(--gray600);
}

.neuroglancer-screenshot-resolution-preview-top-container {
display: flex;
}
.neuroglancer-screenshot-resolution-table {
border-radius: 0.375rem;
border: 1px solid var(--gray50);
margin: 1rem 0 0;
padding: 0.75rem 0.75rem 0.1rem;
width: 100%;
border-collapse: collapse;
border-collapse: separate;
border-spacing: 0;
}

.neuroglancer-screenshot-resolution-table table {
padding: 4px 2px 2px 2px;
background-color: #e6e6e6;
border-radius: 6px;
margin-bottom: 0.75rem;
}

.neuroglancer-screenshot-resolution-table table tr:nth-child(2) td:first-child {
border-top-left-radius: 0.25rem;
}

.neuroglancer-screenshot-resolution-table table tr:nth-child(2) td:last-child {
border-top-right-radius: 0.25rem;
}

.neuroglancer-screenshot-resolution-table table tr:last-child td:first-child {
border-bottom-left-radius: 0.25rem;
}

.neuroglancer-screenshot-resolution-table table tr:last-child td:last-child {
border-bottom-right-radius: 0.25rem;
}

.neuroglancer-screenshot-resolution-table h3 {
text-align: left;
color: var(--gray200);
Expand All @@ -286,10 +305,17 @@
margin: 0 0;
}
.neuroglancer-screenshot-size-text {
margin: 0 0 0.75rem;
margin: 0.75rem 0 0.75rem 0;
display: flex;
align-items: center;
}

.neuroglancer-screenshot-size-text h3 {
margin: 0;
width: 33.33%;
font-size: 0.813rem;
}

.neuroglancer-screenshot-size-text span {
font-size: 0.813rem;
color: var(--gray700);
Expand Down Expand Up @@ -334,20 +360,82 @@
font-style: normal;
font-weight: 590;
width: 33.33%;
background: var(--gray100);
padding: 0.25rem 0.25rem 0;
background: #e6e6e6;
padding: 0.25rem 0.375rem;
}
.neuroglancer-screenshot-resolution-table th .neuroglancer-screenshot-tooltip {
.neuroglancer-screenshot-resolution-table th .neuroglancer-screenshot-tooltip,
.neuroglancer-screenshot-scale-factor .neuroglancer-screenshot-tooltip {
display: inline-block;
margin-left: 0.25rem;
position: relative;
vertical-align: top;
}

.neuroglancer-screenshot-resolution-table th .neuroglancer-screenshot-tooltip,
.neuroglancer-screenshot-scale-factor .neuroglancer-screenshot-tooltip {
flex: none;
cursor: pointer;
width: 1rem;
height: 1rem;
background-size: contain;
position: relative;
cursor: pointer;
}

.neuroglancer-screenshot-resolution-table
th
.neuroglancer-screenshot-tooltip:hover::after,
.neuroglancer-screenshot-resolution-table
th
.neuroglancer-screenshot-tooltip:hover::before,
.neuroglancer-screenshot-scale-factor
.neuroglancer-screenshot-tooltip:hover::after,
.neuroglancer-screenshot-scale-factor
.neuroglancer-screenshot-tooltip:hover::before {
opacity: 1;
visibility: visible;
}

.neuroglancer-screenshot-resolution-table
th
.neuroglancer-screenshot-tooltip::after,
.neuroglancer-screenshot-scale-factor .neuroglancer-screenshot-tooltip::after {
content: attr(data-tooltip);
position: absolute;
border-width: 0.375rem;
border-style: solid;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
border-color: transparent transparent transparent var(--gray600);
left: 160%;
}

.neuroglancer-screenshot-resolution-table
th
.neuroglancer-screenshot-tooltip::before,
.neuroglancer-screenshot-scale-factor .neuroglancer-screenshot-tooltip::before {
content: "";
position: absolute;
top: 0; /* Adjust this to move the arrow closer to the tooltip */
left: 100%;
border-width: 0.375rem;
border-style: solid;
border-color: transparent var(--gray600) transparent transparent; /* Arrow pointing leftwards */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
}

.neuroglancer-screenshot-resolution-table td {
font-size: 0.813rem;
color: var(--gray700);
width: 33.33%;
padding: 0.4rem 0.25rem;
background: white;
padding: 0.375rem;
line-height: 1.25rem;
}

.neuroglancer-screenshot-warning {
Expand All @@ -369,15 +457,10 @@
.neuroglancer-screenshot-tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
top: 100%; /* Place the tooltip above the element */
left: 0;
transform: translate(-50%, 0%);
text-indent: 0;
color: white;
white-space: normal;
padding: 0.5rem 0.75rem;
margin-top: 0.375rem;
border-radius: 5px;
height: auto;
width: 20rem;
Expand All @@ -389,24 +472,24 @@
text-align: center;
opacity: 0;
visibility: hidden;
z-index: 9999;
z-index: 99999;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent the tooltip from blocking interaction */
pointer-events: none;
right: 150%;
top: -100%;
}
.neuroglancer-screenshot-tooltip::before {
content: "";
position: absolute;
top: 100%; /* Adjust this to move the arrow closer to the tooltip */
left: 50%;
margin-top: -0.375rem;
transform: translateX(-50%);
border-width: 0.375rem;
border-style: solid;
border-color: transparent transparent var(--gray600) transparent; /* Arrow pointing upwards */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
border-color: transparent transparent transparent black;
top: 0;
left: -50%;
}

.neuroglancer-screenshot-tooltip:hover::after,
Expand Down Expand Up @@ -461,13 +544,9 @@
.neuroglancer-screenshot-copy-icon::after {
content: attr(data-tooltip);
position: absolute;
right: 0%;
top: 100%; /* Place the tooltip above the element */
transform: translate(50%, 0%);
text-indent: 0;
color: white;
padding: 0.5rem 0.75rem;
margin-top: 0.375rem;
border-radius: 5px;
height: auto;
width: 8.125rem;
Expand All @@ -482,21 +561,21 @@
z-index: 9999;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent the tooltip from blocking interaction */
right: 10%;
top: -50%;
}
.neuroglancer-screenshot-copy-icon::before {
content: "";
position: absolute;
top: 100%; /* Adjust this to move the arrow closer to the tooltip */
left: 88%;
margin-top: -0.375rem;
transform: translateX(100%);
border-width: 0.375rem;
border-style: solid;
border-color: transparent transparent var(--gray600) transparent; /* Arrow pointing upwards */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
border-color: transparent transparent transparent black;
top: 0;
left: 90%;
}

.neuroglancer-screenshot-copy-icon:hover::after,
Expand All @@ -506,5 +585,5 @@
}

.neuroglancer-screenshot-dimension {
color: black; /* TODO add exact color */
color: var(--gray600);
}
13 changes: 9 additions & 4 deletions src/ui/screenshot_menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,10 @@ export class ScreenshotDialog extends Overlay {
);
const settingsPreview = document.createElement("div");
settingsPreview.classList.add("neuroglancer-screenshot-resolution-table");
const previewTopContainer = document.createElement("div");
previewTopContainer.classList.add(
"neuroglancer-screenshot-resolution-preview-top-container",
);
const previewLabel = document.createElement("h2");
previewLabel.textContent = "Preview";

Expand All @@ -308,11 +312,12 @@ export class ScreenshotDialog extends Overlay {

this.screenshotSizeText.appendChild(screenshotLabel);
this.screenshotSizeText.appendChild(this.screenshotSelectedValues);
this.screenshotSizeText.appendChild(screenshotCopyButton);

previewContainer.appendChild(previewLabel);
previewContainer.appendChild(previewTopContainer);
previewTopContainer.appendChild(previewLabel);
previewTopContainer.appendChild(screenshotCopyButton);
previewContainer.appendChild(this.screenshotSizeText);
previewContainer.appendChild(settingsPreview);
settingsPreview.appendChild(this.screenshotSizeText);
settingsPreview.appendChild(this.createPanelResolutionTable());
settingsPreview.appendChild(this.createLayerResolutionTable());

Expand Down Expand Up @@ -488,7 +493,7 @@ export class ScreenshotDialog extends Overlay {
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.";
"The screenshot will take when all the chunks are loaded. If GPU memory is full, the screenshot will only capture the successfully loaded chunks. A screenshot scale larger than 1 may cause new chunks to be downloaded once the screenshot is in progress.";

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

0 comments on commit 4b9b04e

Please sign in to comment.