From bdcd032bbe1ce095f6e00231c92e9c8de88c6b84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 6 Jul 2016 09:00:05 +0200 Subject: [PATCH] Add collapsible-section directive This should replace the awful toggleFieldset in the long run --- .../content/_collapsible_section.sass | 27 ++++++++ app/assets/stylesheets/default.css.sass | 1 + app/views/workflows/edit.html.erb | 35 ++++------ .../collapsible-section.directive.html | 11 +++ .../collapsible-section.directive.ts | 67 +++++++++++++++++++ 5 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 app/assets/stylesheets/content/_collapsible_section.sass create mode 100644 frontend/app/components/common/collapsible-section/collapsible-section.directive.html create mode 100644 frontend/app/components/common/collapsible-section/collapsible-section.directive.ts diff --git a/app/assets/stylesheets/content/_collapsible_section.sass b/app/assets/stylesheets/content/_collapsible_section.sass new file mode 100644 index 0000000000..5f4cda6617 --- /dev/null +++ b/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 diff --git a/app/assets/stylesheets/default.css.sass b/app/assets/stylesheets/default.css.sass index 821e59ee4e..b62c8865b2 100644 --- a/app/assets/stylesheets/default.css.sass +++ b/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 diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb index ae4949796a..a0ca4fdbb3 100644 --- a/app/views/workflows/edit.html.erb +++ b/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' %> -
- - <%= l(:label_additional_workflow_transitions_for_author) %> - -
- <%= render partial: 'form', - locals: { name: 'author', workflows: @workflows['author'] } %> -
-
+ <% author_expanded = @workflows['author'].present? ? 'true' : '' %> + <% assignee_expanded = @workflows['assignee'].present? ? 'true' : '' %> + + + <%= render partial: 'form', locals: { name: 'author', workflows: @workflows['author'] } %> + + + + <%= render partial: 'form', locals: { name: 'assignee', workflows: @workflows['assignee'] } %> + -
- - <%= l(:label_additional_workflow_transitions_for_assignee) %> - -
- <%= render partial: 'form', - locals: { name: 'assignee', workflows: @workflows['assignee'] } %> -
-
<%= styled_button_tag l(:button_save), class: '-highlight -with-icon icon-checkmark' %> <% end %> <% end %> diff --git a/frontend/app/components/common/collapsible-section/collapsible-section.directive.html b/frontend/app/components/common/collapsible-section/collapsible-section.directive.html new file mode 100644 index 0000000000..9956cafa2d --- /dev/null +++ b/frontend/app/components/common/collapsible-section/collapsible-section.directive.html @@ -0,0 +1,11 @@ +
+ + + +
+ +
+
diff --git a/frontend/app/components/common/collapsible-section/collapsible-section.directive.ts b/frontend/app/components/common/collapsible-section/collapsible-section.directive.ts new file mode 100644 index 0000000000..0bf767dd1a --- /dev/null +++ b/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);