Merge pull request #148 from m2ms/master_v.0.2

changed loading behaviour
m2ms · Mar 20, 2020 · 2f573ff · 2f573ff
2 parents 3cd3258 + 8887cd0
commit 2f573ff
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -16,7 +16,7 @@ import {
   Avatar,
   Box,
   ButtonGroup,
-  CircularProgress
+  LinearProgress
 } from '@material-ui/core';
 import {
   PowerSettingsNew,
@@ -68,13 +68,12 @@ const useStyles = makeStyles(theme => ({
     zIndex: 1,
     width: '100%',
     position: 'absolute',
-    opacity: 0.9,
-    pointerEvents: 'initial'
+    opacity: 0,
+    pointerEvents: 'initial',
+    cursor: 'progress'
   },
-  loadingWheel: {
-    top: '50%',
-    left: '50%',
-    position: 'fixed'
+  loadingProgress: {
+    height: '7px'
   },
   clickableImage: {
     cursor: 'pointer'
@@ -322,15 +321,14 @@ export default memo(
         </Drawer>
         <Box paddingTop={`${headerHeight}px`} width="100%">
           {(isLoading === true || disableUserInteraction === true) && (
-            <Box
-              className={classes.loadingPaper}
-              width="100%"
-              height={`calc(${document.documentElement.offsetHeight}px - ${headerHeight}px)`}
-            >
-              <div className={classes.loadingWheel}>
-                <CircularProgress />
-              </div>
-            </Box>
+            <>
+              <LinearProgress color="secondary" className={classes.loadingProgress} />
+              <Box
+                className={classes.loadingPaper}
+                width="100%"
+                height={`calc(${document.documentElement.offsetHeight}px - ${headerHeight}px)`}
+              />
+            </>
           )}
         </Box>
       </ComputeSize>

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -107,6 +107,9 @@ const useStyles = makeStyles(theme => ({
   },
   matchingValue: {
     backgroundColor: theme.palette.success.lighter
+  },
+  unmatchingValue: {
+    backgroundColor: theme.palette.error.lighter
   }
 }));
 
@@ -323,10 +326,8 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
    */
   const isMatchingValue = item => {
     let match = false;
-    if (filter.predefined !== 'none') {
-      if (!(item.value < filter.filter[item.name].minValue || item.value > filter.filter[item.name].maxValue)) {
-        match = true;
-      }
+    if (!(item.value < filter.filter[item.name].minValue || item.value > filter.filter[item.name].maxValue)) {
+      match = true;
     }
     return match;
   };
@@ -337,7 +338,11 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
    * @return string - css class
    */
   const getValueMatchingClass = item => {
-    return isMatchingValue(item) ? classes.matchingValue : '';
+    let cssClass = '';
+    if (filter.predefined !== 'none') {
+      cssClass = isMatchingValue(item) ? classes.matchingValue : classes.unmatchingValue;
+    }
+    return cssClass;
   };
 
   return (

diff --git a/js/theme/palette.js b/js/theme/palette.js
@@ -42,7 +42,8 @@ export default {
     contrastText: white,
     dark: colors.red[900],
     main: colors.red[600],
-    light: colors.red[400]
+    light: colors.red[400],
+    lighter: colors.red[100]
   },
   text: {
     primary: colors.blueGrey[900],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fragalysis-frontend",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Frontend for fragalysis",
   "main": "webpack.config.js",
   "scripts": {