add option to hide tx feed

ripple · Jun 7, 2016 · 0553c3f · 0553c3f
1 parent bf55977
commit 0553c3f
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 3 deletions.
diff --git a/src/app/transactions/transactions.js b/src/app/transactions/transactions.js
@@ -40,6 +40,15 @@ angular.module( 'ripplecharts.transactions', [
     $scope.tx_hash = $scope.input_tx_hash;
   };
 
+  $scope.toggleFeed = function () {
+    $scope.feedHidden = !$scope.feedHidden;
+    $scope.toggleText = $scope.feedHidden ? 'Show Feed' : 'X';
+    store.set('feedHidden', $scope.feedHidden);
+  };
+
+  $scope.feedHidden = !(store.get('feedHidden') || false);
+  $scope.toggleFeed();
+
   function handleTransition(hash) {
     if (hash) {
       $state.transitionTo('transactions.tx_hash', {

diff --git a/src/app/transactions/transactions.less b/src/app/transactions/transactions.less
@@ -41,10 +41,61 @@
 .transactions .column1 {
   width: 350px;
   max-width: 350px;
+  transition: width .5s ease;
+}
+
+.transactions .column2 {
+  width: 100%;
+}
+
+.transactions .column1 .toggle {
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  overflow: hidden;
+  transition: width .5s ease;
+  width: 350px;
+}
+
+.transactions .column1 .toggle span {
+  float: right;
+  padding: 3px 6px;
+  border: 1px solid #eee;
+  cursor: pointer;
+  display: block;
+  text-align: center;
+  font-weight: bold;
+  font-size: 10px;
+}
+
+.transactions .column1 .toggle span:hover {
+  background-color: #eee;
+  border-color: #ddd;
+}
+
+.transactions .column.feedHidden {
+  width: 0;
+  transition: width .5s ease;
+}
+
+.transactions .column.feedHidden .toggle {
+  position:fixed;
+  width: 80px;
+  transition: width .5s ease;
+}
+
+.transactions .column.feedHidden txfeed {
+  transition: width .5s ease;
+  width: 0;
+}
+
+.transactions txfeed {
+  transition: width .5s ease;
 }
 
 .transactions txfeed tx {
-  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 350px;
 }
 
 .transactions txsplain {
@@ -62,18 +113,36 @@
 
 @media (max-width: 600px) {
   .transactions .column {
-    display: table-row;
+    display: block;
     width: 100%;
     max-width: 100%;
   }
 
+  .transactions .column.feedHidden {
+    width: 100%;
+  }
+
+  .transactions .column1 .toggle {
+    width: 100%;
+  }
+
+  .transactions .column.feedHidden .toggle {
+    position: relative;
+  }
+  .transactions .column.feedHidden txfeed {
+    transition: height .5s ease;
+    width: 100%;
+    height: 0;
+  }
+
   .transactions .column txfeed {
     width: 100%;
     height: 200px;
     zoom: .75;
   }
 
   .transactions .column txfeed tx {
+    width: auto;
     height: auto;
   }
 
@@ -104,6 +173,18 @@
 }
 
 
+.dark .transactions .toggle {
+  background: #000;
+}
+
+.dark .transactions .toggle span {
+  border-color: #222;
+}
+
+.dark .transactions .toggle span:hover {
+  border-color: #333;
+  background: #222;
+}
 
 .dark .transactions .tx-input button {
   color: #999;

diff --git a/src/app/transactions/transactions.tpl.html b/src/app/transactions/transactions.tpl.html
@@ -1,5 +1,8 @@
 <div class="transactions">
-  <div class="column column1">
+  <div class="column column1" ng-class="{feedHidden: feedHidden}">
+    <div class="toggle" ng-click="toggleFeed()">
+      <span>{{toggleText}}</span>
+    </div>
     <txfeed></txfeed>
   </div>
   <div class="column column2">