Front-end Customization

Theme
You can easily change the colors of StickyBoard by modifying theme file.
StickyBoard uses Material-UI theme provider.
Theming - Material-UI
Customize Material-UI with your theme. You can change the colors, the typography and much more.
material-ui.com
So, you can customize theme by modifying theme file like below.
theme/collections/ThemeSoaple.js
import {
    red, green, blue, yellow,
    amber, orange, deepOrange, purple,
    indigo, blueGrey, grey, teal, cyan,
    lightBlue, deepPurple, lightGreen, lime
} from '@material-ui/core/colors';
​
const ThemeSoaple = {
    palette: {
        type: 'dark',
        // Essential
        primary: lightGreen,
        secondary: teal,
        error: red,
        // Optional
        sample: {
            // light: will be calculated from palette.sample,
            main: '#7fc734',
            // dark: will be calculated from palette.sample,
            // contrastText: will be calculated to contrast with palette.sample
        },
    },
    colors: {
        // Base colors
        colorLight: '#ffffff',
        colorDark: grey[800],
        // Content
        contentBackground: '#ffffff',
        // Drawer menu
        drawerMenuCategoryText: grey[200],
        drawerMenuSelectedBackground: grey[500],
        drawerMenuSelectedPin: '#7fc734',
        // Progress
        progress: '#7fc734',
        // Color set for StickyBoard components (e.g., charts, number...)
        colorArray: [
            '#7fc734',
            cyan[500],
            teal[500],
            lightGreen[500],
            lime[500],
            green[600],
            cyan[600],
            teal[600],
            lightGreen[600],
            lime[600],
            green[700],
        ],
    },
    overrides: {
        MuiAppBar: {
            colorPrimary: {
                backgroundColor: '#7fc734',    // AppBar background color
                color: '#ffffff',
            },
        },
        MuiDrawer: {
            paper: {
                backgroundColor: '#7b7b7e',     // Drawer background color
            }
        },
        MuiIconButton: {
            root: {
                color: '#ffffff',
            }
        },
        MuiFab: {
            primary: {
                backgroundColor: '#7fc734',
                color: '#ffffff',
                '&:hover': {
                    backgroundColor: green[700],
                }
            }
        },
        MuiSpeedDialAction:{
            fab: {
                backgroundColor: grey[50],
                color: grey[800],
            }
        },
    },
};
​
export default ThemeSoaple;
​
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
const SidebarCategoryName = {
    INTRO: 'INTRO',
    COMPONENTS: 'COMPONENTS',
    LAYERING: 'LAYERING',
}
​
export default SidebarCategoryName;
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
import Timeline from '@material-ui/icons/Timeline';
import ViewList from '@material-ui/icons/ViewList';
import AvTimer from '@material-ui/icons/AvTimer';
import WbSunny from '@material-ui/icons/WbSunny';
import Map from '@material-ui/icons/Map';
import Layers from '@material-ui/icons/Layers';
​
const SidebarMenuDict = {
​
    /******************
     * Intro Menu
     ******************/
     INTRO: [{
         title: 'Intro',
         icon: (<img src='../static/image/StickyBoard_icon.png' style={{'padding': '2px'}}/>),
         url: '/',
         value: 101,
         need_permission: false
     }],
​
     /******************
     * Component Menus
     ******************/
    COMPONENTS: [{
        title: 'Chart',
        icon: (<Timeline />),
        url: '/components/chart',
        value: 201,
        need_permission: false
    }, {
        title: 'Highcharts',
        icon: (<Timeline />),
        url: '/components/highcharts',
        value: 202,
        need_permission: false
    }, {
        title: 'Table',
        icon: (<ViewList />),
        url: '/components/table',
        value: 203,
        need_permission: false
    }, {
        title: 'Number',
        icon: (<AvTimer />),
        url: '/components/number',
        value: 204,
        need_permission: false
    }, {
        title: 'Weather',
        icon: (<WbSunny />),
        url: '/components/weather',
        value: 205,
        need_permission: false
    }],
​
    /******************
     * Layering Menus
     ******************/
    LAYERING: [{
        title: 'Map',
        icon: (<Map />),
        url: '/layering/map',
        value: 301,
        need_permission: false
    }, {
        title: 'HeatMap',
        icon: (<Layers />),
        url: '/layering/heatmap',
        value: 302,
        need_permission: false
    }],
​
}
​
export default SidebarMenuDict;
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
// src/components/base/App.js
​
...
import Loadable from 'react-loadable';
...
​
// Loading
import LoadingPage from 'components/page/LoadingPage';
// My new page
const MyNewPage = Loadable({
    loader: () => import('components/page/MyNewPage'),
    loading: LoadingPage,
});
​
const App = () => (
    <Router>
        <Switch>
            ...
            
            {/* other pages (Layout) */}
            <Route path='/'>
                <Layout>
                    <Switch>
                        ...
                        
                        {/* My new page */}
                        <Route path='/my-new-page' component={MyNewPage} />
                        
                        ...
                    </Switch>
                </Layout>
            </Route>
        </Switch>
    </Router>
)
​
App.propTypes = {
};
​
export default App;
Getting Started - Previous
Back-end Customization
Next - Getting Started
Build & Run
Last updated 3 months ago