Merge pull request #3 from tworkool/develop

Release v0.2.2
tworkool · Oct 10, 2022 · 1748dc9 · 1748dc9
2 parents 86d774a + 3f5e524
commit 1748dc9
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 84 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sensebox-data-dashboard",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "sensebox-data-dashboard",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "authors": [],

diff --git a/webapp/src/components/dashboard_box_info/_dimensions.scss b/webapp/src/components/dashboard_box_info/_dimensions.scss
@@ -1,2 +1,3 @@
 $dashboard-box-info-width: 320px;
-$dashboard-box-info-width-mobile--collapsed: 50px;
+$dashboard-box-info-width-mobile--collapsed: 50px;
+$dashboard-box-info-border-radius: 8px;
diff --git a/webapp/src/components/dashboard_box_info/style.scss b/webapp/src/components/dashboard_box_info/style.scss
@@ -9,26 +9,25 @@ $content-margin-mobile: 12px;
 
 .sbd-dashboard-box-info {
     width: $dashboard-box-info-width;
+    border-radius: 0 $dashboard-box-info-border-radius $dashboard-box-info-border-radius 0;
     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
     @include responsive(phone) {
         width: calc(100% - 20px);
     }
+    @include responsive(desktop-down) {
+        border-right: 1px solid #c4c4c4;
+    }
     height: 100%;
     background-color: white;
     z-index: 4;
-    display: flex;
-    flex-direction: column;
     overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
 
     transition: width $animation-duration;
 
-    @include responsive(desktop-down) {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-    }
-
     &--collapsed {
         @include responsive(desktop-down) {
             width: $dashboard-box-info-width-mobile--collapsed;
@@ -94,14 +93,14 @@ $content-margin-mobile: 12px;
         }
     }
 
-    &__scroll-container{
+    &__scroll-container {
         width: 100%;
         height: 100%;
         overflow: auto;
 
         opacity: 1;
         transition: opacity $animation-duration;
-        
+
         min-width: $dashboard-box-info-width;
         @include responsive(phone) {
             min-width: 60vw;

diff --git a/webapp/src/containers/live_analytics/index.jsx b/webapp/src/containers/live_analytics/index.jsx
@@ -87,6 +87,14 @@ const LiveAnalyticsContainer = () => {
     [seconds]
   );
 
+  const areFiltersActive = useMemo(
+    () =>
+      sensorFilters.search !== sensorFilterDefaultValues.search ||
+      sensorFilters.type !== sensorFilterDefaultValues.type ||
+      sensorFilters.showInactive !== sensorFilterDefaultValues.showInactive,
+    [sensorFilters, sensorFilterDefaultValues]
+  );
+
   const refetchSensorData = useCallback(() => {
     setIsLoading(true);
     dispatch(requestSenseboxSensorDataFetch({ senseboxID: undefined }));
@@ -132,7 +140,7 @@ const LiveAnalyticsContainer = () => {
   const filterSelection = (text, handleOnClick) => (
     <Badge
       color="dark"
-      radius="sm"
+      /* radius="sm" */
       variant="filled"
       sx={{ paddingRight: 3 }}
       rightSection={
@@ -240,28 +248,11 @@ const LiveAnalyticsContainer = () => {
         <>
           <Stack className="sbd-live-analytics-filters">
             <Group position="apart" className="full-width">
-              <Group spacing="xs">
-                {sensorFilters.search !== sensorFilterDefaultValues.search &&
-                  filterSelection(`Search: ${sensorFilters.search}`, () => {
-                    //handleFilters({ search: sensorFilterDefaultValues.search });
-                    resetFilters(null, "search");
-                  })}
-                {sensorFilters.type !== sensorFilterDefaultValues.type &&
-                  filterSelection(`Type: ${sensorFilters.type}`, () => {
-                    //handleFilters({ type: sensorFilterDefaultValues.type });
-                    resetFilters(null, "type");
-                  })}
-                {sensorFilters.showInactive !==
-                  sensorFilterDefaultValues.showInactive &&
-                  filterSelection("Only Show Active", () => {
-                    resetFilters(null, "showInactive");
-                  })}
-              </Group>
               <Group>
                 <Popover
                   width={280}
                   //closeOnItemClick={false}
-                  position="bottom-end"
+                  position="bottom-start"
                   offset={4}
                   withArrow
                   shadow="lg"
@@ -273,12 +264,11 @@ const LiveAnalyticsContainer = () => {
                       color="red"
                       position="middle-end"
                       disabled={isLiveUpdateEnabled}
-                      style={{zIndex: 3}}
+                      style={{ zIndex: 3 }}
+                      withBorder
                     >
                       <Button
-                        //variant="default"
-                        variant="subtle"
-                        color="dark"
+                        color="dark.3"
                         size="xs"
                         leftIcon={<FileSettings size={18} />}
                       >
@@ -295,7 +285,6 @@ const LiveAnalyticsContainer = () => {
                         }}
                         defaultValue={dataView}
                         size="xs"
-                        //color="dark"
                         data={[
                           {
                             value: "box-view",
@@ -338,17 +327,14 @@ const LiveAnalyticsContainer = () => {
                 </Popover>
                 <Popover
                   width={280}
-                  //closeOnItemClick={false}
-                  position="bottom-end"
+                  position="bottom-start"
                   offset={4}
                   withArrow
                   shadow="lg"
                 >
                   <Popover.Target>
                     <Button
-                      //variant="default"
-                      variant="subtle"
-                      color="dark"
+                      color="dark.3"
                       size="xs"
                       leftIcon={<TablerIconsFilter size={18} />}
                     >
@@ -357,15 +343,6 @@ const LiveAnalyticsContainer = () => {
                   </Popover.Target>
 
                   <Popover.Dropdown>
-                    {/* <Divider
-                  my="xs"
-                  labelPosition="center"
-                  label={
-                    <>
-                      <Box ml={5}>General</Box>
-                    </>
-                  }
-                /> */}
                     <Stack spacing="xs">
                       <TextInput
                         placeholder="Search"
@@ -465,14 +442,33 @@ const LiveAnalyticsContainer = () => {
                     )}
                   </Popover.Dropdown>
                 </Popover>
-                <Button
-                  variant="outline"
-                  color="dark"
-                  size="xs"
-                  onClick={resetFilters}
-                >
-                  Clear Filters
-                </Button>
+                {areFiltersActive && (
+                  <Button
+                    variant="outline"
+                    color="dark"
+                    size="xs"
+                    onClick={resetFilters}
+                  >
+                    Clear Filters
+                  </Button>
+                )}
+              </Group>
+              <Group spacing="xs">
+                {sensorFilters.search !== sensorFilterDefaultValues.search &&
+                  filterSelection(`Search: ${sensorFilters.search}`, () => {
+                    //handleFilters({ search: sensorFilterDefaultValues.search });
+                    resetFilters(null, "search");
+                  })}
+                {sensorFilters.type !== sensorFilterDefaultValues.type &&
+                  filterSelection(`Type: ${sensorFilters.type}`, () => {
+                    //handleFilters({ type: sensorFilterDefaultValues.type });
+                    resetFilters(null, "type");
+                  })}
+                {sensorFilters.showInactive !==
+                  sensorFilterDefaultValues.showInactive &&
+                  filterSelection("Only Show Active", () => {
+                    resetFilters(null, "showInactive");
+                  })}
               </Group>
             </Group>
           </Stack>

diff --git a/webapp/src/pages/dashboard/index.jsx b/webapp/src/pages/dashboard/index.jsx
@@ -70,7 +70,7 @@ const DashboardPage = () => {
             className="sbd-mantine-tabs-root"
           >
             <Tabs.List
-              position="center"
+              position="right"
               className="sbd-dashboard-content__analytics__tab-header"
             >
               <Tabs.Tab

diff --git a/webapp/src/pages/dashboard/style.scss b/webapp/src/pages/dashboard/style.scss
@@ -46,19 +46,26 @@ $content-analytics-sections-height: 40px;
         height: calc(100vh - $dashboard-header-height - $dashboard-footer-height-phone);
     }
     background-color: rgb(176, 127, 255);
-    display: flex;
+    position: relative;
 
     &__analytics {
-        width: calc(100% - $dashboard-box-info-width);
+        padding-left: $dashboard-box-info-width;
         @include responsive(desktop-down) {
-            width: calc(100% - $dashboard-box-info-width-mobile--collapsed);
-            margin-left: $dashboard-box-info-width-mobile--collapsed;
+            padding-left: $dashboard-box-info-width-mobile--collapsed;
+            //margin-left: $dashboard-box-info-width-mobile--collapsed;
         }
         height: 100%;
         background-color: $analytics-bg-color;
-        overflow: auto;
+        position: absolute;
+        inset: 0;
 
         &__tab-header {
+            padding-right: 20px;
+            @include responsive(desktop-down) {
+                padding-right: 8px;
+            }
+            width: calc(100% + $dashboard-box-info-border-radius);
+            transform: translateX(-$dashboard-box-info-border-radius);
             position: sticky;
             top: 0;
             background: white;

diff --git a/webapp/src/style.scss b/webapp/src/style.scss
@@ -13,29 +13,31 @@ html {
 }
 
 /* CUSTOM SCROLLBAR START*/
-/* Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--mantine-color-dark-2) var(--mantine-color-gray-2);
-}
+@include responsive(desktop) {
+    /* Firefox */
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--mantine-color-dark-2) var(--mantine-color-gray-2);
+    }
 
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
 
-*::-webkit-scrollbar-track {
-    background: var(--mantine-color-gray-2);
-}
+    *::-webkit-scrollbar-track {
+        background: var(--mantine-color-gray-2);
+    }
 
-*::-webkit-scrollbar-thumb {
-    background-color: var(--mantine-color-dark-2);
-    &:hover {
-        background-color: var(--mantine-color-dark-3);
+    *::-webkit-scrollbar-thumb {
+        background-color: var(--mantine-color-dark-2);
+        &:hover {
+            background-color: var(--mantine-color-dark-3);
+        }
+        //border-radius: var(--mantine-radius-xs);
+        //border: 1px double var(--mantine-color-gray-3);
     }
-    //border-radius: var(--mantine-radius-xs);
-    //border: 1px double var(--mantine-color-gray-3);
 }
 /* CUSTOM SCROLLBAR END*/
 
@@ -45,6 +47,8 @@ body {
     margin: 0;
     width: 100vw;
     height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
 }
 
 code {