Skip to content

Commit

Permalink
Merge pull request gitkraken#39 from afrisalyp/issue-23
Browse files Browse the repository at this point in the history 
Issue 23: Search panel resizeable. gitkraken#35
  • Loading branch information
@billsedison
billsedison authored Oct 17, 2018
2 parents c7532a9 + 3aa7aca commit 60b3899
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 42 deletions.
90 changes: 69 additions & 21 deletions search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,46 @@
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src *; style-src 'self'; script-src 'nonce-gitlens'"/> -->
<style>
html, body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding:0;
margin: 0;
overflow: auto;
}

/* horizontal panel*/
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
}
.panel-left {
flex: 0 0 auto; /* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;

}
.panel-right {
flex: 1 1 auto; /* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px !important; /* NOTE: This won't be respected! Explicit size of left forces the size to be fixed */
}
.splitter {
flex: 0 0 auto;
width: 12px;
min-height: 200px;
cursor: col-resize;
background: #838383;
}
</style>
<link href="{{root}}/out/ui/search.css" rel="stylesheet"></head>

<body class="preload">
Expand Down Expand Up @@ -50,39 +90,47 @@ <h1>GitLens</h1>
<span id='searchMessage'></span>
</div>
</div>
<div id="logs-container">
<table>
<tr>
<td style="width:75%; vertical-align: top;">
<div id="commit-logs-table-container">
<table id='logs' class="logs" style="width:100%">
<tbody>
<tr>
<td>Hey Hey</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="width:25%; vertical-align:top">
<div id='selected-files' class="logs"></div>
<div id='selected-commits' class="logs"></div>
</td>
</tr>
</table>
<div id="logs-container" class="panel-container">
<div class="panel-left">
<div id="commit-logs-table-container">
<table id='logs' class="logs" style="width:100%">
<tbody>
<tr>
<td>Hey Hey</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="splitter">
</div>
<div class="panel-right">
<div id='selected-files' class="logs"></div>
<div id='selected-commits' class="logs"></div>
</div>

</div>

</div>
</div>

</div>
</div>

<script type="text/javascript">
window.bootstrap = '{{bootstrap}}';
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
!function(e,t){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e(require("jquery")):e(jQuery)}(function(e,t){e.fn.resizable||(e.fn.resizable=function(t){var n={handleSelector:null,resizeWidth:!0,resizeHeight:!0,resizeWidthFrom:"right",resizeHeightFrom:"bottom",onDragStart:null,onDragEnd:null,onDrag:null,touchActionNone:!0,instanceId:null};return"object"==typeof t&&(n=e.extend(n,t)),this.each(function(){function o(e){e.stopPropagation(),e.preventDefault()}function i(t){t.preventDefault&&t.preventDefault(),d=c(t),d.width=parseInt(l.width(),10),d.height=parseInt(l.height(),10),h=l.css("transition"),l.css("transition","none"),u.onDragStart&&u.onDragStart(t,l,u)===!1||(e(document).on("mousemove."+u.instanceId,r),e(document).on("mouseup."+u.instanceId,a),(window.Touch||navigator.maxTouchPoints)&&(e(document).on("touchmove."+u.instanceId,r),e(document).on("touchend."+u.instanceId,a)),e(document).on("selectstart."+u.instanceId,o),e("iframe").css("pointer-events","none"))}function r(e){var t,n,o=c(e);t="left"===u.resizeWidthFrom?d.width-o.x+d.x:d.width+o.x-d.x,n="top"===u.resizeHeightFrom?d.height-o.y+d.y:d.height+o.y-d.y,u.onDrag&&u.onDrag(e,l,t,n,u)===!1||(u.resizeHeight&&l.height(n),u.resizeWidth&&l.width(t))}function a(t){return t.stopPropagation(),t.preventDefault(),e(document).off("mousemove."+u.instanceId),e(document).off("mouseup."+u.instanceId),(window.Touch||navigator.maxTouchPoints)&&(e(document).off("touchmove."+u.instanceId),e(document).off("touchend."+u.instanceId)),e(document).off("selectstart."+u.instanceId,o),l.css("transition",h),e("iframe").css("pointer-events","auto"),u.onDragEnd&&u.onDragEnd(t,l,u),!1}function c(e){var t={x:0,y:0,width:0,height:0};if("number"==typeof e.clientX)t.x=e.clientX,t.y=e.clientY;else{if(!e.originalEvent.touches)return null;t.x=e.originalEvent.touches[0].clientX,t.y=e.originalEvent.touches[0].clientY}return t}function s(e,t){return e&&">"===e.trim()[0]?(e=e.trim().replace(/^>\s*/,""),t.find(e)):e?t.parent().find(e):t}var u=e.extend({},n);u.instanceId||(u.instanceId="rsz_"+(new Date).getTime());var d,h,f,l=e(this);if("destroy"===t){if(u=l.data("resizable"),!u)return;return f=s(u.handleSelector,l),f.off("mousedown."+u.instanceId+" touchstart."+u.instanceId),u.touchActionNone&&f.css("touch-action",""),void l.removeClass("resizable")}l.data("resizable",u),f=s(u.handleSelector,l),u.touchActionNone&&f.css("touch-action","none"),l.addClass("resizable"),f.on("mousedown."+u.instanceId+" touchstart."+u.instanceId,i)})})});
//# sourceMappingURL=jquery-resizable.min.js.map
</script>
<script>
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
</script>
<script type="text/javascript" src="{{root}}/out/ui/search.js"></script></body>

</html>
90 changes: 69 additions & 21 deletions src/ui/search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,46 @@
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src *; style-src 'self'; script-src 'nonce-gitlens'"/> -->
<style>
html, body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding:0;
margin: 0;
overflow: auto;
}

/* horizontal panel*/
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
}
.panel-left {
flex: 0 0 auto; /* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;

}
.panel-right {
flex: 1 1 auto; /* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px !important; /* NOTE: This won't be respected! Explicit size of left forces the size to be fixed */
}
.splitter {
flex: 0 0 auto;
width: 12px;
min-height: 200px;
cursor: col-resize;
background: #838383;
}
</style>
</head>

<body class="preload">
Expand Down Expand Up @@ -50,39 +90,47 @@ <h1>GitLens</h1>
<span id='searchMessage'></span>
</div>
</div>
<div id="logs-container">
<table>
<tr>
<td style="width:75%; vertical-align: top;">
<div id="commit-logs-table-container">
<table id='logs' class="logs" style="width:100%">
<tbody>
<tr>
<td>Hey Hey</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="width:25%; vertical-align:top">
<div id='selected-files' class="logs"></div>
<div id='selected-commits' class="logs"></div>
</td>
</tr>
</table>
<div id="logs-container" class="panel-container">
<div class="panel-left">
<div id="commit-logs-table-container">
<table id='logs' class="logs" style="width:100%">
<tbody>
<tr>
<td>Hey Hey</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="splitter">
</div>
<div class="panel-right">
<div id='selected-files' class="logs"></div>
<div id='selected-commits' class="logs"></div>
</div>

</div>

</div>
</div>

</div>
</div>

<script type="text/javascript">
window.bootstrap = '{{bootstrap}}';
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
!function(e,t){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e(require("jquery")):e(jQuery)}(function(e,t){e.fn.resizable||(e.fn.resizable=function(t){var n={handleSelector:null,resizeWidth:!0,resizeHeight:!0,resizeWidthFrom:"right",resizeHeightFrom:"bottom",onDragStart:null,onDragEnd:null,onDrag:null,touchActionNone:!0,instanceId:null};return"object"==typeof t&&(n=e.extend(n,t)),this.each(function(){function o(e){e.stopPropagation(),e.preventDefault()}function i(t){t.preventDefault&&t.preventDefault(),d=c(t),d.width=parseInt(l.width(),10),d.height=parseInt(l.height(),10),h=l.css("transition"),l.css("transition","none"),u.onDragStart&&u.onDragStart(t,l,u)===!1||(e(document).on("mousemove."+u.instanceId,r),e(document).on("mouseup."+u.instanceId,a),(window.Touch||navigator.maxTouchPoints)&&(e(document).on("touchmove."+u.instanceId,r),e(document).on("touchend."+u.instanceId,a)),e(document).on("selectstart."+u.instanceId,o),e("iframe").css("pointer-events","none"))}function r(e){var t,n,o=c(e);t="left"===u.resizeWidthFrom?d.width-o.x+d.x:d.width+o.x-d.x,n="top"===u.resizeHeightFrom?d.height-o.y+d.y:d.height+o.y-d.y,u.onDrag&&u.onDrag(e,l,t,n,u)===!1||(u.resizeHeight&&l.height(n),u.resizeWidth&&l.width(t))}function a(t){return t.stopPropagation(),t.preventDefault(),e(document).off("mousemove."+u.instanceId),e(document).off("mouseup."+u.instanceId),(window.Touch||navigator.maxTouchPoints)&&(e(document).off("touchmove."+u.instanceId),e(document).off("touchend."+u.instanceId)),e(document).off("selectstart."+u.instanceId,o),l.css("transition",h),e("iframe").css("pointer-events","auto"),u.onDragEnd&&u.onDragEnd(t,l,u),!1}function c(e){var t={x:0,y:0,width:0,height:0};if("number"==typeof e.clientX)t.x=e.clientX,t.y=e.clientY;else{if(!e.originalEvent.touches)return null;t.x=e.originalEvent.touches[0].clientX,t.y=e.originalEvent.touches[0].clientY}return t}function s(e,t){return e&&">"===e.trim()[0]?(e=e.trim().replace(/^>\s*/,""),t.find(e)):e?t.parent().find(e):t}var u=e.extend({},n);u.instanceId||(u.instanceId="rsz_"+(new Date).getTime());var d,h,f,l=e(this);if("destroy"===t){if(u=l.data("resizable"),!u)return;return f=s(u.handleSelector,l),f.off("mousedown."+u.instanceId+" touchstart."+u.instanceId),u.touchActionNone&&f.css("touch-action",""),void l.removeClass("resizable")}l.data("resizable",u),f=s(u.handleSelector,l),u.touchActionNone&&f.css("touch-action","none"),l.addClass("resizable"),f.on("mousedown."+u.instanceId+" touchstart."+u.instanceId,i)})})});
//# sourceMappingURL=jquery-resizable.min.js.map
</script>
<script>
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
</script>
</body>

</html>

0 comments on commit 60b3899

Please sign in to comment.