From f4c96180b5df77c6e02b9b8eae503dfaa70f8a6f Mon Sep 17 00:00:00 2001
From: OttoMao <ottomao@gmail.com>
Date: Wed, 8 Jul 2015 11:55:13 +0800
Subject: [PATCH] optimize web ui
---
package.json | 2 +-
web/build/filter.js | 15 ++++++++++++---
web/build/index.js | 4 ++--
web/build/mapForm.js | 21 +++++++++++----------
web/build/mapPanel.js | 2 +-
web/css/page.css | 33 ++++++++++++++++++++++++++++-----
web/page.js | 42 ++++++++++++++++++++++++++----------------
web/src/filter.js | 17 +++++++++++++----
web/src/index.js | 4 ++--
web/src/mapForm.js | 15 ++++++++-------
web/src/mapPanel.js | 2 +-
11 files changed, 105 insertions(+), 52 deletions(-)
diff --git a/package.json b/package.json
index 3464f7a..90b99cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "anyproxy",
- "version": "3.7.0Beta1",
+ "version": "3.7.0Beta2",
"description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
"main": "proxy.js",
"bin": {
diff --git a/web/build/filter.js b/web/build/filter.js
index 3f898f5..f4183f7 100644
--- a/web/build/filter.js
+++ b/web/build/filter.js
@@ -19,11 +19,20 @@ function init(React){
var self = this;
return (
- React.createElement("div", {className: "filterSection"},
+ React.createElement("div", null,
React.createElement("h4", {className: "subTitle"}, "Log Filter"),
- React.createElement("form", {className: "uk-form"},
- React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"})
+ React.createElement("div", {className: "filterSection"},
+ React.createElement("form", {className: "uk-form"},
+ React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
+ )
+ ),
+ React.createElement("dl", {class: "uk-description-list-horizontal"},
+ React.createElement("dt", null, "wrap your RegExp between two slashes"),
+ React.createElement("dd", null,
+ "e.g. ", React.createElement("br", null),
+ "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
+ )
)
)
);
diff --git a/web/build/index.js b/web/build/index.js
index a0da087..17e2866 100644
--- a/web/build/index.js
+++ b/web/build/index.js
@@ -186,7 +186,7 @@ var recorder;
pop.setState({
show : true,
content : filter,
- left:"70%"
+ left:"50%"
});
}
@@ -202,7 +202,7 @@ var recorder;
pop.setState({
show : true,
content : mapPanel,
- left:"70%"
+ left:"40%"
})
}
diff --git a/web/build/mapForm.js b/web/build/mapForm.js
index 02f21c0..cea093e 100644
--- a/web/build/mapForm.js
+++ b/web/build/mapForm.js
@@ -54,29 +54,30 @@ function init(React){
var self = this;
return (
React.createElement("div", null,
- React.createElement("form", {className: "uk-form uk-form-stacked"},
+ React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"},
React.createElement("fieldset", null,
- React.createElement("legend", null, "add rule"),
-
React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"),
React.createElement("div", {className: "uk-form-controls"},
- React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
+ React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
)
),
React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"),
React.createElement("div", {className: "uk-form-controls"},
- React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"})
- )
- )
+ React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
+ ),
+ React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
+ ),
+
+ React.createElement("div", {className: "uk-form-row"},
+ React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
+ )
)
- ),
+ )
- React.createElement("div", {ref: "treeWrapper"}),
- React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add")
)
);
},
diff --git a/web/build/mapPanel.js b/web/build/mapPanel.js
index 7b97f5d..00b82af 100644
--- a/web/build/mapPanel.js
+++ b/web/build/mapPanel.js
@@ -19,7 +19,7 @@ function init(React){
React.createElement("h4", {className: "subTitle"}, "Current Config"),
React.createElement(MapList, {ref: "list"}),
- React.createElement("h4", {className: "subTitle"}, "Map Local"),
+ React.createElement("h4", {className: "subTitle"}, "Add Map Rule"),
React.createElement(MapForm, {onSubmit: self.appendRecord})
)
);
diff --git a/web/css/page.css b/web/css/page.css
index fddd734..1509a60 100644
--- a/web/css/page.css
+++ b/web/css/page.css
@@ -287,21 +287,22 @@ body, html {
z-index:999
}
+/*filter*/
-
-.filterSection .filterIcon{
- font-size: 16px;
+.filterSection{
+ margin: 50px auto 0;
}
.filterSection form{
- display: inline-block;
- margin-right: 5px;
+ text-align: center;
}
.filterSection input{
width: 250px;
}
+/*filter end*/
+
/*map panel*/
@@ -328,5 +329,27 @@ body, html {
margin-left: 5px;
}
+.mapWrapper .mapConfigInputs{
+ width: 400px;
+}
+
+.mapWrapper .mapConfigInputs.pathInput{
+ border-radius: 4px 4px 0 0 ;
+}
+
+.mapWrapper .treeWrapper{
+ width: 398px;
+ height: 350px;
+ overflow: scroll;
+ border: 1px solid #ddd;
+ border-top: none;
+}
+
+.mapWrapper .mapAddNewForm{
+ margin-left: 10px;
+}
+
+
+
/*map panel end*/
diff --git a/web/page.js b/web/page.js
index b191f58..2c2e7d5 100644
--- a/web/page.js
+++ b/web/page.js
@@ -232,7 +232,7 @@
pop.setState({
show : true,
content : filter,
- left:"70%"
+ left:"50%"
});
}
@@ -248,7 +248,7 @@
pop.setState({
show : true,
content : mapPanel,
- left:"70%"
+ left:"40%"
})
}
@@ -20182,7 +20182,7 @@
React.createElement("h4", {className: "subTitle"}, "Current Config"),
React.createElement(MapList, {ref: "list"}),
- React.createElement("h4", {className: "subTitle"}, "Map Local"),
+ React.createElement("h4", {className: "subTitle"}, "Add Map Rule"),
React.createElement(MapForm, {onSubmit: self.appendRecord})
)
);
@@ -20395,11 +20395,20 @@
var self = this;
return (
- React.createElement("div", {className: "filterSection"},
+ React.createElement("div", null,
React.createElement("h4", {className: "subTitle"}, "Log Filter"),
- React.createElement("form", {className: "uk-form"},
- React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"})
+ React.createElement("div", {className: "filterSection"},
+ React.createElement("form", {className: "uk-form"},
+ React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
+ )
+ ),
+ React.createElement("dl", {class: "uk-description-list-horizontal"},
+ React.createElement("dt", null, "wrap your RegExp between two slashes"),
+ React.createElement("dd", null,
+ "e.g. ", React.createElement("br", null),
+ "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
+ )
)
)
);
@@ -27959,29 +27968,30 @@
var self = this;
return (
React.createElement("div", null,
- React.createElement("form", {className: "uk-form uk-form-stacked"},
+ React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"},
React.createElement("fieldset", null,
- React.createElement("legend", null, "add rule"),
-
React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"),
React.createElement("div", {className: "uk-form-controls"},
- React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
+ React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
)
),
React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"),
React.createElement("div", {className: "uk-form-controls"},
- React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"})
- )
- )
+ React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
+ ),
+ React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
+ ),
+
+ React.createElement("div", {className: "uk-form-row"},
+ React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
+ )
)
- ),
+ )
- React.createElement("div", {ref: "treeWrapper"}),
- React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add")
)
);
},
diff --git a/web/src/filter.js b/web/src/filter.js
index 00e2f99..4930d8b 100644
--- a/web/src/filter.js
+++ b/web/src/filter.js
@@ -19,12 +19,21 @@ function init(React){
var self = this;
return (
- <div className="filterSection">
+ <div>
<h4 className="subTitle">Log Filter</h4>
- <form className="uk-form">
- <input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="type keywords or /^regExp$/" width="300"/>
- </form>
+ <div className="filterSection">
+ <form className="uk-form">
+ <input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="keywords or /^regExp$/" width="300"/>
+ </form>
+ </div>
+ <dl class="uk-description-list-horizontal">
+ <dt>wrap your RegExp between two slashes</dt>
+ <dd>
+ e.g. <br />
+ type <strong>/id=\d{3}/</strong> will give you all the logs containing <strong>id=123</strong>
+ </dd>
+ </dl>
</div>
);
},
diff --git a/web/src/index.js b/web/src/index.js
index 0fc420c..5b94387 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -186,7 +186,7 @@ var recorder;
pop.setState({
show : true,
content : filter,
- left:"70%"
+ left:"50%"
});
}
@@ -202,7 +202,7 @@ var recorder;
pop.setState({
show : true,
content : mapPanel,
- left:"70%"
+ left:"40%"
})
}
diff --git a/web/src/mapForm.js b/web/src/mapForm.js
index e2e3910..d6f10df 100644
--- a/web/src/mapForm.js
+++ b/web/src/mapForm.js
@@ -54,29 +54,30 @@ function init(React){
var self = this;
return (
<div>
- <form className="uk-form uk-form-stacked">
+ <form className="uk-form uk-form-stacked mapAddNewForm">
<fieldset>
- <legend>add rule</legend>
-
<div className="uk-form-row">
<label className="uk-form-label" htmlFor="map_keywordInput">keyword</label>
<div className="uk-form-controls">
- <input type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" />
+ <input className="mapConfigInputs" type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" />
</div>
</div>
<div className="uk-form-row">
<label className="uk-form-label" htmlFor="map_localFilePath">local file</label>
<div className="uk-form-controls">
- <input type="text" id="map_localFilePath" ref="localFilePath" placeholder="keyword" />
+ <input className="mapConfigInputs pathInput" type="text" id="map_localFilePath" ref="localFilePath" placeholder="local file path" />
</div>
+ <div ref="treeWrapper" className="treeWrapper"></div>
</div>
+ <div className="uk-form-row">
+ <button type="button" className="uk-button" onClick={self.submitData}>Add</button>
+ </div>
+
</fieldset>
</form>
- <div ref="treeWrapper"></div>
- <button className="uk-button" onClick={self.submitData}>Add</button>
</div>
);
},
diff --git a/web/src/mapPanel.js b/web/src/mapPanel.js
index 8192981..d367511 100644
--- a/web/src/mapPanel.js
+++ b/web/src/mapPanel.js
@@ -19,7 +19,7 @@ function init(React){
<h4 className="subTitle">Current Config</h4>
<MapList ref="list"/>
- <h4 className="subTitle">Map Local</h4>
+ <h4 className="subTitle">Add Map Rule</h4>
<MapForm onSubmit={self.appendRecord}/>
</div>
);