U New Raport header summary

theme/bocian.php

@@ -13,6 +13,12 @@ class Theme_bocian extends ThemeDefault {
 			.AjaxTable .tblAjax__head__filter .stickyCol1 button { padding:1px 3px }
 			.AjaxTable tbody .stickyCol1 { font-size:12px }
 			.popover-content li { text-align:left; font-size:14px }
+
+			.bi-btn-primary { padding:6px 12px; font-size:14px; background-color:#fff; color:#d7142d; border-color:#d7142d; }
+			.bi-btn-primary:hover { background-color:#d7142d; color:#fff; border-color:#d7142d; }
+			.bi-btn-primary .badge { background-color:#d7142d; color:#fff; border-color:#d7142d; }
+			.bi-btn-primary:hover .badge { background-color:#fff; color:#d7142d; border-color:#d7142d; }
+			.bi-btn-disabled-group-label { cursor: default; padding:6px 12px; font-size:14px; background-color:#fff; color:#d7142d; border-color:#d7142d; }
 		");
 		UI::inlineRawJS(dirname(__FILE__) . '/assets/js/graph/d3.v3.min.js');
 		UI::inlineRawJS(dirname(__FILE__) . '/assets/js/graph/csaladenes/sankey/sankey.js');

tools/Bocian.php.view.js

@@ -80,28 +80,76 @@ var P5UI__BocianHeader = createReactClass({
 			h('h3', {}, [
 				h('span', { style: { fontSize: "120%", color: "#d7142d" } }, "|"),
 				" Tworzenie nowego raportu ",
+				h('small', {}, [
+					"(Wybierz elementy do porównania: ",
+					h('span', { style: { color: "#d7142d" } }, " OD "),
+					h('i', { className: "glyphicon glyphicon-random", style: { padding: '0 3px', 'font-size': "80%", color: "#d7142d" } }),
+					h('span', { style: { color: "#d7142d" } }, " DO "),
+					")",
+				])
 			]),
 			h('div', { style: { fontSize: '16px', fontWeight: "normal", color: "#777" } }, [
 				"Wybrano:",
 				h('ul', {}, [
+					// h('li', { style: { marginTop: "6px" } }, [
+					// 	h('div', { className: "btn-group" }, [
+					// 		h('button', { type: "button", className: "btn btn-disabled btn-danger bi-btn-disabled-group-label", style: { padding: "6px 12px" } }, [
+					// 			" OD ",
+					// 			h('span', { className: "badge" }, totalOd),
+					// 			" : "
+					// 		]),
+					// 		h('button', { type: "button", className: "btn bi-btn-primary" }, [
+					// 			" pracownicy ",
+					// 			h('span', { className: "badge" }, this.state.totalOdPracownicy),
+					// 		]),
+					// 		h('button', { type: "button", className: "btn btn-disabled btn-danger bi-btn-disabled-group-label", style: { 'font-size': "14px", padding: "6px 12px" } }, [
+					// 			h('i', { className: "glyphicon glyphicon-plus" }),
+					// 		]),
+					// 		h('button', { type: "button", className: "btn bi-btn-primary" }, [
+					// 			" pozostałe ",
+					// 			h('span', { className: "badge" }, this.state.totalOdPozostale),
+					// 			(this.state.totalOdPozostale > 0) ? this.renderClearPozostaleOdBtn() : null,
+					// 		]),
+					// 	]),
+					// ]),
 					h('li', { style: { marginTop: "6px" } }, [
 						h('span', {
 							style: totalOd > 0 ? { color: "#d7142d" } : {}
-						}, "OD (" + totalOd + "): "),
-						h('a', { className: "btn btn-link", style: { padding: 0, fontSize: "16px" }, href: "#PRACOWNICY" }, " pracownicy (" + this.state.totalOdPracownicy + ")"),
-						" + ",
-						h('button', { className: "btn btn-link", style: { padding: 0, fontSize: "16px" }, onClick: this.addOdPozostale }, " pozostałe (" + this.state.totalOdPozostale + ")"),
+						}, [
+							" OD ",
+							h('span', { className: "badge", style: totalOd > 0 ? { 'background-color': "#d7142d" } : {} }, totalOd),
+							" : ",
+						]),
+						h('a', { className: "btn btn-link", style: { padding: "6px" }, href: "#PRACOWNICY" }, [ // .bi-btn-primary
+							" pracownicy ",
+							h('span', { className: "badge" }, this.state.totalOdPracownicy),
+						]),
+						h('i', { className: "glyphicon glyphicon-plus", style: { 'font-size': "14px", margin: "0 12px" } }),
+						h('button', { className: "btn btn-link", style: { padding: "6px" }, onClick: this.addOdPozostale }, [ // .bi-btn-primary
+							" pozostałe ",
+							h('span', { className: "badge" }, this.state.totalOdPozostale),
+						]),
 						(this.state.totalOdPozostale > 0) ? this.renderClearPozostaleOdBtn() : null,
 					]),
 					h('li', { style: { marginTop: "6px" } }, [
 						h('span', {
 							style: totalDo > 0 ? { color: "#d7142d" } : {}
-						}, "DO (" + totalDo + "): "),
-						h('a', { className: "btn btn-link", style: { padding: 0, fontSize: "16px" }, href: "#KONTRAHENCI" }, " kontrahenci (" + this.state.totalDoKontrahenci + ")"),
-						" + ",
-						h('button', { className: "btn btn-link", style: { padding: 0, fontSize: "16px" }, onClick: this.addDoPozostale }, " pozostałe (" + this.state.totalDoPozostale + ")"),
+						}, [
+							" OD ",
+							h('span', { className: "badge", style: totalDo > 0 ? { 'background-color': "#d7142d" } : {} }, totalDo),
+							" : ",
+						]),
+						h('a', { className: "btn btn-link", style: { padding: "6px" }, href: "#KONTRAHENCI" }, [ // .bi-btn-primary
+							" kontrahenci ",
+							h('span', { className: "badge" }, this.state.totalDoKontrahenci),
+						]),
+						h('i', { className: "glyphicon glyphicon-plus", style: { 'font-size': "14px", margin: "0 12px" } }),
+						h('button', { className: "btn btn-link", style: { padding: "6px" }, onClick: this.addOdPozostale }, [ // .bi-btn-primary
+							" pozostałe ",
+							h('span', { className: "badge" }, this.state.totalDoPozostale),
+						]),
 						(this.state.totalDoPozostale > 0) ? this.renderClearPozostaleDoBtn() : null,
-					])
+					]),
 				])
 			])
 		])