Add collapsible-section directive

This should replace the awful toggleFieldset in the long run
pull/4623/head
Oliver Günther 8 years ago
parent a2bf291a7e
commit bdcd032bbe
  1. 27
      app/assets/stylesheets/content/_collapsible_section.sass
  2. 1
      app/assets/stylesheets/default.css.sass
  3. 35
      app/views/workflows/edit.html.erb
  4. 11
      frontend/app/components/common/collapsible-section/collapsible-section.directive.html
  5. 67
      frontend/app/components/common/collapsible-section/collapsible-section.directive.ts

@ -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

@ -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

@ -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 %>

@ -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>

@ -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);
Loading…
Cancel
Save