added a maximize/restore button to the details-view (DonJayamanne#118)

Author: debuggings

resources/main.css

@@ -53,6 +53,9 @@ body {
 #log-view.with-details {
     height: calc(100% - 20rem);
 }
+#log-view.with-details.with-details-resized {
+    height: 20rem;
+}
 
 #log-view svg {
     position: absolute;
@@ -283,21 +286,33 @@ body {
     border-bottom: none;
 }
 
-#details-view .close-btn {
+#details-view.resized {
+    height: calc(100% - 20rem);
+}
+
+#details-view .action-btn {
     font-size: 1.2rem;
-    position: absolute;
+    float: right;
     padding: 1rem; /* increases the hit-area */
-    top: 0;
-    right: 0;
     cursor: pointer;
     opacity: 0.8;
     z-index: 5;
 }
-#details-view .close-btn:hover {
+#details-view .action-btn:hover {
     opacity: 1;
     transition: opacity 0.3s ease-out;
 }
 
+#details-view.resized .action-btn.resize-btn{
+    display: none;
+}
+#details-view .action-btn.resume-btn{
+    display: none;
+}
+#details-view.resized .action-btn.resume-btn{
+    display: block;
+}
+
 #details-view .commit-subject {
     font-size: 1.4em;
     font-weight: lighter;

src/browser/detailsView.ts

@@ -78,6 +78,12 @@
         $detailsView
             .on('click', '.close-btn', hideDetails)
             ;
+        $detailsView
+            .on('click', '.resize-btn', resizeDetails)
+            ;
+        $detailsView
+            .on('click', '.resume-btn', resumeDetails)
+            ;
     }
 
     let detailsViewShown = false;
@@ -146,4 +152,12 @@
         $detailsView.addClass('hidden');
         $logView.removeClass('with-details');
     }
+    function resizeDetails() {
+        $detailsView.addClass('resized');
+        $logView.addClass('with-details-resized');
+    }
+    function resumeDetails() {
+        $detailsView.removeClass('resized');
+        $logView.removeClass('with-details-resized');
+    }
 })();

src/logViewer/htmlGenerator.ts

@@ -55,7 +55,9 @@ function generateHistoryListContainer(entries: LogEntry[], entriesHtml: string,
         </div>
 
         <div id="details-view" class="hidden">
-            <a class="close-btn"><i class="octicon octicon-x"></i></a>
+            <a class="action-btn close-btn"><i class="octicon octicon-x"></i></a>
+            <a class="action-btn resize-btn"><i class="octicon octicon-chevron-up"></i></a>
+            <a class="action-btn resume-btn"><i class="octicon octicon-chevron-down"></i></a>
             <h1 class="commit-subject">Merged Pull request from some bug fix area</h1>
             <div class="commit-author">
                 <span class="name hint--right hint--rounded hint--bounce" aria-label="don.jayamanne@yahoo.com">Don Jayamanne</span>