-
Notifications
You must be signed in to change notification settings - Fork 441
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add react theme for Front-end implementation; Add new makefile command for react theme; Add document for react theme; Change-Id: Id4ff55aefbdfaf15e0746a5fba58bfef6e0d0e8e Signed-off-by: Haitao Yue <hightall@me.com>
- Loading branch information
Showing
41 changed files
with
1,646 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# This compose file will deploy the services, and bootup a mongo server. | ||
# Local `/opt/cello/mongo` will be used for the db storage. | ||
# dashbard: dashbard service of cello, listen on 8080 | ||
# app: app service of cello, listen on 80 | ||
# nginx: front end | ||
# mongo: mongo db | ||
|
||
version: '2' | ||
services: | ||
# cello dashbard service | ||
build-js: | ||
image: node | ||
container_name: build-js | ||
volumes: # This should be removed in product env | ||
- ./src/themes/react/static:/app | ||
command: bash -c "cd /app && npm run build" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# This compose file will deploy the services, and bootup a mongo server. | ||
# Local `/opt/cello/mongo` will be used for the db storage. | ||
# dashbard: dashbard service of cello, listen on 8080 | ||
# app: app service of cello, listen on 80 | ||
# nginx: front end | ||
# mongo: mongo db | ||
|
||
version: '2' | ||
services: | ||
# cello dashbard service | ||
npm-install: | ||
image: node | ||
container_name: npm-install | ||
volumes: # This should be removed in product env | ||
- ./src/themes/react/static:/app | ||
command: bash -c "cd /app && npm install --loglevel http" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# This compose file will deploy the services, and bootup a mongo server. | ||
# Local `/opt/cello/mongo` will be used for the db storage. | ||
# dashbard: dashbard service of cello, listen on 8080 | ||
# app: app service of cello, listen on 80 | ||
# nginx: front end | ||
# mongo: mongo db | ||
|
||
version: '2' | ||
services: | ||
# cello dashbard service | ||
watch-mode: | ||
image: node | ||
container_name: watch-mode | ||
volumes: # This should be removed in product env | ||
- ./src/themes/react/static:/app | ||
command: bash -c "cd /app && npm run watch-mode" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
** **This is another Front-end implementation for cello dashboard, if you want to use this version, must change the theme into reactjs. | ||
|
||
How to start service with react theme? | ||
-------------------------------------- | ||
|
||
```sh | ||
$ THEME=react make start | ||
``` | ||
|
||
If you want to develop original js code for react, you must install node modules, and rebuild js after you change the js code. | ||
|
||
In the initialized state, must install node modules, the command is | ||
|
||
```sh | ||
$ make npm-install | ||
``` | ||
|
||
If you want to add extra node modules, you need change the package.json file in src/themes/react/static directory, then rerun the command “make npm-install”. | ||
|
||
How to build react js? | ||
---------------------- | ||
|
||
In the development phase | ||
|
||
```sh | ||
$ make watch-mode | ||
``` | ||
|
||
In the production environment | ||
|
||
```sh | ||
$ make build-js | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
#!/usr/bin/env bash | ||
|
||
# This script will (re)start all services. | ||
# It should be triggered at the upper directory, and safe to repeat. | ||
|
||
source scripts/header.sh | ||
|
||
echo_b "Start build react js files..." | ||
docker-compose -f docker-compose-build-js.yml up --no-recreate | ||
|
||
#echo "Restarting mongo_express" | ||
#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
#!/usr/bin/env bash | ||
|
||
# This script will (re)start all services. | ||
# It should be triggered at the upper directory, and safe to repeat. | ||
|
||
source scripts/header.sh | ||
|
||
echo_b "Start install npm packages..." | ||
docker-compose -f docker-compose-npm-install.yml up --no-recreate | ||
|
||
#echo "Restarting mongo_express" | ||
#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
#!/usr/bin/env bash | ||
|
||
# This script will (re)start all services. | ||
# It should be triggered at the upper directory, and safe to repeat. | ||
|
||
source scripts/header.sh | ||
|
||
echo_b "Run watch mode for react js files..." | ||
docker-compose -f docker-compose-watch-mode.yml up --no-recreate | ||
|
||
#echo "Restarting mongo_express" | ||
#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import React, { PropTypes } from 'react' | ||
import { Breadcrumb, Icon } from 'antd' | ||
import styles from './main.less' | ||
import { menu } from '../../utils' | ||
|
||
let pathSet = [] | ||
const getPathSet = function (menuArray, parentPath) { | ||
parentPath = parentPath || '/' | ||
menuArray.map(item => { | ||
pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = { | ||
path: parentPath + item.key, | ||
name: item.name, | ||
icon: item.icon || '', | ||
clickable: item.clickable === undefined | ||
} | ||
if (item.child) { | ||
getPathSet(item.child, parentPath + item.key + '/') | ||
} | ||
}) | ||
} | ||
getPathSet(menu) | ||
|
||
function Bread ({ location }) { | ||
let pathNames = [] | ||
location.pathname.substr(1).split('/').map((item, key) => { | ||
if (key > 0) { | ||
pathNames.push((pathNames[key - 1] + '-' + item).hyphenToHump()) | ||
} else { | ||
pathNames.push(('-' + item).hyphenToHump()) | ||
} | ||
}) | ||
const breads = pathNames.map((item, key) => { | ||
if (!(item in pathSet)) { | ||
item = 'Overview' | ||
} | ||
return ( | ||
<Breadcrumb.Item key={key} {...((pathNames.length - 1 === key) || !pathSet[item].clickable) ? '' : { href: '#' + pathSet[item].path }}> | ||
{pathSet[item].icon | ||
? <Icon type={pathSet[item].icon} /> | ||
: ''} | ||
<span>{pathSet[item].name}</span> | ||
</Breadcrumb.Item> | ||
) | ||
}) | ||
|
||
return ( | ||
<div className={styles.bread}> | ||
<Breadcrumb> | ||
<Breadcrumb.Item href='#/'><Icon type='home' /> | ||
<span>Home</span> | ||
</Breadcrumb.Item> | ||
{breads} | ||
</Breadcrumb> | ||
</div> | ||
) | ||
} | ||
|
||
Bread.propTypes = { | ||
location: PropTypes.object | ||
} | ||
|
||
export default Bread |
102 changes: 102 additions & 0 deletions
102
src/themes/react/static/js/components/layout/common.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
body { | ||
height: 100%; | ||
overflow-y: hidden; | ||
background-color: #f8f8f8; | ||
} | ||
// scrollbar | ||
|
||
::-webkit-scrollbar-corner { | ||
background-color: transparent; | ||
} | ||
|
||
::-webkit-scrollbar-button { | ||
width: 0; | ||
height: 0; | ||
display: none; | ||
} | ||
|
||
::-webkit-scrollbar-thumb { | ||
width: 2px; | ||
background-color: rgba(0,0,0,.2); | ||
border-radius: 2px; | ||
} | ||
|
||
::-webkit-scrollbar { | ||
width: 2px; | ||
height: 2px; | ||
} | ||
|
||
::-webkit-scrollbar-track { | ||
width: 5px; | ||
} | ||
|
||
::-webkit-scrollbar:hover { | ||
background-color: transparent; | ||
} | ||
|
||
:global .ant-breadcrumb { | ||
& > span { | ||
&:last-child { | ||
color: #999; | ||
font-weight: normal; | ||
} | ||
} | ||
} | ||
|
||
:global .ant-breadcrumb-link { | ||
.anticon + span { | ||
margin-left: 4px; | ||
} | ||
} | ||
|
||
:global .ant-table { | ||
.ant-table-thead > tr > th { | ||
text-align: center; | ||
} | ||
|
||
.ant-table-tbody > tr > td { | ||
text-align: center; | ||
} | ||
|
||
&.ant-table-small { | ||
.ant-table-thead > tr > th { | ||
background: #f7f7f7; | ||
} | ||
|
||
.ant-table-body > table { | ||
padding: 0; | ||
} | ||
} | ||
} | ||
|
||
:global .ant-table-pagination { | ||
float: none!important; | ||
display: table; | ||
margin: 16px auto !important; | ||
} | ||
|
||
:global .ant-popover-inner { | ||
border: none; | ||
border-radius: 0; | ||
box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); | ||
} | ||
|
||
:global .vertical-center-modal { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
|
||
.ant-modal { | ||
top: 0; | ||
|
||
.ant-modal-body { | ||
max-height: 500px; | ||
overflow-y: auto; | ||
} | ||
} | ||
} | ||
|
||
:global .ant-form-item-control { | ||
vertical-align: middle; | ||
} | ||
@import "../skin.less"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react' | ||
import styles from './main.less' | ||
import { config } from '../../utils' | ||
|
||
const Footer = () => <div className={styles.footer}> | ||
{config.footerText} | ||
</div> | ||
|
||
export default Footer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React from 'react' | ||
import { Menu, Icon, Popover } from 'antd' | ||
import styles from './main.less' | ||
import Menus from './menu' | ||
|
||
const SubMenu = Menu.SubMenu | ||
|
||
function Header ({user, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover}) { | ||
const menusProps = { | ||
siderFold: false, | ||
darkTheme: false, | ||
isNavbar, | ||
handleClickNavMenu: switchMenuPopover, | ||
location | ||
} | ||
return ( | ||
<div className={styles.header}> | ||
{isNavbar | ||
? <Popover placement='bottomLeft' onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger='click' content={<Menus {...menusProps} />}> | ||
<div className={styles.siderbutton}> | ||
<Icon type='bars' /> | ||
</div> | ||
</Popover> | ||
: <div className={styles.siderbutton} onClick={switchSider}> | ||
<Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} /> | ||
</div>} | ||
|
||
<Menu className='header-menu' mode='horizontal'> | ||
<SubMenu style={{ | ||
float: 'right' | ||
}} title={user.name}> | ||
</SubMenu> | ||
</Menu> | ||
</div> | ||
) | ||
} | ||
|
||
export default Header |
Oops, something went wrong.