#220 complete refactoring, button and detail panel are now separated

scenarioo · Jul 28, 2014 · 3647f11 · 3647f11
1 parent 6d1b770
commit 3647f11
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 71 deletions.
diff --git a/scenarioo-client/app/index.html b/scenarioo-client/app/index.html
@@ -95,6 +95,7 @@
 <script src="scripts/directives/tree.js"></script>
 <script src="scripts/directives/staticInclude.js"></script>
 <script src="scripts/directives/navigatorTable.js"></script>
+<script src="scripts/directives/showHideDetailsButton.js"></script>
 <script src="scripts/directives/showHideDetails.js"></script>
 <script src="scripts/directives/metaDataTree.js"></script>
 <script src="scripts/directives/collapsablePanel.js"></script>

diff --git a/scenarioo-client/app/scripts/controllers/mainUseCasesTab.js b/scenarioo-client/app/scripts/controllers/mainUseCasesTab.js
@@ -23,7 +23,6 @@ angular.module('scenarioo.controllers').controller('MainUseCasesTabCtrl', functi
     var transformMetadataToTreeArray = $filter('scMetadataTreeListCreator');
     SelectedBranchAndBuild.callOnSelectionChange(loadUseCases);
 
-
     function loadUseCases(selected) {
 
         UseCasesResource.query(
@@ -50,7 +49,6 @@ angular.module('scenarioo.controllers').controller('MainUseCasesTabCtrl', functi
     $scope.resetSearchField = function () {
         $scope.table.search = {searchTerm: ''};
     };
-
     function createBranchInformationTree(branch) {
         var branchInformationTree = {};
         branchInformationTree.Description = branch.description;

diff --git a/scenarioo-client/app/scripts/directives/showHideDetails.js b/scenarioo-client/app/scripts/directives/showHideDetails.js
@@ -19,63 +19,34 @@
 
 angular.module('scenarioo.directives').directive('scShowHideDetails', function($window, localStorageService) {
 
-    var STEP_METADATA_VISIBLE = 'scenarioo-metadataVisible-';
     function toggleClassesOnPanels(elem, showingMetaData) {
         var childs = elem.children();
-        var showHideButtonPanel = childs[0];
-        var hideButton = showHideButtonPanel.querySelector('#sc-showHideDetailsButton-hide');
-        var showButton = showHideButtonPanel.querySelector('#sc-showHideDetailsButton-show');
-        var mainAndDetailPanelRow = childs[1];
+        var mainAndDetailPanelRow = childs[0];
         var panelChildren = mainAndDetailPanelRow.children;
         var mainPanel = panelChildren[0];
         var detailPanel = panelChildren[1];
         if (showingMetaData) {
             mainPanel.setAttribute('class', 'col-lg-8');
             detailPanel.setAttribute('class', 'col-lg-4 hero-unit meta-data');
             detailPanel.style.display = 'block';
-            hideButton.style.display = 'block';
-            showButton.style.display = 'none';
         } else {
             mainPanel.setAttribute('class', 'col-lg-12');
             detailPanel.setAttribute('class', 'hero-unit meta-data');
             detailPanel.style.display = 'none';
-            hideButton.style.display = 'none';
-            showButton.style.display = 'block';
-        }
-    }
-
-    function initMetadataVisibleFromLocalStorage(scope, key) {
-        var metadataVisible = localStorageService.get(STEP_METADATA_VISIBLE + key);
-        if (metadataVisible === 'true') {
-            scope.showingMetaData = true;
-        }
-        else if (metadataVisible === 'false') {
-            scope.showingMetaData = false;
-        } else {
-            // default
-            scope.showingMetaData = $window.innerWidth > 800;
         }
     }
 
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'views/showHideDetails.html',
-        link: function (scope, element, attributes ) {
-            var localStorageKey = attributes.showhidestoragekey;
-            if(localStorageKey === undefined) {
-                localStorageKey = 'all';
-            }
-            scope.localStorageKey = localStorageKey;
-            initMetadataVisibleFromLocalStorage(scope, localStorageKey);
-            toggleClassesOnPanels(element, scope.showingMetaData);
+        scope: {
+            linkingVariable: '='
         },
+        templateUrl: 'views/showHideDetails.html',
         controller: function($scope, $element) {
-            $scope.toggleShowingMetadata = function() {
-                $scope.showingMetaData = !$scope.showingMetaData;
-                localStorageService.set(STEP_METADATA_VISIBLE + $scope.localStorageKey, '' + $scope.showingMetaData);
-                toggleClassesOnPanels($element, $scope.showingMetaData);
-            };
+            $scope.$watch('linkingVariable', function() {
+                toggleClassesOnPanels($element, $scope.linkingVariable);
+            });
         }
     };
 

diff --git a/scenarioo-client/app/scripts/directives/showHideDetailsButton.js b/scenarioo-client/app/scripts/directives/showHideDetailsButton.js
@@ -0,0 +1,53 @@
+/* scenarioo-client
+ * Copyright (C) 2014, scenarioo.org Development Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+'use strict';
+
+angular.module('scenarioo.directives').directive('scShowHideDetailsButton', function($window, localStorageService) {
+
+    var STEP_METADATA_VISIBLE = 'scenarioo-metadataVisible-';
+    function initMetadataVisibleFromLocalStorage(scope, key) {
+        var metadataVisible = localStorageService.get(STEP_METADATA_VISIBLE + key);
+        if (metadataVisible === 'true') {
+            scope.linkingVariable = true;
+        }
+        else if (metadataVisible === 'false') {
+            scope.linkingVariable = false;
+        } else {
+            // default
+            scope.linkingVariable = $window.innerWidth > 800;
+        }
+    }
+
+    return {
+        restrict: 'E',
+        transclude: true,
+        scope: {
+            linkingVariable: '=',
+            localStorageKey: '@'
+        },
+        templateUrl: 'views/showHideDetailsButton.html',
+        controller: function($scope, $element) {
+            initMetadataVisibleFromLocalStorage($scope, $scope.localStorageKey);
+            $scope.toggleShowingMetadata = function() {
+                $scope.linkingVariable = !$scope.linkingVariable;
+                localStorageService.set(STEP_METADATA_VISIBLE + $scope.localStorageKey, '' + $scope.linkingVariable);
+            };
+        }
+    };
+
+});
diff --git a/scenarioo-client/app/views/mainUseCasesTab.html b/scenarioo-client/app/views/mainUseCasesTab.html
@@ -12,9 +12,11 @@
             </div>
         </div>
         <div class="col-lg-9">
+            <sc-show-hide-details-button linking-variable="mainShowMetadata" local-storage-key="main" ></sc-show-hide-details-button>
         </div>
     </div>
-    <sc-show-hide-details showHideStorageKey="main">
+
+    <sc-show-hide-details linking-variable="mainShowMetadata">
         <div>
             <!-- use cases table -->
             <table ng-table="tableParams" class="table table-curved table-hover table-responsive usecase-table"
@@ -43,12 +45,12 @@
         </div>
         <div>
             <!-- branch -->
-            <sc-collapsable-panel title="Branch" key="mainView-branch">
+            <sc-collapsable-panel title="Branch" key="mainView-branch" initially-expanded="true">
                 <sc-tree data='branchInformationTree'></sc-tree>
             </sc-collapsable-panel>
 
             <!-- build -->
-            <sc-collapsable-panel title="Build" key="mainView-build">
+            <sc-collapsable-panel title="Build" key="mainView-build" initially-expanded="true">
                 <sc-tree data='buildInformationTree'></sc-tree>
             </sc-collapsable-panel>
 

diff --git a/scenarioo-client/app/views/metadataButton.html b/scenarioo-client/app/views/metadataButton.html
diff --git a/scenarioo-client/app/views/scenario.html b/scenarioo-client/app/views/scenario.html
@@ -28,14 +28,18 @@ <h2 class="sc-pageTitle">{{scenario.description}}</h2>
         </div>
     </div>
     <div class="col-lg-9">
-        <div class="pull-right">
-            <button type="button" class="btn btn-default" id="expandAllPages" ng-show="isExpandAllPossible()" ng-click="expandAll()">expand all</button>
-            <button type="button" class="btn btn-default" id="collapseAllPages" ng-show="isCollapseAllPossible()" ng-click="collapseAll()">collapse all</button>
+        <div class="row pull-right">
+            <sc-show-hide-details-button class="col-lg-6 " linking-variable="scenarioShowMetadata" local-storage-key="scenario" ></sc-show-hide-details-button>
+            <div class="col-lg-6 pull-right">
+                <button type="button" class="btn btn-default" id="expandAllPages" ng-show="isExpandAllPossible()" ng-click="expandAll()">expand all</button>
+                <button type="button" class="btn btn-default" id="collapseAllPages" ng-show="isCollapseAllPossible()" ng-click="collapseAll()">collapse all</button>
+            </div>
+
         </div>
     </div>
 </div>
 
-<sc-show-hide-details showHideStorageKey="scenario">
+<sc-show-hide-details linking-variable="scenarioShowMetadata">
     <div>
         <!-- steps -->
         <div class="row step-view">

diff --git a/scenarioo-client/app/views/showHideDetails.html b/scenarioo-client/app/views/showHideDetails.html
@@ -1,13 +1 @@
-<!-- View Metadata toggle button -->
-<div class="row sc-space-top sc-space-bottom">
-    <div class="col-lg-12 ">
-        <div class="pull-right">
-            <div class="" ng-click="toggleShowingMetadata()">
-                <a id="sc-showHideDetailsButton-hide" class="btn btn-default" tooltip="Hide detailed data" tooltip-placement="bottom">Hide Meta Data</a>
-                <a id="sc-showHideDetailsButton-show"  class="btn btn-default" tooltip="Show detailed data" tooltip-placement="bottom">Show Meta Data</a>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div class="row" ng-transclude/>
diff --git a/scenarioo-client/app/views/showHideDetailsButton.html b/scenarioo-client/app/views/showHideDetailsButton.html
@@ -0,0 +1,9 @@
+<!-- View Metadata toggle button -->
+<div class="pull-right">
+    <div class="" ng-click="toggleShowingMetadata()">
+        <a id="sc-showHideDetailsButton-hide" ng-show="linkingVariable" class="btn btn-default"
+           tooltip="Hide detailed data" tooltip-placement="bottom">Hide Meta Data</a>
+        <a id="sc-showHideDetailsButton-show" ng-hide="linkingVariable" class="btn btn-default"
+           tooltip="Show detailed data" tooltip-placement="bottom">Show Meta Data</a>
+    </div>
+</div>
diff --git a/scenarioo-client/app/views/step.html b/scenarioo-client/app/views/step.html
@@ -72,10 +72,12 @@
             </div>
         </div>
     </div>
+    <div class="col-lg-4 pull-right">
+        <sc-show-hide-details-button linking-variable="stepShowMetadata" local-storage-key="step" ></sc-show-hide-details-button>
+    </div>
 </div>
-
 <!-- screenshot and information -->
-<sc-show-hide-details showHideStorageKey="step">
+<sc-show-hide-details linking-variable="stepShowMetadata">
     <div>
         <tabset class="step-panes">
             <tab heading="Screenshot">
@@ -89,7 +91,6 @@
             </tab>
         </tabset>
     </div>
-    <div ng-show="showingMetaData" class="col-lg-4 hero-unit meta-data">
 
     <div>
         <!-- step -->

diff --git a/scenarioo-client/app/views/usecase.html b/scenarioo-client/app/views/usecase.html
@@ -29,10 +29,11 @@ <h2 class="sc-pageTitle">{{useCase.description}}</h2>
         </div>
     </div>
     <div class="col-lg-9">
+        <sc-show-hide-details-button linking-variable="useCaseShowMetadata" local-storage-key="main" ></sc-show-hide-details-button>
     </div>
 </div>
 
-<sc-show-hide-details showHideStorageKey="usecase">
+<sc-show-hide-details linking-variable="useCaseShowMetadata">
     <div>
         <table class="table table-bordered scenario-table" sc-navigator-table="filtered">
             <thead>
@@ -71,11 +72,11 @@ <h2 class="sc-pageTitle">{{useCase.description}}</h2>
         </table>
     </div>
     <div>
-            <!-- usecase -->
-            <sc-collapsable-panel title="Use Case" key="useCaseView-useCase" initially-expanded="true">
-                <sc-tree data='usecaseInformationTree'></sc-tree>
-            </sc-collapsable-panel>
-            <!-- Metadata -->
-            <sc-metadata-tree metadata-tree="metadataTree"></sc-metadata-tree>
+        <!-- usecase -->
+        <sc-collapsable-panel title="Use Case" key="useCaseView-useCase" initially-expanded="true">
+            <sc-tree data='usecaseInformationTree'></sc-tree>
+        </sc-collapsable-panel>
+        <!-- Metadata -->
+        <sc-metadata-tree metadata-tree="metadataTree"></sc-metadata-tree>
     </div>
 </sc-show-hide-details>