Skip to content

Commit

Permalink
#NA-356 Screenshot Modal UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@vidhya-metacell
vidhya-metacell committed Oct 11, 2024
1 parent ce618d1 commit 937a553
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/ui/images/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/ui/images/content_copy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
230 changes: 220 additions & 10 deletions src/ui/screenshot_menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
--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);
Expand All @@ -38,7 +40,6 @@
width: 46.875rem;
padding: 0;
margin: 1.25rem auto;
overflow: hidden;
position: relative;
transform: none;
left: auto;
Expand All @@ -50,7 +51,6 @@
}
.neuroglancer-screenshot-dialog .neuroglancer-screenshot-close-and-help {
border-bottom: 1px solid var(--gray50);
background: #FFF;
display: flex;
color: var(--gray600);
align-items: center;
Expand All @@ -59,6 +59,9 @@
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;
Expand Down Expand Up @@ -124,6 +127,9 @@
.metacell-scale-factor {
width: 100%;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.15rem;
}
.neuroglancer-screenshot-tooltip.metacell-screenshot-tooltip {
position: absolute;
Expand All @@ -142,7 +148,12 @@
font-size: 0.938rem;
font-weight: 590;
margin: 0;
display: flex;
align-items: center;
color: var(--gray600);
justify-content: space-between;
}

.neuroglancer-screenshot-dialog .neuroglancer-screenshot-close-button {
background: url('../../src/ui/images/close.svg') no-repeat;
text-indent: -9999px;
Expand All @@ -156,26 +167,37 @@
.neuroglancer-screenshot-filename-and-buttons {
padding: 1.5rem 1rem 1.25rem;
}

.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;
}
.neuroglancer-screenshot-name-input {
width: 100%;
margin-right: 10px;
border-radius: 8px;
border: 1px solid var(--gray300);
background: var(--gray500);
background: white;
font-size: 0.813rem;
font-style: normal;
padding: 8px 12px;
align-items: center;
gap: 8px;
font-weight: 400;
color: var(--gray400);
color: var(--gray700);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
margin: 1rem 0 0;

}
.neuroglancer-screenshot-name-input::placeholder {
.neuroglancer-screenshot-name-input:disabled {
background: var(--gray500);
color: var(--gray400);
}
.neuroglancer-screenshot-name-input::placeholder {
color: var(--gray700);
}

.neuroglancer-screenshot-button {
cursor: pointer;
Expand All @@ -198,13 +220,33 @@
.neuroglancer-screenshot-statistics-table th,
.neuroglancer-screenshot-statistics-table td {
text-align: left;
width: 33.33%;
}
.neuroglancer-screenshot-statistics-table td {
color: var(--gray200);
font-size: 0.813rem;
font-weight: 590;
padding: 0.5rem 0;
}
.neuroglancer-screenshot-statistics-table th[colspan="2"] {
font-size: 0.813rem;
color: var(--gray700);
line-height: 1.25rem;
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;
color: var(--primary500);
margin-left: 0.1rem;
}
.neuroglancer-screenshot-statistics-table td:last-child {
color: var(--gray700);
font-weight: 400;
Expand All @@ -216,12 +258,60 @@
color: var(--gray600);
padding: 0 0 0.5rem;
}
.neuroglancer-screenshot-resolution-table {
.metacell-theme-resolution-preview-container {
border-top: 1px solid var(--gray50);
border-bottom: 1px solid var(--gray50);
background: var(--gray500);
width: 100%;
padding: 1.5rem 1rem;
}
.metacell-theme-resolution-preview-container h2 {
font-size: 0.938rem;
font-weight: 590;
margin: 0;
color: var(--gray600);
}
.metacell-theme-resolution-table {
border-radius: 0.375rem;
border: 1px solid var(--gray50);
margin: 1rem 0 0;
padding: 0.75rem 0.75rem 0.1rem;
}
.metacell-theme-resolution-table h3 {
text-align: left;
color: var(--gray200);
font-size: 0.813rem;
font-style: normal;
font-weight: 590;
width: 33.33%;
padding: 0;
margin: 0 0;
}
.neuroglancer-screenshot-resolution-table {
width: 100%;
border-collapse: collapse;
}
.neuroglancer-screenshot-size-text {
margin: 0 0 0.75rem;
display: flex;
align-items: center;
}
.neuroglancer-screenshot-size-text span {
font-size: 0.813rem;
color: var(--gray700);
width: 33.33%;
padding: 0.25rem;
font-weight: 400;
}
.neuroglancer-screenshot-size-text button {
background: url('../../src/ui/images/content_copy.svg') no-repeat;
outline: 0;
border: 0;
cursor: pointer;
width: 1rem;
height: 1rem;
margin-left: auto;
}
.neuroglancer-screenshot-resolution-table + .neuroglancer-screenshot-resolution-table {
border: 0;
}
Expand All @@ -233,13 +323,17 @@
font-weight: 590;
width: 33.33%;
background: var(--gray100);
padding: 0.25rem 0;
padding: 0.25rem 0.25rem 0;
}
.neuroglancer-screenshot-resolution-table th .neuroglancer-screenshot-tooltip {
display: inline-block;
margin-left: 0.25rem;
}
.neuroglancer-screenshot-resolution-table td {
font-size: 0.813rem;
color: var(--gray700);
width: 33.33%;
padding: 0.25rem 0;
padding: 0.4rem 0.25rem;
}

.neuroglancer-screenshot-warning {
Expand All @@ -265,6 +359,12 @@
.metacell-theme-screenshot-footer-container .metacell-theme-progress-text {
margin: 0;
flex: 1;
font-weight: 590;
cursor: pointer;
padding: 0;
font-size: 0.813rem;
align-self: center;
color: var(--primary700);
}
.metacell-theme-screenshot-footer-container .neuroglancer-screenshot-button {
border-radius: 0.5rem;
Expand All @@ -275,4 +375,114 @@
font-weight: 590;
color: var(--gray800);
margin: 0 0 0 0.25rem;
}
.metacell-theme-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;
left: 50%;
top: 100%; /* Place the tooltip above the element */
left: 0;
transform: translate(-50%, 0%);
text-indent: 0;
color: white;
padding: 0.5rem 0.75rem;
margin-top: 0.375rem;
border-radius: 5px;
height: auto;
width: 20rem;
line-height: 1rem;
font-size: 0.75rem;
font-weight: 590;
border-radius: 8px;
background: var(--gray600);
text-align: center;
opacity: 0;
visibility: hidden;
z-index: 9999;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent the tooltip from blocking interaction */
}
.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;
}

.neuroglancer-screenshot-tooltip:hover::after,
.neuroglancer-screenshot-tooltip:hover::before {
opacity: 1;
visibility: visible;
}

.metacell-theme-copy-icon {
position: relative;
cursor: pointer;
}


.metacell-theme-copy-icon::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;
padding: 0.5rem 0.75rem;
margin-top: 0.375rem;
border-radius: 5px;
height: auto;
width: 8.125rem;
line-height: 1rem;
font-size: 0.75rem;
font-weight: 590;
border-radius: 8px;
background: var(--gray600);
text-align: center;
opacity: 0;
visibility: hidden;
z-index: 9999;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent the tooltip from blocking interaction */
}
.metacell-theme-copy-icon::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;
}

.metacell-theme-copy-icon:hover::after,
.metacell-theme-copy-icon:hover::before {
opacity: 1;
visibility: visible;
}
Loading

0 comments on commit 937a553

Please sign in to comment.