Skip to content

Commit cb6c588

Browse files
Francesca-BitFrancesca-Bit
committed
merge main
2 parents d3875f8 + 0fd696d commit cb6c588

30 files changed

+275
-452
lines changed

‎package-lock.json‎

Lines changed: 22 additions & 389 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/** review this link after build of tdb-dcoumnets-ui*/
22
@import "../../tdb-documents-ui/src/css/terminusdb__styles";
3+
/*@import url("https://unpkg.com/[email protected]/dist/index.css");*/
34

45
html, body {
56
height: 100% ;
@@ -53,6 +54,23 @@ img.user-avatar {
5354
height: 50px;
5455
}
5556

57+
/** -------- Side bar ---------------- */
58+
59+
.hide__sideNav {
60+
transition: left 0.3s ease-in-out;
61+
left: -25vw;
62+
position: fixed;
63+
}
64+
65+
66+
67+
.expanded__main__content {
68+
left: 4rem;
69+
position: fixed;
70+
transition: left 0.3s ease-in-out;
71+
}
72+
73+
5674
/* ---------- Split Pane resizing css ---------- */
5775
.Resizer {
5876
-moz-box-sizing: border-box;
@@ -64,6 +82,7 @@ img.user-avatar {
6482
-moz-background-clip: padding;
6583
-webkit-background-clip: padding;
6684
background-clip: padding-box;
85+
transition-timing-function: ease;
6786
}
6887

6988
.Resizer:hover {
@@ -276,6 +295,7 @@ div.progress-bar-container {
276295
table-layout: fixed;
277296
margin-left: auto;
278297
margin-right: auto;
298+
background-color: #303030;
279299
}
280300

281301
.table td, .table th {

‎packages/tdb-dashboard/src/components/DatabaseList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useState} from "react"
22
import {WOQLClientObj} from '../init-woql-client'
33
import {MenuItem, SubMenu, Sidebar} from 'react-pro-sidebar'
4-
import 'react-pro-sidebar/dist/css/styles.css'
4+
//import 'react-pro-sidebar/dist/css/styles.css'
55
import {SearchBox} from "./SearchBox"
66
import {useNavigate} from "react-router-dom"
77
import {sortAlphabetically} from "./utils"

‎packages/tdb-dashboard/src/components/LeftSideBar.js‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,39 @@
11
import React, {useEffect} from "react"
22
import {ProSidebar, Menu, SidebarContent} from 'react-pro-sidebar'
3-
import 'react-pro-sidebar/dist/css/styles.css'
3+
//import 'react-pro-sidebar/dist/css/styles.css'
44
import {WOQLClientObj} from '../init-woql-client'
55
import {PRODUCT_EXPLORER, DOCUMENT_EXPLORER} from "../routing/constants"
66
import {DataProductItems} from "../components/DatabaseList"
77
//import {ConnectedDataProduct} from "../components/CurrentDataProductState"
88
import {DataProductDocuments, DocumentExplorerDocuments} from "../components/DataProductDocuments"
9-
import {SampleQueries} from "../components/SampleQueries"
109

1110
export const LeftSideBar = (props) => {
1211
const {
13-
getLocation
12+
getLocation,
13+
collapseSideBar,
14+
setCollapseSideBar
1415
} = WOQLClientObj()
1516

1617

1718
const {page,dataProduct} = getLocation()
1819

19-
return <ProSidebar>
20-
<SidebarContent>
21-
<Menu>
22-
<DataProductItems/>
23-
{/*dataProduct && <ConnectedDataProduct/>*/}
24-
{dataProduct && page==DOCUMENT_EXPLORER && <DocumentExplorerDocuments/>}
25-
{dataProduct && page==PRODUCT_EXPLORER && <DataProductDocuments/>}
26-
{/* dataProduct && getLocation()==PRODUCT_EXPLORER && <SampleQueries/> */}
27-
</Menu>
28-
</SidebarContent>
29-
</ProSidebar>
20+
21+
function getSideNavClassName(collapseSideBar) {
22+
if(collapseSideBar) return `hide__sideNav`
23+
return ``
24+
}
25+
26+
return <div className={`${getSideNavClassName(collapseSideBar)}`}>
27+
<ProSidebar>
28+
<SidebarContent>
29+
<Menu>
30+
<DataProductItems/>
31+
{/*dataProduct && <ConnectedDataProduct/>*/}
32+
{dataProduct && page==DOCUMENT_EXPLORER && <DocumentExplorerDocuments/>}
33+
{dataProduct && page==PRODUCT_EXPLORER && <DataProductDocuments/>}
34+
{/* dataProduct && getLocation()==PRODUCT_EXPLORER && <SampleQueries/> */}
35+
</Menu>
36+
</SidebarContent>
37+
</ProSidebar>
38+
</div>
3039
}

‎packages/tdb-dashboard/src/components/MainNavBar.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect} from "react"
1+
import React, {useEffect, useState} from "react"
22
import {Button, Dropdown} from 'react-bootstrap';
33
import {Nav,Navbar} from "react-bootstrap"
44
import {NewDataProduct} from "./NewDataProduct"
@@ -8,9 +8,21 @@ import {DATA_PRODUCTS} from "../routing/constants"
88
import { UserMenu } from "./UserMenu";
99
import { sortAlphabetically } from "./utils";
1010
import {useNavigate,useParams,useLocation} from "react-router-dom"
11+
import { SlArrowLeft, SlArrowRight } from "react-icons/sl"
1112

12-
export const MainNavBar = ({setShowTimeTravel, changeRequestHolder}) => {
13-
const {woqlClient,changeOrganization,accessControlDashboard,clientUser} = WOQLClientObj()
13+
const CollpaseButton = ({ setCollapseSideBar, collapseSideBar }) => {
14+
return <Button className="btn-btn-lg bg-transparent border border-0 ml-3"
15+
title={collapseSideBar ? "Show Sidebar" : "Hide Sidebar" }
16+
onClick={(e) => setCollapseSideBar(!collapseSideBar)}>
17+
{collapseSideBar && <SlArrowRight size={24}/>}
18+
{!collapseSideBar && <SlArrowLeft size={24}/>}
19+
</Button>
20+
}
21+
22+
export const MainNavBar = ({setShowTimeTravel, changeRequestHolder, showLeftSideBar}) => {
23+
24+
const {woqlClient,changeOrganization,accessControlDashboard,clientUser, collapseSideBar,
25+
setCollapseSideBar} = WOQLClientObj()
1426
if(!clientUser || !woqlClient) return ""
1527
//we don't need setRoute
1628
const { organization, dataProduct } = useParams();
@@ -25,7 +37,8 @@ export const MainNavBar = ({setShowTimeTravel, changeRequestHolder}) => {
2537
// sort list in alphabetical order
2638
const teamList = sortAlphabetically (woqlClient ? woqlClient.userOrganizations() : [])
2739

28-
return <Navbar className="navbar-dark bg-dark p-0 sticky-top main-navbar-shadow">
40+
return <Navbar className="navbar-dark bg-dark p-0 sticky-top main-navbar-shadow">
41+
{showLeftSideBar && <CollpaseButton setCollapseSideBar={setCollapseSideBar} collapseSideBar={collapseSideBar}/>}
2942
<div className="d-flex flex-grow-1 ">
3043
{dataProduct && currentPage!==`/${organization}/${dataProduct}` &&
3144
<React.Fragment>

‎packages/tdb-dashboard/src/components/utils.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -311,12 +311,11 @@ export function extractID(id) {
311311
function sortBy(a, b) {
312312
a = a.toLowerCase()
313313
b = b.toLowerCase()
314-
315-
return (a < b) ? -1 : (a > b) ? 1 : 0
314+
return (a < b) ? -1 : (a > b) ? 1 : 0;
316315
}
317316

318317
/** sorts strings in json object alphabetically */
319-
export function sortAlphabetically (list, byID) {
318+
export function sortAlphabetically (list, byID) {
320319
return list.sort(function (a, b) {
321320
if(!byID) return sortBy(a.name, b.name)
322321
else return sortBy(a["@id"], b[["@id"]])

‎packages/tdb-dashboard/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css">
77
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
88
<link rel="icon" type="image/png" href="https://assets.terminusdb.com/images/terminusx-color.png"/>
9+
<!--<link rel="stylesheet" src="https://unpkg.com/[email protected]/dist/index.css"/>-->
910
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
1011
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
1112
</style>

‎packages/tdb-dashboard/src/init-woql-client.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,10 @@ export const WOQLClientProvider = ({children, params}) => {
3737
const [currentChangeRequest,setCurrentChangeRequest] = useState(false)
3838
const [currentCRName,setCurrentCRName] = useState(false)
3939
const [currentCRStartBranch,setCurrentCRStartBranch] = useState(false)
40-
40+
41+
// constants to control sidebar collapse
42+
const [collapseSideBar, setCollapseSideBar] = useState(false)
43+
4144
// set left side bar open close state
4245
const sidebarStateObj = {sidebarDataProductListState:true,
4346
sidebarDataProductConnectedState:true,
@@ -322,7 +325,9 @@ export const WOQLClientProvider = ({children, params}) => {
322325
woqlClient,
323326
loadingServer,
324327
setDataProduct,
325-
reconnectToServer
328+
reconnectToServer,
329+
collapseSideBar,
330+
setCollapseSideBar
326331
}}
327332
>
328333
{children}

‎packages/tdb-dashboard/src/pages/ChangeDiff.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,8 @@ export const ChangeDiff = () => {
114114

115115
if(!client) return <div/>
116116

117-
return <Layout>
117+
118+
return <Layout showLeftSideBar={true}>
118119
<div className='d-flex ml-5 mt-4 mr-5'>
119120
<div className='w-100'>
120121
{currentCRObject && <CRAction/>}

‎packages/tdb-dashboard/src/pages/ChangeRequestsPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ export const ChangeRequestsPage = () => {
225225
else return display
226226
}
227227

228-
return <Layout>
228+
return <Layout showLeftSideBar={true}>
229229
<div className="content mr-3 ml-5">
230230
{updateChangeRequestID && <SubmitChangeRequestModal operation={updateOperation} updateChangeRequestID={updateChangeRequestID} showModal={updateChangeRequestID!==false} setShowModal={setShowUpdateChangeRequestID} updateParent={updateParent}/>}
231231
<div className="mt-5 mb-5 mr-5">

0 commit comments

Comments
 (0)