Skip to content

Commit

Permalink
Update from main
Browse files Browse the repository at this point in the history
  • Loading branch information
SeanLeRoy committed May 21, 2024
2 parents 709a179 + 5e02088 commit 3cf6cd0
Show file tree
Hide file tree
Showing 29 changed files with 2,571 additions and 206 deletions.
2,018 changes: 1,828 additions & 190 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/core/App.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
height: 100%;
width: 30%;
max-width: var(--query-sidebar-max-width);
position: relative;
}

.center {
Expand Down
9 changes: 6 additions & 3 deletions packages/core/components/FileDetails/FileDetails.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
--window-buttons-height: var(--url-bar-height); /* defined in App.module.css under .root{} */
--pagination-height: var(--url-bar-height); /* defined in App.module.css under .root{} */
--padding: 10px;
--resize-handle-width: 5px;
}
--resize-handle-width: 10px;
--max-detail-button-width: 250px;
}

.expandable {
position: absolute;
Expand Down Expand Up @@ -158,8 +159,10 @@
border: none;
color: var(--primary-text-color);
height: 30px;
max-width: 50%;
max-width: var(--max-detail-button-width);
width: 100%;
border-radius: 4px;
justify-content: center;
}

.file-name {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
background-color: var(--primary-background-color);
color: var(--primary-text-color);
height: 32px;
margin: 0 1px;
border-radius: 4px;
}

.icon-button:hover:not(.disabled), .icon-button:hover:not(.disabled) i {
Expand All @@ -21,5 +23,10 @@

.disabled {
cursor: default;
opacity: 0.3
background-color: var(--highlight-background-color);
color: var(--highlight-text-color);
}

.smallFont {
font-size: x-small;
}
3 changes: 2 additions & 1 deletion packages/core/components/GlobalActionButtonRow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,13 @@ export default function GlobalActionButtonRow(props: Props) {
<ActionButton
className={classNames(styles.iconButton, {
[styles.disabled]: shouldDisplaySmallFont,
[styles.smallFont]: true,
})}
disabled={shouldDisplaySmallFont}
onClick={() =>
dispatch(selection.actions.adjustGlobalFontSize(!shouldDisplaySmallFont))
}
text="a"
text="A"
/>
<ActionButton
className={classNames(styles.iconButton, {
Expand Down
15 changes: 10 additions & 5 deletions packages/core/components/QuerySidebar/QuerySidebar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
fill: var(--dark-purple);
}

.logo-hidden {
content-visibility: hidden;
}

.container, .minimized-container {
--primary-sidebar-color: var(--secondary-background-color);
--secondary-sidebar-color: var(--primary-background-color);
Expand All @@ -52,7 +56,8 @@

background-color: var(--secondary-sidebar-color);
color: var(--primary-sidebar-text-color);
padding: 0.5em;
padding: 0.0.5em 0 0.5em 0.5em;

}

.minimized-container {
Expand All @@ -64,7 +69,7 @@
}

.minimized-container:hover {
box-shadow: 5px 0 5px -2px var(--secondary-sidebar-color)
box-shadow: 5px 0 5px -2px var(--highlight-background-color)
}

.minimized-container > p {
Expand Down Expand Up @@ -101,15 +106,15 @@
align-items: center;
background-color: var(--secondary-sidebar-color);
bottom: -5px;
color: var(--primary-sidebar-color);
color: var(--highlight-background-color);
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
left: min(calc(0.3 * 80% - 6px), var(--query-sidebar-max-width));
right: 0;
position: absolute;
width: 9px;
width: 1em;
}

.minimize-bar:hover {
Expand Down
9 changes: 7 additions & 2 deletions packages/core/components/QuerySidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface QuerySidebarProps {
*/
export default function QuerySidebar(props: QuerySidebarProps) {
const dispatch = useDispatch();
const isOnWeb = useSelector(interaction.selectors.isOnWeb);
const queries = useSelector(selection.selectors.getQueries);
const selectedQuery = useSelector(selection.selectors.getSelectedQuery);
const dataSources = useSelector(interaction.selectors.getAllDataSources);
Expand Down Expand Up @@ -80,7 +81,9 @@ export default function QuerySidebar(props: QuerySidebarProps) {
pathData={AICS_LOGO}
viewBox="0,0,512,512"
width={25}
className={styles.logo}
className={classNames(styles.logo, {
[styles.logoHidden]: isOnWeb,
})}
/>
</div>
<p>
Expand All @@ -98,7 +101,9 @@ export default function QuerySidebar(props: QuerySidebarProps) {
pathData={AICS_LOGO}
viewBox="0,0,512,512"
width={40}
className={styles.logo}
className={classNames(styles.logo, {
[styles.logoHidden]: isOnWeb,
})}
/>
<IconButton
ariaLabel="Add"
Expand Down
20 changes: 20 additions & 0 deletions packages/core/components/QuerySidebar/tutorials/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,26 @@ export const HELP_OPTIONS = (dispatch: Dispatch): IContextualMenuItem[] => {
href: "https://alleninstitute.github.io/aics-fms-file-explorer-app/",
target: "_blank",
},
{
key: "gh-issues-page",
text: "Report an Issue",
iconProps: {
iconName: "Bug",
},
title: "Opens the FMS File Explorer GitHub issues page",
href: "https://github.com/AllenInstitute/aics-fms-file-explorer-app/issues",
target: "_blank",
},
{
key: "image-sc",
text: "Access Forums",
iconProps: {
iconName: "AccountActivity",
},
title: "Opens image.sc forums",
href: "https://forum.image.sc/tag/biofile-finder",
target: "_blank",
},
{
key: "tutorials",
text: "Tutorials",
Expand Down
14 changes: 13 additions & 1 deletion packages/core/styles/global.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
}

*,
Expand All @@ -20,6 +21,7 @@ main {
padding: 0;
border: 0;
overflow: hidden;
scrollbar-color: var(--borders-light-grey) var(--accent-dark)
}

body {
Expand All @@ -28,13 +30,22 @@ body {
--light-purple: #bab5c9;
--dark-blue: #003057;
/* Additional colors */
/* New theme */
--bright-aqua: #0dc4d9;
--aqua: #0b9aab;
--primary-dark: #2f2f2f;
--secondary-dark: #1c1c1c;
--accent-dark: #3d3d3d;
--borders-light-grey: #575859;
/* Old theme */
--dark-grey: #313131;
--medium-grey: #4B4B4B;
--light-grey: #BFBFBF;
--white: #ffffff;
--red: #c23030;

/* DEFAULT THEME (dark theme) */
/* To do: Update greys to new theme, check components for consistency */
--primary-background-color: var(--medium-grey);
--secondary-background-color: var(--dark-grey);
--primary-text-color: var(--white);
Expand All @@ -43,6 +54,7 @@ body {
--highlight-text-color: var(--white);
--error-background-color: var(--red);
--error-text-color: var(--white);
--aqua-secondary-hover: rgba(13, 187, 206, 0.18);

--query-sidebar-max-width: 350px;
--url-bar-height: 40px;
Expand Down
1 change: 1 addition & 0 deletions packages/web/assets/AICS-logo-and-name.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/assets/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/web/custom.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
declare module "*.svg" {
import React = require("react");
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
2 changes: 2 additions & 0 deletions packages/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,15 @@
"mini-css-extract-plugin": "2.x",
"postcss-loader": "6.x",
"postcss-preset-env": "7.x",
"react-svg-loader": "^3.0.3",
"webpack": "5.x",
"webpack-bundle-analyzer": "4.x",
"webpack-cli": "4.x",
"webpack-dev-server": "4.x"
},
"dependencies": {
"@duckdb/duckdb-wasm": "^1.28.1-dev106.0",
"react-router-dom": "^6.23.1",
"regenerator-runtime": "0.13.x"
}
}
64 changes: 64 additions & 0 deletions packages/web/src/components/Header/Header.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.header{
background-color: var(--primary-dark);
border-bottom: 1px solid var(--borders-light-grey);
color: var(--secondary-text-color);
display: flex;
overflow: hidden;
width: 100%;
padding: 8px 10px;
filter: drop-shadow(black 0px 4px 8px);
}

.title {
color: var(--primary-text-color);
text-decoration: none;
}

.header-option {
margin: 0px 10px;
font-size: 16px;
font-weight: 400;
}

.left {
width: 50%;
display: flex;
flex: none;
align-items: center;
}

.right {
width: 50%;
display: flex;
flex: none;
justify-content: flex-end;
align-items: center;
}

.route-link {
text-decoration: none;
color: var(--secondary-text-color);
}

.route-link:hover, .route-link:focus {
color: var(--white)
}

.upload-button {
background-color: var(--primary-dark);
color: var(--aqua);
border: 1px solid var(--aqua);
border-radius: 18px;
height: 30px;
width: 110px;
}

.upload-button:hover, .upload-button:focus {
background-color: var(--aqua-secondary-hover);
color: var(--aqua);
}

.upload-button-label {
font-weight: 400;
font-size: 14px;
}
Loading

0 comments on commit 3cf6cd0

Please sign in to comment.