Skip to content

Commit 5d59092

Browse files
KittyJoseKittyJose
committed
theme selector
1 parent b193ce6 commit 5d59092

File tree

8 files changed

+47
-167
lines changed

8 files changed

+47
-167
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
99
import {DocumentSearchComponent} from "../components/DocumentSearchComponent"
1010
import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
1111

12+
1213
export const DocumentNew = () => {
1314
const {organization,dataProduct,type} = useParams()
1415
const {setChangeRequestBranch, branch,woqlClient,currentChangeRequest} = WOQLClientObj()

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
1212
import {ErrorMessageReport} from "../components/ErrorMessageReport"
1313
import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
1414

15-
//import '../../../tdb-documents-ui/src/css/terminusdb__light.css'
1615

1716
export const DocumentView = () => {
1817
const { branch,setChangeRequestBranch,woqlClient,currentChangeRequest} = WOQLClientObj()

‎packages/tdb-documents-ui/sandbox/README.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@ SDK to build UI from terminusdb documents. This package includes a ``<FrameViewe
55
## Installation
66
Install the dependancy from npm
77
```npm install @terminusdb/terminusdb-documents-ui```
8-
8+
99
## Usage
1010
Then import dependancy as shown below
1111
```import {FrameViewer} from '@terminusdb/terminusdb-documents-ui'```
12+
13+
To import css is light or dark mode
14+
15+
```import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'``` or
16+
```import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'```
1217

1318
## Run sandbox
1419

@@ -152,18 +157,31 @@ return <FrameViewer
152157
type={"Theme"}/> // type of document to display in form
153158
```
154159
### Theme Selector
155-
FrameViewer is based on [Bootswatch](https://bootswatch.com/cosmo/) Themes. Use props ``theme`` in ``<FrameViewer/>`` component to change themes at an application level.
160+
FrameViewer is based on [Bootswatch](https://bootswatch.com/cosmo/) Themes. Use props ``theme`` in ``<FrameViewer/>`` component to change themes at an application level. Note that if using ``theme`` parameter in FrameViewers the css will change at an application level. If the preference is to just alter the look & feel of the FrameViwer in a project then the ``<FrameViewer/>`` component is shipped with a dark mode and a light mode.
161+
162+
156163
```
157164
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
158165
return <FrameViewer
159166
frame={frame} // frames
160-
mode={"View"} // mode in which to display the form
161-
onTraverse={handleTraverse} // Callback traverse links function
167+
mode={"View"} // mode in which to display the form
168+
onTraverse={handleTraverse} // Callback traverse links function
162169
formData={data} // instance data
163170
theme="darkly" // pass a bootswatch theme - like darkly/ pulse
164171
type={"Theme"}/> // type of document to display in form
165172
```
166173

174+
```
175+
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
176+
return <FrameViewer
177+
frame={frame} // frames
178+
mode={"View"} // mode in which to display the form
179+
onTraverse={handleTraverse} // Callback traverse links function
180+
formData={data} // instance data
181+
theme="minty" // pass a bootswatch theme - like darkly/ pulse
182+
type={"Theme"}/> // type of document to display in form
183+
```
184+
167185
A Theme selector can also be enabled by passing ``showThemeSelector={true}``
168186
```
169187
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'

‎packages/tdb-documents-ui/sandbox/src/ModeBar.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,14 @@ export const ModeBar = () => {
2626
const {
2727
mode,
2828
setMode,
29+
setData
2930
} = FrameObj()
3031

3132
function handleChange (event) {
32-
setChecked(event.target.value)
33-
setMode(event.target.value)
33+
let mode = event.target.value
34+
setChecked(mode)
35+
setMode(mode)
36+
if(mode === CREATE) setData({})
3437
}
3538

3639
return <Card className="mb-3">

‎packages/tdb-documents-ui/sandbox/src/View.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { Search } from "./SearchComponent"
1010

1111
//import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
1212
//import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'
13-
import '../../src/css/terminusdb__darkly.css'
14-
//import '../../src/css/terminusdb__light.css'
13+
//import '../../src/css/terminusdb__darkly.css'
14+
import '../../src/css/terminusdb__light.css'
1515

1616
export const View = () => {
1717

@@ -41,8 +41,8 @@ export const View = () => {
4141
formData={getFormData(mode, type, setData)}
4242
onTraverse={handleTraverse}
4343
onSelect={<Search/>}
44-
theme="darkly"
45-
showThemeSelector={true}
44+
//theme="minty"
45+
//showThemeSelector={true}
4646
onSubmit={handleSubmit}
4747
type={type}
4848
/>

‎packages/tdb-documents-ui/sandbox/src/generateCode.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const Form = ({ frames, type, data, mode }) => {
2222
}
2323
2424
/* filled data */
25-
let fData= '${JSON.stringify(data, null, 4)}'
25+
let fData= ${JSON.stringify(data, null, 4)}
2626
2727
if(!frames) return <>LOADING ... <>
2828

‎packages/tdb-documents-ui/src/FrameViewer.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import * as util from "./utils"
66
import { Viewer } from "./Viewer"
77
import { HelperMessages } from "./HelperMessages"
88
import { constructFormParams } from "./constructFormParams"
9-
//import { BootswatchSelect } from 'react-bootswatch-select';
9+
import { BootswatchSelect } from 'react-bootswatch-select';
1010
import { Row } from "react-bootstrap"
1111
//import { loadTheme } from "./formActions"
1212

@@ -69,16 +69,16 @@ export function FrameViewer(props){
6969

7070

7171
useEffect(() => {
72-
//try{
72+
try{
7373
if(frame && type && mode) {
7474
clear()
7575
// update form
7676
setUpdate(Date.now())
7777
}
78-
//}
79-
//catch(e) {
80-
//setError(`An error has occured in generating frames. Err - ${e}`)
81-
//}
78+
}
79+
catch(e) {
80+
setError(`An error has occured in generating frames. Err - ${e}`)
81+
}
8282

8383
}, [frame, uiFrame, type, mode, formData, language])
8484

@@ -96,11 +96,12 @@ export function FrameViewer(props){
9696
}
9797

9898
return <div className="tdb__frame__viewer ">
99-
{/*
99+
100+
<BootswatchSelect version={'4.4.1'} selectedThemeName={theme} selectorHidden/>
100101
{showThemeSelector && <div className="mb-3 d-flex">
101102
<small className="text-muted">{`Theme Selector: `}</small>
102103
<BootswatchSelect version={'4.4.1'} selectedThemeName={theme ? theme : "darkly"} />
103-
</div>*/}
104+
</div>}
104105
<HelperMessages frame={frame} mode={mode} type={type} formData={formData} />
105106
<Viewer display={display}
106107
message={message}

‎packages/tdb-documents-ui/src/css/terminusdb__light.css‎

Lines changed: 5 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
@import "//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css";
44

55
:root {
6-
--input-color: #000;
6+
--input-color-light: #000;
77
--input-border: 1px solid #000;
88
--required-color: #6c757d;
99
--tdb-label-width: 13rem;
10-
--label-color: var(--input-color);
10+
--label-color-light: var(--input-color-light);
1111
--tdb-light: #f8f9fa;
1212
--nested-control-label-color: #f8f8f8;
1313
--nested-required-label-color: #ccc;
@@ -20,158 +20,16 @@
2020
.tdb__frame__viewer {
2121
background-color: var(--tdb-light)!important;
2222
padding: 1rem;
23+
border-radius: 4px;
2324
}
2425

25-
/** tdb input */
2626
.tdb__doc__input {
27-
color: var(--input-color) !important;
28-
background-color: transparent!important;
29-
border: var(--input-border) !important;
30-
display: block;
31-
width: 100%;
32-
padding: 0.375rem 0.75rem;
33-
font-size: 1rem;
34-
font-weight: 400;
35-
line-height: 1;
36-
background-clip: padding-box;
37-
margin-bottom: var(--fields-margin-botom) !important;
27+
color: var(--input-color-light)!important;
3828
}
3929

40-
/** all property labels */
4130
label.control-label {
42-
text-align:left;
43-
word-wrap: break-word !important;
44-
word-break: break-word !important;
45-
word-break: break-all;
46-
min-width: var(--tdb-label-width);
47-
width: var(--tdb-label-width);
31+
color: var(--label-color-light) !important;
4832
}
4933

50-
/** enabling labels in subdocument to appear in light color when in light mode */
51-
.bg-secondary label.control-label {
52-
color: var(--nested-control-label-color);
53-
}
54-
55-
/** labels for latitude & longitude */
56-
label.latlng-control-label {
57-
text-align:left;
58-
word-wrap: break-word !important;
59-
word-break: break-word !important;
60-
word-break: break-all;
61-
min-width: var(--tdb-latlng-label-width);
62-
width: var(--tdb-latlng-label-width);
63-
}
64-
65-
/** required */
66-
.required {
67-
font-size: 14px;
68-
color: var(--required-color) !important;
69-
display: flex;
70-
width: var(--tdb-label-width);
71-
}
72-
73-
/** margin bottom for enum fields fields */
74-
.tdb__enum__input {
75-
margin-bottom: var(--array-margin-botom);
76-
}
77-
78-
/** margin bottom for Array fields */
79-
.field .field-array {
80-
margin-bottom: var(--array-margin-botom) !important;
81-
}
82-
83-
84-
/** enabling labels in subdocument to appear in light color when in light mode */
85-
.bg-secondary .required {
86-
color: var(--nested-required-label-color) !important;
87-
}
88-
89-
.required::after {
90-
content: "(required)";
91-
font-style: italic;
92-
}
93-
94-
/** tdb property labels */
95-
.tdb__label__width {
96-
max-width: var(--tdb-label-width);
97-
width: var(--tdb-label-width);
98-
}
99-
100-
/** tdb add array button */
101-
.tdb__add__button {
102-
margin-left: var(--tdb-label-width);
103-
}
10434

105-
/** react calander */
106-
/*.react-calendar {
107-
background-color: var(--input-calander-color);
108-
}*/
109-
110-
.react-datetime-picker {
111-
width: 100%;
112-
}
113-
114-
.react-datetime-picker__wrapper {
115-
border-radius: var(--rounded);
116-
}
117-
118-
.react-datetime-picker__inputGroup__input:invalid {
119-
background: transparent;
120-
}
121-
122-
/** react calander set color to dark on select or hover */
123-
/*.react-calendar__tile:hover,
124-
.react-calendar__tile--now,
125-
.react-calendar__navigation__label:hover,
126-
.react-calendar__navigation__label__labelText:hover,
127-
.react-calendar__navigation__arrow:hover {
128-
color: var(--input-calander-color);
129-
}*/
130-
131-
.react-datetime-picker__wrapper {
132-
/*color: var(--input-color) !important;
133-
background-color: transparent!important;
134-
border: var(--input-border) !important;*/
135-
width: 100%;
136-
padding: 0.375rem 0.75rem;
137-
font-size: 1rem;
138-
font-weight: 400;
139-
line-height: 1.5;
140-
background-clip: padding-box;
141-
}
142-
143-
144-
/** margin bottom for fields */
145-
.tdb__doc__input,
146-
.tdb__subdocument__input,
147-
.react-datetime-picker,
148-
.tdb__enum__input,
149-
.tdb__array__input {
150-
margin-bottom: var(--field-margin-bottom) !important;
151-
}
152-
153-
.tdb-number {
154-
line-height: 2;
155-
}
156-
157-
/** margin bottom for array templates */
158-
.tdb__array__holder {
159-
margin-bottom: var(--array-margin-bottom);
160-
}
161-
162-
/** leaflet container */
163-
.leaflet-container {
164-
height: 200px !important;
165-
width: 80%;
166-
margin: 0 auto;
167-
}
16835

169-
/* datepciker css when date has been chosen */
170-
/*.react-datetime-picker--closed {
171-
color: var(--input-color) !important;
172-
background-color: transparent!important;
173-
width: 100%;
174-
font-size: 1rem;
175-
font-weight: 400;
176-
line-height: 1.5;
177-
}*/

0 commit comments

Comments
 (0)