Skip to content

Commit

Permalink
#220 added directive for hiding and showing details
Browse files Browse the repository at this point in the history
  • Loading branch information
forkch committed Jul 23, 2014
1 parent 52617ae commit cf397b8
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 20 deletions.
1 change: 1 addition & 0 deletions scenarioo-client/app/index.html
Expand Up @@ -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/showHideDetails.js"></script>
<script src="scripts/controllers/navigation.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/mainUseCasesTab.js"></script>
Expand Down
68 changes: 68 additions & 0 deletions scenarioo-client/app/scripts/directives/showHideDetails.js
@@ -0,0 +1,68 @@
/* 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('scShowHideDetails', function(localStorageService) {

var STEP_METADATA_VISIBLE = 'scenarioo-stepMetadataVisible';
function toggleClassesOnPanels(elem, showingMetaData) {
console.log(showingMetaData);
var childs = elem.children();
var buttonPanel = childs[0];
var hideButton = buttonPanel.querySelector('#sc-showHideDetailsButton-hide');
var showButton = buttonPanel.querySelector('#sc-showHideDetailsButton-show');
var panel = childs[1];
var panelChildren = panel.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";
}
}
return {
restrict: 'E',
transclude: true,
templateUrl: 'views/showHideDetails.html',
link: function (scope, element, attributes ) {
var showingMetaData = localStorageService.get(STEP_METADATA_VISIBLE);
toggleClassesOnPanels(element, showingMetaData === 'true');
},
controller: function($scope, $element) {

$scope.showingMetaData = localStorageService.get(STEP_METADATA_VISIBLE) === 'true';
$scope.toggleShowingMetadata = function() {
$scope.showingMetaData = !$scope.showingMetaData;
localStorageService.set(STEP_METADATA_VISIBLE, '' + $scope.showingMetaData);
toggleClassesOnPanels($element, $scope.showingMetaData);
};


}
};

});
11 changes: 4 additions & 7 deletions scenarioo-client/app/views/scenario.html
Expand Up @@ -30,13 +30,12 @@
<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>
<span sc-static-include="views/metadataButton.html"></span>
</div>
</div>
</div>

<div class="row step-main">
<div ng-class="{true: 'step-data-small col-lg-8', false: 'step-data-large col-lg-12'}[showingMetaData]">
<sc-show-hide-details>
<div>
<!-- steps -->
<div class="row step-view">
<div ng-repeat="page in pagesAndSteps">
Expand Down Expand Up @@ -68,7 +67,7 @@ <h3 class="sc-truncate"><a ng-href="{{getLinkToStep(step.page.name, $parent.$ind
</div>
</div>
</div>
<div ng-show="showingMetaData" class="col-lg-4 hero-unit meta-data">
<div>

<!-- scenario -->
<div>
Expand All @@ -85,6 +84,4 @@ <h3 class="panel-title">Scenario</h3>
<!-- Metadata -->
<span sc-static-include="views/metadata.html"></span>
</div>
</div>
</div>

</sc-show-hide-details>
13 changes: 13 additions & 0 deletions scenarioo-client/app/views/showHideDetails.html
@@ -0,0 +1,13 @@
<!-- 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/>
17 changes: 4 additions & 13 deletions scenarioo-client/app/views/step.html
Expand Up @@ -73,20 +73,11 @@
</div>
</div>


<!-- View Metadata toggle button -->
<div class="col-lg-offset-2 col-lg-2">
<div class="pull-right">
<span sc-static-include="views/metadataButton.html"></span>
</div>
</div>


</div>

<!-- screenshot and information -->
<div class="row step-main">
<div ng-class="{true: 'step-data-small col-lg-8', false: 'step-data-large col-lg-12'}[showingMetaData]">
<sc-show-hide-details>
<div>
<tabset class="step-panes">
<tab heading="Screenshot">
<div class="sc-screenshot-border">
Expand All @@ -99,7 +90,7 @@
</tab>
</tabset>
</div>
<div ng-show="showingMetaData" class="col-lg-4 hero-unit meta-data">
<div>

<!-- step -->
<div>
Expand All @@ -117,4 +108,4 @@ <h3 class="panel-title">Step</h3>
<span sc-static-include="views/metadata.html"></span>

</div>
</div>
</sc-show-hide-details>

0 comments on commit cf397b8

Please sign in to comment.