Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NA-362 screenshot styling updates #46

Merged
merged 3 commits into from
Nov 6, 2024
Merged

NA-362 screenshot styling updates #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
045d9cf
NA-362-screenshot scrollbar change style
Aiga115 Nov 1, 2024
e0d81bf
NA-362-screenshot fix tooltip ui and table ui
Aiga115 Nov 5, 2024
92af1f2
feat: small changes and revert scroll bar styling
seankmartin Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 123 additions & 44 deletions src/ui/screenshot_menu.css
View file
Open in desktop
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
Open in desktop
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
Loading