feat(app): 640 expand / collapse facet sidebar

- pie charts update position when collapse facets Closes #640
NCI-GDC · Jun 16, 2016 · d090f2b · d090f2b
1 parent 770b2b5
commit d090f2b
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 14 deletions.
diff --git a/app/scripts/annotations/templates/annotations.html b/app/scripts/annotations/templates/annotations.html
@@ -1,13 +1,30 @@
-<div class="container-fluid full-page">
+<div class="container-fluid full-page annotations">
   <div class="search-panel">
-    <div class="facets-sidebar">
+    <div class="facets-sidebar" ng-class="{ collapsed: asc.facetsCollapsed }">
+      <uib-tabset>
+        <div
+          class="collapse-facets-button"
+          ng-click="asc.facetsCollapsed = true"
+        >
+          <span class="fa fa-angle-double-left" aria-hidden="true"></span> Hide Filters
+        </div>
+      </uib-tabset>
       <div class="panel panel-default">
         <div class="list-group" data-ng-include="'annotations/templates/annotations.facets.html'" class="facet-section" role="form">
         </div>
       </div>
 
     </div>
-    <div class="content">
+
+    <div
+      class="expand-facets-button"
+      ng-class="{ expanded: asc.facetsCollapsed }"
+      ng-click="asc.facetsCollapsed = false"
+    >
+      Show Filters <span class="fa fa-angle-double-right" aria-hidden="true"></span>
+    </div>
+
+    <div class="content" ng-class="{ expanded: asc.facetsCollapsed }">
 
       <div class="alert alert-info clearfix">
         <span data-ng-if="!cfc.currentFilters.length">

diff --git a/app/scripts/components/charts/chart.directives.ts b/app/scripts/components/charts/chart.directives.ts
@@ -10,8 +10,13 @@ module ngApp.components.charts {
   }
 
   /* @ngInject */
-  function PieChart($window: IGDCWindowService, LocationService: ILocationService,
-                    $state: ng.ui.IStateService): ng.IDirective {
+  function PieChart(
+    $window: IGDCWindowService,
+    LocationService: ILocationService,
+    $state: ng.ui.IStateService,
+    $rootScope,
+    $timeout
+  ): ng.IDirective {
     return {
       restrict: "EA",
       replace: true,
@@ -232,6 +237,10 @@ module ngApp.components.charts {
             updateChart();
           }
         }, 150));
+
+        $rootScope.$on("toggleFacets", () => {
+          $timeout(updateChart)
+        });
       }
     };
   }

diff --git a/app/scripts/projects/templates/projects.html b/app/scripts/projects/templates/projects.html
@@ -1,6 +1,14 @@
-<div class="container-fluid full-page">
+<div class="container-fluid full-page projects">
   <div class="search-panel">
-    <div class="facets-sidebar">
+    <div class="facets-sidebar" ng-class="{ collapsed: prsc.facetsCollapsed }">
+      <uib-tabset>
+        <div
+          class="collapse-facets-button"
+          ng-click="prsc.facetsCollapsed = true"
+        >
+          <span class="fa fa-angle-double-left" aria-hidden="true"></span> Hide Filters
+        </div>
+      </uib-tabset>
       <div class="panel panel-default">
         <div class="list-group">
           <div data-ng-include="'projects/templates/projects.facets.html'"
@@ -9,7 +17,15 @@
       </div>
     </div>
 
-    <div class="content">
+    <div
+      class="expand-facets-button"
+      ng-class="{ expanded: prsc.facetsCollapsed }"
+      ng-click="prsc.facetsCollapsed = false"
+    >
+      Show Filters <span class="fa fa-angle-double-right" aria-hidden="true"></span>
+    </div>
+
+    <div class="content" ng-class="{ expanded: prsc.facetsCollapsed }">
       <div class="alert alert-info clearfix">
         <div class="col-sm-12 col-lg-9">
           <current-filters></current-filters>
@@ -19,15 +35,15 @@
             </span>
           </span>
         </div>
-        
+
         <div class="col-sm-12 col-lg-3 text-right" data-ng-if="cfc.currentFilters.length">
           <a class="btn btn-primary" data-translate data-ng-click="prsc.gotoQuery()">
             <i class="fa fa-gears"></i> <span data-translate>Open Query in Data Page</span>
           </a>
         </div>
       </div>
 
-      
+
 
       <h3 class="col-lg-9 col-md-8" data-ng-if="!prsc.projects.hits.length && !prsc.loading" data-translate>
         No projects found using those filters.

diff --git a/app/scripts/search/search.controllers.ts b/app/scripts/search/search.controllers.ts
@@ -45,6 +45,7 @@ module ngApp.search.controllers {
     tabSwitch: boolean = false;
     projectIdChartConfig: any;
     primarySiteChartConfig: any;
+    facetsCollapsed: boolean = false;
 
     /* @ngInject */
     constructor(private $scope: ISearchScope,
@@ -225,6 +226,11 @@ module ngApp.search.controllers {
       this.$state.go("query." + toTab, stateParams, { inherit: true });
     }
 
+    toggleFacets(shouldCollapse) {
+      this.facetsCollapsed = shouldCollapse;
+      this.$rootScope.$emit("toggleFacets");
+    }
+
   }
 
   angular

diff --git a/app/scripts/search/templates/search.html b/app/scripts/search/templates/search.html
@@ -1,6 +1,6 @@
 <div class="container-fluid full-page search" data-autoscroll="false">
   <div class="search-panel">
-    <div class="facets-sidebar">
+    <div class="facets-sidebar" ng-class="{ collapsed: sc.facetsCollapsed }">
       <uib-tabset>
         <uib-tab heading="{{ 'Cases' | translate }}" active="true" id="participants-facets-tab">
           <div class="facet-section panel-default">
@@ -28,9 +28,22 @@
             </div>
           </div>
         </uib-tab>
+        <div
+          class="collapse-facets-button"
+          ng-click="sc.toggleFacets(true)"
+        >
+          <span class="fa fa-angle-double-left" aria-hidden="true"></span> Hide Filters
+        </div>
       </uib-tabset>
     </div>
-    <div class="content">
+    <div
+      class="expand-facets-button"
+      ng-class="{ expanded: sc.facetsCollapsed }"
+      ng-click="sc.toggleFacets(false)"
+    >
+      Show Filters <span class="fa fa-angle-double-right" aria-hidden="true"></span>
+    </div>
+    <div class="content" ng-class="{ expanded: sc.facetsCollapsed }">
       <div class="alert alert-info clearfix">
         <div class="col-sm-10">
           <current-filters></current-filters>
@@ -46,7 +59,7 @@
           </a>
         </div>
       </div>
-      
+
       <h3 class="col-lg-9 col-md-8" data-ng-if="!sc.participants.hits.length && !sc.files.hits.length && !sc.participantsLoading && !sc.filesLoading" data-translate>
         No results found using those filters.
       </h3>

diff --git a/app/styles/app.less b/app/styles/app.less
@@ -126,6 +126,14 @@ h3.panel-title {
 .content {
   width: 70%;
   float: left;
+
+  &.expanded {
+    width: 100%;
+
+    .alert {
+      margin-left: 135px;
+    }
+  }
 }
 
 //bootcard override
@@ -724,6 +732,16 @@ pre code {
   width: 30%;
   float: left;
   padding: 0 15px;
+  overflow: hidden;
+
+  &.collapsed {
+    display: none;
+    padding: 0;
+  }
+}
+
+.list-group {
+  min-width: 250px;
 }
 
 .facets-sidebar .nav-tabs > li.active > a,
@@ -859,7 +877,7 @@ pre code {
   color: #333333;
   white-space: nowrap;
 }
-
+g
 .dropdown-menu > li > span:hover,
 .dropdown-menu > li > span:focus,
 .dropdown-menu > li > button:hover,

diff --git a/app/styles/search.less b/app/styles/search.less
@@ -1,3 +1,53 @@
+.projects .facets-sidebar .nav-tabs,
+.annotations .facets-sidebar .nav-tabs {
+  border-bottom: none;
+}
+
+.collapse-facets-button {
+  float: right;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+  outline: none;
+}
+
+.collapse-facets-button:hover {
+  background-color: #eeeeee;
+  border-color: #d9d8d8 #d9d8d8 #c4c4c4;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 10px 0px 29px -105px #2a72a4;
+  }
+  25% {
+    box-shadow: 10px 0px 29px -6px #2a72a4;
+  }
+  100% {
+    box-shadow: 10px 0px 29px -105px #2a72a4;
+  }
+}
+
+.expand-facets-button {
+  position: absolute;
+  left: 0;
+  background: white;
+  border: 1px solid #C4C4C4;
+  padding: 10px;
+  transition: transform 0.1s ease;
+  transform: translateX(-100%);
+  cursor: pointer;
+  outline: none;
+  margin-top: 10px;
+
+  &.expanded {
+    transform: translateX(0);
+    transition: transform 0.6s ease;
+    animation-name: glow;
+    animation-duration: 4s;
+  }
+}
+
 .summary-panel {
   padding: 15px;
 }