XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-07-27 07:45:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimze map icon

Browse Source
This commit is contained in:
OttoMao
2015-07-08 17:55:14 +08:00
parent f4c96180b5
commit ffd59eb055
12 changed files with 141 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/build/index.js
View File

@@ -140,6 +140,12 @@ var recorder;
//action bar
(function(){
//detect whether to show the filter and map btn
$.get("/filetree?root=/",function(){
$(".J_filterSection").show();
});
//clear log
function clearLogs(){
recordSet = [];

2
web/build/popup.js
View File

@@ -78,7 +78,7 @@ function init(React){
React.createElement("div", {className: "overlay_mask", onClick: this.setHide}),
React.createElement("div", {className: "recordDetailOverlay", ref: "mainOverlay", style: {left: this.state.left}},
React.createElement("div", {className: "dragbar", onMouseDown: this.dealDrag}),
React.createElement("span", {className: "escBtn", onClick: this.setHide}, "Close (ESC)"),
React.createElement("span", {className: "escBtn", onClick: this.setHide}, React.createElement("i", {className: "uk-icon-times"})),
React.createElement("div", null,
this.state.content
)

30
web/build/recordRow.js
View File

@@ -20,24 +20,34 @@ function init(React){
},
render : function(){
var trClassesArr = [],
trClasses;
if(this.props.data.statusCode){
trClasses,
data = this.props.data || {};
if(data.statusCode){
trClassesArr.push("record_status_done");
}
trClassesArr.push( ((Math.floor(this.props.data._id /2) - this.props.data._id /2) == 0)? "row_even" : "row_odd" );
trClassesArr.push( ((Math.floor(data._id /2) - data._id /2) == 0)? "row_even" : "row_odd" );
trClasses = trClassesArr.join(" ");
var dateStr = dateFormat(new Date(this.props.data.startTime),"hh:mm:ss");
var dateStr = dateFormat(new Date(data.startTime),"hh:mm:ss");
var rowIcon = [];
if(data.protocol == "https"){
rowIcon.push(React.createElement("span", {className: "icon_record", title: "https"}, React.createElement("i", {className: "uk-icon-lock"})));
}
if(data.ext && data.ext.map){
rowIcon.push(React.createElement("span", {className: "icon_record", title: "mapped to local file"}, React.createElement("i", {className: "uk-icon-shield"})));
}
return(
React.createElement("tr", {className: trClasses, onClick: this.props.onSelect},
React.createElement("td", {className: "data_id"}, this.props.data._id),
React.createElement("td", null, this.props.data.method, " ", React.createElement("span", {className: "protocol protocol_" + this.props.data.protocol, title: "https"}, React.createElement("i", {className: "uk-icon-lock"})), " "),
React.createElement("td", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode),
React.createElement("td", {title: this.props.data.host}, this.props.data.host),
React.createElement("td", {title: this.props.data.path}, this.props.data.path),
React.createElement("td", null, this.props.data.mime),
React.createElement("td", {className: "data_id"}, data._id),
React.createElement("td", null, data.method, " ", rowIcon, " "),
React.createElement("td", {className: "http_status http_status_" + data.statusCode}, data.statusCode),
React.createElement("td", {title: data.host}, data.host),
React.createElement("td", {title: data.path}, data.path),
React.createElement("td", null, data.mime),
React.createElement("td", null, dateStr)
)
);

47
web/css/page.css
View File

@@ -9,10 +9,8 @@ body, html {
.topHead{
height: 55px;
position: relative;
/* -webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
*/}
border-bottom: 1px solid #333;
}
.topHead .logoWrapper{
float: left;
@@ -64,20 +62,26 @@ body, html {
}
.topHead .ctrlWrapper{
height: 35px;
line-height: 35px;
height: 26px;
line-height: 26px;
}
.topHead .ctrlWrapper .sep{
display: inline-block;
margin: 0 8px;
color: #777;
}
.topHead .topBtn{
margin-right: 8px;
transition:0.1s;
transition:0.08s;
padding: 4px;
border-radius: 2px;
}
.topHead .topBtn:hover:not(.btn_disable){
background: #07D;
transition:0.1s;
transition:0.08s;
color: #FFF;
}
@@ -93,20 +97,6 @@ body, html {
color: #777;
}
.topHead .ruleDesc{
height: 20px;
border-bottom: 1px solid #333;
}
.topHead .ruleDesc span{
padding-left: 3px;
}
.topHead .ctrlWrapper .sep{
display: inline-block;
margin: 0 8px;
color: #777;
}
.mainTableWrapper{
margin-top: 0;
@@ -214,7 +204,7 @@ body, html {
background: #FFF;
border-left: 1px solid #CCC;
top: 0;
padding: 10px 10px 20px 10px;
padding: 10px 20px 10px 10px;
overflow-y:scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -223,11 +213,11 @@ body, html {
.recordDetailOverlay .escBtn{
position: absolute;
right: 10px;
right: 8px;
top: 8px;
color: #777;
cursor: pointer;
text-decoration: underline;
font-size: 16px;
}
.recordDetailOverlay li{
@@ -257,12 +247,7 @@ body, html {
color: #910A0A;
}
.protocol{
display: none;
}
.protocol.protocol_https{
.icon_record{
display: inline;
font-size: 14px;
color: #777;

12
web/index.html
View File

@@ -21,16 +21,20 @@
<a href="#"><span class="topBtn J_clearBtn"><i class="uk-icon-eraser"></i>Clear(Ctrl+X)</span></a>
<span class="sep">|</span>
<a href="/fetchCrtFile" target="_blank"><span class="topBtn"><i class="uk-icon-certificate"></i>Download rootCA.crt</span></a>
<a href="/fetchCrtFile" target="_blank"><span class="topBtn"><i class="uk-icon-download"></i>Download rootCA.crt</span></a>
<a href="/qr_root" class="J_fetchRootQR" target="_blank"><span class="topBtn"><i class="uk-icon-qrcode"></i>QRCode of rootCA.crt</span></a>
<span class="sep">|</span>
<a href="https://github.com/alibaba/anyproxy" target="_blank"><span class="topBtn"><i class="uk-icon-github"></i>Github</span></a>
</div>
<div class="ruleDesc">
<a href="#"><span class="topBtn J_showFilter"><i class="uk-icon-filter"></i>Filter</span></a>
<a href="#"><span class="topBtn J_showMapPanel"><i class="uk-icon-level-down"></i>Map Local</span></a>
<div class="ctrlWrapper">
<span class="J_filterSection" style="display:none">
<a href="#"><span class="topBtn J_showFilter"><i class="uk-icon-filter"></i>Filter</span></a>
<a href="#"><span class="topBtn J_showMapPanel"><i class="uk-icon-shield"></i>Map Local</span></a>
<span class="sep">|</span>
</span>
<span><i class="uk-icon-chain"></i>Rule : {{rule}}</span>
</div>

38
web/page.js
View File

@@ -186,6 +186,12 @@
//action bar
(function(){
//detect whether to show the filter and map btn
$.get("/filetree?root=/",function(){
$(".J_filterSection").show();
});
//clear log
function clearLogs(){
recordSet = [];
@@ -20355,7 +20361,7 @@
React.createElement("div", {className: "overlay_mask", onClick: this.setHide}),
React.createElement("div", {className: "recordDetailOverlay", ref: "mainOverlay", style: {left: this.state.left}},
React.createElement("div", {className: "dragbar", onMouseDown: this.dealDrag}),
React.createElement("span", {className: "escBtn", onClick: this.setHide}, "Close (ESC)"),
React.createElement("span", {className: "escBtn", onClick: this.setHide}, React.createElement("i", {className: "uk-icon-times"})),
React.createElement("div", null,
this.state.content
)
@@ -20449,24 +20455,34 @@
},
render : function(){
var trClassesArr = [],
trClasses;
if(this.props.data.statusCode){
trClasses,
data = this.props.data || {};
if(data.statusCode){
trClassesArr.push("record_status_done");
}
trClassesArr.push( ((Math.floor(this.props.data._id /2) - this.props.data._id /2) == 0)? "row_even" : "row_odd" );
trClassesArr.push( ((Math.floor(data._id /2) - data._id /2) == 0)? "row_even" : "row_odd" );
trClasses = trClassesArr.join(" ");
var dateStr = dateFormat(new Date(this.props.data.startTime),"hh:mm:ss");
var dateStr = dateFormat(new Date(data.startTime),"hh:mm:ss");
var rowIcon = [];
if(data.protocol == "https"){
rowIcon.push(React.createElement("span", {className: "icon_record", title: "https"}, React.createElement("i", {className: "uk-icon-lock"})));
}
if(data.ext && data.ext.map){
rowIcon.push(React.createElement("span", {className: "icon_record", title: "mapped to local file"}, React.createElement("i", {className: "uk-icon-shield"})));
}
return(
React.createElement("tr", {className: trClasses, onClick: this.props.onSelect},
React.createElement("td", {className: "data_id"}, this.props.data._id),
React.createElement("td", null, this.props.data.method, " ", React.createElement("span", {className: "protocol protocol_" + this.props.data.protocol, title: "https"}, React.createElement("i", {className: "uk-icon-lock"})), " "),
React.createElement("td", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode),
React.createElement("td", {title: this.props.data.host}, this.props.data.host),
React.createElement("td", {title: this.props.data.path}, this.props.data.path),
React.createElement("td", null, this.props.data.mime),
React.createElement("td", {className: "data_id"}, data._id),
React.createElement("td", null, data.method, " ", rowIcon, " "),
React.createElement("td", {className: "http_status http_status_" + data.statusCode}, data.statusCode),
React.createElement("td", {title: data.host}, data.host),
React.createElement("td", {title: data.path}, data.path),
React.createElement("td", null, data.mime),
React.createElement("td", null, dateStr)
)
);

6
web/src/index.js
View File

@@ -140,6 +140,12 @@ var recorder;
//action bar
(function(){
//detect whether to show the filter and map btn
$.get("/filetree?root=/",function(){
$(".J_filterSection").show();
});
//clear log
function clearLogs(){
recordSet = [];

2
web/src/popup.js
View File

@@ -78,7 +78,7 @@ function init(React){
<div className="overlay_mask" onClick={this.setHide}></div>
<div className="recordDetailOverlay" ref="mainOverlay" style={{left: this.state.left}}>
<div className="dragbar" onMouseDown={this.dealDrag}></div>
<span className="escBtn" onClick={this.setHide}>Close (ESC)</span>
<span className="escBtn" onClick={this.setHide}><i className="uk-icon-times"></i></span>
<div>
{this.state.content}
</div>

30
web/src/recordRow.js
View File

@@ -20,24 +20,34 @@ function init(React){
},
render : function(){
var trClassesArr = [],
trClasses;
if(this.props.data.statusCode){
trClasses,
data = this.props.data || {};
if(data.statusCode){
trClassesArr.push("record_status_done");
}
trClassesArr.push( ((Math.floor(this.props.data._id /2) - this.props.data._id /2) == 0)? "row_even" : "row_odd" );
trClassesArr.push( ((Math.floor(data._id /2) - data._id /2) == 0)? "row_even" : "row_odd" );
trClasses = trClassesArr.join(" ");
var dateStr = dateFormat(new Date(this.props.data.startTime),"hh:mm:ss");
var dateStr = dateFormat(new Date(data.startTime),"hh:mm:ss");
var rowIcon = [];
if(data.protocol == "https"){
rowIcon.push(<span className="icon_record" title="https"><i className="uk-icon-lock"></i></span>);
}
if(data.ext && data.ext.map){
rowIcon.push(<span className="icon_record" title="mapped to local file"><i className="uk-icon-shield"></i></span>);
}
return(
<tr className={trClasses} onClick={this.props.onSelect}>
<td className="data_id">{this.props.data._id}</td>
<td>{this.props.data.method} <span className={"protocol protocol_" + this.props.data.protocol} title="https"><i className="uk-icon-lock"></i></span> </td>
<td className={"http_status http_status_" + this.props.data.statusCode}>{this.props.data.statusCode}</td>
<td title={this.props.data.host}>{this.props.data.host}</td>
<td title={this.props.data.path}>{this.props.data.path}</td>
<td>{this.props.data.mime}</td>
<td className="data_id">{data._id}</td>
<td>{data.method} {rowIcon} </td>
<td className={"http_status http_status_" + data.statusCode}>{data.statusCode}</td>
<td title={data.host}>{data.host}</td>
<td title={data.path}>{data.path}</td>
<td>{data.mime}</td>
<td>{dateStr}</td>
</tr>
);