蓝色主题样式优化

kanban-client/app/assets/Form/index.less

@@ -1,7 +1,8 @@
 @prefixCls: rc-form;
 
 .@{prefixCls} {
-    height: 100%;
+    margin: 10px;
+    height: calc(~"100% - 20px");
     overflow: hidden;
 }
 .@{prefixCls} table {

kanban-client/app/assets/Table/index.less

@@ -1,7 +1,8 @@
 @prefixCls: rc-table;
 
 .@{prefixCls} {
-    height: 100%;
+    margin: 10px;
+    height: calc(~"100% - 20px");
     color: white;
 }
 

kanban-client/app/component/Table.jsx

@@ -80,7 +80,7 @@ class TableModel extends React.Component {
 	timing(obj) {
 		let key = setInterval(function () {
 			obj.intervalFunction(this, this.state);
-		}.bind(this), obj.intervalTime || 3000);
+		}.bind(this), obj.intervalTime || 5000);
 		this.timerKeys.push(key);
 	}
 
@@ -90,7 +90,7 @@ class TableModel extends React.Component {
 		let node = this.refs.body;
 		let title = node.getElementsByClassName('rc-table-title')[0] || { offsetHeight: 0 };
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
-		this.cHeight = node.offsetHeight - title.offsetHeight;
+		this.cHeight = node.offsetHeight - title.offsetHeight - 20;
 		let trHeight = (this.cHeight) / (this.rowCount);
 		let trFontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
 		// let trFontSize = `${fontSize}px`;
@@ -150,9 +150,11 @@ class TableModel extends React.Component {
 		var allTitle = document.getElementsByClassName('rc-title')[0] || { offsetHeight: 0 };
 		let node = this.refs.body;
 		// 存在title与否会导致计算高度不一致，这里做一个差异补偿
-		let nHeight = (node.offsetHeight==window.innerHeight?
-			(allTitle.offsetHeight>0?(node.offsetHeight-allTitle.offsetHeight):node.offsetHeight):
-			(allTitle.offsetHeight==0?window.innerHeight:node.offsetHeight));
+		// let nHeight = (node.offsetHeight==window.innerHeight?
+		// 	(allTitle.offsetHeight>0?(node.offsetHeight-allTitle.offsetHeight):node.offsetHeight):
+		// 	(allTitle.offsetHeight==0?window.innerHeight:node.offsetHeight));
+
+		let nHeight = node.offsetHeight;
 		let title = node.getElementsByClassName('rc-table-title')[0] || { offsetHeight: 0 };
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
 		this.cHeight = nHeight - title.offsetHeight;
@@ -252,28 +254,37 @@ class TableModel extends React.Component {
 		let { themeConfig } = this.newProps;
 		themeConfig = themeConfig || {
 			head: {},
+			stripeRows: [],
 			cells: {}
 		};
-		let { head, cells } = themeConfig;
+		let { head, stripeRows, cells } = themeConfig;
 		let node = this.refs.body;
 		let table = node.getElementsByClassName('rc-table')[0];
 
 		let thCells = table.getElementsByTagName('th');
-        let tdCells = table.getElementsByTagName('td');
 
         for(let j = 0; j < thCells.length; j++) {
 			let cell = thCells[j];
 			for(let k in head) {
 				cell.style[k] = head[k];
 			}
-        }
+		}
+
+		let tbody = table.getElementsByTagName('tbody')[0];
+		let rows = tbody.getElementsByTagName('tr');
 
-        for(let i = 0; i < tdCells.length; i++) {
-            let cell = tdCells[i];
-			for(let k in cells) {
-				cell.style[k] = cells[k];
+		for(let j = 0; j < rows.length; j++) {
+			let tdCells = rows[j].getElementsByTagName('td');
+			for(let i = 0; i < tdCells.length; i++) {
+				let cell = tdCells[i];
+				for(let k in cells) {
+					cell.style[k] = cells[k];
+				}
+				if(stripeRows.length > 0) {
+					cell.style.backgroundColor = stripeRows[j%2];
+				}
 			}
-        }
+		}
 	}
 
 	render() {

kanban-client/app/component/converter.js

@@ -93,7 +93,7 @@ function tableConfig(model, theme) {
             render: renderFunction(render),
             columns: columns.map( (v, i) => {
                 v.key = i;
-                v.width ? v.width = getScreenSize().width * (layout.w/100) * (v.width/ allWidth) : '';
+                v.width ? v.width = (getScreenSize().width * (layout.w/100) - 50) * (v.width/ allWidth) : '';
                 v.render = renderFunction(v.render);
                 v.headerRowStyle = parseObjectStr(v.headerrowstyle);
                 v.rowStyle = parseObjectStr(v.rowstyle);
@@ -938,7 +938,7 @@ function getDefaultColors(theme) {
 
 function getThemeColor(theme) {
     if(theme == 'blue') {
-        return 'rgba(33, 73, 153, 0.6)';
+        return '#04204A';
     }else if(theme == 'dark') {
         return '#2f2e2c';
     }

kanban-client/app/component/theme/blue.js

@@ -1,8 +1,8 @@
 var blue = {
     root: {
-        backgroundColor: '#04224F',
-        backgroundImage: '-webkit-linear-gradient(top, transparent 40px, #14305C 42px),-webkit-linear-gradient(left, transparent 40px, #14305C 42px)',
-        backgroundSize: '42px 42px'
+        backgroundColor: '#1B4EA2',
+        // backgroundImage: '-webkit-linear-gradient(top, transparent 40px, #14305C 42px),-webkit-linear-gradient(left, transparent 40px, #14305C 42px)',
+        // backgroundSize: '42px 42px'
     },
     title: {
         padding: '16px 16px 0 16px',
@@ -14,9 +14,10 @@ var blue = {
         // padding: '10px 0 0 10px'
     },
     items: {
-        background: 'rgba(33, 73, 153, 0.6)', // 需要关联更改converter中的getThemeColor
-        border: '1px solid #055CB6',
-        boxShadow: 'inset 0 0 43px 0 rgba(79,166,255,0.62)',
+        background: '#04204A', // 需要关联更改converter中的getThemeColor
+        // border: '1px solid #055CB6',
+        border: 'none',
+        // boxShadow: 'inset 0 0 20px 0 rgba(79,166,255,0.62)',
         config: {
             margin: [16, 16]
         }
@@ -26,15 +27,18 @@ var blue = {
             head: {
                 textAlign: 'center',
                 background: 'rgb(30, 76, 190)',
-                borderWidth: '0 0.5px 0 0',
-                borderStyle: 'solid',
-                borderColor: '#6589BB'
+                border: 'none'
+                // borderWidth: '0.5px',
+                // borderStyle: 'solid',
+                // borderColor: '#6589BB'
             },
+            stripeRows: ['#253C7E', '#182E6F'],
             cells: {
                 textAlign: 'center',
-                borderWidth: '0 0.5px 0 0',
-                borderStyle: 'solid',
-                borderColor: '#6589BB'
+                border: 'none'
+                // borderWidth: '0.5px',
+                // borderStyle: 'solid',
+                // borderColor: '#6589BB'
             }
         }
     }

kanban-client/app/component/theme/dark.js

@@ -19,6 +19,21 @@ var dark = {
         }
     },
     table: {
+        config: {
+            head: {
+                textAlign: 'center',
+                background: 'rgb(30, 76, 190)',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: '#fff'
+            },
+            cells: {
+                textAlign: 'center',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: '#fff'
+            }
+        }
     }
 };