From cfbe89498ac6f3e32250b57b39fe1496f190cf7d Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Fri, 3 Jul 2020 18:19:43 +0200 Subject: [PATCH] feat: resize sidebar feature. --- client/package.json | 1 + client/src/components/Dashboard/Dashboard.js | 9 ++-- .../Dashboard/DashboardSplitePane.js | 42 ++++++++++++++++ .../components/Sidebar/SidebarContainer.js | 1 - client/src/style/App.scss | 3 +- client/src/style/components/resizer.scss | 50 +++++++++++++++++++ client/src/style/pages/dashboard.scss | 5 +- client/src/style/views/Sidebar.scss | 8 +-- 8 files changed, 107 insertions(+), 12 deletions(-) create mode 100644 client/src/components/Dashboard/DashboardSplitePane.js create mode 100644 client/src/style/components/resizer.scss diff --git a/client/package.json b/client/package.json index 861134a8d..0fdd0e4ce 100644 --- a/client/package.json +++ b/client/package.json @@ -80,6 +80,7 @@ "react-scroll-sync": "^0.7.1", "react-scrollbars-custom": "^4.0.21", "react-sortablejs": "^2.0.11", + "react-split-pane": "^0.1.91", "react-table": "^7.0.0", "react-table-sticky": "^1.1.2", "react-use": "^13.26.1", diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index a65662853..996587acc 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/client/src/components/Dashboard/Dashboard.js @@ -8,6 +8,7 @@ import DialogsContainer from 'components/DialogsContainer'; import PreferencesContent from 'components/Preferences/PreferencesContent'; import PreferencesSidebar from 'components/Preferences/PreferencesSidebar'; import Search from 'containers/GeneralSearch/Search'; +import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane'; export default function Dashboard() { return ( @@ -20,8 +21,10 @@ export default function Dashboard() { - - + + + + @@ -29,4 +32,4 @@ export default function Dashboard() { ); -} +} \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardSplitePane.js b/client/src/components/Dashboard/DashboardSplitePane.js new file mode 100644 index 000000000..3938f435a --- /dev/null +++ b/client/src/components/Dashboard/DashboardSplitePane.js @@ -0,0 +1,42 @@ +import React, { useState, useRef } from 'react'; +import SplitPane from 'react-split-pane'; +import { debounce } from 'lodash'; + +import withDashboard from 'containers/Dashboard/withDashboard'; +import { compose } from 'utils'; + +function DashboardSplitPane({ + sidebarExpended, + children +}) { + const [defaultSize, setDefaultSize] = useState( + parseInt(localStorage.getItem('dashboard-size'), 10) || 220, + ); + const debounceSaveSize = useRef( + debounce((size) => { + localStorage.setItem('dashboard-size', size); + }, 500), + ); + const handleChange = (size) => { + debounceSaveSize.current(size); + setDefaultSize(size); + } + return ( + + {children} + + ); +} + +export default compose( + withDashboard(({ sidebarExpended }) => ({ sidebarExpended })) +)(DashboardSplitPane); \ No newline at end of file diff --git a/client/src/components/Sidebar/SidebarContainer.js b/client/src/components/Sidebar/SidebarContainer.js index 9a0c428bf..d8f4ab5c9 100644 --- a/client/src/components/Sidebar/SidebarContainer.js +++ b/client/src/components/Sidebar/SidebarContainer.js @@ -1,7 +1,6 @@ import React, { useEffect } from 'react'; import { Scrollbar } from 'react-scrollbars-custom'; import classNames from 'classnames'; - import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withDashboard from 'containers/Dashboard/withDashboard'; diff --git a/client/src/style/App.scss b/client/src/style/App.scss index e0612f6a7..d6a8e44a7 100644 --- a/client/src/style/App.scss +++ b/client/src/style/App.scss @@ -39,6 +39,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, @import 'components/custom-scrollbar'; @import 'components/dragzone'; @import 'components/pagination'; +@import 'components/resizer'; // Pages @import 'pages/dashboard'; @@ -170,4 +171,4 @@ body.authentication { .bp3-popover.bp3-tooltip{ max-width: 300px; -} \ No newline at end of file +} diff --git a/client/src/style/components/resizer.scss b/client/src/style/components/resizer.scss new file mode 100644 index 000000000..474df64ce --- /dev/null +++ b/client/src/style/components/resizer.scss @@ -0,0 +1,50 @@ + +.Pane.Pane2 { + overflow: auto; +} + +.Resizer { + background: #000; + z-index: 1; + box-sizing: border-box; + background-clip: padding-box; + position: relative; + z-index: 999; + + &:hover { + transition: all 0.3s ease; + } + + &.horizontal { + height: 4px; + margin: -2px 0; + opacity: 0; + border-top: 2px solid #1d9bd1; + border-bottom: 2px solid #1d9bd1; + cursor: row-resize; + width: 100%; + + &:hover { + opacity: 1; + } + } + + &.vertical { + width: 4px; + margin: 0 -2px; + opacity: 0; + border-left: 2px solid #1d9bd1; + border-right: 2px solid #1d9bd1; + cursor: col-resize; + + &:hover{ + opacity: 1; + } + } + + &.disabled { + &:hover{ + border-color: transparent; + } + } +} \ No newline at end of file diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss index 5f6132e4c..9df7a3a93 100644 --- a/client/src/style/pages/dashboard.scss +++ b/client/src/style/pages/dashboard.scss @@ -245,10 +245,9 @@ } &-content{ - width: calc(100% - 220px); display: flex; flex-direction: column; - margin-left: 220px; + height: 100%; .sidebar--mini-sidebar + &{ margin-left: 50px; @@ -307,7 +306,7 @@ .tabs--dashboard-views{ .#{$ns}-tab{ - color: #666; + color: #5b606d; font-size: 14px; line-height: 50px; font-weight: 400; diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss index 14a42f537..170d27dcf 100644 --- a/client/src/style/views/Sidebar.scss +++ b/client/src/style/views/Sidebar.scss @@ -1,6 +1,6 @@ $sidebar-background: #01194e; $sidebar-text-color: #fff; -$sidebar-width: 220px; +$sidebar-width: 100%; $sidebar-menu-item-color: rgba(255, 255, 255, 0.85); $sidebar-popover-submenu-bg: rgb(1, 20, 62); $sidebar-menu-label-color: rgba(255, 255, 255, 0.5); @@ -13,7 +13,6 @@ $sidebar-submenu-item-bg-color: #01287d; background: $sidebar-background; width: $sidebar-width; color: $sidebar-text-color; - position: fixed; height: 100%; z-index: $sidebar-zindex; @@ -87,7 +86,7 @@ $sidebar-submenu-item-bg-color: #01287d; > .#{$ns}-icon-caret-right { margin-right: -4px; margin-top: 3px; - color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.25); } &-label{ display: block; @@ -146,6 +145,7 @@ $sidebar-submenu-item-bg-color: #01287d; } &--mini-sidebar{ + position: fixed; white-space: nowrap; width: 50px; @@ -173,7 +173,7 @@ $sidebar-submenu-item-bg-color: #01287d; min-width: 50px; &:hover{ - min-width: $sidebar-width; + min-width: 220px; .sidebar__head-logo{