Add a partial directive to render panel expanders

app/assets/javascripts/angular/openproject-app.js

@@ -67,6 +67,7 @@ angular.module('openproject.workPackages', [
   'openproject.workPackages.controllers',
   'openproject.workPackages.filters',
   'openproject.workPackages.directives',
+  'openproject.workPackages.tabs',
   'openproject.uiComponents',
   'ng-context-menu'
 ]);
@@ -92,6 +93,7 @@ angular.module('openproject.workPackages.directives', [
   'openproject.services',
   'openproject.workPackages.services'
 ]);
+angular.module('openproject.workPackages.tabs', []);
 
 // messages
 angular.module('openproject.messages', ['openproject.messages.controllers']);

app/assets/javascripts/angular/work_packages/tabs/panel-expander-directive.js

@@ -0,0 +1,42 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject 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 2
+// 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, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+angular.module('openproject.workPackages.tabs')
+
+.directive('panelExpander', [function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    templateUrl: '/templates/work_packages/tabs/panel_expander.html',
+    scope: {
+      collapsed: '=',
+      expandText: '@',
+      collapseText: '@'
+    }
+  };
+}]);

app/assets/stylesheets/layout/_split_view.sass

@@ -76,11 +76,9 @@ div
     background: #fff598
   &.panel-toggler
     float: left
-    margin: 5px 0 0 0
     width: 100%
     color: #777777
     fieldset
-      margin: 10px 0 0 0
       border-top: 1px solid #ddd
       border-left: 0px
       border-right: 0px

public/templates/tabs/overview.html

@@ -4,22 +4,12 @@
   <div class="detail-panel-description-content">
     {{ workPackage.props.description }}
   </div>
+  <panel-expander collapsed="toggleStates.hideFullDescription"
+                  expand-text="Show full description"
+                  collapse-text="Hide full description">
+  </panel-expander>
 </div>
 
-<div class="panel-toggler" ng-click="toggleStates.hideFullDescription = !toggleStates.hideFullDescription">
-  <fieldset>
-    <legend align="center">
-      <span ng-if="!toggleStates.hideFullDescription">
-        <i class="icon-arrow-right5-3"></i>
-        Hide full description
-      </span>
-      <span ng-if="toggleStates.hideFullDescription">
-        <i class="icon-arrow-right5-2"></i>
-        Show full description
-      </span>
-    </legend>
-  </fieldset>
-</div>
 
 <div class="detail-panel-attributes">
   <!-- present attributes -->
@@ -51,23 +41,11 @@
         <span> - </span>
       </li>
   </ul>
-  <div class="panel-toggler"
-       ng-if="emptyWorkPackageProperties.length"
-       ng-click="toggleStates.hideAllAttributes = !toggleStates.hideAllAttributes">
-    <fieldset>
-      <legend align="center">
-        <span ng-if="!toggleStates.hideAllAttributes">
-          <i class="icon-arrow-right5-3"></i>
-          Hide empty attributes
-        </span>
-        <span ng-if="toggleStates.hideAllAttributes">
-          <i class="icon-arrow-right5-2"></i>
-          Show all attributes
-        </span>
-      </legend>
-    </fieldset>
-  </div>
-
+  <panel-expander ng-if="emptyWorkPackageProperties.length"
+                  collapsed="toggleStates.hideAllAttributes"
+                  expand-text="Show all attributes"
+                  collapse-text="Hide empty attributes">
+  </panel-expander>
 </div>
 
 

public/templates/work_packages/tabs/panel_expander.html

@@ -0,0 +1,15 @@
+<div class="panel-toggler"
+     ng-click="collapsed = !collapsed">
+  <fieldset>
+    <legend align="center">
+      <span ng-if="!collapsed">
+        <i class="icon-arrow-right5-3"></i>
+        <span ng-bind="collapseText"/>
+      </span>
+      <span ng-if="collapsed">
+        <i class="icon-arrow-right5-2"></i>
+        <span ng-bind="expandText"/>
+      </span>
+    </legend>
+  </fieldset>
+</div>