Add collapsible-section directive

This should replace the awful toggleFieldset in the long run

app/assets/stylesheets/content/_collapsible_section.sass

@@ -0,0 +1,27 @@
+.collapsible-section
+  margin: 2rem 0
+
+.collapsible-section--legend
+  &:before
+    @include icon-common
+    @extend .icon-arrow-down1:before
+    font-size: 0.75rem
+    padding:   0.625rem 0.25rem 0 0.25rem
+
+    .collapsible-section.-expanded &
+      @extend .icon-arrow-up1:before
+
+.collapsible-section--toggle-link
+  @include without-link-styling
+  display: block
+  cursor: pointer
+  color: $body-font-color
+  font-size: 1rem
+  font-weight: bold
+  line-height: 1.8
+  text-transform: uppercase
+  border-bottom: 1px solid $gray
+
+  &:hover
+    color: $content-link-color
+    text-decoration: none

app/assets/stylesheets/default.css.sass

@@ -51,6 +51,7 @@
 @import content/forms
 @import content/forms_mobile
 @import content/choice
+@import content/collapsible_section
 @import content/copy_to_clipboard
 @import content/ui_select
 @import content/notifications

app/views/workflows/edit.html.erb

@@ -69,28 +69,21 @@ See doc/COPYRIGHT.rdoc for more details.
       <%= render partial: 'form',
                  locals: { name: 'always', workflows: @workflows['always'] } %>
 
-      <% author_expanded = @workflows['author'].present? ? '' : 'collapsed' %>
-      <% assignee_expanded = @workflows['assignee'].present? ? '' : 'collapsed' %>
-      <fieldset class="form--fieldset -collapsible <%= author_expanded %>"
-                style="margin-top: 0.5em;">
-        <legend class="form--fieldset-legend" onclick="toggleFieldset(this);">
-          <a href="javascript:"><%= l(:label_additional_workflow_transitions_for_author) %></a>
-        </legend>
-        <div id="author_workflows" style="margin: 0.5em 0 0.5em 0;">
-          <%= render partial: 'form',
-                     locals: { name: 'author', workflows: @workflows['author'] } %>
-        </div>
-      </fieldset>
+      <% author_expanded = @workflows['author'].present? ? 'true' : '' %>
+      <% assignee_expanded = @workflows['assignee'].present? ? 'true' : '' %>
+       
+      <collapsible-section initially-expanded="<%= author_expanded %>"
+                           id="author_workflows"
+                           section-title="<%= t(:label_additional_workflow_transitions_for_author) %>">
+        <%= render partial: 'form', locals: { name: 'author', workflows: @workflows['author'] } %>
+      </collapsible-section>
+
+      <collapsible-section initially-expanded="<%= assignee_expanded %>"
+                           id="assignee_workflows"
+                           section-title="<%= t(:label_additional_workflow_transitions_for_assignee) %>">
+        <%= render partial: 'form', locals: { name: 'assignee', workflows: @workflows['assignee'] } %>
+      </collapsible-section>
 
-      <fieldset class="form--fieldset -collapsible <%= assignee_expanded %>">
-        <legend class="form--fieldset-legend" onclick="toggleFieldset(this);">
-          <a href="javascript:"><%= l(:label_additional_workflow_transitions_for_assignee) %></a>
-        </legend>
-        <div id="assignee_workflows" style="margin: 0.5em 0 0.5em 0;">
-          <%= render partial: 'form',
-                     locals: { name: 'assignee', workflows: @workflows['assignee'] } %>
-        </div>
-      </fieldset>
       <%= styled_button_tag l(:button_save), class: '-highlight -with-icon icon-checkmark' %>
     <% end %>
 <% end %>

frontend/app/components/common/collapsible-section/collapsible-section.directive.html

@@ -0,0 +1,11 @@
+<section class="collapsible-section" ng-class="{ '-expanded': $ctrl.expanded }">
+  <accessible-by-keyboard execute="$ctrl.toggle()"
+                          aria-label="{{ ::$ctrl.sectionTitle }}"
+                          link-class="collapsible-section--toggle-link"
+                          span-class="collapsible-section--legend">
+    <span ng-bind="::$ctrl.sectionTitle"></span>
+  </accessible-by-keyboard>
+  <div class="collapsible-section--body toggle-slide-animation" ng-show="$ctrl.expanded">
+    <ng-transclude></ng-transclude>
+  </div>
+</section>

frontend/app/components/common/collapsible-section/collapsible-section.directive.ts

@@ -0,0 +1,67 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 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.
+// ++
+
+import {wpDirectivesModule} from "../../../angular-modules";
+
+export class CollapsibleSectionController {
+  public text:any;
+  public expanded:boolean = false;
+  public sectionTitle:string;
+
+  constructor(public $scope:ng.IScope,
+              public $attrs:ng.IAttributes) {
+
+
+    if ($attrs['initiallyExpanded']) {
+      this.expanded = true;
+    }
+  }
+
+  public toggle() {
+    this.expanded = !this.expanded;
+  }
+}
+
+function CollapsibleSection() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    templateUrl: '/components/common/collapsible-section/collapsible-section.directive.html',
+
+    scope: {
+      sectionTitle: '@'
+    },
+
+    bindToController: true,
+    controller: CollapsibleSectionController,
+    controllerAs: '$ctrl'
+  };
+}
+
+wpDirectivesModule.directive('collapsibleSection', CollapsibleSection);