Front-end Customization

Theme
You can easily change the colors of StickyBoard by modifying theme file.
StickyBoard uses Material-UI theme provider.
Theming - MUI
MaterialUI
So, you can customize theme by modifying theme file like below.
theme/collections/ThemeSoaple.js
1
import {
2
    red, green, blue, yellow,
3
    amber, orange, deepOrange, purple,
4
    indigo, blueGrey, grey, teal, cyan,
5
    lightBlue, deepPurple, lightGreen, lime
6
} from '@material-ui/core/colors';
7
​
8
const ThemeSoaple = {
9
    palette: {
10
        type: 'dark',
11
        // Essential
12
        primary: lightGreen,
13
        secondary: teal,
14
        error: red,
15
        // Optional
16
        sample: {
17
            // light: will be calculated from palette.sample,
18
            main: '#7fc734',
19
            // dark: will be calculated from palette.sample,
20
            // contrastText: will be calculated to contrast with palette.sample
21
        },
22
    },
23
    colors: {
24
        // Base colors
25
        colorLight: '#ffffff',
26
        colorDark: grey[800],
27
        // Content
28
        contentBackground: '#ffffff',
29
        // Drawer menu
30
        drawerMenuCategoryText: grey[200],
31
        drawerMenuSelectedBackground: grey[500],
32
        drawerMenuSelectedPin: '#7fc734',
33
        // Progress
34
        progress: '#7fc734',
35
        // Color set for StickyBoard components (e.g., charts, number...)
36
        colorArray: [
37
            '#7fc734',
38
            cyan[500],
39
            teal[500],
40
            lightGreen[500],
41
            lime[500],
42
            green[600],
43
            cyan[600],
44
            teal[600],
45
            lightGreen[600],
46
            lime[600],
47
            green[700],
48
        ],
49
    },
50
    overrides: {
51
        MuiAppBar: {
52
            colorPrimary: {
53
                backgroundColor: '#7fc734',    // AppBar background color
54
                color: '#ffffff',
55
            },
56
        },
57
        MuiDrawer: {
58
            paper: {
59
                backgroundColor: '#7b7b7e',     // Drawer background color
60
            }
61
        },
62
        MuiIconButton: {
63
            root: {
64
                color: '#ffffff',
65
            }
66
        },
67
        MuiFab: {
68
            primary: {
69
                backgroundColor: '#7fc734',
70
                color: '#ffffff',
71
                '&:hover': {
72
                    backgroundColor: green[700],
73
                }
74
            }
75
        },
76
        MuiSpeedDialAction:{
77
            fab: {
78
                backgroundColor: grey[50],
79
                color: grey[800],
80
            }
81
        },
82
    },
83
};
84
​
85
export default ThemeSoaple;
86
​
Copied!
Side bar
A side bar is a kind of navigation bar located in the left of the screen.
You can change the side bar categories and menus very easily by modifying two files.
First, you can add or remove a category in sidebar by modifying SidebarCategoryName.js file.
The file is made up of javascript dictionary.
As you already know, the key must be written in English(no spaces), and the value is an arbitrary string to be displayed on the side bar.
src/sidebar/SidebarCategoryName.js
1
const SidebarCategoryName = {
2
    INTRO: 'INTRO',
3
    COMPONENTS: 'COMPONENTS',
4
    LAYERING: 'LAYERING',
5
}
6
​
7
export default SidebarCategoryName;
Copied!
Second, you can add or remove a menu in the category by modifying SidebarMenuDict.js file.
This file is also made up of javascript dictionary.
The keys in the dictionary must be same as the categories, and the value is an array including menus in the category.
Each menu includes title, icon component, routing url, unique value, and permissions flag.
src/sidebar/SidebarMenuDict.js
1
import Timeline from '@material-ui/icons/Timeline';
2
import ViewList from '@material-ui/icons/ViewList';
3
import AvTimer from '@material-ui/icons/AvTimer';
4
import WbSunny from '@material-ui/icons/WbSunny';
5
import Map from '@material-ui/icons/Map';
6
import Layers from '@material-ui/icons/Layers';
7
​
8
const SidebarMenuDict = {
9
​
10
    /******************
11
     * Intro Menu
12
     ******************/
13
     INTRO: [{
14
         title: 'Intro',
15
         icon: (<img src='../static/image/StickyBoard_icon.png' style={{'padding': '2px'}}/>),
16
         url: '/',
17
         value: 101,
18
         need_permission: false
19
     }],
20
​
21
     /******************
22
     * Component Menus
23
     ******************/
24
    COMPONENTS: [{
25
        title: 'Chart',
26
        icon: (<Timeline />),
27
        url: '/components/chart',
28
        value: 201,
29
        need_permission: false
30
    }, {
31
        title: 'Highcharts',
32
        icon: (<Timeline />),
33
        url: '/components/highcharts',
34
        value: 202,
35
        need_permission: false
36
    }, {
37
        title: 'Table',
38
        icon: (<ViewList />),
39
        url: '/components/table',
40
        value: 203,
41
        need_permission: false
42
    }, {
43
        title: 'Number',
44
        icon: (<AvTimer />),
45
        url: '/components/number',
46
        value: 204,
47
        need_permission: false
48
    }, {
49
        title: 'Weather',
50
        icon: (<WbSunny />),
51
        url: '/components/weather',
52
        value: 205,
53
        need_permission: false
54
    }],
55
​
56
    /******************
57
     * Layering Menus
58
     ******************/
59
    LAYERING: [{
60
        title: 'Map',
61
        icon: (<Map />),
62
        url: '/layering/map',
63
        value: 301,
64
        need_permission: false
65
    }, {
66
        title: 'HeatMap',
67
        icon: (<Layers />),
68
        url: '/layering/heatmap',
69
        value: 302,
70
        need_permission: false
71
    }],
72
​
73
}
74
​
75
export default SidebarMenuDict;
Copied!
Add a component
You can make a your own React component and you can add it to StickyBoard.
StickyBoard contains all of React components in the src/components directory.
Just make a component, and put it in the directory!
Add a page
A page is a kind of React component.
StickyBoard contains all of page components in the src/components/page directory.
And you have to set the route to go to the page by modifying App.js file.
src/components/base/App.js
1
// src/components/base/App.js
2
​
3
...
4
import Loadable from 'react-loadable';
5
...
6
​
7
// Loading
8
import LoadingPage from 'components/page/LoadingPage';
9
// My new page
10
const MyNewPage = Loadable({
11
    loader: () => import('components/page/MyNewPage'),
12
    loading: LoadingPage,
13
});
14
​
15
const App = () => (
16
    <Router>
17
        <Switch>
18
            ...
19
            
20
            {/* other pages (Layout) */}
21
            <Route path='/'>
22
                <Layout>
23
                    <Switch>
24
                        ...
25
                        
26
                        {/* My new page */}
27
                        <Route path='/my-new-page' component={MyNewPage} />
28
                        
29
                        ...
30
                    </Switch>
31
                </Layout>
32
            </Route>
33
        </Switch>
34
    </Router>
35
)
36
​
37
App.propTypes = {
38
};
39
​
40
export default App;
Copied!
Getting Started - Previous
Back-end Customization
Next - Getting Started
Build & Run
Last modified 2yr ago
Copy link
Contents