Skip to content

Commit

Permalink
#220 collapsable panel directive
Browse files Browse the repository at this point in the history
  • Loading branch information
forkch committed Jul 26, 2014
1 parent fa67724 commit 029699d
Show file tree
Hide file tree
Showing 10 changed files with 89 additions and 67 deletions.
1 change: 1 addition & 0 deletions scenarioo-client/app/index.html
Expand Up @@ -97,6 +97,7 @@
<script src="scripts/directives/navigatorTable.js"></script>
<script src="scripts/directives/showHideDetails.js"></script>
<script src="scripts/directives/metaDataTree.js"></script>
<script src="scripts/directives/collapsablePanel.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
52 changes: 52 additions & 0 deletions scenarioo-client/app/scripts/directives/collapsablePanel.js
@@ -0,0 +1,52 @@
/* 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('scCollapsablePanel', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: 'views/collapsablePanel.html',
scope: { title: "@", key: "@" },
link: function (scope, element, attributes ) {

},
controller: function($scope, localStorageService) {
var MAIN_METADATA_SECTION_EXPANDED = 'scenarioo-panelExpanded-';

$scope.isMetadataExpanded = function (type) {
var metadataExpanded = localStorageService.get(MAIN_METADATA_SECTION_EXPANDED + type);
if (metadataExpanded === 'true') {
return true;
} else {
return false;
}
};

$scope.toggleMetadataExpanded = function (type) {
var metadataExpanded = !$scope.isMetadataExpanded(type);
localStorageService.set(MAIN_METADATA_SECTION_EXPANDED + type, '' + metadataExpanded);
};

$scope.isMetadataCollapsed = function (type) {
return !$scope.isMetadataExpanded(type);
};

}
};
});
1 change: 0 additions & 1 deletion scenarioo-client/app/scripts/directives/metaDataTree.js
Expand Up @@ -25,5 +25,4 @@ angular.module('scenarioo.directives').directive('scMetadataTree', function() {
metadataTree: '='
}
};

});
2 changes: 1 addition & 1 deletion scenarioo-client/app/scripts/directives/showHideDetails.js
Expand Up @@ -62,7 +62,7 @@ angular.module('scenarioo.directives').directive('scShowHideDetails', function($
transclude: true,
templateUrl: 'views/showHideDetails.html',
link: function (scope, element, attributes ) {
var localStorageKey = attributes.scShowhidestoragekey;
var localStorageKey = attributes['showhidestoragekey'];
if(localStorageKey == undefined) {
localStorageKey = 'all';
}
Expand Down
10 changes: 10 additions & 0 deletions scenarioo-client/app/views/collapsablePanel.html
@@ -0,0 +1,10 @@
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded(key)">
<h3 class="panel-title">{{title}}</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed(key), metadata: true}">
<div ng-transclude></div>
</div>
</div>
</div>
29 changes: 8 additions & 21 deletions scenarioo-client/app/views/mainUseCasesTab.html
Expand Up @@ -14,7 +14,7 @@
<div class="col-lg-9">
</div>
</div>
<sc-show-hide-details sc-showHideStorageKey="main">
<sc-show-hide-details showHideStorageKey="main">
<div>
<!-- use cases table -->
<table ng-table="tableParams" class="table table-curved table-hover table-responsive usecase-table"
Expand Down Expand Up @@ -43,27 +43,14 @@
</div>
<div>
<!-- branch -->
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded('sc-branch-properties')">
<h3 class="panel-title">Branch</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed('sc-branch-properties'), metadata: true}">
<sc-tree data='branchInformationTree'></sc-tree>
</div>
</div>
</div>
<sc-collapsable-panel title="Branch" key="mainView-branch">
<sc-tree data='branchInformationTree'></sc-tree>
</sc-collapsable-panel>

<!-- build -->
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded('sc-build-properties')">
<h3 class="panel-title">Build</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed('sc-build-properties'), metadata: true}">
<sc-tree data='buildInformationTree'></sc-tree>
</div>
</div>
</div>
<sc-collapsable-panel title="Build" key="mainView-build">
<sc-tree data='buildInformationTree'></sc-tree>
</sc-collapsable-panel>

<sc-metadata-tree metadata-tree="metadataTreeBranches"></sc-metadata-tree>
<sc-metadata-tree metadata-tree="metadataTreeBuilds"></sc-metadata-tree>
Expand Down
11 changes: 3 additions & 8 deletions scenarioo-client/app/views/metadata.html
@@ -1,10 +1,5 @@
<div ng-repeat="(key,value) in metadataTree">
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded(key)">
<h3 class="panel-title">{{key}}</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed(key), metadata: true}">
<sc-tree data='value'></sc-tree>
</div>
</div>
<sc-collapsable-panel title="{{key}}" key="{{key}}">
<sc-tree data='value'></sc-tree>
</sc-collapsable-panel>
</div>
15 changes: 4 additions & 11 deletions scenarioo-client/app/views/scenario.html
Expand Up @@ -34,7 +34,7 @@
</div>
</div>

<sc-show-hide-details sc-showHideStorageKey="scenario">
<sc-show-hide-details showHideStorageKey="scenario">
<div>
<!-- steps -->
<div class="row step-view">
Expand Down Expand Up @@ -70,16 +70,9 @@ <h3 class="sc-truncate"><a ng-href="{{getLinkToStep(step.page.name, $parent.$ind
<div>

<!-- scenario -->
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded('sc-scenario-properties')">
<h3 class="panel-title">Scenario</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed('sc-scenario-properties'), metadata: true}">
<sc-tree data='scenarioInformationTree'></sc-tree>
</div>
</div>
</div>
<sc-collapsable-panel title="Scenario" key="scenarioView-scenario">
<sc-tree data='scenarioInformationTree'></sc-tree>
</sc-collapsable-panel>

<!-- Metadata -->
<sc-metadata-tree metadata-tree="metadataTree"></sc-metadata-tree>
Expand Down
19 changes: 6 additions & 13 deletions scenarioo-client/app/views/step.html
Expand Up @@ -76,7 +76,7 @@
</div>

<!-- screenshot and information -->
<sc-show-hide-details sc-showHideStorageKey="step">
<sc-show-hide-details showHideStorageKey="step">
<div>
<tabset class="step-panes">
<tab heading="Screenshot">
Expand All @@ -90,22 +90,15 @@
</tab>
</tabset>
</div>
<div>

<div>
<!-- step -->
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded('sc-step-properties')">
<h3 class="panel-title">Step</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed('sc-step-properties'), metadata: true}">
<sc-tree data='stepInformationTree'></sc-tree>
</div>
</div>
</div>

<sc-collapsable-panel title="Step" key="stepView-step">
<sc-tree data='stepInformationTree'></sc-tree>
</sc-collapsable-panel>

<!-- meta info -->
<sc-metadata-tree metadata-tree="metadataTree"></sc-metadata-tree>

</div>
</sc-show-hide-details>
16 changes: 4 additions & 12 deletions scenarioo-client/app/views/usecase.html
Expand Up @@ -30,7 +30,7 @@
</div>
</div>

<sc-show-hide-details sc-showHideStorageKey="usecase">
<sc-show-hide-details showHideStorageKey="usecase">
<div>
<table class="table table-bordered scenario-table" sc-navigator-table="filtered" >
<thead>
Expand Down Expand Up @@ -62,17 +62,9 @@
</div>
<div>
<!-- usecase -->
<div>
<div class="panel panel-default">
<div class="panel-heading link" ng-click="toggleMetadataExpanded('sc-usecase-properties')">
<h3 class="panel-title">Use Case</h3>
</div>
<div class="panel-body" ng-class="{hidden: isMetadataCollapsed('sc-usecase-properties'), metadata: true}">
<sc-tree data='usecaseInformationTree'></sc-tree>
</div>
</div>
</div>

<sc-collapsable-panel title="Use Case" key="useCaseView-useCase">
<sc-tree data='usecaseInformationTree'></sc-tree>
</sc-collapsable-panel>
<!-- Metadata -->
<sc-metadata-tree metadata-tree="metadataTree"></sc-metadata-tree>
</div>
Expand Down

0 comments on commit 029699d

Please sign in to comment.