Merge pull request #215 from krishna9304/update/ui-fixes

update(ui): Design related fixes (Navbar and browse page) Reviewed-by: [email protected] Tested-by: [email protected]
fossology · Jun 13, 2022 · 3003944 · 3003944
2 parents bd5afd9 + d07dbbd
commit 3003944
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 71 deletions.
diff --git a/src/components/Header/index.css b/src/components/Header/index.css
@@ -0,0 +1,21 @@
+/*
+ Copyright (C) 2022 Krishna Mahato ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+.navIcons {
+  display: flex;
+  gap: 10px;
+}
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -54,6 +54,9 @@ import { getNameInitials } from "shared/helper";
 // Dark Theme Toggle Button
 import DarkThemeToggle from "../DarkThemeToggle/DarkThemeToggle";
 
+// custom css
+import "./index.css";
+
 const Header = () => {
   const [currentGroup, setCurrentGroup] = useState(
     getLocalStorage("currentGroup") || getLocalStorage("user")?.default_group
@@ -305,81 +308,83 @@ const Header = () => {
               </>
             )}
           </Nav>
-          <Dropdown drop="left">
-            <Dropdown.Toggle variant="link" bsPrefix="p-0">
-              <DarkThemeToggle />
-            </Dropdown.Toggle>
-          </Dropdown>
-          {/* Help Pages */}
-          <Dropdown drop="left">
-            <Dropdown.Toggle variant="link" bsPrefix="p-0">
-              <QuestionCircleFill color="#fff" size={40} className="m-2" />
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item as={Link} to={routes.help.about}>
-                About
-              </Dropdown.Item>
-              <Dropdown.Item as={Link} to={routes.help.overview}>
-                Getting Started
-              </Dropdown.Item>
-              <Dropdown.Item as={Link} to={routes.help.licenseBrowser}>
-                License Browser
-              </Dropdown.Item>
-              <Dropdown.Item
-                href={externalLinks.fossologyWiki}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Documentation
-              </Dropdown.Item>
-              <Dropdown.Item as={Link} to={routes.help.thirdPartyLicenses}>
-                Third Party Licenses
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-
-          {/* User Info */}
-          {getAllGroups() && (
+          <div className="navIcons">
             <Dropdown drop="left">
               <Dropdown.Toggle variant="link" bsPrefix="p-0">
-                <TextIcon
-                  className="m-2"
-                  text={getNameInitials(currentGroup)}
-                />
+                <DarkThemeToggle />
               </Dropdown.Toggle>
-              <Dropdown.Menu>
-                {getAllGroups().map((group) => (
-                  <Dropdown.Item
-                    key={group.id}
-                    onClick={handleGroupChange}
-                    className={group.name === currentGroup && "active"}
-                  >
-                    {group.name}
-                  </Dropdown.Item>
-                ))}
-              </Dropdown.Menu>
             </Dropdown>
-          )}
-          <Dropdown drop="left">
-            <Dropdown.Toggle variant="link" bsPrefix="p-0">
-              <PersonCircle color="#fff" size={40} className="m-2" />
-            </Dropdown.Toggle>
-            {isAuth() ? (
+            {/* Help Pages */}
+            <Dropdown drop="left">
+              <Dropdown.Toggle variant="link" bsPrefix="p-0">
+                <QuestionCircleFill color="#fff" size={40} className="m-2" />
+              </Dropdown.Toggle>
               <Dropdown.Menu>
-                <Dropdown.Item>
-                  User: <b>{getUserName()}</b>
+                <Dropdown.Item as={Link} to={routes.help.about}>
+                  About
                 </Dropdown.Item>
-                <Dropdown.Divider />
-                <Dropdown.Item onClick={() => logout(null)}>
-                  Log out
+                <Dropdown.Item as={Link} to={routes.help.overview}>
+                  Getting Started
+                </Dropdown.Item>
+                <Dropdown.Item as={Link} to={routes.help.licenseBrowser}>
+                  License Browser
+                </Dropdown.Item>
+                <Dropdown.Item
+                  href={externalLinks.fossologyWiki}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Documentation
+                </Dropdown.Item>
+                <Dropdown.Item as={Link} to={routes.help.thirdPartyLicenses}>
+                  Third Party Licenses
                 </Dropdown.Item>
               </Dropdown.Menu>
-            ) : (
-              <Dropdown.Menu>
-                <Dropdown.Item onClick={handleLogin}>Log in</Dropdown.Item>
-              </Dropdown.Menu>
+            </Dropdown>
+
+            {/* User Info */}
+            {getAllGroups() && (
+              <Dropdown drop="left">
+                <Dropdown.Toggle variant="link" bsPrefix="p-0">
+                  <TextIcon
+                    className="m-2"
+                    text={getNameInitials(currentGroup)}
+                  />
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  {getAllGroups().map((group) => (
+                    <Dropdown.Item
+                      key={group.id}
+                      onClick={handleGroupChange}
+                      className={group.name === currentGroup && "active"}
+                    >
+                      {group.name}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
             )}
-          </Dropdown>
+            <Dropdown drop="left">
+              <Dropdown.Toggle variant="link" bsPrefix="p-0">
+                <PersonCircle color="#fff" size={40} className="m-2" />
+              </Dropdown.Toggle>
+              {isAuth() ? (
+                <Dropdown.Menu>
+                  <Dropdown.Item>
+                    User: <b>{getUserName()}</b>
+                  </Dropdown.Item>
+                  <Dropdown.Divider />
+                  <Dropdown.Item onClick={() => logout(null)}>
+                    Log out
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              ) : (
+                <Dropdown.Menu>
+                  <Dropdown.Item onClick={handleLogin}>Log in</Dropdown.Item>
+                </Dropdown.Menu>
+              )}
+            </Dropdown>
+          </div>
         </Navbar.Collapse>
       </Navbar>
     </>

diff --git a/src/components/TreeContainer/index.css b/src/components/TreeContainer/index.css
@@ -26,8 +26,10 @@
   padding-right: 0.5rem;
 }
 
-.tree-list {
-  height: 50rem;
+@media only screen and (min-width: 765px) {
+  .tree-list {
+    height: 50rem !important;
+  }
 }
 
 .folder-tree-list {

diff --git a/src/components/TreeContainer/index.jsx b/src/components/TreeContainer/index.jsx
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 import Tree, { renderers } from "react-virtualized-tree";
 import "./index.css";
 
-const TreeContainer = ({ data, handleClick }) => {
+const TreeContainer = ({ data, handleClick, folderCount }) => {
   const { Expandable } = renderers;
   const [state, setState] = useState(data);
 
@@ -31,7 +31,12 @@ const TreeContainer = ({ data, handleClick }) => {
 
   return (
     <div>
-      <div className="tree-list">
+      <div
+        className="tree-list"
+        style={{
+          height: state ? `${folderCount * 40}px` : "0",
+        }}
+      >
         <Tree nodes={state} onChange={handleChange}>
           {({ style, node, ...rest }) => (
             <div style={style}>
@@ -61,6 +66,7 @@ treeDataFormat.children = PropTypes.arrayOf(PropTypes.shape(treeDataFormat));
 TreeContainer.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape(treeDataFormat)),
   handleClick: PropTypes.func.isRequired,
+  folderCount: PropTypes.number,
 };
 
 export default TreeContainer;
diff --git a/src/pages/Browse/index.jsx b/src/pages/Browse/index.jsx
@@ -65,6 +65,7 @@ const Browse = () => {
 
   // Setting the list for all the folders names
   const [folderList, setFolderList] = useState();
+  const [folderCount, setFolderCount] = useState(0);
 
   // State Variables for handling Error Boundaries
   // const [loading, setLoading] = useState(false);
@@ -109,6 +110,8 @@ const Browse = () => {
             },
           };
         });
+        // setting the folders and subfolders count before converting the array to tree
+        setFolderCount(folders.length);
         setFolderList(
           arrayToTree(folders, {
             parentProperty: "parent",
@@ -199,7 +202,11 @@ const Browse = () => {
           <div className="col-md-3 col-lg-2">
             <h2 className="font-size-sub-heading">Folder Navigation</h2>
             {folderList && (
-              <TreeContainer data={folderList} handleClick={handleClick} />
+              <TreeContainer
+                folderCount={folderCount}
+                data={folderList}
+                handleClick={handleClick}
+              />
             )}
           </div>
           <div className="col-md-9 col-lg-10">