diff --git a/ui/assets/css/hound.css b/ui/assets/css/hound.css index c29e3afa..481ac7d4 100644 --- a/ui/assets/css/hound.css +++ b/ui/assets/css/hound.css @@ -216,6 +216,16 @@ button:focus { margin-right: 10px; } +#result > .actions { + padding: 5px 0 30px 0; +} + +#result > .actions > button { + margin: 2px; + float: right; + background-color: #f5f5f5; + color: #666; +} .repo { margin-bottom: 100px; } @@ -224,6 +234,7 @@ button:focus { color: #666; font-size: 24px; padding-bottom: 5px; + cursor: pointer; } .repo > .title > .name { @@ -235,6 +246,11 @@ button:focus { margin-right: 10px; } +.repo > .title > .indicator { + vertical-align: text-top; + padding-left: 10px; +} + .files > .moar { height: 55px; vertical-align: top; @@ -247,11 +263,16 @@ button:focus { border: 1px solid #d8d8d8; } +.file.closed { + margin: 10px 0 0 0; +} + .file > .title { padding: 10px 10px 10px 20px; display: block; line-height: 30px; background-color: #f5f5f5; + cursor: pointer; } .title a { @@ -263,6 +284,14 @@ button:focus { overflow: auto; } +.file.closed > .file-body { + display: none; +} + +.file.open > .file-boby { + display: block; +} + .match { border-bottom: 2px solid #f0f0f0; } diff --git a/ui/assets/js/hound.js b/ui/assets/js/hound.js index 2f8a68cf..405f4c7b 100644 --- a/ui/assets/js/hound.js +++ b/ui/assets/js/hound.js @@ -632,43 +632,47 @@ var ContentFor = function(line, regexp) { return buffer.join(''); }; -var FilesView = React.createClass({ - onLoadMore: function(event) { - Model.LoadMore(this.props.repo); +var FileContentView = React.createClass({ + getInitialState: function() { + return { open: true }; }, - - render: function() { - var rev = this.props.rev, - repo = this.props.repo, - regexp = this.props.regexp, - matches = this.props.matches, - totalMatches = this.props.totalMatches; - var files = matches.map(function(match, index) { - var filename = match.Filename, - blocks = CoalesceMatches(match.Matches); + toggleContent: function() { + this.state.open ? this.closeContent(): this.openContent(); + }, + openContent: function() { + this.setState({open: true}); + }, + closeContent: function() { + this.setState({open: false}); + }, + render: function () { + var repo = this.props.repo, + rev = this.props.rev, + regexp = this.props.regexp, + fileName = this.props.fileName, + blocks = this.props.blocks; var matches = blocks.map(function(block) { var lines = block.map(function(line) { var content = ContentFor(line, regexp); return (
); }); - return (