Merge branch 'release/4.2' into fix/specify_watchers_link

Conflicts:
	doc/apiv3-documentation.apib
pull/2345/head
Jan Sandbrink 10 years ago
commit d3fe5ea094
  1. 2
      .buildpacks
  2. 10
      .editorconfig
  3. 37
      .env.sample
  4. 7
      .gitignore
  5. 2
      .hound.yml
  6. 7
      .pkgr.yml
  7. 2
      .rubocop.yml
  8. 6
      .simplecov
  9. 23
      .travis.yml
  10. 13
      CODE_OF_CONDUCT.md
  11. 104
      CONTRIBUTING.md
  12. 77
      Gemfile
  13. 266
      Gemfile.lock
  14. 16
      README.md
  15. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.eot
  16. 5
      app/assets/fonts/openproject_icon/openproject-icon-font.svg
  17. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.ttf
  18. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.woff
  19. BIN
      app/assets/images/jquery-ui/ui-icons_222222_256x240.png
  20. BIN
      app/assets/images/jquery-ui/ui-icons_2e83ff_256x240.png
  21. BIN
      app/assets/images/jquery-ui/ui-icons_454545_256x240.png
  22. BIN
      app/assets/images/jquery-ui/ui-icons_888888_256x240.png
  23. BIN
      app/assets/images/jquery-ui/ui-icons_cd0a0a_256x240.png
  24. BIN
      app/assets/images/select2/select2-spinner.gif
  25. BIN
      app/assets/images/styleguide/logo_openproject.png
  26. 2
      app/assets/javascripts/action_menu.js
  27. 160
      app/assets/javascripts/application.js.erb
  28. 2
      app/assets/javascripts/autocompleter.js
  29. 54
      app/assets/javascripts/colors.js
  30. 129
      app/assets/javascripts/custom-fields.js
  31. 53
      app/assets/javascripts/date-range.js
  32. 6
      app/assets/javascripts/jstoolbar/jstoolbar.js
  33. 196
      app/assets/javascripts/keyboard_shortcuts.js
  34. 2
      app/assets/javascripts/members_select_boxes.js
  35. 22
      app/assets/javascripts/search.js
  36. 2
      app/assets/javascripts/specific/toggable_fieldset.js
  37. 46
      app/assets/javascripts/timelines_select_boxes.js
  38. 4
      app/assets/javascripts/top_menu.js
  39. 25
      app/assets/javascripts/work_packages.js.erb
  40. 150
      app/assets/stylesheets/_jstoolbar.sass
  41. 731
      app/assets/stylesheets/_misc_legacy.sass
  42. 613
      app/assets/stylesheets/_settings.scss
  43. 8
      app/assets/stylesheets/_typography.md
  44. 10
      app/assets/stylesheets/_typography.sass
  45. 29
      app/assets/stylesheets/coderay.css
  46. 21
      app/assets/stylesheets/content/_accounts.md
  47. 43
      app/assets/stylesheets/content/_accounts.sass
  48. 5
      app/assets/stylesheets/content/_action_menu_main.sass
  49. 343
      app/assets/stylesheets/content/_advanced_filters.md
  50. 129
      app/assets/stylesheets/content/_advanced_filters.sass
  51. 13
      app/assets/stylesheets/content/_ajax_indicator.sass
  52. 108
      app/assets/stylesheets/content/_attributes_group.md
  53. 74
      app/assets/stylesheets/content/_attributes_group.sass
  54. 50
      app/assets/stylesheets/content/_attributes_key_value.md
  55. 32
      app/assets/stylesheets/content/_attributes_key_value.sass
  56. 35
      app/assets/stylesheets/content/_attributes_table.md
  57. 57
      app/assets/stylesheets/content/_attributes_table.sass
  58. 0
      app/assets/stylesheets/content/_autocomplete.sass
  59. 13
      app/assets/stylesheets/content/_badges.md
  60. 13
      app/assets/stylesheets/content/_badges.sass
  61. 2
      app/assets/stylesheets/content/_boxes.md
  62. 24
      app/assets/stylesheets/content/_boxes.sass
  63. 132
      app/assets/stylesheets/content/_buttons.md
  64. 113
      app/assets/stylesheets/content/_buttons.sass
  65. 24
      app/assets/stylesheets/content/_calendar.sass
  66. 48
      app/assets/stylesheets/content/_choice.md
  67. 54
      app/assets/stylesheets/content/_choice.sass
  68. 4
      app/assets/stylesheets/content/_components_add_comments_default.sass
  69. 4
      app/assets/stylesheets/content/_context_menu.sass
  70. 18
      app/assets/stylesheets/content/_datepicker.md
  71. 172
      app/assets/stylesheets/content/_datepicker.sass
  72. 0
      app/assets/stylesheets/content/_diff.sass
  73. 12
      app/assets/stylesheets/content/_expandable_group_content.sass
  74. 14
      app/assets/stylesheets/content/_flash_messages.sass
  75. 18
      app/assets/stylesheets/content/_form_elements_input_textarea.md
  76. 0
      app/assets/stylesheets/content/_form_error_messages.sass
  77. 1201
      app/assets/stylesheets/content/_forms.md
  78. 578
      app/assets/stylesheets/content/_forms.sass
  79. 12
      app/assets/stylesheets/content/_grid_table.sass
  80. 14
      app/assets/stylesheets/content/_headings.md
  81. 25
      app/assets/stylesheets/content/_headings.sass
  82. 55
      app/assets/stylesheets/content/_icon_control.md
  83. 52
      app/assets/stylesheets/content/_icon_control.sass
  84. 310
      app/assets/stylesheets/content/_in_place_editing.md
  85. 420
      app/assets/stylesheets/content/_in_place_editing.sass
  86. 10
      app/assets/stylesheets/content/_journal.sass
  87. 1
      app/assets/stylesheets/content/_jquery_ui.md
  88. 431
      app/assets/stylesheets/content/_jquery_ui.scss
  89. 28
      app/assets/stylesheets/content/_legacy_actions.sass
  90. 18
      app/assets/stylesheets/content/_legacy_pagination.md
  91. 60
      app/assets/stylesheets/content/_legacy_pagination.sass
  92. 12
      app/assets/stylesheets/content/_links.sass
  93. 45
      app/assets/stylesheets/content/_modal.sass
  94. 21
      app/assets/stylesheets/content/_my_page.sass
  95. 13
      app/assets/stylesheets/content/_news.md
  96. 52
      app/assets/stylesheets/content/_news.sass
  97. 49
      app/assets/stylesheets/content/_notifications.md
  98. 60
      app/assets/stylesheets/content/_notifications.sass
  99. 18
      app/assets/stylesheets/content/_pagination.sass
  100. 16
      app/assets/stylesheets/content/_preview.md
  101. Some files were not shown because too many files have changed in this diff Show More

@ -1,2 +1,2 @@
https://github.com/heroku/heroku-buildpack-nodejs.git#v58
https://github.com/heroku/heroku-buildpack-nodejs.git#v71
https://github.com/pkgr/heroku-buildpack-ruby.git#universal

@ -0,0 +1,10 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.{js,rb}]
charset = utf-8
indent_style = space
indent_size = 2

@ -0,0 +1,37 @@
#-- 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.
#++
# If you place a .env file into the root directory of OpenProject
# you can override some default settings that foreman will use
# to start OpenProject
# override the default bind address
HOST=0.0.0.0
# override the default port
PORT=1337

7
.gitignore vendored

@ -37,8 +37,12 @@
# Ignore all logfiles and tempfiles.
/log/*.log
/npm-debug.log
/tmp
# Ignore RubyMine files
/.idea
/backup
/.project
/.loadpath
@ -64,16 +68,15 @@
/tmp/sessions/*
/tmp/sockets/*
/tmp/test/*
/vendor/rails
/*.rbc
/doc/app
#/Gemfile.lock
/Gemfile.local
/Gemfile.plugins
/.rvmrc*
/.ruby-version
/.ruby-gemset
/.foreman
/.env
# coverage in plugins
/lib/plugins/*/coverage

@ -3,4 +3,4 @@ ruby:
config_file: .rubocop.yml
java_script:
enabled: true
config_file: .jshintrc
config_file: ./frontend/.jshintrc

@ -5,6 +5,8 @@ targets:
build_dependencies:
- libmagickwand-dev
- libsqlite3-dev
debian-8:
<<: *debian
ubuntu-14.04:
<<: *debian
fedora-20: &redhat
@ -12,13 +14,16 @@ targets:
- ImageMagick-devel
centos-6:
<<: *redhat
sles-12:
build_dependencies:
- ImageMagick-devel
before_precompile: "packaging/setup"
crons:
- packaging/cron/openproject-clear-old-sessions
- packaging/cron/openproject-create-svn-repositories
services:
- postgres
installer: https://github.com/pkgr/installer.git#master
installer: https://github.com/pkgr/installer.git
wizards:
- https://github.com/pkgr/addon-legacy-installer.git
- https://github.com/pkgr/addon-mysql.git

@ -125,7 +125,7 @@ LineEndConcatenation:
Enabled: false
LineLength:
Max: 99
Max: 100
MethodLength:
Enabled: false

@ -0,0 +1,6 @@
SimpleCov.start :rails
if ENV['CI'] == 'true'
require 'codecov'
SimpleCov.formatter = SimpleCov::Formatter::Codecov
end

@ -39,37 +39,30 @@ cache:
- frontend/node_modules
- frontend/bower_components
branches:
only:
- dev
- stable
- release/3.0
- release/4.0
env:
global:
- CI=true
- RAILS_ENV=test
- BUNDLE_WITHOUT=rmagick:development
- BUNDLE_WITHOUT=development
matrix:
# Frontend
- "TEST_SUITE=karma"
- "TEST_SUITE=protractor"
# mysql2
- "TEST_SUITE=cucumber DB=mysql2"
- "TEST_SUITE=test DB=mysql2"
- "TEST_SUITE=spec DB=mysql2"
- "TEST_SUITE=cucumber DB=mysql2"
- "TEST_SUITE=spec:core DB=mysql2"
- "TEST_SUITE=spec:legacy DB=mysql2"
# postgres
- "TEST_SUITE=cucumber DB=postgres"
- "TEST_SUITE=test DB=postgres"
- "TEST_SUITE=spec DB=postgres"
- "TEST_SUITE=cucumber DB=postgres"
- "TEST_SUITE=spec:core DB=postgres"
- "TEST_SUITE=spec:legacy DB=postgres"
before_install:
- "echo `firefox -v`"
- "export DISPLAY=:99.0"
- "/sbin/start-stop-daemon --start -v --pidfile ./tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1920x1080x16"
- "echo `xdpyinfo -display :99 | grep 'dimensions' | awk '{ print $2 }'`"
- "nvm use 0.10"
- "nvm install 0.10 && nvm use 0.10"
- "cd frontend && travis_retry npm install && cd .."
before_script:

@ -0,0 +1,13 @@
### Contributor Code of Conduct
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/). By participating in this project you agree to abide by its terms.

@ -1,7 +1,99 @@
OpenProject is an open source project and we encourage you to help us out. We'd be happy if you do one of these things:
OpenProject is an open source project and we encourage you to help us out. For contributing to OpenProject, please read the following guidelines.
* Create a [new work package on openproject.org](https://www.openproject.org/projects/openproject/work_packages) if you find a bug or need a feature
* Help out other people on our [forums](https://www.openproject.org/projects/openproject/boards)
* Help us [translate OpenProject to more languages](https://www.openproject.org/projects/openproject/wiki/Translations)
* Contribute code via GitHub Pull Requests, see our [contribution page](https://www.openproject.org/projects/openproject/wiki/Contribution) for more information
* See [Git Flow](https://www.openproject.org/projects/openproject/wiki/Git_Branching_Model)
*Please also note that these rules should be acknowledged by everyone, but repository contributors might occasionally deviate from them for practical purposes, e.g. not fork the repo, but have a branch on the main repository. This should however stay an exception.*
## Contributors License Agreement
External contributors have to sign a CLA before contributing to OpenProject.
The [CLA can be found here](https://www.openproject.org/wp-content/uploads/2014/09/OPF-Contributor-License-Agreement_v.2.pdf) and has to be filled out and sent to cla@openproject.org. Additionally, a GPG signature has to be provided.
## Development flow
For contributing source code, please follow the git workflow below:
- **Fork** OpenProject on GitHub
- Clone your fork to your development machine:
```
git clone git@github.com/<username>/openproject
```
- Optional: Add the original OpenProject repository as a remote, so you can fetch changes:
```
git remote add upstream git@github.com:opf/openproject
```
- Make sure you're on the right branch. The main development branch is `dev`:
```
git checkout dev
```
- Create a feature branch:
```
git checkout -b feature/<short description of your feature>
```
- Make your changes, then push the branch into your ***own*** repository:
```
git push origin <your feature branch>
```
- Create a pull request against a branch of of the <opf/openproject> repository, containing a ***clear description*** of what the pull request attempts to change and/or fix.
If your pull request **does not contain a description** for what it does and what it's intentions are, we will reject it. If you are working on a specific work package from the [list](https://community.openproject.org/projects/openproject/work_packages?query_props=%7B%22c%22:%5B%22type%22,%22status%22,%22subject%22,%22assigned_to%22%5D,%22t%22:%22parent:desc%22,%22f%22:%5B%7B%22n%22:%22status_id%22,%22o%22:%22!%22,%22t%22:%22list_status%22,%22v%22:%5B%2217%22,%2223%22,%223%22,%2214%22,%226%22%5D%7D%5D,%22pa%22:1,%22pp%22:20%7D), you may include a link to that work package in the description, so we can track your work.
We will then review your pull request. Please note that you can add commits after the pull request has been created by pushing to the branch in your fork.
## Important notes
To ensure a smooth workflow for everyone, please take note of the following:
### Testing
Please add tests to your code to verify functionality, especially if it is a new feature.
Pull requests will be verified by TravisCI as well, but please run them locally as well and make sure they are green before creating your pull request. We have a lot of pull requests coming in and it takes some time to run the complete suite for each one.
### Branching model
The main development branch for upcoming releases is `dev`. If in doubt, create your pull request against `dev`. All new features, gem updates and bugfixes for the upcoming release should go into the `dev` branch.
#### Bugs and hotfixes
Bugfixes for one of the actively supported versions of OpenProject should be issued against the respective branch. A fix for the current version (called "Hotfix" and the branch ideally being named `hotfix/XYZ`) should target `release/*` and a fix for the former version (called "Backport" and the branch ideally being named `backport/XYZ`) should target `backport/*`. We will try to merge hotfixes into dev branch but if that is no trivial task, we might ask you to create another PR for that.
#### Travis CI
If you push to your branch in quick sucession, please consider stopping the associated Travis builds, as Travis will run for each commit. This is especially true if you force push to the branch.
Please also use `[ci skip]` in your commit message to suppress builds which are not necessary (e.g. after fixing a typo in the `README`).
### Inactive pull requests
We want to keep the Pull request list as cleaned up as possible - we will aim close pull requests after an **inactivity period of 72 hours** (no comments, no further pushes) which are not labelled as `work in progress` by us.
### Issue tracking and coordination
We use OpenProject for development coordination - please have a look at [the work packages list](https://community.openproject.org/projects/openproject/work_packages?query_props=%7B%22c%22:%5B%22type%22,%22status%22,%22subject%22,%22assigned_to%22%5D,%22t%22:%22parent:desc%22,%22f%22:%5B%7B%22n%22:%22status_id%22,%22o%22:%22!%22,%22t%22:%22list_status%22,%22v%22:%5B%2217%22,%2223%22,%223%22,%2214%22,%226%22%5D%7D%5D,%22pa%22:1,%22pp%22:20%7D) for upcoming features and reported bugs.
### Contributor Code of Conduct
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
### Get in touch
If you want to get in touch with us, there is also a [Gitter channel](https://gitter.im/opf/openproject) to talk to us directly.

@ -30,18 +30,21 @@ source 'https://rubygems.org'
gem "rails", "~> 3.2.21"
gem "coderay", "~> 1.0.5"
gem "coderay", "~> 1.0.9"
gem "rubytree", "~> 0.8.3"
gem "rdoc", ">= 2.4.2"
gem 'globalize'
gem 'globalize', "~> 3.1.0"
gem 'omniauth'
gem 'request_store'
gem 'request_store', "~> 1.1.0"
gem 'gravatar_image_tag', '~> 1.2.0'
gem 'warden', '~> 1.2'
gem 'warden-basic_auth', '~> 0.2.0'
# TODO: adds #auto_link which was deprecated in rails 3.1
gem 'rails_autolink'
gem 'rails_autolink', '~> 1.1.6'
gem "will_paginate", '~> 3.0'
gem "acts_as_list", "~> 0.2.0"
gem "acts_as_list", "~> 0.3.0"
gem 'awesome_nested_set'
@ -56,7 +59,7 @@ gem 'htmldiff'
# used for statistics on svn repositories
gem 'svg-graph'
gem "date_validator"
gem "date_validator", '~> 0.7.1'
gem 'ruby-duration', '~> 3.2.0'
# We rely on this specific version, which is the latest as of now (end of 2013),
@ -64,8 +67,8 @@ gem 'ruby-duration', '~> 3.2.0'
# This can be removed as soon as said bugfix is integrated into rabl itself.
# See: config/initializers/rabl_hack.rb
gem 'rabl', '0.9.3'
gem 'multi_json'
gem 'oj'
gem 'multi_json', '~> 1.11.0'
gem 'oj', '~> 2.11.4'
# will need to be removed once we are on rails4 as it will be part of the rails4 core
gem 'strong_parameters'
@ -77,28 +80,38 @@ gem 'delayed_job_active_record', '0.3.3'
gem 'daemons'
# include custom rack-protection for now until rkh/rack-protection is fixed and released
# (see https://www.openproject.org/work_packages/3029)
# (see https://community.openproject.org/work_packages/3029)
gem 'rack-protection', :git => "https://github.com/finnlabs/rack-protection.git", :ref => '5a7d1bd'
gem 'syck', :platforms => [:ruby_20, :mingw_20, :ruby_21, :mingw_21], :require => false
# Rack::Attack is a rack middleware to protect your web app from bad clients.
# It allows whitelisting, blacklisting, throttling, and tracking based on arbitrary properties of the request.
# https://github.com/kickstarter/rack-attack
gem 'rack-attack'
gem 'syck', :platforms => [:mri, :mingw], :require => false
gem 'gon', '~> 4.0'
# catch exceptions and send them to any airbrake compatible backend
gem 'airbrake', '~> 4.1.0'
group :production do
# we use dalli as standard memcache client
# requires memcached 1.4+
# see https://github.com/mperham/dalli
gem 'dalli'
gem 'dalli', '~> 2.7.2'
end
gem 'sprockets', git: 'https://github.com/tessi/sprockets.git', branch: '2_2_2_backport2'
gem 'sprockets-rails', git: 'https://github.com/finnlabs/sprockets-rails.git', branch: 'backport'
gem 'non-stupid-digest-assets'
gem 'sass-rails', git: 'https://github.com/guilleiguaran/sass-rails.git', branch: 'backport'
gem 'sass', '~> 3.3.6'
gem 'bourbon', '~> 4.0'
gem 'sass', '~> 3.4.12'
gem 'autoprefixer-rails'
gem 'execjs', '~> 2.4.0'
gem 'bourbon', '~> 4.2.0'
gem 'uglifier', '>= 1.0.3', require: false
gem 'livingstyleguide', '~> 1.2.0'
gem 'livingstyleguide', '~> 1.2.2'
gem "prototype-rails"
# remove once we no longer use the deprecated "link_to_remote", "remote_form_for" and alike methods
@ -116,48 +129,49 @@ gem 'unicorn'
# Gems we don't depend directly on, but specify here to make sure we don't use a vulnerable
# version. Please add a link to a security advisory when adding a Gem here.
gem 'i18n', '>=0.6.8'
gem 'i18n', '~> 0.6.8'
# see https://groups.google.com/forum/#!topic/ruby-security-ann/pLrh6DUw998
gem 'nokogiri', '>=1.5.11'
# see https://groups.google.com/forum/#!topic/ruby-security-ann/DeJpjTAg1FA
gem 'nokogiri', '~> 1.6.6'
gem 'carrierwave', '~> 0.10.0'
gem 'fog', '~> 1.23.0', require: "fog/aws/storage"
group :test do
gem 'rack-test', '~> 0.6.2'
gem 'shoulda'
gem 'shoulda-context', '~> 1.2'
gem 'object-daddy', '~> 1.1.0'
gem "launchy", "~> 2.3.0"
gem "factory_girl_rails", "~> 4.0"
gem 'cucumber-rails', :require => false
gem "factory_girl_rails", "~> 4.5"
gem 'cucumber-rails', "~> 1.4.2", :require => false
gem 'rack_session_access'
# restrict because in version 1.3 a lot of tests using acts as journalized
# fail stating: "Column 'user_id' cannot be null". I don't understand the
# connection with database cleaner here but setting it to 1.2 fixes the
# issue.
gem 'database_cleaner', '~> 1.2.0'
gem "cucumber-rails-training-wheels" # http://aslakhellesoy.com/post/11055981222/the-training-wheels-came-off
gem 'rspec', '~> 2.99.0'
gem 'rspec', '~> 3.2.0'
# also add to development group, so "spec" rake task gets loaded
gem "rspec-rails", "~> 2.99.0", :group => :development
gem 'rspec-rails', '~> 3.2.0', group: :development
gem 'rspec-activemodel-mocks'
gem 'rspec-example_disabler', git: "https://github.com/finnlabs/rspec-example_disabler.git"
gem 'rspec-legacy_formatters'
gem 'capybara', '~> 2.3.0'
gem 'capybara-screenshot'
gem 'capybara-screenshot', '~> 1.0.4'
gem 'capybara-select2', github: 'goodwill/capybara-select2'
gem 'selenium-webdriver', '~> 2.44.0'
gem 'timecop', "~> 0.6.1"
gem 'timecop', '~> 0.7.1'
gem 'rb-readline', "~> 0.5.1" # ruby on CI needs this
# why in Gemfile? see: https://github.com/guard/guard-test
gem 'ruby-prof'
gem 'simplecov', '0.8.0.pre'
gem "shoulda-matchers"
gem "shoulda-matchers", '~> 2.8', require: nil
gem "json_spec"
gem "activerecord-tableless", "~> 1.0"
gem "codeclimate-test-reporter", :require => nil
gem 'test-unit', '2.5.5'
gem 'codecov', require: nil
gem 'equivalent-xml', '~> 0.5.1'
end
group :ldap do
@ -165,11 +179,12 @@ group :ldap do
end
group :development do
gem 'letter_opener', '~> 1.0.0'
gem 'letter_opener', '~> 1.3.0'
gem 'rails-dev-tweaks', '~> 0.6.1'
gem 'thin'
gem 'faker'
gem 'quiet_assets'
gem 'rubocop', '~> 0.28'
end
group :development, :test do
@ -183,7 +198,7 @@ end
# API gems
gem 'grape', '~> 0.10.1'
gem 'roar', '~> 1.0.0'
gem 'reform', '~> 1.2.4', require: false
gem 'reform', '~> 1.2.6', require: false
# Use the commented pure ruby gems, if you have not the needed prerequisites on
# board to compile the native ones. Note, that their use is discouraged, since
@ -216,5 +231,5 @@ end
# Load Gemfile.local, Gemfile.plugins and plugins' Gemfiles
Dir.glob File.expand_path("../{Gemfile.local,Gemfile.plugins,lib/plugins/*/Gemfile}", __FILE__) do |file|
next unless File.readable?(file)
instance_eval File.read(file)
eval_gemfile(file)
end

@ -1,3 +1,11 @@
GIT
remote: git://github.com/goodwill/capybara-select2.git
revision: c0826f33707b85fd39a838c6909ee12d0bff64a1
specs:
capybara-select2 (1.0.1)
capybara
rspec
GIT
remote: https://github.com/finnlabs/rack-protection.git
revision: 5a7d1bd2f05ca75faf7909c8cc978732a0080898
@ -81,10 +89,19 @@ GEM
activesupport (3.2.21)
i18n (~> 0.6, >= 0.6.4)
multi_json (~> 1.0)
acts_as_list (0.2.0)
acts_as_list (0.3.0)
activerecord (>= 3.0)
addressable (2.3.4)
airbrake (4.1.0)
builder
multi_json
arel (3.0.3)
ast (2.0.0)
astrolabe (1.3.0)
parser (>= 2.2.0.pre.3, < 3.0)
autoprefixer-rails (5.1.5)
execjs
json
awesome_nested_set (2.1.6)
activerecord (>= 3.0.0)
axiom-types (0.1.1)
@ -93,11 +110,9 @@ GEM
thread_safe (~> 0.3, >= 0.3.1)
binding_of_caller (0.7.2)
debug_inspector (>= 0.0.1)
bourbon (4.0.0)
sass (~> 3.3)
bourbon (4.2.0)
sass (~> 3.4)
thor
bourne (1.4.0)
mocha (~> 0.13.2)
builder (3.0.4)
byebug (2.7.0)
columnize (~> 0.3)
@ -108,44 +123,48 @@ GEM
rack (>= 1.0.0)
rack-test (>= 0.5.4)
xpath (~> 2.0)
capybara-screenshot (0.3.6)
capybara-screenshot (1.0.5)
capybara (>= 1.0, < 3)
colored
launchy
carrierwave (0.10.0)
activemodel (>= 3.2.0)
activesupport (>= 3.2.0)
json (>= 1.7)
mime-types (>= 1.16)
childprocess (0.5.3)
childprocess (0.5.5)
ffi (~> 1.0, >= 1.0.11)
climate_control (0.0.3)
activesupport (>= 3.0)
cocaine (0.5.4)
climate_control (>= 0.0.3, < 1.0)
codeclimate-test-reporter (0.1.1)
simplecov (>= 0.7.1, < 1.0.0)
codecov (0.0.6)
json
simplecov
url
coderay (1.0.9)
coercible (1.0.0)
descendants_tracker (~> 0.0.1)
color-tools (1.3.0)
colored (1.2)
columnize (0.8.9)
cucumber (1.3.8)
cucumber (1.3.18)
builder (>= 2.1.2)
diff-lcs (>= 1.1.3)
gherkin (~> 2.12.1)
gherkin (~> 2.12)
multi_json (>= 1.7.5, < 2.0)
multi_test (>= 0.0.2)
cucumber-rails (1.3.1)
capybara (>= 1.1.2)
cucumber (>= 1.2.0)
nokogiri (>= 1.5.0)
rails (~> 3.0)
cucumber-rails-training-wheels (1.0.0)
cucumber-rails (>= 1.1.1)
multi_test (>= 0.1.1)
cucumber-rails (1.4.2)
capybara (>= 1.1.2, < 3)
cucumber (>= 1.3.8, < 2)
mime-types (>= 1.16, < 3)
nokogiri (~> 1.5)
rails (>= 3, < 5)
daemons (1.1.9)
dalli (2.6.4)
dalli (2.7.2)
database_cleaner (1.2.0)
date_validator (0.7.0)
activemodel (>= 3)
date_validator (0.7.1)
activemodel
debug_inspector (0.0.2)
debugger-linecache (1.2.0)
delayed_job (3.0.5)
@ -160,19 +179,20 @@ GEM
representable (~> 2.0)
uber
equalizer (0.0.9)
equivalent-xml (0.5.1)
nokogiri (>= 1.4.3)
erubis (2.7.0)
eventmachine (1.0.3)
eventmachine (1.0.7)
excon (0.42.1)
execjs (1.4.0)
multi_json (~> 1.0)
factory_girl (4.2.0)
execjs (2.4.0)
factory_girl (4.5.0)
activesupport (>= 3.0.0)
factory_girl_rails (4.2.1)
factory_girl (~> 4.2.0)
factory_girl_rails (4.5.0)
factory_girl (~> 4.5.0)
railties (>= 3.0.0)
faker (1.2.0)
i18n (~> 0.5)
ffi (1.9.3)
ffi (1.9.6)
fog (1.23.0)
fog-brightbox
fog-core (~> 1.23)
@ -199,10 +219,9 @@ GEM
formatador (0.2.5)
gherkin (2.12.2)
multi_json (~> 1.3)
globalize (3.0.0)
activemodel (>= 3.0.0)
activerecord (>= 3.0.0)
paper_trail (~> 2)
globalize (3.1.0)
activemodel (>= 3.1.0, < 4.0.0)
activerecord (>= 3.1.0, < 4.0.0)
gon (4.0.0)
actionpack (>= 2.3.0)
json
@ -228,16 +247,16 @@ GEM
ipaddress (0.8.0)
iso8601 (0.8.2)
journey (1.0.4)
json (1.8.1)
json_spec (1.1.1)
json (1.8.2)
json_spec (1.1.4)
multi_json (~> 1.0)
rspec (~> 2.0)
rspec (>= 2.0, < 4.0)
kgio (2.9.2)
launchy (2.3.0)
addressable (~> 2.3)
letter_opener (1.0.0)
launchy (>= 2.0.4)
livingstyleguide (1.2.0)
letter_opener (1.3.0)
launchy (~> 2.2)
livingstyleguide (1.2.2)
hooks (= 0.3.3)
minisyntax
redcarpet (~> 3.0.0)
@ -247,34 +266,31 @@ GEM
mail (2.5.4)
mime-types (~> 1.16)
treetop (~> 1.4.8)
metaclass (0.0.1)
method_source (0.8.2)
mime-types (1.25.1)
mini_portile (0.6.2)
minisyntax (0.2.3)
mocha (0.13.3)
metaclass (~> 0.0.1)
multi_json (1.10.1)
multi_test (0.0.2)
multi_json (1.11.0)
multi_test (0.1.1)
multi_xml (0.5.5)
mysql2 (0.3.11)
mysql2 (0.3.17)
net-ldap (0.8.0)
net-scp (1.2.1)
net-ssh (>= 2.6.5)
net-ssh (2.9.1)
nokogiri (1.6.5)
net-ssh (2.9.2)
nokogiri (1.6.6.2)
mini_portile (~> 0.6.0)
non-stupid-digest-assets (1.0.4)
object-daddy (1.1.1)
oj (2.1.6)
oj (2.11.4)
omniauth (1.2.1)
hashie (>= 1.2, < 3)
rack (~> 1.0)
paper_trail (2.7.2)
activerecord (~> 3.0)
railties (~> 3.0)
parser (2.2.0.2)
ast (>= 1.1, < 3.0)
pg (0.17.1)
polyglot (0.3.5)
powerpack (0.0.9)
prototype-rails (3.2.1)
rails (~> 3.2)
pry (0.9.12.6)
@ -302,13 +318,15 @@ GEM
rack (1.4.5)
rack-accept (0.4.5)
rack (>= 0.4)
rack-attack (4.2.0)
rack
rack-cache (1.2)
rack (>= 0.4)
rack-mount (0.8.3)
rack (>= 1.0.0)
rack-ssl (1.3.4)
rack
rack-test (0.6.2)
rack-test (0.6.3)
rack (>= 1.0)
rack_session_access (0.1.1)
builder (>= 2.0.0)
@ -324,7 +342,7 @@ GEM
rails-dev-tweaks (0.6.1)
actionpack (~> 3.1)
railties (~> 3.1)
rails_autolink (1.1.0)
rails_autolink (1.1.6)
rails (> 3.1)
railties (3.2.21)
actionpack (= 3.2.21)
@ -333,70 +351,78 @@ GEM
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (>= 0.14.6, < 2.0)
rainbow (2.0.0)
raindrops (0.13.0)
rake (10.3.2)
rake (10.4.2)
rb-readline (0.5.1)
rdoc (3.12.2)
json (~> 1.4)
redcarpet (3.0.0)
reform (1.2.4)
reform (1.2.6)
activemodel
disposable (~> 0.0.5)
representable (~> 2.1.0)
uber (~> 0.0.11)
representable (2.1.3)
representable (2.1.5)
multi_json
nokogiri
uber (~> 0.0.7)
request_store (1.1.0)
roar (1.0.0)
representable (>= 2.0.1, <= 3.0.0)
rspec (2.99.0)
rspec-core (~> 2.99.0)
rspec-expectations (~> 2.99.0)
rspec-mocks (~> 2.99.0)
rspec (3.2.0)
rspec-core (~> 3.2.0)
rspec-expectations (~> 3.2.0)
rspec-mocks (~> 3.2.0)
rspec-activemodel-mocks (1.0.1)
activemodel (>= 3.0)
activesupport (>= 3.0)
rspec-mocks (>= 2.99, < 4.0)
rspec-collection_matchers (1.0.0)
rspec-expectations (>= 2.99.0.beta1)
rspec-core (2.99.0)
rspec-expectations (2.99.0)
diff-lcs (>= 1.1.3, < 2.0)
rspec-mocks (2.99.0)
rspec-rails (2.99.0)
actionpack (>= 3.0)
activemodel (>= 3.0)
activesupport (>= 3.0)
railties (>= 3.0)
rspec-collection_matchers
rspec-core (~> 2.99.0)
rspec-expectations (~> 2.99.0)
rspec-mocks (~> 2.99.0)
rspec-core (3.2.0)
rspec-support (~> 3.2.0)
rspec-expectations (3.2.0)
diff-lcs (>= 1.2.0, < 2.0)
rspec-support (~> 3.2.0)
rspec-legacy_formatters (1.0.0)
rspec-core (>= 3.0.0.beta2)
rspec-support (>= 3.0.0.beta2)
rspec-mocks (3.2.0)
diff-lcs (>= 1.2.0, < 2.0)
rspec-support (~> 3.2.0)
rspec-rails (3.2.0)
actionpack (>= 3.0, <= 4.2)
activesupport (>= 3.0, <= 4.2)
railties (>= 3.0, <= 4.2)
rspec-core (~> 3.2.0)
rspec-expectations (~> 3.2.0)
rspec-mocks (~> 3.2.0)
rspec-support (~> 3.2.0)
rspec-support (3.2.0)
rubocop (0.28.0)
astrolabe (~> 1.3)
parser (>= 2.2.0.pre.7, < 3.0)
powerpack (~> 0.0.6)
rainbow (>= 1.99.1, < 3.0)
ruby-progressbar (~> 1.4)
ruby-duration (3.2.0)
activesupport (>= 3.0.0)
i18n
iso8601
ruby-prof (0.13.0)
ruby-progressbar (1.2.0)
ruby-progressbar (1.7.1)
rubytree (0.8.3)
json (>= 1.7.5)
structured_warnings (>= 0.1.3)
rubyzip (1.1.6)
sass (3.3.14)
sass (3.4.12)
selenium-webdriver (2.44.0)
childprocess (~> 0.5)
multi_json (~> 1.0)
rubyzip (~> 1.0)
websocket (~> 1.0)
shoulda (3.5.0)
shoulda-context (~> 1.0, >= 1.0.1)
shoulda-matchers (>= 1.4.1, < 3.0)
shoulda-context (1.1.2)
shoulda-matchers (2.1.0)
shoulda-context (1.2.1)
shoulda-matchers (2.8.0)
activesupport (>= 3.0.0)
bourne (~> 1.3)
simplecov (0.8.0.pre)
multi_json
simplecov-html (~> 0.7.1)
@ -409,7 +435,6 @@ GEM
structured_warnings (0.1.4)
svg-graph (1.0.5)
syck (1.0.1)
test-unit (2.5.5)
thin (1.5.1)
daemons (>= 1.0.9)
eventmachine (>= 0.12.6)
@ -417,12 +442,12 @@ GEM
thor (0.19.1)
thread_safe (0.3.4)
tilt (1.4.1)
timecop (0.6.1)
timecop (0.7.1)
treetop (1.4.15)
polyglot
polyglot (>= 0.3.1)
tzinfo (0.3.42)
uber (0.0.12)
tzinfo (0.3.43)
uber (0.0.13)
uglifier (2.1.1)
execjs (>= 0.3.0)
multi_json (~> 1.0, >= 1.0.2)
@ -430,11 +455,16 @@ GEM
kgio (~> 2.6)
rack
raindrops (~> 0.7)
url (0.3.2)
virtus (1.0.4)
axiom-types (~> 0.1)
coercible (~> 1.0)
descendants_tracker (~> 0.0, >= 0.0.3)
equalizer (~> 0.0, >= 0.0.9)
warden (1.2.3)
rack (>= 1.0)
warden-basic_auth (0.2.0)
warden (~> 1.2)
websocket (1.2.1)
will_paginate (3.0.5)
xpath (2.0.0)
@ -448,44 +478,48 @@ DEPENDENCIES
activerecord-jdbcmysql-adapter
activerecord-jdbcpostgresql-adapter
activerecord-tableless (~> 1.0)
acts_as_list (~> 0.2.0)
acts_as_list (~> 0.3.0)
airbrake (~> 4.1.0)
autoprefixer-rails
awesome_nested_set
bourbon (~> 4.0)
bourbon (~> 4.2.0)
capybara (~> 2.3.0)
capybara-screenshot
capybara-screenshot (~> 1.0.4)
capybara-select2!
carrierwave (~> 0.10.0)
cocaine
codeclimate-test-reporter
coderay (~> 1.0.5)
codecov
coderay (~> 1.0.9)
color-tools (~> 1.3.0)
cucumber-rails
cucumber-rails-training-wheels
cucumber-rails (~> 1.4.2)
daemons
dalli
dalli (~> 2.7.2)
database_cleaner (~> 1.2.0)
date_validator
date_validator (~> 0.7.1)
delayed_job_active_record (= 0.3.3)
factory_girl_rails (~> 4.0)
equivalent-xml (~> 0.5.1)
execjs (~> 2.4.0)
factory_girl_rails (~> 4.5)
faker
fog (~> 1.23.0)
globalize
globalize (~> 3.1.0)
gon (~> 4.0)
grape (~> 0.10.1)
gravatar_image_tag (~> 1.2.0)
htmldiff
i18n (>= 0.6.8)
i18n (~> 0.6.8)
jruby-openssl
json_spec
launchy (~> 2.3.0)
letter_opener (~> 1.0.0)
livingstyleguide (~> 1.2.0)
multi_json
letter_opener (~> 1.3.0)
livingstyleguide (~> 1.2.2)
multi_json (~> 1.11.0)
mysql2 (~> 0.3.11)
net-ldap (~> 0.8.0)
nokogiri (>= 1.5.11)
nokogiri (~> 1.6.6)
non-stupid-digest-assets
object-daddy (~> 1.1.0)
oj
oj (~> 2.11.4)
omniauth
pg (~> 0.17.1)
prototype-rails
@ -497,39 +531,43 @@ DEPENDENCIES
pry-stack_explorer
quiet_assets
rabl (= 0.9.3)
rack-attack
rack-protection!
rack-test (~> 0.6.2)
rack_session_access
rails (~> 3.2.21)
rails-dev-tweaks (~> 0.6.1)
rails_autolink
rails_autolink (~> 1.1.6)
rb-readline (~> 0.5.1)
rdoc (>= 2.4.2)
reform (~> 1.2.4)
request_store
reform (~> 1.2.6)
request_store (~> 1.1.0)
roar (~> 1.0.0)
rspec (~> 2.99.0)
rspec (~> 3.2.0)
rspec-activemodel-mocks
rspec-example_disabler!
rspec-rails (~> 2.99.0)
rspec-legacy_formatters
rspec-rails (~> 3.2.0)
rubocop (~> 0.28)
ruby-duration (~> 3.2.0)
ruby-prof
ruby-progressbar
rubytree (~> 0.8.3)
sass (~> 3.3.6)
sass (~> 3.4.12)
sass-rails!
selenium-webdriver (~> 2.44.0)
shoulda
shoulda-matchers
shoulda-context (~> 1.2)
shoulda-matchers (~> 2.8)
simplecov (= 0.8.0.pre)
sprockets!
sprockets-rails!
strong_parameters
svg-graph
syck
test-unit (= 2.5.5)
thin
timecop (~> 0.6.1)
timecop (~> 0.7.1)
uglifier (>= 1.0.3)
unicorn
warden (~> 1.2)
warden-basic_auth (~> 0.2.0)
will_paginate (~> 3.0)

@ -2,6 +2,7 @@
[<img src="https://travis-ci.org/opf/openproject.svg?branch=dev" alt="Build Status" />](https://travis-ci.org/opf/openproject)
[<img src="https://gemnasium.com/opf/openproject.png" alt="Dependency Status" />](https://gemnasium.com/opf/openproject)
[![Code Climate](https://codeclimate.com/github/opf/openproject/badges/gpa.svg)](https://codeclimate.com/github/opf/openproject)
[![codecov.io](http://codecov.io/github/opf/openproject/coverage.svg?branch=dev)](http://codecov.io/github/opf/openproject?branch=dev)
[![Inline docs](http://inch-ci.org/github/opf/openproject.png?branch=dev)](http://inch-ci.org/github/opf/openproject)
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/opf/openproject?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@ -23,7 +24,13 @@ More information and screenshots can be found on [openproject.org](https://www.o
## Installation
There is an [installation guide](https://openproject.org/download/) and a [reference of configuration options](doc/CONFIGURATION.md).
If you want to run an instance of OpenProject in production (or for evaluation), refer to our
in-depth [installation guides](https://openproject.org/download/).
If you're a developer wanting to set-up a local environment for contributing to OpenProject or
developing plugins, you should refer instead to our [Quick Start for Developers](doc/QUICK_START.md).
Our [developer documentation](doc/README.md) also includes a [reference of configuration options](doc/CONFIGURATION.md).
## Contact
@ -34,14 +41,14 @@ Please find ways to contact us on the OpenProject [help page](https://www.openpr
## Community
OpenProject is driven by an active group of open source enthusiasts: software engineers, project managers, creatives, and consultants. OpenProject is supported by companies as well as individuals. We share the vision to build great open source project collaboration software.
The [OpenProject Foundation (OPF)](https://www.openproject.org/projects/openproject/wiki/OpenProject_Foundation) will give official guidance to the project and the community and oversees contributions and decisions.
The [OpenProject Foundation (OPF)](https://community.openproject.org/projects/openproject/wiki/OpenProject_Foundation) will give official guidance to the project and the community and oversees contributions and decisions.
## Repository
This repository contains two main branches:
This repository contains several main branches:
* `dev`: The main development branch. We try to keep it stable in the sense of all tests are passing, but we don't recommend it for production systems.
* `stable`: Contains the latest stable release that we recommend for production use. Use this if you always want the latest version of OpenProject.
* `stable/<version>`: Contains the latest stable release for a specific version. We recommend to use this for production use. Example: `stable/4.1`.
## License
@ -70,4 +77,3 @@ OpenProject Icon Font by the OpenProject Foundation (OPF) is licensed under Crea
and Free for both personal and commercial use. You can copy, adapt, remix, distribute or transmit it.
Under this condition: provide a mention of the "OpenProject Foundation" and a link back to OpenProject www.openproject.org.

@ -254,4 +254,9 @@
<glyph unicode="&#57585;" d="M448 320l64 64-64 64-160 0 0 64-64 0 0-64-128 0 0-128 128 0 0-32-160 0-64-64 64-64 160 0 0-160 64 0 0 160 128 0 0 128-128 0 0 32z m-323 29l25 67 10 0 29-67-13 0-6 22-29 0-7-22z m19 29l22 0-6 19c-3 6-3 9-6 13 0-4-4-10-4-13z m83-29l0 6c-3-6-9-6-16-6-3 0-6 0-9 3-4 0-7 3-7 10-3 3-3 6-3 12 0 4 0 10 0 13 3 3 3 7 6 10 4 3 7 3 10 3 3 0 6 0 10-3 6 0 6-3 9-3l0 25 10 0 0-67-10 0z m-29 25c0-6 0-9 4-12 3-4 6-4 9-4 3 0 7 0 10 4 3 0 6 6 6 12 0 7-3 10-3 13 0 3-6 7-10 7-3 0-6 0-9-4-3-3-7-9-7-16z m48-25l0 51 10 0 0-6c0 3 3 3 6 6 4 0 7 3 10 3 3 0 6 0 10-3 3 0 3-3 6-6 0 3 6 6 13 6 6 0 9 0 13-3 0-3 0-7 0-13l0-35-7 0 0 32c0 3 0 6 0 6 0 0 0 3-3 3-3 0-3 0-6 0-4 0-7 0-10-3-3-3-3-3-3-9l0-29-7 0 0 32c0 3 0 6-3 9-3 4-3 4-6 4-3 0-3 0-7-4-3 0-3-3-6-6-3-3 0-6 0-10l0-25z m80 61l0 9 10 0 0-9z m0-61l0 51 10 0 0-51z m23 0l0 51 6 0 0-6c3 6 10 9 16 9 3 0 7 0 10-3 3 0 3-3 6-3 3 0 3-3 3-7 0 0 0-3 0-9l0-32-9 0 0 32c0 3 0 6 0 6 0 3-3 3-3 3-4 0-4 0-7 0-3 0-6 0-9-3-4-3-4-6-4-13l0-25z"/>
<glyph unicode="&#57586;" d="M448 320l64 64-64 64-160 0 0 64-64 0 0-64-128 0 0-128 128 0 0-32-160 0-64-64 64-64 160 0 0-160 64 0 0 160 128 0 0 128-128 0 0 32z m-288-61l10 0 0-38c0-7 0-13-4-16-3-3-3-10-9-13-3-3-10-3-16-3-7 0-13 0-16 3-3 3-7 3-7 10 0 6-3 9-3 16l0 41 10 0 0-38c0-7 0-10 3-13 0-3 3-6 6-6 4 0 7-4 10-4 6 0 13 0 13 4 0 3 3 6 3 16z m19-54l10 0c0-3 3-7 3-7 0-3 3-3 10-3 3 0 6 0 9 3 3 0 3 4 3 7 0 3 0 3-3 3 0 0-3 3-9 3-7 0-10 3-13 3-3 0-3 4-7 4 0 3-3 6-3 6 0 3 0 3 0 6 0 4 3 4 3 4 0 0 4 3 7 3 3 0 3 0 6 0 3 0 7 0 10-3 3 0 6-4 6-4 0-3 3-3 3-6l-3 0c0 3 0 3-3 6-3 4-6 4-10 4-3 0-6 0-6-4 0-3-3-3-3-3 0 0 0-3 0-3 0 0 3-3 3-3 0 0 3 0 6-3 7 0 10-4 13-4 3 0 3-3 7-3 3 0 3-3 3-6 0-3 0-7-3-7 0-6-4-6-7-9-3 0-6-3-9-3-7 0-13 0-16 3-4 3-7 9-7 16z m87 0l9 0c0-7-3-10-6-13-3-3-10-3-13-3-6 0-13 3-16 6-10 3-13 10-13 19 0 10 3 16 7 20 3 3 9 6 16 6 6 0 12-3 16-6 3-4 6-10 6-20 0 0 0 0 0-3l-35 0c0-6 3-9 3-13 3-3 6-3 10-3 3 0 6 0 6 3 0 4 6 4 10 7z m-29 13l29 0c0 3 0 6-4 9-3 3-6 7-12 7-4 0-7 0-10-4 0-3-3-6-3-12z m48-29l0 51 6 0 0-6c3 3 3 6 7 6 3 0 3 3 6 3 3 0 6 0 10-3l-7-10c-3 0-3 4-6 4-3 0-3 0-7-4 0 0-3-3-3-3 0-3 0-6 0-9l0-26-6 0z"/>
<glyph unicode="&#57587;" d="M326 499l-140 0c-26 0-42-16-42-32l0-419c0-19 19-35 42-35l144 0c22 0 41 16 41 35l0 419c-3 16-19 32-45 32z m-28-35l70-96 74 96z m0-144l70-96 74 96z m0-147l70-96 74 96z m-228 291l74-96 70 96z m0-144l74-96 70 96z m0-147l74-96 70 96z m250 227c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0-144c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0-147c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 64 64 64 35 0 64-29 64-64z"/>
<glyph unicode="&#57589;" d="M256 384c0 80-179 96-256 96l0-352 16 0c6 0 10 0 16 0l0-32c64 0 192 19 192-32l64 0c0 51 128 32 192 32l0 32c6 0 10 0 16 0l16 0 0 352c-77 0-256-16-256-96z m-224 64c16 0 29 0 45-3 3 0 6 0 6 0 0 0 3 0 3 0 64-3 132-19 138-55 0-3 0-3 0-6l0-237c-48 29-134 29-192 29z m448-272c-58 0-144-3-192-29l0 237c0 22 35 64 192 64z m-384 90l-16-48-19 0 51 153 26 0 54-153-22 0-20 48z m51 16l-16 44c-3 10-3 20-6 29-3-9-7-19-10-29l-16-44z m179-52l87 125-80 0 0 16 105 0 0-13-86-121 86 0 0-16-112 0z"/>
<glyph unicode="&#57588;" d="M400 496l-51 0c-45 0-80-35-80-80l0-128-87 0c-3 0-6 0-6 0-3 0-10 0-13 0l-48 0c-45 0-83-35-83-80l0-102c0-45 35-80 80-80l51 0c45 0 80 35 80 80l0 102c0 10-3 19-3 26l29 0 0-93c0-16 13-26 25-26 16 0 26 13 26 26l0 96 16 0c3 0 6 0 10 0l51 0c45 0 80 35 80 80l0 99c3 45-32 80-77 80z m-211-390c0-13-13-26-26-26l-48 0c-16 0-25 13-25 26l0 102c0 16 12 26 25 26l51 0c16 0 26-13 26-26l0-102z m237 208c0-16-13-26-26-26l-51 0c-3 0-3 0-7 0 0 0 0 0 4 0l-4 0c-12 3-19 13-19 26l0 102c0 13 13 26 26 26l51 0c13 0 26-13 26-26z"/>
<glyph unicode="&#57591;" d="M512 188c0-29-10-53-30-73-20-20-44-30-72-30l-291 0c-32 0-61 12-84 35-23 24-35 52-35 85 0 23 6 45 19 64 13 20 29 34 50 44-1 5-1 9-1 11 0 38 14 70 40 97 27 26 59 40 97 40 28 0 53-8 76-24 23-15 40-36 50-61 13 11 27 17 44 17 19 0 35-7 49-20 13-14 20-30 20-49 0-13-4-25-11-37 23-5 42-17 57-35 15-19 22-40 22-64z"/>
<glyph unicode="&#57592;" d="M407 270c-18 66-74 113-139 113-45 0-88-23-115-62-8 2-15 3-23 3-61 0-110-54-110-121 0-23 6-46 18-66 3-5 8-8 13-8l414 0c5 0 9 3 12 7 10 15 15 32 15 50 0 50-40 90-85 84z"/>
<glyph unicode="&#57590;" d="M392 437l45-45-317-317-45 45z m-272 0l317-317-45-45-317 317z"/>
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

@ -34,7 +34,7 @@
<li><a>Menu item text</a></li>
<li class="drop-down">
<a class="icon icon-more" href="javascript:">More functions</a>
<ul style="display:none;" class="action_menu_more">
<ul style="display:none;" class="legacy-actions-more">
<li><a>Menu item text</a></li>
</ul>
</li>

@ -1,15 +1,30 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
// 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
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
// 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.
//++
//= require ./bundles/openproject-global
@ -31,7 +46,6 @@
//= require ajaxappender
//= require settings
//= require modal
//= require keyboard_shortcuts
//= require tab_handling
//= require top-shelf
//= require unsupported-browsers
@ -44,6 +58,11 @@
//= require ./bundles/openproject-core-app
//= require_tree ./bundles
//= require custom-fields
//= require date-range
//= require search
//= require colors
//source: http://stackoverflow.com/questions/8120065/jquery-and-prototype-dont-work-together-with-array-prototype-reverse
if (typeof []._reverse == 'undefined') {
jQuery.fn.reverse = Array.prototype.reverse;
@ -66,48 +85,6 @@ jQuery(document).ready(function ($) {
}
});
if (typeof CS !== "undefined") {
var regions = $.datepicker.regional;
var regional = regions[CS.lang] || regions[""];
$.datepicker.setDefaults(regional);
var gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function (id) {
gotoToday.call(this, id);
var target = $(id),
inst = this._getInst(target[0]),
dateStr = $.datepicker._formatDate(inst);
target.val(dateStr);
target.blur();
$.datepicker._hideDatepicker();
};
var defaults = {
showWeek: true,
changeMonth: true,
changeYear: true,
yearRange: "c-100:c+10",
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
calculateWeek: function (day) {
var dayOfWeek = new Date(+day);
if (day.getDay() != 1) {
dayOfWeek.setDate(day.getDate() - day.getDay() + 1);
}
return $.datepicker.iso8601Week(dayOfWeek);
}
};
if (CS.firstWeekDay && CS.firstWeekDay !== "") {
defaults.firstDay = parseInt(CS.firstWeekDay, 10);
}
$.datepicker.setDefaults(defaults);
}
$(document).on('click', '#show_more_wp_properties', function(el){
$(this).find('.icon').toggleClass('icon-arrow-right6-3 icon-arrow-right6-1');
Effect.toggle("work_package_descr_fields", "appear", {duration:0.3});
@ -115,7 +92,6 @@ jQuery(document).ready(function ($) {
return false;
});
});
function checkAll (id, checked) {
@ -597,6 +573,10 @@ jQuery(document).ready(function($) {
},
formatSearching: function () {
return I18n.t("js.select2.searching");
},
containerCssClass: 'form--select2',
adaptContainerCssClass: function(clazz) {
return null;
}
});
@ -812,36 +792,38 @@ var I18nForms = (function ($) {
update_interaction_elements,
update_locale_availability;
active_locale_selectors = function (localized_p) {
return localized_p.find('.locale_selector');
active_locale_selectors = function (localizedField) {
return localizedField.find('.locale_selector');
};
add_locale_fields = function (localized_p) {
var backup = localized_p.find('.translation').first(),
add_link = localized_p.find('.add_locale'),
new_items = backup.clone();
add_locale_fields = function (localizedField) {
var backup = localizedField.find('.translation').first(),
add_link = localizedField.find('.add_locale'),
new_items = backup.clone(),
new_language_selector = new_items.find('.locale_selector'),
other_language_selectors = active_locale_selectors(localizedField);
new_items.find('input, textarea').val("");
new_items.insertBefore(add_link);
select_first_untaken_option(new_items.find('.locale_selector'), active_locale_selectors(localized_p));
update_interaction_elements(localized_p);
select_first_untaken_option(new_language_selector, other_language_selectors);
update_interaction_elements(localizedField);
observe_destroy_locale_links(new_items.find('.destroy_locale'));
};
destroy_locale = function (element) {
var localized_p = element.closest('p');
var localizedField = element.closest('.form--field');
element.closest('.translation').remove();
update_interaction_elements(localized_p);
update_interaction_elements(localizedField);
};
observe_add_locale_link = function (selector) {
$(selector).click(function (event) {
event.preventDefault();
add_locale_fields($(this).closest('p'));
add_locale_fields($(this).closest('.form--field'));
});
};
@ -869,12 +851,12 @@ var I18nForms = (function ($) {
select.val(available.pop());
};
update_add_link_status = function (localized_p) {
var indicator_selector = active_locale_selectors(localized_p),
update_add_link_status = function (localizedField) {
var indicator_selector = active_locale_selectors(localizedField),
taken = taken_options(indicator_selector),
all_options,
available,
add_link = localized_p.find('.add_locale');
add_link = localizedField.find('.add_locale');
available = indicator_selector.first().find('option').map(function (index, element) {
element = $(element);
@ -887,20 +869,20 @@ var I18nForms = (function ($) {
add_link.toggle(available.size() > 0);
};
update_destroy_link_status = function (localized_p) {
var active_selectors = active_locale_selectors(localized_p);
update_destroy_link_status = function (localizedField) {
var active_selectors = active_locale_selectors(localizedField);
localized_p.find('.destroy_locale').toggle(active_selectors.size() > 1);
localizedField.find('.destroy_locale').toggle(active_selectors.size() > 1);
};
update_interaction_elements = function (localized_p) {
update_locale_availability(localized_p);
update_add_link_status(localized_p);
update_destroy_link_status(localized_p);
update_interaction_elements = function (localizedField) {
update_locale_availability(localizedField);
update_add_link_status(localizedField);
update_destroy_link_status(localizedField);
};
update_locale_availability = function (localized_p) {
var active_selectors = active_locale_selectors(localized_p),
update_locale_availability = function (localizedField) {
var active_selectors = active_locale_selectors(localizedField),
active_locales = taken_options(active_selectors);
active_selectors.each(function (index, element) {
@ -927,7 +909,7 @@ var I18nForms = (function ($) {
observe_add_locale_link($('.add_locale'));
observe_destroy_locale_links($('.destroy_locale'));
$('form .translation').closest('p').each(function (i, element) {
$('form .translation').closest('.form--field').each(function (i, element) {
element = $(element);
update_interaction_elements(element);
});
@ -1131,13 +1113,13 @@ var I18nForms = (function ($) {
})();
init = function () {
var translated_paragraph = $('form .translation').closest('p');
var translatedField = $('form .translation').closest('.form--field');
if (translated_paragraph.size() > 0) {
if (translatedField.size() > 0) {
memorize_ids();
event_handler.init();
translated_paragraph.closest('form').submit(function () {
translatedField.closest('form').submit(function () {
submit_preparer.prepare($(this));
// allow default behaviour
});
@ -1213,23 +1195,3 @@ var SubmitConfirm = (function($) {
init: init
};
})(jQuery);
var Preview = (function ($) {
$('document').ready(function() {
$('html').on('click','a.preview', function() {
$.ajax({
url: $(this).attr('href'),
type: 'POST',
data: $("#" + $(this).attr('id').replace(/-preview/, "")).serialize().replace('_method=put&', ''),
success: function(data) { $('#preview').html(data);
$('html, body').animate({
scrollTop: $('#preview').offset().top
},
'slow');
}
});
return false;
});
});
})(jQuery);

@ -187,7 +187,7 @@
return markup.join("");
},
formatSelection: function (item) {
return item.name;
return OpenProject.Helpers.markupEscape(item.name);
},
initSelection: function (element, callback) {
var data = [], multiple;

@ -0,0 +1,54 @@
//-- 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.
//++
(function ($) {
$(function() {
$('.timelines-x-update-color').each(function() {
var preview, input, func, target;
preview = $(this);
target = preview.data('target');
if(target) {
input = $(target);
} else {
input = preview.next('input');
}
if (input.length === 0) {
return;
}
func = function () {
preview.css('background-color', input.val());
};
input.keyup(func).change(func).focus(func);
func();
});
});
}(jQuery));

@ -0,0 +1,129 @@
//-- 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.
//++
(function($) {
/*
* @see /app/views/custom_fields/_form.html.erb
*/
$(function() {
var customFieldForm = $('#custom_field_form');
if (customFieldForm.length === 0) {
return;
}
// collect the nodes involved
var format = $('#custom_field_field_format'),
lengthField = $('#custom_field_length'),
regexpField = $('#custom_field_regexp'),
possibleValues = $('#custom_field_possible_values_attributes'),
defaultValueFields = $('#custom_field_default_value_attributes'),
spanDefaultTextMulti = $('#default_value_text_multi'),
spanDefaultTextSingle = $('#default_value_text_single'),
spanDefaultBool = $('#default_value_bool');
var deactivate = function(element) {
element.hide().find('input, textarea').not('.destroy_flag').attr('disabled', true);
},
activate = function(element) {
element.show().find('input, textarea').not('.destroy_flag').removeAttr('disabled');
},
toggleVisibility = function(method, args) {
var fields = Array.prototype.slice.call(args);
$.each(fields, function(idx, field) {
field.closest('.form--field, .form--grouping')[method]();
});
},
hide = function() { toggleVisibility('hide', arguments); },
show = function() { toggleVisibility('show', arguments); },
toggleFormat = function() {
var searchable = $('#searchable_container'),
unsearchable = function() { searchable.attr('checked', false).hide(); };
// defaults (reset these fields before doing anything else)
$.each([spanDefaultBool, spanDefaultTextSingle], function(idx, element) {
deactivate(element);
});
show(defaultValueFields);
activate(spanDefaultTextMulti);
switch (format.val()) {
case 'list':
hide(lengthField, regexpField);
show(searchable);
activate(possibleValues);
break;
case 'bool':
activate(spanDefaultBool);
deactivate(spanDefaultTextMulti);
deactivate(possibleValues);
hide(lengthField, regexpField, searchable);
unsearchable();
break;
case 'date':
activate(spanDefaultTextSingle);
deactivate(spanDefaultTextMulti);
deactivate(possibleValues);
hide(lengthField, regexpField);
unsearchable();
break;
case 'float':
case 'int':
activate(spanDefaultTextSingle);
deactivate(spanDefaultTextMulti);
deactivate(possibleValues);
show(lengthField, regexpField);
unsearchable();
break;
case 'user':
case 'version':
deactivate(defaultValueFields);
deactivate(possibleValues);
hide(lengthField, regexpField, defaultValueFields);
unsearchable();
break;
default:
show(lengthField, regexpField, searchable);
deactivate(possibleValues);
break;
}
};
// assign the switch format function to the select field
format.on('change', toggleFormat).trigger('change');
});
$(function() {
var localeSelectors = $('.locale_selector');
localeSelectors.change(function () {
var lang = $(this).val(),
span = $(this).closest('.translation');
span.attr('lang', lang);
}).trigger('change');
});
}(jQuery));

@ -0,0 +1,53 @@
//-- 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.
//++
(function($) {
$(function() {
/*
* See /app/views/timelog/_date_range.html.erb
*/
if ($('#date-range').length < 1) {
return;
}
var intervalInputs = $('#to, #from'),
// select
period = $('#period'),
// radio buttons
periodOptionList = $('#period_type_list'),
periodOptionInterval = $('#period_type_interval');
var activateRadiobutton = function(radioButton) {
return function() {
radioButton.attr('checked', true);
};
};
intervalInputs.on('click focus', activateRadiobutton(periodOptionInterval));
period.on('click focus', activateRadiobutton(periodOptionList));
});
}(jQuery));

@ -206,10 +206,6 @@ jsToolBar.prototype = {
}
this.toolNodes = {}; // vide les raccourcis DOM/**/
var h = document.createElement('div');
h.className = 'help';
h.innerHTML = this.help_link;
// Draw toolbar elements
var b, tool, newTool;
@ -230,7 +226,7 @@ jsToolBar.prototype = {
}
}
}
this.toolbar.appendChild(h);
this.toolbar.appendChild(this.help_link);
},
singleTag: function(stag,etag) {

@ -1,196 +0,0 @@
//-- 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.
//++
//= require mousetrap
(function($){
var accessibleListSelector = "table.list, table.keyboard-accessible-list";
var accessibleRowSelector = "table.list tr, table.keyboard-accessible-list tr";
var menu_sidebar = function() {
return $('div#menu-sidebar');
};
var we_are_in_project = function() {
return menu_sidebar().size() === 1;
};
var show_help_modal = function(){
var relative_url_root = jQuery('body').data('relative_url_root');
var template_path = relative_url_root + 'help/keyboard_shortcuts';
modalHelperInstance.createModal(template_path);
};
var go_overview = function(){
if (we_are_in_project()) {
menu_sidebar().find('.overview')[0].click();
}
};
var go_my_page = function(){
var my_page = $('.account-nav .my-page');
if (my_page.size() === 1) {
my_page[0].click();
}
};
var go_work_packages = function(){
if (we_are_in_project()) {
menu_sidebar().find('.work-packages')[0].click();
}
};
var go_timelines = function(){
if (we_are_in_project()) {
menu_sidebar().find('.timelines')[0].click();
}
};
var go_wiki = function(){
if (we_are_in_project()) {
menu_sidebar().find('.Wiki')[0].click();
}
};
var go_activity = function(){
if (we_are_in_project()) {
menu_sidebar().find('.activity')[0].click();
}
};
var go_calendar = function(){
if (we_are_in_project()) {
menu_sidebar().find('.calendar')[0].click();
}
};
var go_news = function(){
if (we_are_in_project()) {
menu_sidebar().find('.news')[0].click();
}
};
var go_edit = function(){
edit_link = $('[accesskey=3]')[0];
if (edit_link !== undefined) {
edit_link.click();
}
};
var open_more_menu = function(){
more_menu = $('[accesskey=7]')[0];
if (more_menu !== undefined) {
more_menu.click();
}
};
var go_preview = function(){
preview_link = $('[accesskey=1]')[0];
if (preview_link !== undefined) {
preview_link.click();
}
};
var new_work_package = function(){
if (we_are_in_project()) {
menu_sidebar().find('.new-work-package')[0].click();
}
};
var search_project = function(){
$('#project-search-container').parents('li.drop-down').click();
};
var search_global = function(){
$('#search_wrap .search_field').focus();
};
var find_list_in_page = function(){
var dom_lists, focus_elements;
focus_elements = [];
dom_lists = $(accessibleListSelector);
dom_lists.find('tbody tr').each(function(index, tr){
var first_link = $(tr).find('a:visible')[0];
if ( first_link !== undefined ) { focus_elements.push(first_link); }
});
return focus_elements;
};
var focus_item_offset = function(offset){
var list, index;
list = find_list_in_page();
if (list === null) { return; }
index = list.indexOf($(document.activeElement).parents(accessibleRowSelector).find('a:visible')[0]);
$(list[(index+offset+list.length) % list.length]).focus();
};
var focus_next_item = function(){
focus_item_offset(1);
};
var focus_previous_item = function(){
focus_item_offset(-1);
};
Mousetrap.bind('?', function(){ show_help_modal(); return false; });
Mousetrap.bind('g o', function(){ go_overview(); return false; });
Mousetrap.bind('g m', function(){ go_my_page(); return false; });
Mousetrap.bind('g w p', function(){ go_work_packages(); return false; });
Mousetrap.bind('g w i', function(){ go_wiki(); return false; });
Mousetrap.bind('g a', function(){ go_activity(); return false; });
Mousetrap.bind('g c', function(){ go_calendar(); return false; });
Mousetrap.bind('g n', function(){ go_news(); return false; });
Mousetrap.bind('g t', function(){ go_timelines(); return false; });
Mousetrap.bind('g e', function(){ go_edit(); return false; });
Mousetrap.bind('g p', function(){ go_preview(); return false; });
Mousetrap.bind('n w p', function(){ new_work_package(); return false; });
Mousetrap.bind('j', function(){ focus_next_item(); return false; });
Mousetrap.bind('k', function(){ focus_previous_item(); return false; });
Mousetrap.bind('m', function(){ open_more_menu(); return false; });
Mousetrap.bind('p', function(){ search_project(); return false; });
Mousetrap.bind('s', function(){ search_global(); return false; });
jQuery(function(){
// simulated hover effect on table lists when using the keyboard
var tables = jQuery(accessibleListSelector);
if (tables.size() === 0) { return; }
tables.on('blur', 'tr *', function(){
jQuery(this).parents(accessibleRowSelector).removeClass('keyboard_hover');
});
tables.on('focus', 'tr *', function(){
jQuery(this).parents(accessibleRowSelector).addClass('keyboard_hover');
});
});
})(jQuery);

@ -51,7 +51,7 @@ jQuery(document).ready(function($) {
};
formatItemSelection = function (item) {
return item.name;
return OpenProject.Helpers.markupEscape(item.name);
};
$("#members_add_form select.select2-select").each(function (ix, elem){

@ -26,16 +26,16 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
/***** Links ****
(function($) {
$(function() {
/*
* @see /app/views/search/index.html.erb
*/
if ($('#search-filter').length < 1) {
return;
}
/* TODO
$('#search-input').focus();
#content
#history
background: image-url("dotted-separator.gif") repeat-x scroll 0 bottom transparent
.wiki-content
p, li
width: 700px
.required
color: #008BD0
});
}(jQuery));

@ -75,7 +75,7 @@ function toggleFieldset(el) {
}
jQuery(document).ready(function() {
jQuery('fieldset.header_collapsible').each(function(index) {
jQuery('fieldset.form--fieldset.-collapsible').each(function() {
var fieldset = getFieldset(this);
setFieldsetToggleState(fieldset);

@ -29,6 +29,10 @@
//requires 'autocompleter'
jQuery(document).ready(function($) {
var formatSelection = function(item) {
return OpenProject.Helpers.markupEscape(item.name || (item.project ? item.project.name : ''));
};
[
$("#reporting_reported_project_status_id"),
$("#timeline_options_initial_outline_expansion"),
@ -93,14 +97,12 @@ jQuery(document).ready(function($) {
[
$("#reporting_reporting_to_project_id"),
$("#project_association_select_project_b_id")
$("#project_association_project_b_id")
].forEach(function (item) {
// Stuff borrowed from Core application.js Project Jump Box
$(item).autocomplete({
multiple: false,
formatSelection: function (item) {
return item.name || item.project.name;
},
formatSelection: formatSelection,
formatResult : OpenProject.Helpers.Search.formatter,
matcher : OpenProject.Helpers.Search.matcher,
query : OpenProject.Helpers.Search.projectQueryWithHierarchy(
@ -117,9 +119,7 @@ jQuery(document).ready(function($) {
$(item).autocomplete({
multiple: true,
sortable: true,
formatSelection: function (item) {
return item.name || item.project.name;
},
formatSelection: formatSelection,
formatResult : OpenProject.Helpers.Search.formatter,
matcher : OpenProject.Helpers.Search.matcher,
query : OpenProject.Helpers.Search.projectQueryWithHierarchy(
@ -135,9 +135,7 @@ jQuery(document).ready(function($) {
// Stuff borrowed from Core application.js Project Jump Box
$(item).autocomplete({
multiple: true,
formatSelection: function (item) {
return item.name || item.project.name;
},
formatSelection: formatSelection,
formatResult : OpenProject.Helpers.Search.formatter,
matcher : OpenProject.Helpers.Search.matcher,
query : OpenProject.Helpers.Search.projectQueryWithHierarchy(
@ -147,24 +145,22 @@ jQuery(document).ready(function($) {
});
});
$("#content").find("input").each(function (index, e) {
e = $(e);
if (
((e.attr("type") === "text" || e.attr("type") === "hidden") && e.val() !== "" && !e.hasClass("select2-input")) ||
(e.attr("type") === "checkbox" && e.attr("checked"))
) {
showFieldSet(e);
}
});
var fields = $("#content").find("input")
.not("[type='radio']")
.not("[class^='select2-']")
.not(".button")
.not("[type='hidden']");
$('#content').find('.cf_boolean_select').each(function (index, field) {
field = $(field);
if (field.val() !== '') {
showFieldSet(field);
fields.each(function(idx, element) {
var el = $(element);
if (el.is(":checked") && el.is("[type='checkbox']")) {
showFieldSet(el);
}
if (el.is("[type='text']") && el.val() !== "") {
showFieldSet(el);
}
});
function showFieldSet(field) {
field.closest("fieldset").removeClass('collapsed').children("div").show();
field.closest("fieldset").removeClass("collapsed").children("div").show();
}
});

@ -111,12 +111,12 @@
var menu_start_position;
if (this.menu_container.next().get(0) != undefined && (this.menu_container.next().get(0).tagName == 'H2')){
menu_start_position = this.menu_container.next().innerHeight() + this.menu_container.next().position().top;
this.menu_container.find("ul.action_menu_more").css({ top: menu_start_position });
this.menu_container.find("ul.legacy-actions-more").css({ top: menu_start_position });
}
else if(this.menu_container.next().hasClass("wiki-content") && this.menu_container.next().children().next().first().get(0) != undefined && this.menu_container.next().children().next().first().get(0).tagName == 'H1'){
var wiki_heading = this.menu_container.next().children().next().first();
menu_start_position = wiki_heading.innerHeight() + wiki_heading.position().top;
this.menu_container.find("ul.action_menu_more").css({ top: menu_start_position });
this.menu_container.find("ul.legacy-actions-more").css({ top: menu_start_position });
}
},

@ -34,6 +34,26 @@ var WorkPackage = WorkPackage || {};
(function($) {
var init;
// TODO: remove this, once the issue edit view is completely angular based
var bodyInjector = function() { return angular.element('body').injector(); };
var manuallyCompile = function(button) {
if (!window.angular || button.length < 1) {
return;
}
bodyInjector().invoke(['$compile', function($compile) {
var scope = angular.element(button).scope();
$compile(button)(scope);
}])
};
var initializeAtWho = function(section) {
var textareas = section.find('textarea');
bodyInjector().invoke(['AutoCompleteHelper', function(AutoCompleteHelper) {
AutoCompleteHelper.enableTextareaAutoCompletion(textareas);
}]);
}
init = function () {
$.ajaxAppend({
@ -53,6 +73,11 @@ var WorkPackage = WorkPackage || {};
}, 200);
enable_textarea_auto_completion($("#work_package_notes"));
$("#work_package_notes").focus();
// TODO: see last todo
var previewButton = update.find(".preview.button")
manuallyCompile(previewButton);
initializeAtWho(update);
}
});

@ -0,0 +1,150 @@
//-- 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 open_project_global/all
@import fonts/openproject_icon_font
$jstoolbar--icon-background: #fff
$jstoolbar--icon-hover-border: #ccc
$jstoolbar--icon-border: #fff
$jstoolbar--icon-active-border: #bbb
$jstoolbar--icon-active-background: #eee
.jstEditor
padding-left: 0
textarea, iframe
margin: 0
.jstHandle
height: 10px
font-size: 0.1em
cursor: s-resize
.jstElements
@include grid-block
text-align: center
margin-bottom: 0.25rem
line-height: 1.6rem
justify-content: flex-end
button
@include grid-content
flex: 0 1 2rem
padding: 0.25rem
margin-left: 0.25rem
height: 1.625rem
width: 1.625rem
max-width: 1.625rem
border: 1px solid $jstoolbar--icon-border
background-color: $jstoolbar--icon-background
color: $body-font-color
border-radius: 2px
overflow-y: hidden
line-height: 1.3rem
&:before
@include icon-common
&:hover
border-color: $jstoolbar--icon-hover-border
cursor: pointer
&:focus
border-color: $jstoolbar--icon-hover-border
&.-active
border-color: $jstoolbar--icon-hover-border
box-shadow: inset 0px 0px 3px $jstoolbar--icon-active-border
background: $jstoolbar--icon-active-background
span
display: none
.jstb_help
font-size: 0.8125rem
padding: 0.35rem
line-height: 1rem
&:before
color: $body-font-color
padding: 0
span
display: inline
.jstSpacer
width: 0
font-size: 1px
margin-right: 4px
.jstb_strong:before
content: "\e042"
.jstb_em:before
content: "\e070"
.jstb_ins:before
content: "\e0b3"
.jstb_del:before
content: "\e072"
.jstb_code:before
content: "\e050"
.jstb_h1:before
content: "\e0d6"
.jstb_h2:before
content: "\e0d7"
.jstb_h3:before
content: "\e0d8"
.jstb_ul:before
content: "\e07b"
.jstb_ol:before
content: "\e07d"
.jstb_bq:before
content: "\e08d"
.jstb_unbq:before
content: "\e08e"
.jstb_pre:before
content: "\e0d9"
.jstb_link:before
content: "\e013"
.jstb_img:before
content: "\e06c"

@ -0,0 +1,731 @@
//-- 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.
//++
// IMPORTANT!
// This is a "junk-drawer" containing CSS rule sets that could not be easily
// placed elsewhere. Pleade DO NOT add to this file. Instead MOVE, refactor or
// REMOVE with ruthlessness.
#watchers
ul
margin: 0
padding: 0
a.delete
opacity: 0.4
&:hover
opacity: 1
.highlight
background-color: #FCFD8D
&.token-1
background-color: #faa
&.token-2
background-color: #afa
&.token-3
background-color: #aaf
.contextual
float: right
white-space: nowrap
line-height: 1.4em
margin-top: 8px
padding-left: 10px
input, select
font-size: 0.9em
.message .contextual
margin-top: 0
form
display: inline
hr
width: 100%
height: 1px
background: #ccc
border: 0
blockquote
font-style: italic
border-left: 3px solid #e0e0e0
padding-left: 0.6em
margin-left: 2.4em
blockquote
margin-left: 0
li p
margin-top: 0
p
&.breadcrumb
font-size: 0.9em
margin: 4px 0 4px 0
&.footnote
font-size: 0.9em
margin-top: 0
margin-bottom: 0
div.issue div.subject
div div
padding-left: 16px
p
margin: 0
margin-bottom: 0.1em
font-size: 90%
color: #999
> div > p
margin-top: 0.5em
.buttons
margin-bottom: 1.4em
margin-top: 1em
div
&#work_package-changesets
float: right
width: 45%
margin: 1em 0 1em 1em
background: #fff
padding-left: 1em
h3
margin-top: 0
div.changeset
padding: 4px
border-bottom: 1px solid #ddd
p
margin-top: 0
margin-bottom: 1em
&#activity dl
margin-left: 2em
#search-results
margin-left: 2em
div#activity dd, #search-results dd
margin-bottom: 1em
padding-left: 18px
font-size: 0.9em
div#activity
dt
&.me .time
border-bottom: 1px solid #999
.time
color: #777
font-size: 80%
dd .description
font-style: italic
#search-results dd .description
font-style: italic
div#activity span.project:after, #search-results span.project:after
content: " -"
div#activity dd span.description
display: block
color: #808080
#search-results dd
span.description
display: block
color: #808080
margin-bottom: 1em
padding-left: 20px
margin-left: 0
div#search-results-counts
float: right
ul
margin-top: 0.5em
li
list-style-type: none
float: left
margin-left: 1em
.search-pagination
text-align: center
a
padding: 0 5px
#project-search-container .select2-container
display: block
div
&#roadmap
.related-issues
border: 0
margin-bottom: 1em
td.checkbox
display: none
.wiki
h1
&:first-child
display: none
font-size: 120%
h2
font-size: 110%
&#version-summary
float: right
width: 380px
margin-left: 16px
margin-bottom: 16px
background-color: #fff
.total-hours
text-align: right
.top-page
width: 100%
border-bottom: 1px solid #bbbbbb
margin: 0 0 10px
h2
padding-right: 0 !important
border: none
margin: 0
text-align: left
display: block
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
ul
margin: 0
text-align: right
white-space: nowrap
ul.projects
margin: 0
padding-left: 1em
&.root
margin: 0
padding: 0
ul
border: none
&.projects
border-left: 3px solid #e0e0e0
li
&.root
list-style-type: none
margin-bottom: 1em
&.child
list-style-type: none
margin-top: 1em
div.root a.project
font-weight: bold
margin: 0 0 10px 0
#type_project_ids
ul
margin: 0
padding-left: 1em
li
list-style-type: none
ul.properties
padding: 0
font-size: 0.9em
color: #333
li
list-style-type: none
span
font-style: italic
.total-hours
font-size: 110%
font-weight: bold
span.hours-int
font-size: 120%
.autoscroll
overflow-x: auto
padding: 1px
margin-bottom: 1.2em
#workflow_copy_form select
width: 200px
textarea#custom_field_possible_values
width: 99%
div.attachments
margin-top: 12px
p
margin: 4px 0 2px 0
img
vertical-align: middle
span.author
font-size: 0.9em
color: #888
p.other-formats
font-size: 0.9em
color: #666
.other-formats span + span:before
content: "| "
/* Project members tab */
div#tab-content-members
.user.status_registered, label.status_registered
opacity: 0.8
input#user_search
width: 100%
.quick_info
padding-bottom: 0.5em
&.attributes .label
font-weight: bold
#activity dt
clear: left
.journal-link
float: right
h2 img
vertical-align: middle
h1.title
margin: 12px 24px 9px
form#issue-list
position: relative
div.issue hr
margin-top: 10px
margin-bottom: 10px
clear: both
#content div.issue h3, div.issue h3
border: 0
margin-top: -6px
margin-bottom: 0
#content div.issue table
td
background: none
border: 0 none
padding: 0 3px
padding-left: 0
th
background: none
border: 0 none
padding: 0 3px
padding-left: 0
font-weight: bold
.attachments h4
margin-bottom: 6px
background: image-url("files-showhide.png") no-repeat right bottom
cursor: pointer
&.closed
background-position: right 5px
table.files
display: table
#content table.files
td
border: 0
background: none
th
border: 0
background: none
font-weight: bold
padding: 1px
border: 0
background: none
td
color: #555
padding: 1px
.opt-desc
width: 60%
td a
position: relative
#content blockquote
padding-left: 22px
.wiki
ol, ul
padding-left: 22px
blockquote
font-style: italic
background: image-url("blockquote-bg.png") no-repeat 5px 3px
#project-links
right: 30px
color: #ccc
font-weight: bold
.nosidebar
blockquote
margin: 1em 0
p
margin-bottom: 1em
li
&.root
margin-bottom: 24px
.nosidebar ul.projects
margin: 24px 0 0
ul
margin: 0
ul.projects .description
.nosidebar ul.projects li
list-style: none outside none
background: none
ul.projects
a
font-weight: bold
li div.root
margin-bottom: 12px
.profile-wrap
float: right
position: relative
width: 42px
height: 42px
top: 7px
right: 14px
/* file table hovers */
a.has-thumb
img
position: absolute
display: none
border: 1px solid #a6c6cf
padding: 4px
background: #fff
border-radius: 3px
&.active
left: -10px
background: image-url("thumb-arrow-right.png") no-repeat left center
padding-left: 10px
margin-right: -10px
td.issue div.issue-wrap-outer
position: relative
.menu li
position: relative
&:first-child
border-top: 0
&:last-child
border-bottom: 0
.inline
display: inline
form#issue-list
display: block
.js-tooltip
width: 100%
.js-tooltip-inner
width: 100%
max-height: none
.js-tooltip .issue-tooltip-description
max-height: 200px
overflow: hidden
/* roadmap breathing */
#roadmap h3
margin: 21px 0 12px
tr.context-menu-selection td.priority
background: none !important
ul.projects div.root a.project
font-family: inherit
div.issue div#relations
margin-top: 25px
/* all kinds of wonderful tweaks*/
.question pre
color: #111
div.issue hr
width: auto
.question .wiki
margin: 0
.wiki
ol, ul
margin-bottom: 6px
#content
h3
margin: 12px 0 6px
h2 + h3
margin-top: 12px
.nosidebar
ol.ui-sortable li
list-style: none outside none
tr.time-entry
white-space: normal
/* comments */
.wiki ol li
list-style: decimal inside
/* scm */
#content table .changeset td.id a:hover
text-decoration: underline
#content table.files .opt-desc
width: 45%
/* member settings [pc] */
select#member_role_id
width: 75px
/* fix for thumbnail jankiness */
a.has-thumb
&.active
left: auto
margin-left: -10px
margin-right: 0
*left: -10px
/* IE6 & 7 hacks */
*margin-left: 0
img
z-index: 1001
#more-menu.drop-down ul li a.projects
border-top: 1px solid #555
.reorder-icons img
padding-right: 3px
padding-left: 3px
/* Cut of text with '...' - working on all major browsers and IE6+
* not working for Firefox < 7 */
.ellipsis
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
-o-text-overflow: ellipsis
-ms-text-overflow: ellipsis
label.label-with-input
display: block
white-space: nowrap
zoom: 1
margin-left: 0
float: none
#query_form_content
padding-top: 10px
#lower-title-bar
div.contextual
margin-top: -8px
margin-top: 30px
margin-left: 10px
#watchers .contextual
margin-top: 0
div
&.issues.box > p, &.mypage-box p
margin-top: 15px
&.overview
padding: 6px
margin-bottom: 10px
line-height: 1.5em
td.table-buttons
vertical-align: middle
select#available_columns
margin-right: 0
.pages-hierarchy
padding-left: 10px
list-style-type: disc
list-style-position: inside
#menu-sidebar.hidden
display: none
div#watchers
margin-top: 25px
> form > p
margin-top: 5px
a > img.imgtag-icon
float: left
margin-right: 3px
th.checkbox img
margin-left: 3px
margin-top: 3px
p.buttons
margin-left: 10px
div.contextual > a.icon, p.buttons > a, ul.action_menu_main > li
padding-right: 10px
strong.related-issues-heading
display: block
margin-top: 10px
div.indent
padding-left: 10px
/* Menu item configuration */
.menu-item-form
p
padding-left: 0
label
display: inline-block
margin-bottom: 10px
margin-left: 0
width: auto
font-weight: bold
select#parent_wiki_menu_item
margin-left: 7px
margin-top: -1px
#item-name
float: left
padding-left: 3px
margin-right: 4px
line-height: 21px
label#with-select
margin-left: 0
select#parent_wiki_menu_item_wiki_page
margin-bottom: 10px
p
&.item-name
padding-top: 10px
&.main_item
padding-bottom: 0
&.wiki_menu_item_optional_links
margin-left: 10px
padding-top: 0
#content
#history
background: image-url("dotted-separator.gif") repeat-x scroll 0 bottom transparent
.wiki-content
p, li
width: 700px
.required
color: #008BD0
/*Gannt chart fix IE 6 */
.task
line-height: 1em
/*Cost-Plugin specific styles */
.icon-pieces
background-image: image-url("webalys/units.png") !important
.icon-pieces-time
background-image: image-url("webalys/time.png") !important
body
&.theme-Bsp .buttons .apply, &.theme-Dtag .buttons .apply
background-color: #24b3e7
input::-webkit-input-placeholder, :-moz-placeholder
color: #000000
#ui-dialog-closer
background-image: image-url("modal_close.png")
cursor: pointer
height: 33px
position: absolute
right: -15px
top: -15px
width: 33px
z-index: 5000
.ui-datepicker .ui-priority-secondary
opacity: 1
filter: Alpha(Opacity = 100)
font-weight: bold
h4.comment
margin-bottom: 8px
margin-top: 18px
img
margin-right: 3px
.atwho-view
z-index: 25
.cur
background: #FFFFBB
color: #4B4B4B
strong
color: black
/*
* Legacy headings to create headings which are similiar to the toolbar
* but cannot use the toolbar yet (e.g Legacy forms)
*/
.legacy-heading
// this will harmonize the headings in the old legacy form
// to be the same as if using a toolbar component
// TODO: once WP full screen create hits, remove this
padding-top: 12px
border: 0

@ -0,0 +1,613 @@
//
// FOUNDATION FOR APPS SETTINGS
// ----------------------------
//
// Table of Contents:
//
// 1. CSS Exports
// 2. Global Styles
// 3. Breakpoints
// 4. Typography
// 5. Grid
// 6. Button
// 7. Accordion
// 8. Action Sheet
// 9. Block List
// 10. Button Group
// 11. Card
// 12. Extras
// 13. Forms
// 14. Iconic
// 15. Label
// 16. Menu Bar
// 17. Modal
// 18. Motion UI
// 19. Notification
// 20. Off-canvas
// 21. Panel
// 22. Popup
// 23. Switch
// 24. Tabs
// 25. Title Bar
@import "helpers/functions";
// 1. CSS Exports
// - - - - - - - - - - - - - - -
// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
$include-css: (
accordion: false,
action-sheet: false,
block-list: false,
button: false,
button-group: false,
card: true,
coloring: false,
extras: false,
forms: false,
grid: true,
iconic: false,
label: true,
badge: false,
list: false,
menu-bar: false,
modal: false,
motion: false,
notification: false,
off-canvas: false,
panel: false,
popup: false,
switch: false,
tabs: false,
title-bar: false,
typography: true,
utilities: true,
);
// 2. Global Styles
// - - - - - - - - - - - - - - -
// This sets 1rem to be 16px
// $rem-base: 16px;
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
// $base-font-size: 100%;
// $base-line-height is 24px while $base-font-size is 16px
// $base-line-height: 1.5;
// Text selector helpers
// $headers: "h1,h2,h3,h4,h5,h6";
// We use these to define default font weights
// $font-weight-normal: normal;
// $font-weight-bold: bold;
// We use these to control various global styles
// $body-background: #fff;
// $body-font-color: #222;
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
// $body-font-weight: $font-weight-normal;
// $body-font-style: normal;
// $body-antialiased: true;
// Application Colors
// $primary-color: #00558b;
// $secondary-color: #f1f1f1;
// $alert-color: #F04124;
// $info-color: #A0D3E8;
// $success-color: #43AC6A;
// $warning-color: #F08A24;
// $dark-color: #232323;
// We use these to make sure border radius matches unless we want it different.
// $global-radius: 4px;
// $global-rounded: 1000px;
// We use this for default spacing
// $global-padding: 1rem;
// $global-spacing: rem-calc(15);
// 3. Breakpoints
// - - - - - - - - - - - - - - -
// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
$breakpoints: (
small: rem-calc(300),
medium: rem-calc(640),
large: rem-calc(1200),
xlarge: rem-calc(1440),
xxlarge: rem-calc(1920),
xxxlarge: rem-calc(2048),
);
// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
// $breakpoint-classes: (small medium large);
// 4. Typography
// - - - - - - - - - - - - - - -
// We use these to control header font styles
// $header-font-family: $body-font-family;
// $header-font-weight: $font-weight-normal;
// $header-font-style: $font-weight-normal;
// $header-font-color: #222;
// $header-line-height: 1.4;
// $header-top-margin: .2rem;
// $header-bottom-margin: .5rem;
// $header-text-rendering: optimizeLegibility;
// We use these to control header font sizes
// $h1-font-size: rem-calc(44);
// $h2-font-size: rem-calc(37);
// $h3-font-size: rem-calc(27);
// $h4-font-size: rem-calc(23);
// $h5-font-size: rem-calc(18);
// $h6-font-size: 1rem;
// We use these to control header size reduction on small screens
// $h1-font-reduction: rem-calc(10);
// $h2-font-reduction: rem-calc(10);
// $h3-font-reduction: rem-calc(5);
// $h4-font-reduction: rem-calc(5);
// $h5-font-reduction: 0;
// $h6-font-reduction: 0;
// These control how subheaders are styled.
// $subheader-line-height: 1.4;
// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
// $subheader-font-weight: $font-weight-normal;
// $subheader-top-margin: .2rem;
// $subheader-bottom-margin: .5rem;
// A general <small> styling
// $small-font-size: 60%;
// $small-font-color: scale-color($header-font-color, $lightness: 35%);
// We use these to style paragraphs
// $paragraph-font-family: inherit;
// $paragraph-font-weight: $font-weight-normal;
// $paragraph-font-size: 1rem;
// $paragraph-line-height: 1.6;
// $paragraph-margin-bottom: rem-calc(20);
// $paragraph-aside-font-size: rem-calc(14);
// $paragraph-aside-line-height: 1.35;
// $paragraph-aside-font-style: italic;
// $paragraph-text-rendering: optimizeLegibility;
// We use these to style <code> tags
// $code-color: grayscale($primary-color);
// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
// $code-font-weight: $font-weight-normal;
// $code-background-color: scale-color($secondary-color, $lightness: 70%);
// $code-border-size: 1px;
// $code-border-style: solid;
// $code-border-color: scale-color($code-background-color, $lightness: -10%);
// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
// We use these to style anchors
// $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none;
// $anchor-font-color: $primary-color;
// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
// We use these to style the <hr> element
// $hr-border-width: 1px;
// $hr-border-style: solid;
// $hr-border-color: #ddd;
// $hr-margin: rem-calc(20);
// We use these to style lists
// $list-font-family: $paragraph-font-family;
// $list-font-size: $paragraph-font-size;
// $list-line-height: $paragraph-line-height;
// $list-margin-bottom: $paragraph-margin-bottom;
// $list-style-position: outside;
// $list-side-margin: 1.1rem;
// $list-ordered-side-margin: 1.4rem;
// $list-side-margin-no-bullet: 0;
// $list-nested-margin: rem-calc(20);
// $definition-list-header-weight: $font-weight-bold;
// $definition-list-header-margin-bottom: .3rem;
// $definition-list-margin-bottom: rem-calc(12);
// We use these to style blockquotes
// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
// $blockquote-padding: rem-calc(9 20 0 19);
// $blockquote-border: 1px solid #ddd;
// $blockquote-cite-font-size: rem-calc(13);
// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
// $blockquote-cite-link-color: $blockquote-cite-font-color;
// Acronym styles
// $acronym-underline: 1px dotted #ddd;
// 5. Grid
// - - - - - - - - - - - - - - -
// $container-width: rem-calc(900);
// $block-padding: $global-padding;
// $total-columns: 12;
// $block-grid-max-size: 6;
// 6. Button
// - - - - - - - - - - - - - - -
$button-padding: 0.65em;
// $button-margin: 0 $global-padding $global-padding 0;
// $button-style: solid;
// $button-background: $primary-color;
// $button-background-hover: scale-color($button-background, $lightness: -15%);
// $button-color: auto;
$button-radius: 2px;
// $button-sizes: (
// tiny: 0.7,
// small: 0.8,
// medium: 1,
// large: 1.3,
// );
// $button-font-size: 0.9rem;
// $button-opacity-disabled: 0.5;
// $button-tag-selector: false;
// 7. Accordion
// - - - - - - - - - - - - - - -
// $accordion-border: 1px solid $gray-dark;
// $accordion-title-background: $gray-light;
// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
// $accordion-title-color: isitlight($accordion-title-background);
// $accordion-title-color-active: isitlight($accordion-title-background);
// $accordion-title-padding: $global-padding;
// $accordion-content-padding: $global-padding;
// 8. Action Sheet
// - - - - - - - - - - - - - - -
// $actionsheet-background: white;
// $actionsheet-border-color: #ccc;
// $actionsheet-animate: transform opacity;
// $actionsheet-animation-speed: 0.25s;
// $actionsheet-width: 300px;
// $actionsheet-radius: 4px;
// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
// $actionsheet-padding: $global-padding;
// $actionsheet-tail-size: 10px;
// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
// $actionsheet-link-color: #000;
// $actionsheet-link-background-hover: smartscale($actionsheet-background);
// 9. Block List
// - - - - - - - - - - - - - - -
// $blocklist-background: #fff;
// $blocklist-fullbleed: true;
// $blocklist-fontsize: 1rem;
// $blocklist-item-padding: 0.8rem 1rem;
// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
// $blocklist-item-color-disabled: #999;
// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
// $blocklist-item-icon-size: 0.8;
// $blocklist-header-fontsize: 0.8em;
// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
// $blocklist-header-uppercase: true;
// $blocklist-check-icons: true;
// 10. Button Group
// - - - - - - - - - - - - - - -
// $btngroup-background: $primary-color;
// $btngroup-color: #fff;
// $btngroup-radius: $button-radius;
// 11. Card
// - - - - - - - - - - - - - - -
$card-background: #fff;
$card-color: isitlight($card-background);
$card-border: 1px solid;
$card-radius: 0;
$card-shadow: none;
$card-padding: 10px;
$card-margin: 0.5rem;
$card-divider-background: smartscale($card-background, 7%);
// 12. Extras
// - - - - - - - - - - - - - - -
// $closebutton-position: (top right);
// $closebutton-size: 2em;
// $closebutton-lineheight: 0.5;
// $closebutton-color: #999;
// $closebutton-color-hover: #333;
// $thumbnail-padding: 0.5rem;
// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25);
// 13. Forms
// - - - - - - - - - - - - - - -
// Basic form variables
// $form-fontsize: 1rem;
$form-padding: 0.375rem;
// Text fields
// $input-color: #000;
// $input-color-hover: $input-color;
// $input-color-focus: $input-color;
// $input-background: #fff;
// $input-background-hover: $input-background;
// $input-background-focus: $input-background;
// $input-background-disabled: smartscale($input-background);
// $input-border: 1px solid #ccc;
// $input-border-hover: 1px solid #bbb;
// $input-border-focus: 1px solid #999;
// $input-cursor-disabled: not-allowed;
// Select menus
// $select-color: #000;
// $select-background: #fafafa;
// $select-background-hover: smartscale($select-background, 4%);
// $select-arrow: true;
// $select-arrow-color: $select-color;
// Labels
// $form-label-fontsize: 0.9rem;
// $form-label-margin: 0.5rem;
// $form-label-color: #333;
// Inline labels
// $inlinelabel-color: #333;
// $inlinelabel-background: #eee;
// $inlinelabel-border: $input-border;
// Range slider
// $slider-background: #ddd;
// $slider-height: 1rem;
// $slider-radius: 0px;
// $slider-thumb-height: 1.5rem;
// $slider-thumb-color: $primary-color;
// $slider-thumb-radius: 0px;
// Progress and meter
// $meter-height: 1.5rem;
// $meter-background: #ccc;
// $meter-fill: $primary-color;
// $meter-fill-high: $success-color;
// $meter-fill-medium: #e7cf00;
// $meter-fill-low: $alert-color;
// $meter-radius: 0;
// 14. Iconic
// - - - - - - - - - - - - - - -
// $iconic-primary-fill: $primary-color;
// $iconic-primary-stroke: $primary-color;
// $iconic-accent-fill: $iconic-primary-fill;
// $iconic-accent-stroke: $iconic-accent-fill;
// 15. Label
// - - - - - - - - - - - - - - -
$label-fontsize: 1em;
$label-padding: 10px;
$label-radius: 10px;
$label-background: $gray;
$label-color: $gray-dark;
// $badge-fontsize: 0.8em;
// $badge-diameter: 1.5rem;
// $badge-background: $primary-color;
// $badge-color: #fff;
// 16. Menu Bar
// - - - - - - - - - - - - - - -
// $menubar-fontsize: 1rem;
// $menubar-background: #fff;
// $menubar-background-hover: smartscale($menubar-background, 7%);
// $menubar-background-active: $menubar-background-hover;
// $menubar-color: isitlight($menubar-background);
// $menubar-color-hover: $menubar-color;
// $menubar-color-active: $menubar-color-hover;
// $menubar-item-padding: $global-padding;
// $menubar-icon-size: 25px;
// $menubar-icon-spacing: $menubar-item-padding;
// 17. Modal
// - - - - - - - - - - - - - - -
// $modal-background: #fff;
// $modal-border: 0;
// $modal-radius: 0px;
// $modal-shadow: none;
// $modal-zindex: 1000;
// $modal-sizes: (
// tiny: 300px,
// small: 500px,
// medium: 600px,
// large: 800px,
// );
// $modal-overlay-class: 'modal-overlay';
// $modal-overlay-background: rgba(#333, 0.7);
// 18. Motion UI
// - - - - - - - - - - - - - - -
// Classes to use when triggering in/out animations
// $motion-class: (
// in: "ng-enter",
// out: "ng-leave",
// );
// $motion-class-active: (
// in: "ng-enter-active",
// out: "ng-leave-active",
// );
// $motion-class-stagger: (
// in: "ng-enter-stagger",
// out: "ng-leave-stagger",
// );
// $motion-class-showhide: (
// in: "ng-hide-remove",
// out: "ng-hide-add",
// );
// $motion-class-showhide-active: (
// in: "ng-hide-remove-active",
// out: "ng-hide-add-active",
// );
// Set if movement-based transitions should also fade the element in and out
// $motion-slide-and-fade: false;
// $motion-hinge-and-fade: true;
// $motion-scale-and-fade: true;
// $motion-spin-and-fade: true;
// Default speed for transitions and animations
// $motion-duration-default: 500ms;
// Slow and fast modifiders
// $motion-duration-slow: 750ms;
// $motion-duration-fast: 250ms;
// $motion-stagger-duration-default: 150ms;
// $motion-stagger-duration-short: 50ms;
// $motion-stagger-duration-long: 300ms;
// Default timing function for transitions and animations
// $motion-timing-default: ease;
// Built-in and custom easing functions
// Every item in this map becomes a CSS class
// $motion-timings: (
// linear: linear,
// ease: ease,
// easeIn: ease-in,
// easeOut: ease-out,
// easeInOut: ease-in-out,
// bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
// bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
// bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
// );
// Default delay for all transitions and animations
// $motion-delay-default: 0;
// Short and long delay modifiers
// $motion-delay-short: 300ms;
// $motion-delay-long: 700ms;
// 19. Notification
// - - - - - - - - - - - - - - -
// $notification-default-position: right top;
// $notification-width: rem-calc(400);
// $notification-offset: $global-padding;
// $notification-background: $primary-color;
// $notification-color: white;
// $notification-padding: $global-padding;
// $notification-radius: 4px;
// $notification-icon-size: 60px;
// $notification-icon-margin: $global-padding;
// $notification-icon-align: top;
// 20. Off-canvas
// - - - - - - - - - - - - - - -
// $offcanvas-size-horizontal: 250px;
// $offcanvas-size-vertical: 250px;
// $offcanvas-background: #fff;
// $offcanvas-color: isitlight($offcanvas-background);
// $offcanvas-padding: 0;
// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
// $offcanvas-animation-speed: 0.25s;
// $offcanvas-frame-selector: '.grid-frame';
// 21. Panel
// - - - - - - - - - - - - - - -
// $panel-size-horizontal: 300px;
// $panel-size-vertical: 300px;
// $panel-padding: 0;
// $panel-background: #fff;
// $panel-shadow: 3px 0 10px rgba(black, 0.25);
// DEPRECATED: these variables will be removed in a future version.
// $panel-animation-speed: 0.25s;
// 22. Popup
// - - - - - - - - - - - - - - -
// $popup-width: rem-calc(300);
// $popup-background: #fff;
// $popup-border: 0;
// $popup-radius: 0;
// $popup-shadow: 0 0 10px rgba(#000, 0.25);
// 23. Switch
// - - - - - - - - - - - - - - -
// $switch-width: rem-calc(50);
// $switch-height: rem-calc(32);
// $switch-background: #ccc;
// $switch-background-active: $primary-color;
// $switch-border: 0;
// $switch-radius: 9999px;
// $switch-animation-speed: 0.15s;
// $switch-paddle-color: white;
// $switch-paddle-offset: 4px;
// 24. Tabs
// - - - - - - - - - - - - - - -
// $tabstrip-background: transparent;
// $tab-title-background: $gray-light;
// $tab-title-background-hover: smartscale($tab-title-background, 5%);
// $tab-title-background-active: smartscale($tab-title-background, 3%);
// $tab-title-color: isitlight($tab-title-background);
// $tab-title-color-active: $tab-title-color;
// $tab-title-padding: $global-padding;
// $tab-content-padding: $global-padding;
// 25. Title Bar
// - - - - - - - - - - - - - - -
// $titlebar-center-width: 50%;
// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
// $titlebar-background: #eee;
// $titlebar-color: #000;
// $titlebar-border: 1px solid #ccc;
// $titlebar-padding: $global-padding;
// $titlebar-item-classes: (
// center: 'center',
// left: 'left',
// right: 'right',
// title: 'title',
// );

@ -0,0 +1,8 @@
# Typography
Typography is divided into content and UI, depending on where the styles are applied.
Content refers to user generated information, such as wiki-syntax based entries, e.g. the description of a work package
UI is everything relating to the application itself.

@ -26,9 +26,7 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
/***** Work Package quick info ****
.quick_info
padding-bottom: 0.5em
&.attributes .label
font-weight: bold
@import fonts/lato
@import fonts/openproject_icon_font
@import content/headings
@import content/wiki

@ -1,3 +1,32 @@
/*-- 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.
++*/
.CodeRay {
background-color: hsl(0,0%,95%);
border: 1px solid silver;

@ -1 +1,22 @@
# Accounts
```
<div class="login-auth-providers">
<h3 class="login-auth-providers-title"><span>
or sign in with your existing account
</span></h3>
<div class="login-auth-provider-list">
<a href="/auth/developer" class="auth-provider auth-provider-developer">
<span class="auth-provider-name">Omniauth Developer</span>
</a>
<a href="/auth/developer" class="auth-provider auth-provider-developer">
<span class="auth-provider-name">Omniauth Developer</span>
</a>
<a href="/auth/developer" class="auth-provider auth-provider-developer">
<span class="auth-provider-name">Omniauth Developer</span>
</a>
</div>
</div>
```

@ -26,42 +26,17 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/mixins
@import content/forms
#login-form
margin-left: auto
margin-right: auto
padding-top: 20px
// label width + label padding-right + input width + input padding-left + input border
width: 155px + 5px + $content_from_input_width + 10px + 2px
.button_highlight
// align with input fields
// label width + label padding-right
margin-left: 155px + 5px
height: 32px
.attribute_wrapper
@include prevent-float-collapse
label
// inline-block can't guarantee a specific width (possibly due to whitespace)
display: block
float: left
input
&[type=password], &[type=text]
// inline-block can't guarantee a specific width
display: block
width: 511px
.login-options-container
margin-bottom: 10px
.login-links
float: right
text-align: right
font-size: 12px
// use id selectors to be specific enough to override general content and top-menu definitions
#content .login-auth-providers, #top-menu #nav-login-content .login-auth-providers
@ -72,7 +47,7 @@
border: none
margin-top: 20px
font-weight: normal
font-size: $global_font_size
font-size: 1rem
text-decoration: none
text-align: center
@ -82,7 +57,7 @@
// line behind title
// from http://codepen.io/ericrasch/pen/Irlpm
&:before
border-top: 2px solid $content_form_separator_color
border-top: 2px solid $content-form-separator-color
content: ""
// this centers the line to the full width specified
margin: 0 auto
@ -100,7 +75,7 @@
span
// to hide the lines from behind the text, you have to set the
// background color the same as the container
background: $content_form_bg_color
background: $content-form-bg-color
padding: 0 15px
.login-auth-provider-list
@ -108,16 +83,16 @@
a.auth-provider
float: left
width: 97px
width: 147px
height: 40px
padding-left: 50px
margin-left: 10px
margin-top: 20px
background-image: url(image-path('auth_provider-developer.png'))
background-image: image-url('auth_provider-developer.png')
background-size: 40px 40px
background-repeat: no-repeat
font-weight: normal
color: $global_font_color
color: $body-font-color
&:hover
text-decoration: none
@ -133,10 +108,10 @@
&:before
width: 100%
span
background: $header_drop_down_bg_color
background: $header-drop-down-bg-color
.login-auth-provider-list
margin-top: -15px
margin-bottom: 10px
#top-menu #nav-login-content .login-auth-providers.no-pwd
margin-top: 0px
margin-top: 0

@ -53,7 +53,7 @@
margin: -28px 0 0 190px
a
color: $context_menu_font_color
color: $context-menu-font-color
font-weight: normal
&:hover
text-decoration: none
@ -61,6 +61,9 @@
display: none
position: absolute
hr
.legacy-actions-more > &
margin: 10px 0
.icon-action-menu
@include icon-action-menu-rules

@ -0,0 +1,343 @@
# Advanced filters
```
@full-width
<fieldset class="advanced-filters--container">
<legend>Selected filters</legend>
<ul class="advanced-filters--filters">
<li class="advanced-filters--filter">
<label for="operators-status_id" class="advanced-filters--filter-name">Status</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select" style="vertical-align: top;">
<option value="o" label="open">open</option>
<option value="=" label="is">is</option>
<option value="!" label="is not" selected="selected">is not</option>
<option value="c" label="closed">closed</option>
<option value="*" label="all">all</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div>
<span class="inline-label">
<select class="form--select -small" style="vertical-align: top;">
<option value="1" label="New">New</option>
<option value="3" label="Resolved" selected="selected">Resolved</option>
<option value="4" label="Feedback">Feedback</option>
<option value="5" label="Closed">Closed</option>
<option value="6" label="Rejected">Rejected</option>
<option value="2" label="In Progress">In Progress</option>
</select>
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0">
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4">
<span class="hidden-for-sighted ng-binding">Enable multiselect</span>
</span>
</a>
</span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li class="advanced-filters--filter">
<label for="operators-assigned_to_id" class="advanced-filters--filter-name">Assignee</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select" style="vertical-align: top;" >
<option value="=" label="is" selected="selected">is</option>
<option value="!" label="is not"> is not</option>
<option value="!*" label="none">none</option>
<option value="*" label="all">all</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div>
<span class="inline-label"><select id="values-assigned_to_id" class="form--select -small" style="vertical-align: top;">
<option value="me" label="&lt;&lt; me &gt;&gt;">
&lt;&lt; me &gt;&gt;
</option>
<option value="13" label="Chadrick Schmidt">
Chadrick Schmidt
</option>
<option value="25" label="Deron Feil">
Deron Feil
</option>
<option value="4" label="Irma Rice">
Irma Rice
</option>
<option value="20" label="Loraine Runolfsdottir">
Loraine Runolfsdottir
</option>
<option value="23" label="Toney Hyatt">
Toney Hyatt
</option>
<option value="15" label="Zena Labadie">
Zena Labadie
</option>
<option value="35" label="est consequatur qui est eos t">
est consequatur qui est eos t
</option>
<option value="36" label="GROPWITHREALLYRELLAYLONGNAMEA">
GROPWITHREALLYRELLAYLONGNAMEA
</option>
</select>
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0">
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4">
<span class="hidden-for-sighted ng-binding">Enable multiselect</span>
</span>
</a>
</span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li id="filter_due_date" class="advanced-filters--filter">
<label for="operators-due_date" class="advanced-filters--filter-name">Due date</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select " id="operators-due_date" style="vertical-align: top;">
<option value="&lt;t+" label="in less than" selected="selected">in less than</option>
<option value="&gt;t+" label="in more than">in more than</option>
<option value="t+" label="in">in</option>
<option value="t" label="today">today</option>
<option value="w" label="this week">this week</option>
<option value="&gt;t-" label="less than days ago">less than days ago</option>
<option value="&lt;t-" label="more than days ago">more than days ago</option>
<option value="t-" label="days ago">days ago</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div id="div-values-due_date">
<span class="inline-label"><input class="advanced-filters--text-field" id="values-due_date" size="3" type="text" required><label for="values_" class="form-label -transparent">days</label></span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li id="filter_start_date" class="advanced-filters--filter">
<label for="operators-start_date" class="advanced-filters--filter-name">Start date</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select " id="operators-start_date" style="vertical-align: top;">
<option value="&lt;t+" label="in less than" selected="selected">in less than</option>
<option value="&gt;t+" label="in more than">in more than</option>
<option value="t+" label="in">in</option>
<option value="t" label="today">today</option>
<option value="w" label="this week">this week</option>
<option value="&gt;t-" label="less than days ago">less than days ago</option>
<option value="&lt;t-" label="more than days ago">more than days ago</option>
<option value="t-" label="days ago">days ago</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div id="div-values-start_date">
<span class="inline-label" ><input class="advanced-filters--text-field" id="values-start_date" size="3" type="text" required> <label for="values_" class="form-label -transparent">days</label></span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li id="filter_priority_id" class="advanced-filters--filter ng-hide">
<label for="operators-priority_id" class="advanced-filters--filter-name">Priority</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select " id="operators-priority_id" style="vertical-align: top;">
<option value="=" label="is" selected="selected">is</option>
<option value="!" label="is not">is not</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div>
<span class="inline-label"><select id="values-priority_id" class="form--select -small" multiple="true" style="vertical-align: top;">
<option value="1" label="Low">
Low
</option>
<option value="2" label="Normal">
Normal
</option>
<option value="3" label="High">
High
</option>
<option value="4" label="Urgent">
Urgent
</option>
<option value="5" label="Immediate">
Immediate
</option>
</select>
<a href="" class="form-label no-decoration-on-hover -transparent" tabindex="0">
<span class="icon-context icon-button icon-minus2 icon4" title="Disable multiselect" icon-name="minus2" icon-title="Disable multiselect" ng-if="isMultiselect" css-class="icon4">
<span class="hidden-for-sighted ng-binding">Disable multiselect</span>
</span>
</a>
</span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li id="filter_cf_8" class="advanced-filters--filter ng-hide">
<label for="operators-cf_8" class="advanced-filters--filter-name">Custom User</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select" id="operators-cf_8" style="vertical-align: top;">
<option value="=" label="is" selected="selected">is</option>
<option value="!" label="is not">is not</option>
<option value="!*" label="none">none</option>
<option value="*" label="all">all</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div>
<span class="inline-label"><select id="values-cf_8" class="form--select -small" style="vertical-align: top;">
<option value="13" label="Chadrick Schmidt">
Chadrick Schmidt
</option>
<option value="25" label="Deron Feil">
Deron Feil
</option>
<option value="4" label="Irma Rice">
Irma Rice
</option>
<option value="20" label="Loraine Runolfsdottir">
Loraine Runolfsdottir
</option>
<option value="23" label="Toney Hyatt">
Toney Hyatt
</option>
<option value="15" label="Zena Labadie">
Zena Labadie
</option>
</select>
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0">
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4">
<span class="hidden-for-sighted ng-binding">Enable multiselect</span>
</span>
</a>
</span>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li id="filter_done_ratio" class="advanced-filters--filter ng-hide">
<label for="operators-done_ratio" class="advanced-filters--filter-name">% done</label>
<div class="advanced-filters--filter-operator">
<select class="advanced-filters--select " id="operators-done_ratio" style="vertical-align: top;" >
<option value="=" label="is" selected="selected">is</option>
<option value="&gt;=" label="&gt;=">&gt;=</option>
<option value="&lt;=" label="&lt;=">&lt;=</option>
<option value="!*" label="none">none</option>
<option value="*" label="all">all</option>
</select>
</div>
<div class="advanced-filters--filter-value">
<div id="div-values-done_ratio">
<input class="advanced-filters--text-field -min" id="values-done_ratio" min="0" type="number" value="" required>
<label for="values_" class="hidden-for-sighted">Enter text</label>
</div>
</div>
<div class="advanced-filters--remove-filter">
<span>
<a href="" class="">
<span class="icon-context icon-button icon-close advanced-filters--remove-filter-icon" title="Delete" icon-name="close" icon-title="Delete" css-class="advanced-filters--remove-filter-icon">
<span class="hidden-for-sighted ng-binding">Delete</span>
</span>
</a>
</span>
</div>
</li>
<li class="advanced-filters--spacer"></li>
<li class="advanced-filters--add-filter">
<label for="add_filter_select" class="advanced-filters--add-filter-label">Add filter:</label>
<div class="advanced-filters--add-filter-value">
<select class="advanced-filters--select" id="add_filter_select">
<option value="0" label="% done">
% done
</option>
<option value="1" label="Assignee's group">
Assignee's group
</option>
<option value="2" label="Assignee's role">
Assignee's role
</option>
<option value="3" label="Author">
Author
</option>
<option value="4" label="Created on">
Created on
</option>
<option value="5" label="Estimated time">
Estimated time
</option>
<option value="6" label="Priority">
Priority
</option>
<option value="7" label="Responsible">
Responsible
</option>
<option value="8" label="Subject">
Subject
</option>
<option value="9" label="Subproject">
Subproject
</option>
<option value="10" label="Custom User">
Custom User
</option>
<option value="11" label="Type">
Type
</option>
<option value="12" label="Updated on">
Updated on
</option>
<option value="13" label="Version">
Version
</option>
<option value="14" label="Watcher">
Watcher
</option>
</select>
</div>
</li>
</ul>
</fieldset>
```

@ -0,0 +1,129 @@
//-- 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.
//++
.advanced-filters--container
@extend %filters--container
padding: rem-calc(10px)
max-height: 50vh
overflow-y: auto
@mixin advanced-filters--sizing()
@include grid-block()
@include breakpoint(medium)
@include grid-size(12)
@include breakpoint(large)
@include grid-size(10)
@include breakpoint(xlarge)
@include grid-size(8)
@include breakpoint(xxlarge)
@include grid-size(6)
@include breakpoint(xxxlarge)
@include grid-size(5)
.advanced-filters--filters
list-style-type: none
margin: 0
.advanced-filters--filter
@include advanced-filters--sizing
align-items: center
padding: 0.5rem 0
.advanced-filters--text-field
@extend .form--text-field, .form--text-field.-small
&:required
box-shadow: none
.advanced-filters--select
@extend .form--select, .form--select.-small, .form--select.-narrow
margin-bottom: 0
.advanced-filters--number-field
@extend .form--text-field, .form--text-field.-small
%advanced-filters--filter-part
.inline-label
margin-bottom: 0
// adding the input rules to be more specific than the resets of
// foundation.
input, select
margin-bottom: 0
.advanced-filters--filter-name
@include grid-content(3)
@extend %advanced-filters--filter-part
overflow-y: hidden
white-space: nowrap
text-overflow: ellipsis
.advanced-filters--filter-operator
@include grid-content(3)
@extend %advanced-filters--filter-part
.advanced-filters--filter-value
@include grid-content(5)
@extend %advanced-filters--filter-part
.advanced-filters--remove-filter
@include grid-content($size: shrink)
@include grid-visible-overflow
padding: 0
.advanced-filters--remove-filter-icon
@extend .icon-close, .icon4
@include grid-content(1)
@include grid-visible-overflow
.advanced-filters--add-filter
@include advanced-filters--sizing
@extend %advanced-filters--filter-part
align-items: center
padding: 0.25rem 0
.advanced-filters--add-filter-label
@include grid-content(shrink)
.advanced-filters--add-filter-label-icon
@extend .icon-add, .icon4
.advanced-filters--add-filter-value
@include grid-content(3)
.advanced-filters--spacer
border-top: 1px solid $filters--border-color
height: 1px
margin: 0.75rem 1rem
fieldset#date-range p
margin: 2px 0 2px 0

@ -40,7 +40,6 @@
text-align: center
padding: 0.6em
z-index: 100
filter: alpha(opacity = 50)
opacity: 0.5
html > body #ajax-indicator
@ -56,7 +55,17 @@ html > body #ajax-indicator
.ajax_appended_information.loading .ajax-indicator
padding-left: 22px
display: block
width: 0em
width: 0
margin-left: auto
margin-right: auto
white-space: nowrap
/***** Ajax indicator *****
// FIXME: find out which values actually apply
#ajax-indicator
position: absolute
/* fixed not supported by IE
background-color: #d9d9d9
border: 1px solid #8f8f8f
opacity: 0.7

@ -0,0 +1,108 @@
# Attributes Groups
## with Attribute Lists
```
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">Details</h3>
</div>
<div class="attributes-group--header-toggle">
<a href="#" class="button -small -transparent">Show all</a>
</div>
</div>
<dl class="attributes-key-value">
<dt class="attributes-key-value--key">Status</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="New">New</span>
</div>
</dd>
<dt class="attributes-key-value--key">Percentage done</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="0">0</span>
</div>
</dd>
<dt class="attributes-key-value--key">Date</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="">-</span>
</div>
</dd>
<dt class="attributes-key-value--key">Priority</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="Normal">Normal</span>
</div>
</dd>
</dl>
</div>
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">People</h3>
</div>
</div>
<dl class="attributes-key-value">
<dt class="attributes-key-value--key">Assignee</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">testing.long.emails@openproject.org</a>
</span>
</span>
</span>
</div>
</dd>
<dt class="attributes-key-value--key">Responsible</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
</span>
<span class="user-avatar--role">
Distinguished Statesman.
Former Minister for Economics and Technology.
</span>
</span>
</span>
</div>
</dd>
</dl>
</div>
```
## with Single Attribute
```
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">Description</h3>
</div>
</div>
<div class="single-attribute wiki-text">
<h2>Capítulo uno</h2>
<p>En un lugar <em>de la Mancha</em>, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas
los viernes, algún palomino de añadidura los domingos, consumían las tres
partes de su hacienda. El resto della concluían sayo de velarte, calzas de
velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de
entresemana se honraba con su vellorí de lo <strong>más fino</strong>.</p>
</div>
</div>
```

@ -26,44 +26,38 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
/*-------------------------------------------------------------------------------
* =06 - Projects Page
*
* This section defines the styles for the projects "home" page.
*------------------------------------------------------------------------------
#project-links
right: 30px
color: #ccc
.attributes-group
margin-top: 1.6875rem
.attributes-group--header
@include grid-block
margin: 0 0 1rem 0
border-bottom: 1px solid #eee
align-items: flex-end
.attributes-group--header-container
@include grid-content
padding: 0 1rem 0.4rem 0
.attributes-group--header-control
@include grid-content(shrink)
padding: 0 0 0.4rem 0
.attributes-group--header-toggle
@include grid-content(shrink)
padding: 0 0 0 1rem
overflow-y: hidden
.button
margin: 0 0 1px 0
// HACK. TODO: Remove H3 element rules in various places.
.attributes-group--header-text,
#content h3.attributes-group--header-text
font-size: 1rem
font-weight: bold
.nosidebar
blockquote
margin: 1em 0
p
margin-bottom: 1em
li
&.root
font-size: 18px
margin-bottom: 24px
&.child
font-size: 14px
.nosidebar ul.projects
margin: 24px 0 0
ul
margin: 0
ul.projects .description
font-size: 12px
.nosidebar ul.projects li
list-style: none outside none
background: none
ul.projects
a
font-weight: bold
li div.root
margin-bottom: 12px
text-transform: uppercase
// properties to reset h3
margin: 0
padding: 0
border: 0

@ -0,0 +1,50 @@
# Attribute Lists (keys and values)
```
<dl class="attributes-key-value">
<dt class="attributes-key-value--key">Custom Float</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -float">
<span title="12.00">12.00</span>
</div>
</dd>
<dt class="attributes-key-value--key">Custom Integer</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -int">
<span title="69">69</span>
</div>
</dd>
<dt class="attributes-key-value--key">Custom Description</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.">
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.
</span>
</div>
</dd>
<dt class="attributes-key-value--key">Custom Description with Long Label</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -text">
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula.">
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula.
</span>
</div>
</dd>
<dt class="attributes-key-value--key">Custom User</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">Max Mustermann</a>
</span>
<span class="user-avatar--role">
Fully Generic Person
</span>
</span>
</span>
</div>
</dd>
</dl>
```

@ -26,18 +26,24 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
/*-------------------------------------------------------------------------------
* =08 - Reusable Classes
*
* This section defines reusable classes for menus, etc.
*------------------------------------------------------------------------------
.attributes-key-value
@include grid-block
@include grid-layout(2)
@include grid-visible-overflow
font-size: 0.875rem
.menu li
position: relative
&:first-child
border-top: 0
&:last-child
border-bottom: 0
.attributes-key-value--key
@extend .form--label
@include grid-size(4)
margin-bottom: 0.1875rem
padding: 0.375rem 0 0.375rem
font-weight: bold
.inline
display: inline
.attributes-key-value--value-container
@include grid-content(8)
@include grid-visible-overflow
margin-bottom: 0.1875rem
padding: 0
.attributes-key-value--value
@include grid-visible-overflow

@ -0,0 +1,35 @@
# Attributes Tables
```
<table class="attributes-table">
<thead>
<tr>
<td>Subject</td>
<td>Status</td>
<td>Assignee</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Lorem ipsum</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
<tr>
<td><a href="#">Lorem ipsum evvrevrevrevrebrebreberberbrebbreevrvrevrebre</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
<tr>
<td><a href="#">Lorem ipsum</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
</tbody>
</table>
```

@ -0,0 +1,57 @@
//-- 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.
//++
.attributes-table
width: 100%
table-layout: fixed
border-collapse: collapse
margin: 0
font-size: 0.9rem
line-height: 1.5
td, th
padding: 0.25rem 0.5rem 0.25rem 0
text-align: left
thead
font-weight: bold
text-transform: uppercase
tbody
td
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
&.-hidden
display: none
.delete-item
cursor: pointer
float: right
height: 1em

@ -0,0 +1,13 @@
# Badges
```
<span class="badge">0</span>
<span class="badge">1</span>
<span class="badge">2</span>
```
```
<span class="badge -secondary">0</span>
<span class="badge -secondary">1</span>
<span class="badge -secondary">2</span>
```

@ -26,13 +26,10 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
/***** My page layout ****
$badge-diameter: 1.25rem
#activity dt
clear: left
.badge
@include badge
.journal-link
float: right
h2 img
vertical-align: middle
&.-secondary
@include badge-style($secondary-color, auto)

@ -3,6 +3,6 @@
```
<div class="content-box">
<h3>Latest news</h3>
<p><a href="#" class="button_highlight">Read more…</a></p>
<p><a href="#" class="button -highlight">Read more…</a></p>
</div>
```

@ -26,7 +26,29 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
.box
padding: 6px
margin-bottom: 10px
line-height: 1.5em
border: 1px solid #e4e4e4
li
&.filter label
clear: left
float: left
width: 170px
&.decorated
margin-left: 20px
list-style: disc outside none
.box p
padding-top: 5px
padding-bottom: 8px
#content .box h3
margin-top: 3px
/* custom query page
#content
.content-box

@ -1,21 +1,137 @@
# Buttons
## Default buttons
```
<a href="#" class="button">Click me</a>
<a href="#" class="button_highlight">Click me</a>
<button class="***button***"><i class="button--icon icon-watch-1"></i><span class="button--text">Watch</span></button>
<button class="***button***"><i class="button--icon icon-watch-1"></i></button>
<button class="***button***">Watch</button>
<button class="***button***" disabled>
<i class="button--icon icon-watch-1"></i><span class="button--text">Watch</span>
</button>
<br>
<a href="#" class="***button*** -with-icon icon-watch-1">Watch</a>
<a href="#" class="***button***">Click to watch</a>
<input type="submit" class="***button***" value="Submit to watch"/>
<input type="submit" class="***button***" value="Do not watch" disabled />
```
## Highlight buttons
```
<input type="submit" class="button" value="Submit me"/>
<input type="submit" class="button" value="Do not submit" disabled />
<button class="button ***-highlight***"><i class="button--icon icon-yes"></i><span class="button--text">Apply</span></button>
<button class="button ***-highlight***"><i class="button--icon icon-yes"></i></button>
<button class="button ***-highlight***">Apply</button>
<button class="button ***-highlight***" disabled>
<i class="button--icon icon-yes"></i><span class="button--text">Apply</span>
</button>
<br>
<a href="#" class="button ***-highlight*** -with-icon icon-yes">Apply</a>
<a href="#" class="button ***-highlight***">Click to apply</a>
<input type="submit" class="button ***-highlight***" value="Submit to apply"/>
<input type="submit" class="button ***-highlight***" value="Do not apply" disabled />
```
## Alternative highlight buttons
```
<input type="submit" class="button_highlight" value="Submit me"/>
<input type="submit" class="button_highlight" value="Do not submit" disabled />
<button class="button ***-alt-highlight***"><i class="button--icon icon-add"></i><span class="button--text">Create</span></button>
<button class="button ***-alt-highlight***"><i class="button--icon icon-add"></i></button>
<button class="button ***-alt-highlight***">Create</button>
<button class="button ***-alt-highlight***" disabled>
<i class="button--icon icon-add"></i><span class="button--text">Create</span>
</button>
<br>
<a href="#" class="button ***-alt-highlight*** -with-icon icon-add">Create</a>
<a href="#" class="button ***-alt-highlight***">Click to create</a>
<input type="submit" class="button ***-alt-highlight***" value="Submit to create"/>
<input type="submit" class="button ***-alt-highlight***" value="Do not create" disabled />
```
## Active (depressed) buttons
```
<button class="button ***-active***"><i class="button--icon icon-fire"></i><span class="button--text">Connect</span></button>
<button class="button ***-active***"><i class="button--icon icon-fire"></i></button>
<button class="button ***-active***">Connect</button>
<button class="button ***-active***" disabled>
<i class="button--icon icon-fire"></i><span class="button--text">Connect</span>
</button>
<br>
<a href="#" class="button ***-active*** -with-icon icon-fire">Connect</a>
<a href="#" class="button ***-active***">Click to connect</a>
<input type="submit" class="button ***-active***" value="Submit to connect"/>
<input type="submit" class="button ***-active***" value="Do not connect" disabled />
```
## Transparent buttons
```
<button class="button ***-transparent***"><i class="button--icon icon-bubble3"></i><span class="button--text">Comment</span></button>
<button class="button ***-transparent***"><i class="button--icon icon-bubble3"></i></button>
<button class="button ***-transparent***">Comment</button>
<button class="button ***-transparent***" disabled>
<i class="button--icon icon-bubble3"></i><span class="button--text">Comment</span>
</button>
<br>
<a href="#" class="button ***-transparent*** -with-icon icon-bubble3">Comment</a>
<a href="#" class="button ***-transparent***">Click to comment</a>
<input type="submit" class="button ***-transparent***" value="Submit to comment"/>
<input type="submit" class="button ***-transparent***" value="Do not comment" disabled />
```
## Button sizes
```
<button class="button ***-tiny***"><i class="button--icon icon-star1"></i></button>
<button class="button ***-tiny***"><i class="button--icon icon-star1"></i><span class="button--text">Tiny</span></button>
<button class="button ***-tiny***">Tiny</button>
<button class="button ***-tiny*** -with-icon icon-star1">Tiny</button>
```
```
<button class="button ***-small***"><i class="button--icon icon-star1"></i></button>
<button class="button ***-small***"><i class="button--icon icon-star1"></i><span class="button--text">Small</span></button>
<button class="button ***-small***">Small</button>
<button class="button ***-small*** -with-icon icon-star1">Small</button>
```
```
<button class="***button***"><i class="button--icon icon-star1"></i></button>
<button class="***button***"><i class="button--icon icon-star1"></i><span class="button--text">Default</span></button>
<button class="***button***">Default</button>
<button class="***button*** -with-icon icon-star1">Default</button>
```
```
<button class="button ***-large***"><i class="button--icon icon-star1"></i></button>
<button class="button ***-large***"><i class="button--icon icon-star1"></i><span class="button--text">Large</span></button>
<button class="button ***-large***">Large</button>
<button class="button ***-large*** -with-icon icon-star1">Large</button>
```
## Expanded buttons
```
<button class="button ***-expand***">Expanded button</button>
<a href="#" class="button ***-expand***">Expanded button as link</a>
```
## Rounded buttons
```
<input type="submit" class="button_active" value="Submit me"/>
<input type="submit" class="button_active" value="Do not submit" disabled />
<button class="button ***-round***">Rounded button</button>
<a href="#" class="button ***-round***">Rounded button as link</a>
```

@ -26,19 +26,108 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
$button--font-color: #222222 !default
$button--background-color: $gray-light !default
$button--background-hover-color: darken($button--background-color, 4.5%) !default
$button--border-color: darken($button--background-color, 10.5%) !default
a.button_highlight, .button_highlight
@include button-highlight
$button--active-font-color: darken($button--background-color, 24%) !default
$button--active-background-color: darken($button--background-color, 4%) !default
$button--active-border-color: darken($button--background-color, 18%) !default
a.button, .button
@include button
&.active
@include button-active
$button--highlight-font-color: white !default
$button--highlight-background-color: $primary-color !default
$button--highlight-background-hover-color: $primary-color-dark !default
a.button_active, .button_active
@include button-active
$button--alt-highlight-font-color: white !default
$button--alt-highlight-background-color: $alternative-color !default
$button--alt-highlight-background-hover-color: darken($alternative-color, 18%) !default
input.button, input.button_highlight
margin-top: 0
padding: 2px 10px
$button--text-icon-spacing: 0.65em !default
.button,
a.button
@extend %button
@include button-size(medium)
@include button-expand(false)
@include button-style($button--background-color, $button--background-hover-color, $button--font-color, $button-style)
border: 1px solid $button--border-color
transition-property: background, border
transition-duration: 0.25s
transition-timing-function: ease-out
&:disabled
@include button-disabled
&:hover
text-decoration: none
&.-with-icon
&::before
padding: 0 $button--text-icon-spacing 0 0
&.-highlight
@include button-style($button--highlight-background-color, $button--highlight-background-hover-color, $button--highlight-font-color, $button-style)
border-color: $button--highlight-background-color
&:hover, &:focus
border-color: $button--highlight-background-hover-color
&.-alt-highlight
@include button-style($button--alt-highlight-background-color, $button--alt-highlight-background-hover-color, $button--alt-highlight-font-color, $button-style)
border-color: $button--alt-highlight-background-color
&:hover, &:focus
border-color: $button--alt-highlight-background-hover-color
&.-active
@include button-style($button--active-background-color, $button--active-background-color, $button--active-font-color, $button-style)
border-color: $button--active-border-color
box-shadow: 0 0 3px $button--active-border-color inset
&.-transparent
@include button-style($background: $button--font-color, $style: hollow)
border-color: transparent
&:hover, &:focus
border-color: $button--border-color
&.-active
background: $button--active-background-color
&:hover, &:focus
border-color: $button--active-border-color
&.-tiny
@include button-size(tiny)
&.-small
@include button-size(small)
&.-large
@include button-size(large)
&.-expand
@include button-expand
&.-round
border-radius: 2em
.button--icon
@include icon-common
.button--icon + .button--text,
.button--text + .button--icon
margin: 0 0 0 $button--text-icon-spacing
.button--dropdown-indicator
@include icon-common
padding: 0 0 0 3px
font-size: rem-calc(13px)
&:before
@extend .icon-pulldown-arrow1:before

@ -26,17 +26,15 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
table.cal
border-collapse: collapse
width: 100%
margin: 0px 0 6px 0
border: $content_calendar_border_width solid $content_calendar_border_color
margin: 0 0 6px 0
border: $content-calendar-border-width solid $content-calendar-border-color
thead th
width: 14%
background-color: $content_calendar_head_cell_bg_color
background-color: $content-calendar-head-cell-bg-color
padding: 4px
&.week-number
width: auto
@ -44,11 +42,11 @@ table.cal
tbody tr
height: 100px
td
border: $content_calendar_cell_border_width solid $content_calendar_cell_border_color
border: $content-calendar-cell-border-width solid $content-calendar-cell-border-color
vertical-align: top
font-size: 0.9em
&.week-number
background-color: $content_calendar_head_cell_bg_color
background-color: $content-calendar-head-cell-bg-color
padding: 4px
border: none
font-size: 1em
@ -59,18 +57,18 @@ table.cal
font-weight: bold
padding-right: 2px
&.odd p.day-num
color: $content_calendar_inactive_day_font_color
background-color: $content_calendar_inactive_day_bg_color
color: $content-calendar-inactive-day-font-color
background-color: $content-calendar-inactive-day-bg-color
&.today
background: $content_calendar_cell_today_bg_color
background: $content-calendar-cell-today-bg-color
.starting a, p.cal.legend .starting
background: url(image-path('bullet_go.png')) no-repeat -1px -2px
background: image-url('bullet_go.png') no-repeat -1px -2px
padding-left: 16px
.ending a, p.cal.legend .ending
background: url(image-path('bullet_end.png')) no-repeat -1px -2px
background: image-url('bullet_end.png') no-repeat -1px -2px
padding-left: 16px
.starting.ending a, p.cal.legend .starting.ending
background: url(image-path('bullet_diamond.png')) no-repeat -1px -2px
background: image-url('bullet_diamond.png') no-repeat -1px -2px
padding-left: 16px
p.cal.legend span

@ -0,0 +1,48 @@
# Choice
For selection from a list without having to use a form. This can be reused for selects which have no association to any type of form.
```
<div class="choice">
<div class="choice--select">
<select class="select2">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
</select>
</div>
<div class="choice--button">
<button class="button">
<i class="icon-edit"></i> Edit
</button>
</div>
</div>
<div class="clearfix"></div>
```
## Choice with inline label and input
A more complex example for a choice combined with further inputs.
```
<div class="choice">
<div class="choice--select">
<span class="inline-label">
<select class="select2">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
<option value="">over nine thousand!!!</option>
</select>
<span class="form-label">multiplied by</span>
<input class="form--text-field" size="10" type="text">
</span>
</div>
<div class="choice--button">
<button class="button">
<i class="icon-edit"></i> Edit
</button>
</div>
</div>
<div class="clearfix"></div>
```

@ -0,0 +1,54 @@
//-- 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.
//++
//a hack for IE, the width will be just fine for this element
$choice-parent-relation-select-width: 375px
//resolve the problem if inside are elements with float
.detail-panel-description-content
.relation
clear: both
.choice
overflow: visible
.choice--select, .choice--button
@extend .form--field
float: left
display: block
.choice--select
overflow: visible
margin-top: 3px
margin-right: 1rem
width: $choice-parent-relation-select-width
.select2
width: inherit
.select2-drop
width: inherit
.choice--button
.button
margin: 2px

@ -32,10 +32,8 @@
background: #ffffff
border-radius: 2px
padding: 8px
font-family: $font_family_normal
font-size: $global_font_size
font-size: 1rem
width: 100%
box-sizing: border-box
&:required
box-shadow: none
&:hover

@ -26,9 +26,7 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
@mixin context_menu_defaults
@mixin context-menu-defaults
display:block
margin: 0
padding: 0

@ -0,0 +1,18 @@
## Datepicker
```
<input type="text" id="datepicker-input">
<div id="datepicker-inline"></div>
```
```
@javascript
jQuery(function($) {
$("#datepicker-inline").datepicker();
$("#datepicker-input").datepicker();
});
```

@ -0,0 +1,172 @@
//-- 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.
//++
//$dp- var prefix for date picker
$dp-theme-color: #CCCCCC
$dp-theme-lines-color1: #FFFFFF
$dp-theme-lines-color2: #F8F8F8
$dp-theme-border-color: #DDDDDD
$dp-header-elements-height: 30px
$dp-header-top: 5px
$dp-header-padding: .2em 0
$dp-hover-normalisation: 2px
$dp-round-corners-radius: 0
$dp-cell-corner-radius: 3px
$dp-day-margin: 2px
$dp-day-margin-hover: 1px
$dp-days-text-color: #535353
$dp-week-padding-top: 7px
$dp-week-padding-bottom: 7px
$dp-week-text-color: #CCCCCC
$dp-border: 1px solid $dp-theme-border-color
$dp-font-size-rewrite: .9em
$dp-number-of-columns: 8
$dp-table-width: 100%
$dp-month-year-width: 40%
$dp-month-year-margin: 0 4.5%
$dp-shadow-box: 1px 1px 5px 0
$dp-shadow-box-opacity: 1
@mixin set-table-cells-width($table-width, $columns-number)
width: $table-width/$columns-number
table-layout: fixed
.ui-datepicker
border: $dp-border
padding: 0
background-color: $dp-theme-lines-color2
box-shadow: $dp-shadow-box rgba($dp-theme-color, $dp-shadow-box-opacity)
&.ui-datepicker-inline
box-shadow: none
&.ui-corner-all
border-radius: $dp-round-corners-radius
//[class^="ui-corner"] this selector is not working...
//a list is used
$corner-types: tl tr lf br top bottom right left all
@each $corner-type in $corner-types
.ui-corner-#{$corner-type}
border-radius: $dp-round-corners-radius
.ui-datepicker-header
padding: $dp-header-padding
border: none
background-color: $dp-theme-lines-color1
.ui-icon.ui-icon-circle-triangle-w
background-position: -96px -16px
@include user-select(none)
.ui-icon.ui-icon-circle-triangle-e
background-position: -32px -16px
@include user-select(none)
.ui-state-hover
border-width: 0 !important
background-color: transparent
cursor: pointer !important
.ui-datepicker-prev-hover
left: $dp-hover-normalisation
.ui-datepicker-next-hover
right: $dp-hover-normalisation
.ui-datepicker-prev,
.ui-datepicker-next
top: $dp-header-top
.ui-datepicker-title
.ui-datepicker-month,
.ui-datepicker-year
width: $dp-month-year-width
select
@extend .form--select
height: $dp-header-elements-height
font-size: $dp-font-size-rewrite
font-weight: normal
padding-top: 0
padding-bottom: 0
margin: $dp-month-year-margin
border: $dp-border
.ui-datepicker-calendar
margin-bottom: 0
border-spacing: 0
border-collapse: collapse
background-color: $dp-theme-lines-color1
th
background-color: $dp-theme-lines-color2
font-weight: normal
border-top: $dp-border
border-bottom: $dp-border
padding-top: $dp-week-padding-top
padding-bottom: $dp-week-padding-bottom
@include set-table-cells-width($dp-table-width, $dp-number-of-columns)
td
padding: 0
color: $dp-days-text-color
@include set-table-cells-width($dp-table-width, $dp-number-of-columns)
a
border: none
text-align: center
background-color: #FFFFFF
margin: $dp-day-margin
&.ui-state-highlight,
&.ui-state-active,
&:hover
margin: $dp-day-margin-hover
border: $dp-border
border-radius: $dp-cell-corner-radius
.ui-datepicker-week-col
color: $dp-week-text-color
text-align: center
.ui-datepicker-buttonpane
border-top: $dp-border
margin-top: 0
button
font-weight: normal
font-size: $dp-font-size-rewrite
border: none
background-color: transparent

@ -25,15 +25,3 @@
//
// See doc/COPYRIGHT.rdoc for more details.
//++
fieldset
div.tabular
label.header
margin:
left: -20px
right: 25px
.horizontal_margin
margin: 5px 0
p
margin-bottom: -10px

@ -26,19 +26,17 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
#errorExplanation, .flash, .nodata, .warning
padding: 4px
margin: 0 0 10px 0
color: $content_flash_msg_font_color
color: $content-flash-msg-font-color
%absolute-layout-mode &
height: $content-flash-height
.flash.error a:link, .flash.warning a:link, .flash.notice a:link, #errorExplanation a:link,
.flash.error a:hover, .flash.warning a:hover, .flash.notice a:hover, #errorExplanation a:hover
@include default-font-normal($content_flash_msg_font_color)
@include default-font($content-flash-msg-font-color)
text-decoration: none
cursor: default
@ -49,7 +47,7 @@
@include animation(0.5s fade-out)
i.close-handler
float: right
font-size: $content_flash_icon_close_handler_font-size
font-size: $content-flash-icon-close-handler-font-size
padding: 3px 2px
cursor: pointer
@ -62,13 +60,13 @@
@extend .hidden-for-sighted
.flash.error, #errorExplanation
background-color: $content_flash_error_msg_bg_color
background-color: $content-flash-error-msg-bg-color
.flash.notice
background-color: $content_flash_notice_msg_bg_color
background-color: $content-flash-notice-msg-bg-color
.flash.warning, .nodata, .warning
background-color: $content_flash_warning_msg_bg_color
background-color: $content-flash-warning-msg-bg-color
.flash.permanent
display: block

@ -1,18 +0,0 @@
# [Form elements] - Input, Textarea
```
<div id="work-packages-index">
<input class="wide"></input>
<br /><br />
<input class="small"></input>
<br /><br / >
<textarea rows="4"></textarea>
<br /><br />
<input placeholder="with placeholder text"></input>
<br /><br />
<textarea rows="4" placeholder="with placeholder text"></textarea>
</div>
```

File diff suppressed because it is too large Load Diff

@ -26,152 +26,58 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
@import fonts/openproject_icon_font
@mixin input-style
width: $content_from_input_width
line-height: 30px
border: $content_form_input_border
padding: 0 0 0 10px
@include border-radius(2px)
font-family: $font_family_normal
font-weight: bold
font-size: $global_font_size
line-height: 30px
height: 32px
margin: 0
$form--field-types: (text-field, text-area, select, check-box, radio-button, range-field, search, file)
%input-style
border: $content-form-input-border
border-radius: 2px
font-size: 1rem
&:hover, &:focus
border: $content_form_input_hover_border
border: $content-form-input-hover-border
float: none
display: inline-block
vertical-align: middle
@mixin select-style
@include input-style
margin: 0
min-width: $content_from_input_width + 10
max-width: $content_from_input_width + 10
padding: 7px 10px 7px 10px
option
padding-left: 10px
@mixin label-style
width: 155px
margin-left: 0
%label-style
text-align: left
font-weight: normal
float: none
display: inline-block
padding-right: 5px
vertical-align: middle
%form-style
padding: 30px 20px
background-color: $content_form_bg_color
display: block
border: $content_form_border
div.attribute_wrapper
position: relative
padding: 0
margin-bottom: 10px
font-size: $global_font_size + 1
line-height: 30px
label
@include label-style
.short
width: 100px
margin-right: 200px
&.indented
margin-left: 160px
select
@include select-style
input
&[type=password], &[type=text]
@include input-style
&#work_package_subject, &#work_package_time_entry_comments
width: 50%
textarea
font-family: $font_family_normal
font-weight: bold
font-size: $global_font_size
border: $content_form_input_border
&:hover, &:focus
border: $content_form_input_hover_border
table
border: 0 none
background: none
margin: 0
td
padding: 6px
label
@include label-style
display: inline
&.label
vertical-align: middle
width: 160px
// A general CSS class to be applied to forms using the above defined form style.
// We can't define this on form itself as this would break a lot of existing forms.
//
// Using this form class allows to easily override defaults defined here with a more
// specific definition.
.form
@extend %form-style
display: block
&.-inline
display: inline
hr.form_separator
&.-bordered
padding: 30px 20px
background-color: $content-form-bg-color
border: $content-form-border
.form--separator
border: 0
border-bottom: 1px solid $content_form_separator_color
border-bottom: 1px solid $content-form-separator-color
margin: 0 0 30px
background: none
.form-space
&.-invisible
border-bottom-width: 0px
.form--space
padding-top: 10px
fieldset
legend:after
@include icon-common
float: right
padding:
right: 5px
top: 4px
&.collapsible
> legend:after
content: "\e0d4"
&.collapsed
> legend:after
content: "\e0d2"
&.with-legend-control
legend
float: left
background-color: white
margin-top: -15px
div.legend-control
margin-top: -15px
padding-bottom: 5px
span
padding-left: 5px
background-color: white
.ui-widget
font-family: $font_family_normal
font-size: $global_font_size - 1px
#content
.tabular
label.inline-label
width: auto
margin-left: 0
font-weight: normal
.form--row
@include grid-block
@include grid-visible-overflow
// TODO: Customise with proper jQuery UI theme.
.ui-datepicker-month,
.ui-datepicker-year
display: inline-block
.checkbox-label
position: relative
@ -197,16 +103,17 @@ fieldset
\:focus + .styled-checkbox:before
.styled-checkbox
box-sizing: content-box
display: inline-block
vertical-align: top
width: 18px
height: 18px
padding: 0 5px
user-select: none
user-select: none
&:before
content: ''
position: absolute
box-sizing: border-box
width: 18px
height: 18px
background: #ffffff
@ -219,12 +126,425 @@ fieldset
content: ''
position: absolute
margin: 5px 2px
/* Length of check tail
// Length of check tail
width: 11px
/* Lenght of check foot
// Length of check foot
height: 3px
background: transparent
border: 3px solid #666666
border-top: none
border-right: none
@include transform(rotate(-50deg))
%form--fieldset-or-section
padding: 1rem 0 0
margin-bottom: 1rem
border: 0
%form--fieldset-legend-or-section-title
color: lighten($body-font-color, 10)
font-size: 1rem
font-weight: bold
line-height: 1.8
text-transform: uppercase
border-bottom: 1px solid $gray
// HACK. TODO: Remove fieldset element rules in various places.
.form--fieldset,
fieldset.form--fieldset
@extend %form--fieldset-or-section
.form--fieldset-legend
@extend %form--fieldset-legend-or-section-title
width: 100%
.form--fieldset.-collapsible > &
@include without-link-styling
cursor: pointer
&:before
@include icon-common
font-size: 0.75rem
padding: 0.625rem 0.25rem 0 0.25rem
.form--fieldset.-collapsible > &
content: "\e0cc"
.form--fieldset.-collapsible.-collapsed > &,
.form--fieldset.-collapsible.collapsed > &
content: "\e0cb"
.form--fieldset-control
float: right
margin-top: -2.8rem
text-align: right
color: lighten($body-font-color, 10)
font-size: 1rem
font-style: italic
line-height: 1.8
.form--fieldset-control-container
padding: 0 0.25rem
background-color: inherit
.form--section
@extend %form--fieldset-or-section
// HACK. TODO: Remove H3 element rules in various places.
// See: https://community.openproject.org/work_packages/18330
.form--section-title,
#content h3.form--section-title
@extend %form--fieldset-legend-or-section-title
// properties to reset h3
margin: 0
padding: 0
.form--section > &,
#content .form--section > &
margin-bottom: 1rem
.form--field
@include grid-block($wrap: true)
@include grid-visible-overflow
align-items: center
margin-bottom: 0.825rem
&.-vertical,
.form.-vertical &
@include grid-orient(vertical)
.grid-block > &:nth-last-of-type(n+2),
.form--row > &:nth-last-of-type(n+2),
.form--grouping-row > &:nth-last-of-type(n+2)
padding-right: 1rem
&.-trailing-label
.form--label
@include grid-order(2)
@include grid-size(expand)
// override max-width set by including grid-content
max-width: 100%
padding-left: 0.5rem
.form--field-container
@include grid-order(1)
@include grid-size(shrink)
// FIXME: this will break anything in regards to flex layouting within the container,
// e.g. using form--field-inline-action inside -trailing-label
.form--label + span.form--field-container
display: block
.form--label
@include grid-content(2)
@include grid-visible-overflow
@extend %label-style
padding: 0 1rem 0 0
font-size: $form-label-fontsize
line-height: $base-line-height
color: $form-label-color
.form.-wide-labels &,
.form--field.-wide-label &,
@include grid-size(4)
.form--field.-vertical &,
.form.-vertical &
@include grid-size(shrink)
max-width: none
&.-required,
.form--field.-required > &
&::after
@include default-transition
content: '*'
color: #008BD0
padding: 0 0.325rem
&:hover::after
color: smartscale(#008BD0, 30%)
.form--field-container
@include grid-content(10)
@include grid-visible-overflow
padding: 0
display: flex
align-items: stretch
&.-vertical
display: block
&:nth-of-type(n+2),
.form--field.-no-label &
@include grid-offset(2)
.form--field.-full-width &
@include grid-size(12)
.form.-wide-labels &,
.form--field.-wide-label &
@include grid-size(8)
.form.-wide-labels .form--field.-no-label &,
.form--field.-wide-label.-no-label &
@include grid-offset(4)
.form--field.-vertical &,
.form.-vertical &
@include grid-size(shrink)
max-width: none
.form--field-inline-action
@include grid-content(shrink)
padding: 0 0 0 0.2rem
line-height: 2rem
%form--field-after-container
@include grid-content(10, 2)
padding: 0
font-size: $form-label-fontsize
line-height: 1.4
color: $form-label-color
.form--field.-full-width &
@include grid-size(12)
@include grid-offset(0)
.form.-wide-labels &,
.form--field.-wide-label &
@include grid-size(8)
@include grid-offset(4)
.form.-vertical &
@include grid-size(shrink)
@include grid-offset(0)
max-width: none
.form--field-instructions
@extend %form--field-after-container
font-style: italic
.form--field-extra-actions
@extend %form--field-after-container
@include grid-visible-overflow
%form--field-element-container
display: block
flex: 1 1
&:nth-last-of-type(n+2)
padding-right: $block-padding
@each $field-type in $form--field-types
.form--#{$field-type}-container
@extend %form--field-element-container
&.-tiny
max-width: 50px
&.-xslim
max-width: 110px
&.-slim
max-width: 200px
&.-middle
max-width: 350px
&.-wide
max-width: 500px
&.-xwide
max-width: 800px
&.-xxwide
max-width: 1100px
.form--select-container
&.-tiny,
&.-xslim,
&.-slim,
&.-middle,
&.-wide,
&.-xwide,
&.-xxwide
// overriding hack on select2 by another hack (select2_customizing.css)
// remove once the initial limit on the width is removed
.select2-container
max-width: initial
.form--text-field
@extend %input-style
.form--text-field,
#{$text-input-selectors}
line-height: 1.5
.form--select
@extend %input-style
line-height: normal
padding: rem-concat-list($select-element-padding)
// TODO: Temporary fix, for sure it will be fixed with next foundation-app release v1.1.1
// remove background image after/if upgrade
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%3E%3Cpolygon%20points%3D%220%2C0%2032%2C0%2016%2C24%22%20style%3D%22fill%3A%20black%22%3E%3C/polygon%3E%3C/svg%3E")
&[multiple]
background-image: none
padding-right: $form-padding
// TODO: this has to be fixed upstream as select are fixed
// in height in foundation for apps.
height: auto
.form--select2
border: none
padding-right: 0
.form--text-field,
.form--select
&.-tiny
font-size: 0.7rem
&.-small
font-size: 0.8rem
&.-large
font-size: 1.3rem
&.-narrow
width: auto
max-width: 100%
.form &
margin-bottom: 0.5rem
.form--text-area
@extend %input-style
.form &
margin-bottom: 0.5rem
.form--radio-button-container
//prevent radio-buttons from being cut at the border
padding: 0 1px
.form--radio-button
// Be on par with Foundation's margin-bottom on labels.
.form &
margin-bottom: 0.5rem
.form--grouping
@include grid-block($wrap: true)
align-items: center
.form--grouping-row
@include grid-block(10)
.form--grouping-row + .form--grouping-row
@include grid-offset(2)
.form--grouping-label
@include grid-content(2)
@include grid-visible-overflow
@extend %label-style
padding: 0 1rem 0 0
font-size: $form-label-fontsize
line-height: $base-line-height
color: $form-label-color
margin-bottom: 0.8rem
.form--matrix
border: $content-form-input-border
border-radius: 2px
background: none
margin: 0
font-size: 0.9rem
line-height: 1.5
.form--matrix-header-row
font-weight: bold
border-bottom: $content-form-input-border
background-color: $gray-light
.form--matrix-header-cell
padding: 0 1rem
.form--matrix-row
&:nth-child(odd)
background-color: $gray-light
&:nth-child(even)
background-color: white
.form--matrix-checkbox-cell
min-width: 1rem
max-width: 4rem
text-align: center
.form--column
@include grid-block
@include grid-orient(vertical)
overflow-y: hidden
&:nth-last-of-type(n+2)
padding-right: $block-padding
.form--field
flex-basis: auto
.inline-label
> .form-label.-transparent
margin-bottom: 0
font-size: 1em
background: none
border: none
.form--label-with-check-box
display: block
clear: both
line-height: $base-line-height
& > .form--check-box-container
display: block
float: left
padding: 0.125rem 0.5rem 0 0
.form--field-affix
flex: 0 0 auto
display: flex
font-size: 0.9rem
background: $inlinelabel-background
color: $inlinelabel-color
border: $content-form-input-border
// OR $inlinelabel-border
border-radius: 2px
padding: 0 $form-padding
margin-bottom: 0.5rem
align-items: center
%form--field-element-container + &
margin-left: -1rem
border-left: 0
&.-transparent
background: none
border: none
.form--tooltip-container
flex: 0 0 auto
display: flex
& > [data-tooltip], & > [class^="tooltip--"]
padding-top: 0.6rem
.form--list
display: flex
margin: 0
@include grid-layout(3)
@include breakpoint(large)
@include grid-layout(4)
@include breakpoint(xlarge)
@include grid-layout(6)
li, div
padding: 0

@ -30,12 +30,12 @@
width: 100% / 12 * $columns
.grid-items-lines
$grid-items-background: $base-body-color
$grid-item-background: $base-body-color
$grid-item-border: 1px solid transparentize($global_font_color, 0.8)
$grid-items-background: $body-background
$grid-item-background: $body-background
$grid-item-border: 1px solid transparentize($body-font-color, 0.8)
$grid-item-columns: 4
$grid-item-big-columns: 8
$grid-item-color: $global_font_color
$grid-item-color: $body-font-color
$grid-item-height: 14em
+clearfix
position: relative
@ -81,13 +81,13 @@
// this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
.bottom-cover
position: absolute
bottom: 0px
bottom: 0
width: 100%
height: 3px
background: $grid-items-background
.right-cover
position: absolute
right: 0px
right: 0
height: 100%
width: 4px
background: $grid-items-background

@ -1,13 +1,19 @@
# Headings
Headings throughout the application, apart from user generated content (See wiki styles)
```
<h1>Headline H1</h1>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h2>Headline H2</h2>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h3>Headline H3</h3>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h4>Headline H4</h4>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h5>Headline H5</h5>
<h6>Headline H6</h6>
```

@ -33,10 +33,27 @@ body.controller-work_packages.action-update
padding-right: 340px
h1
@include default-headline-h1
color: $h1-font-color
font-weight: bold
padding: 0 0 8px 0
margin: 0
h2
@include default-headline-h2
color: $h2-font-color
font-weight: bold
padding: 0 0 8px 0
margin: 0
h3
@include default-headline-h3
color: $h3-font-color
font-weight: normal
border-bottom: 1px solid #dddddd
padding: 0 0 8px 0
margin: 0 0 20px 0
h4
@include default-headline-h4
color: $h4-font-color
font-weight: normal
border-bottom: 1px dotted #bbbbbb
padding: 0 0 5px 0
margin: 0 0 20px 0

@ -0,0 +1,55 @@
# Icon Controls
```
<div style="padding: 0.25rem">
<span class="icon-control">
<span class="icon-control--icon icon-star1" title="Star">
<span class="hidden-for-sighted">Star</span>
</span>
</span>
Nur e kian landonomo, ol ind duona anstataŭa.
</div>
<div style="padding: 0.25rem">
<span class="icon-control -active">
<span class="icon-control--icon icon-star1" title="Unstar">
<span class="hidden-for-sighted">Unstar</span>
</span>
</span>
Far ki aliam samideano noniliono.
</div>
<div style="padding: 0.25rem; background-color: #eee">
<span class="icon-control">
<span class="icon-control--icon icon-watch-1" title="Watch">
<span class="hidden-for-sighted">Watch</span>
</span>
</span>
Περπετυα περσεκυερις υθ ηας
</div>
<div style="padding: 0.25rem; background-color: #eee">
<span class="icon-control -active">
<span class="icon-control--icon icon-watch-1" title="Unwatch">
<span class="hidden-for-sighted">Unwatch</span>
</span>
</span>
Ηας παρτεμ λεγενδως δεφινιθιονεμ νο, συμ ευ λαυδεμ εσεντ εκυιδεμ
</div>
<div style="padding: 0.25rem">
<span class="icon-control">
<span class="icon-control--icon icon-heart" title="Love">
<span class="hidden-for-sighted">Love</span>
</span>
</span>
Зыд ут выльёт ножтро нужквюам.
</div>
<div style="padding: 0.25rem">
<span class="icon-control -active">
<span class="icon-control--icon icon-heart" title="Fall out of love">
<span class="hidden-for-sighted">Fall out of love</span>
</span>
</span>
Хаж ут нихйл тамквюам.
</div>
```

@ -0,0 +1,52 @@
//-- 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.
//++
.icon-control
display: inline-block
height: rem-calc(19px)
width: rem-calc(19px)
margin-left: -1px
padding: 1px
vertical-align: middle
text-align: center
cursor: pointer
border-radius: 50%
color: $gray-dark
&:hover, &.-active
text-decoration: none
color: white
background: $button--highlight-background-color
&.-active:hover
color: $gray-dark
background: white
.icon-control--icon
@include icon-common
font-size: rem-calc(17px)

@ -0,0 +1,310 @@
# In place editing
## In place editing: Multiple lines of text
### Read mode
```
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">
Description
</h3>
</div>
</div>
<div class="inplace-edit type-wiki_textarea attribute-description">
<accessible-by-keyboard execute="startEditing()"
class="inplace-editing--trigger-container">
<a href=""
tabindex="0"
class="inplace-editing--trigger-link">
<span class="inplace-editing--container">
<span class="inplace-edit--read-value">
<span class="inplace-edit--read" >
<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
</span>
</span>
</span>
<span class="inplace-edit--icon-wrapper">
<span class="icon-context icon-button icon-edit "
title="Description: Edit"
icon-name="edit"
icon-title="Description: Edit">
<span class="hidden-for-sighted">
Description: Edit
</span>
</span>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
</div>
```
### Edit mode
```
<div class="attributes-group ">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text ">
Description
</h3>
</div>
</div>
<div class="single-attribute wiki">
<span inplace-editor="" placeholder="Click to enter description..." autocomplete-path="/work_packages/auto_complete.json?project_id=undefined" >
<div class="inplace-edit type-wiki_textarea attribute-description" aria-busy="false" >
<div class="inplace-edit--write " >
<form class="inplace-edit--form " name="editForm" novalidate="">
<div class="inplace-edit--write-value">
<div class="jstElements">
<button type="button" class="jstb_strong" title="Strong">
<span>Strong</span>
</button>
<button type="button" class="jstb_em" title="Italic">
<span>Italic</span>
</button>
<button type="button" class="jstb_ins" title="Underline">
<span>Underline</span>
</button>
<button type="button" class="jstb_del" title="Deleted">
<span>Deleted</span></button><button type="button" class="jstb_code" title="Inline Code">
<span>Inline Code</span></button><span id="space1" class="jstSpacer">&nbsp;</span>
<button type="button" class="jstb_h1" title="Heading 1">
<span>Heading 1</span>
</button>
<button type="button" class="jstb_h2" title="Heading 2">
<span>Heading 2</span>
</button>
<button type="button" class="jstb_h3" title="Heading 3">
<span>Heading 3</span>
</button>
<span id="space2" class="jstSpacer">&nbsp;</span>
<button type="button" class="jstb_ul" title="Unordered List">
<span>Unordered List</span>
</button>
<button type="button" class="jstb_ol" title="Ordered List">
<span>Ordered List</span>
</button>
<span id="space3" class="jstSpacer">&nbsp;</span>
<button type="button" class="jstb_bq" title="Quote">
<span>Quote</span></button>
<button type="button" class="jstb_unbq" title="Unquote">
<span>Unquote</span>
</button>
<button type="button" class="jstb_pre" title="Preformatted Text">
<span>Preformatted Text</span></button><span id="space4" class="jstSpacer">&nbsp;</span>
<button type="button" class="jstb_link" title="Link to a Wiki page">
<span>Link to a Wiki page</span>
</button>
<button type="button" class="jstb_img" title="Image">
<span>Image</span>
</button>
<div class="jstb_help">
<a href="/help/wiki_syntax" title="Text formatting" class="icon icon-help" onclick="window.open(&quot;/help/wiki_syntax&quot;, &quot;&quot;, &quot;resizable=yes, location=no, width=600, height=640, menubar=no, status=no, scrollbars=yes&quot;); return false;">
<span class="hidden-for-sighted">
Text formatting
</span>
</a>
</div>
<button class="jstb_preview icon-issue-watched" type="button" title="Preview">
</button>
</div>
<div class="jstEditor">
<textarea wiki-toolbar="" class="focus-input inplace-edit--textarea " preview-toggle="togglePreview()" name="value" title="Description: Edit" data-wp_autocomplete_url="/work_packages/auto_complete.json?project_id=undefined" aria-multiline="true" tabindex="0" aria-hidden="false" aria-disabled="false" aria-invalid="false" rows="5">
</textarea>
</div>
<div class="jstHandle"></div>
</div>
<div class="inplace-edit--dashboard">
<div class="inplace-edit--errors " role="alert" aria-live="polite" aria-hidden="true">
</div>
<div class="inplace-edit--controls" aria-hidden="false">
<div class="inplace-edit--control inplace-edit--control--save">
<accessible-by-keyboard execute="editForm.$valid &amp;&amp; submit(false)" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span class="icon-context icon-button icon-yes " title="Description: Save" icon-name="yes" icon-title="Description: Save">
<span class="hidden-for-sighted ">Description: Save</span>
</span>
</span>
</a></accessible-by-keyboard>
</div>
<div class="inplace-edit--control -icons-2 inplace-edit--control--send">
<accessible-by-keyboard execute="editForm.$valid &amp;&amp; submit(true)" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span title="Description: Save and send email" >
<i class="icon-yes"></i>
<i class="icon-mail"></i>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
<div class="inplace-edit--control inplace-edit--control--cancel">
<accessible-by-keyboard execute="discardEditing()" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span class="icon-context icon-button icon-close2 " title="Description: Cancel" icon-name="close2" icon-title="Description: Cancel">
<span class="hidden-for-sighted ">Description: Cancel</span>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
</div>
</div>
</form>
</div>
</div>
</span>
</div>
</div>
<div style="height: 100px;">
</div>
```
## In place editing: Single line of text
### Read mode
```
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">
Details
</h3>
</div>
</div>
<dl class="attributes-key-value">
<dt class="attributes-key-value--key">
Status
</dt>
<dd class="attributes-key-value--value-container">
<div class="attributes-key-value--value -status">
<div class="inplace-edit type-select2 attribute-status.name">
<accessible-by-keyboard execute="startEditing()"
class="inplace-editing--trigger-container">
<a href=""
tabindex="0"
class="inplace-editing--trigger-link">
<span class="inplace-editing--container">
<span class="inplace-edit--read-value">
<span class="inplace-edit--read" >
<span >
New
</span>
</span>
</span>
<span class="inplace-edit--icon-wrapper">
<span class="icon-context icon-button icon-edit " title="Status: Edit" icon-name="edit" icon-title="Status: Edit">
<span class="hidden-for-sighted">
Status: Edit
</span>
</span>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
</div>
</dd>
</dl>
</div>
```
### Edit mode
```
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text ">
Details
</h3>
</div>
</div>
<dl class="attributes-key-value">
<dt class="attributes-key-value--key ">Status</dt>
<dd class="attributes-key-value--value-container" >
<div class="attributes-key-value--value -status">
<div inplace-edit="">
<div class="inplace-edit type-select2 attribute-status.name" aria-busy="false" aria-disabled="false">
<div class="inplace-edit--write" >
<form name="editForm" class="inplace-edit--form">
<div class="inplace-edit--write-value">
<input type="text" class="focus-input inplace-edit--text-field" aria-label="Status: Edit focus" aria-haspopup="true" role="button" aria-disabled="false" value="New">
</div>
<div class="inplace-edit--dashboard">
<div class="inplace-edit--errors " role="alert" aria-live="polite" aria-hidden="true">
</div>
<div class="inplace-edit--controls" aria-hidden="false">
<div class="inplace-edit--control inplace-edit--control--save">
<accessible-by-keyboard execute="editForm.$valid &amp;&amp; submit(false)" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span class="icon-context icon-button icon-yes " title="Description: Save" icon-name="yes" icon-title="Description: Save">
<span class="hidden-for-sighted ">Description: Save</span>
</span>
</span>
</a></accessible-by-keyboard>
</div>
<div class="inplace-edit--control -icons-2 inplace-edit--control--send">
<accessible-by-keyboard execute="editForm.$valid &amp;&amp; submit(true)" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span title="Description: Save and send email" >
<i class="icon-yes"></i>
<i class="icon-mail"></i>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
<div class="inplace-edit--control inplace-edit--control--cancel">
<accessible-by-keyboard execute="discardEditing()" >
<a execute-on-enter="execute()" default-event-handling="defaultEventHandling" href="" tabindex="0">
<span >
<span class="icon-context icon-button icon-close2 " title="Description: Cancel" icon-name="close2" icon-title="Description: Cancel">
<span class="hidden-for-sighted ">Description: Cancel</span>
</span>
</span>
</a>
</accessible-by-keyboard>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</dd>
</dl>
</div>
<div style="height: 50px;">
</div>
```

@ -1,167 +1,267 @@
.inplace-editor
display: inline
.ined-input-wrapper-inner
display: inline
&.busy
//-- 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.
//++
$inplace-edit--border-color: #ddd
$inplace-edit--dark-background: #f8f8f8
$inplace-edit--color--very-dark: #cacaca
$inplace-edit--color-highlight: #0a97dd
$inplace-edit--selected-date-border-color: #008bd0
$inplace-edit--color-highlight: #0a97dd
%inline-date-picker-container-position-absolute
display: none
z-index: 99999
position: absolute
.inplace-edit
@extend .form--field.-full-width
.-preview
button
visibility: hidden
.jstb_preview
visibility: visible
&.-busy
opacity: 0.5
.jstElements button
opacity: 0.5
*
cursor: wait!important
&.preview
button, .help
visibility: hidden
.btn-preview
visibility: visible
&.type-wiki_textarea .ined-controls
bottom: -34px
.hidden-but-focusable
position: absolute
left: -10000px
top: auto
width: 1px
height: 1px
overflow: hidden
.visible-on-focus
left: 0
position: inherit
width: auto
height: auto
float: inherit
.editing-link-wrapper
position: absolute
margin-left: 4px
a
@extend .hidden-but-focusable
&:focus
@extend .visible-on-focus
.ined-input-wrapper
display: inline
input, textarea
width: 370px
textarea
min-height: 200px
.ined-read-value
display: inline
&.default
span
font-style: italic
&.editable:hover
outline: 1px solid #cacaca
cursor: pointer
.editing-link-wrapper a
@extend .visible-on-focus
form
inplace-edit--write
.inplace-edit--date
margin: 0
position: relative
display: inline
.ng-invalid
background: lightpink!important
.ined-errors
position: absolute
font-size: 13px
line-height: 1.2em
width: 251px
padding: 5px
left: 0px
bottom: -49px
background: white
border: 1px solid #cacaca
height: 42px
.ined-controls
position: absolute
bottom: -35px
right: 0px
width: 120px
font-size: 13px
background: white
border: 1px solid #cacaca
text-align: center
a
width: 36px
display: inline-block
text-align: center
text-decoration: none
&:hover
background: #f0f0f0
&.type-wiki_textarea
.ined-input-wrapper-inner
display: block!important
form
display: block
.ined-read-value
display: block
.read-value-wrapper
display: inline-block
width: 400px
.editing-link-wrapper
position: relative
display: inline-block
float: right
.ined-controls
bottom: -6px
.ined-errors
bottom: -26px
width: 307px
.jstElements
display: inline
bottom: -31px
width: 307px
button
display: none
&.btn-preview
float: right
font-size: 12px
height: 32px
width: auto
display: inline
margin-right: 0
.help
display: inline
float: none
position: relative
top: -4px
left: -12px
a
padding-left: 0px
.jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_ul, .jstb_ol
display: inline
&.type-select
.ined-controls
right: auto
left: 0px
bottom: -23px
.ined-errors
bottom: -44px
left: 119px
&.type-select2
display: inline-block
width: 344px
.select2-display-none
display: none
.ui-select-choices
max-height: 100px
input[type='text']
width: 100%
.ined-errors
bottom: -41px
left: 119px
width: 225px
.ined-controls
bottom: -27px
& > *
margin-bottom: 0
& > .inplace-edit--date-picker
@extend %inline-date-picker-container-position-absolute
left: 0
.ined-edit
height: 175px
.ined-read-value
position: relative
display: block
margin: 3px
&.editable:hover
outline: 1px solid #cacaca
.editing-link-wrapper
position: absolute
right: -13px
top: 1px
width: 30px
.icon-context:before
padding: 0 1px 1px 0
.inplace-edit--date-range
display: table
position: relative
& > *
display: table-cell
margin-bottom: 0
& > .delimeter
padding-right: 5px
padding-left: 5px
& > .inplace-edit--date-range-start-date-picker
@extend %inline-date-picker-container-position-absolute
left: 0
& > .inplace-edit--date-range-end-date-picker
@extend %inline-date-picker-container-position-absolute
right: 0
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active
border-color: $inplace-edit--selected-date-border-color
#ui-datepicker-div
z-index: 9999 !important
.inplace-edit--form
display: block
position: relative
//todo: Move to something more specific
.jstHandle, .jstSpacer
display: none
.jstElements
button
display: none
.jstb_strong,
.jstb_em,
.jstb_ins,
.jstb_del,
.jstb_ul,
.jstb_ol,
.jstb_preview,
.jstb_help
display: flex
.inplace-edit--select
.select2-display-none
display: none
.inplace-edit--textarea
min-height: 200px
width: 100%
margin-bottom: -1px
.inplace-edit--text-field
margin-bottom: 0!important
padding: 0.375rem
font-size: inherit
line-height: inherit
.inplace-edit--dashboard
position: relative
width: 100%
z-index: 100
font-size: 0.875rem
.inplace-edit--errors
line-height: 1.2em
width: 100%
padding: 5px
left: 251px
bottom: -11px
background: rgb(254, 208, 209)
border: 1px solid $inplace-edit--color--very-dark
min-height: 42px
color: $body-font-color
.inplace-edit--errors--icon
position: absolute
top: 8px
.inplace-edit--errors--text
white-space: pre-line
padding-left: 18px
.inplace-edit--controls
display: inline-block
width: 115px
height: 35px
background: $inplace-edit--dark-background
border: 1px solid $inplace-edit--color--very-dark
box-shadow: 1px 1px 2px $inplace-edit--border-color
text-align: center
float: right
padding: 5px
line-height: 1.6rem
margin-top: -1px
// Having to get the element out of the normal dom flow to
// prevent the element overlapping and thereby blocking the click on
// inplace-editable elements below the current one.
position: absolute
right: 0
.inplace-edit--read
@extend .form--field-container
.inplace-edit--read-value
@include grid-block
padding: 0.375rem
&.-default
font-style: italic
.inplace-edit--preview
border: 1px solid $inplace-edit--border-color
padding: 0.375rem
.inplace-edit--icon-wrapper
@include grid-block(shrink)
text-align: center
width: 33px
background: $gray-light
border-left: 1px solid $inplace-edit--border-color
align-items: center
justify-content: center
visibility: hidden
font-size: rem-calc(14px)
.icon-edit::before
// HACK: overriding default padding here
padding-right: 0
a
color: $body-font-color
a:hover
color: $body-font-color
text-decoration: none
.inplace-editing--trigger-container
@include grid-block
// need to specify the a explicitly as otherwise
// the default class will win
a.inplace-editing--trigger-link,
.inplace-editing--trigger-link
@include grid-block
color: $body-font-color
font-weight: inherit
&:hover,
&:focus,
text-decoration: none
color: $body-font-color
.inplace-editing--container
border-color: $inplace-edit--border-color
.inplace-edit--icon-wrapper
visibility: visible
.inplace-editing--container
@include grid-block
border-color: #fff
border-style: solid
border-radius: 2px
border-width: 1px
.inplace-edit--read
@include grid-block
.inplace-edit--control
background: $inplace-edit--color--very-dark
width: 1.5rem
height: 1.5rem
line-height: 1.5rem
border: 1px solid $inplace-edit--dark-background
display: inline-block
border-radius: 0.75rem
font-size: 0.75rem
&.-icons-2
width: 2.875rem
a
color: $body-font-color
text-decoration: none
&:hover
.icon-context::before
padding: 0
// custom hack to have the jsToolbar in the same line as the "Description" title
.inplace-edit.attribute-description
.inplace-edit--write
margin-top: -48px
// for non-textile description we need to not overlap the 'Description' header
// which in textile is shown due to edit buttons on the right side
&.edit-strategy-textarea
margin-top: auto
// this aligns the title for the WP
.work-packages--details--title
margin-left: -0.375rem
.inplace-edit--highlight
border-color: $inplace-edit--color-highlight !important

@ -26,8 +26,6 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
#content #history
padding-bottom: 11px
@ -35,7 +33,7 @@
width: 700px
margin:
top: 1em
bottom: 0px
bottom: 0
h3
margin-bottom: 20px
.journal
@ -63,12 +61,12 @@
right: 4px
h4
padding-right: 5px
font-size: $global_font_size
font-size: 1rem
font-weight: normal
position: relative
z-index: 5
border: 0
margin-bottom: 0px
margin-bottom: 0
.history-id
float: right
color: #999
@ -90,7 +88,7 @@
.journal-attributes
color: #333333
font-size: $journal_attribute_font_size
font-size: $journal-attribute-font-size
ul.journal-attributes
list-style-type: disc

@ -0,0 +1,431 @@
//-- 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.
//++
/*!
* jQuery UI CSS Framework 1.10.4
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/theming/
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/
*/
/* Component containers
----------------------------------*/
.ui-widget {
font-family: $body-font-family;
font-size: rem-calc(15px);
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: $body-font-family;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/;
color: #222222/*{fcContent}*/;
}
.ui-widget-content a {
color: #222222/*{fcContent}*/;
}
.ui-widget-header {
border: 1px solid #aaaaaa/*{borderColorHeader}*/;
background: #cccccc/*{bgColorHeader}*/;
color: #222222/*{fcHeader}*/;
font-weight: bold;
}
.ui-widget-header a {
color: #222222/*{fcHeader}*/;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
background: #e6e6e6/*{bgColorDefault}*/;
font-weight: normal/*{fwDefault}*/;
color: #555555/*{fcDefault}*/;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #555555/*{fcDefault}*/;
text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #999999/*{borderColorHover}*/;
background: #dadada/*{bgColorHover}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcHover}*/;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #212121/*{fcHover}*/;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #aaaaaa/*{borderColorActive}*/;
background: #ffffff/*{bgColorActive}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcActive}*/;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #212121/*{fcActive}*/;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fcefa1/*{borderColorHighlight}*/;
background: #fbf9ee/*{bgColorHighlight}*/;
color: #363636/*{fcHighlight}*/;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #363636/*{fcHighlight}*/;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a/*{borderColorError}*/;
background: #fef1ec/*{bgColorError}*/;
color: #cd0a0a/*{fcError}*/;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #cd0a0a/*{fcError}*/;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #cd0a0a/*{fcError}*/;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
background-image: none;
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')/*{iconsContent}*/;
}
.ui-widget-header .ui-icon {
background-image: image-url('jquery-ui/ui-icons_222222_256x240.png')/*{iconsHeader}*/;
}
.ui-state-default .ui-icon {
background-image: image-url('jquery-ui/ui-icons_888888_256x240.png')/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: image-url('jquery-ui/ui-icons_454545_256x240.png')/*{iconsHover}*/;
}
.ui-state-active .ui-icon {
background-image: image-url('jquery-ui/ui-icons_454545_256x240.png')/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon {
background-image: image-url('jquery-ui/ui-icons_2e83ff_256x240.png')/*{iconsHighlight}*/;
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: image-url('jquery-ui/ui-icons_cd0a0a_256x240.png')/*{iconsError}*/;
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa/*{bgColorOverlay}*/;
opacity: .3/*{opacityOverlay}*/;
}
.ui-widget-shadow {
margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
padding: 8px/*{thicknessShadow}*/;
background: #aaaaaa/*{bgColorShadow}*/;
opacity: .3/*{opacityShadow}*/;
border-radius: 8px/*{cornerRadiusShadow}*/;
}

@ -26,9 +26,10 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@mixin legacy_actions_defaults($margin-top: 7px)
@mixin legacy-actions-defaults($margin-top: 7px)
float: right
margin-top: $margin-top
font-size: 0.9rem
> li
float: left
position: relative
@ -43,19 +44,23 @@
ul.legacy-actions-main
@include legacy_actions_defaults
@include legacy-actions-defaults
ul.legacy-actions-specific,
.nosidebar ul.legacy-actions-specific
@include legacy_actions_defaults(-34px)
@include legacy-actions-defaults(-34px)
p.subtitle + ul.legacy-actions-specific
@include legacy_actions_defaults(-57px)
@include legacy-actions-defaults(-57px)
ul.legacy-actions-more
margin: 0
list-style-type: none
font-size: 0.9rem
position: absolute
top: 23px
right: 0px
right: 0
z-index: 100
white-space: nowrap
padding: 5px 0 5px 0
@ -76,7 +81,7 @@ ul.legacy-actions-more
#lower-title-bar ul.legacy-actions-specific
@include legacy_actions_defaults
@include legacy-actions-defaults
padding-top: 10px
#lower-title-bar ul.legacy-actions-more
@ -89,3 +94,14 @@ ul.legacy-actions-more
.message-reply-menu
@include contextual(-39px)
.legacy-actions--inline-label
@extend .inline-label
height: 1.5em
.form-label
color: $content-icon-link-color
input, select
font-size: 1em
select
padding: 0 1.5rem 0.0 0.5rem

@ -0,0 +1,18 @@
# Legacy Pagination
```
<p class="legacy-pagination">
<a class="previous_page" rel="prev start" href="/users?page=1">Previous</a>
<a rel="prev start" href="/users?page=1">1</a>
<em class="current">2</em>
<a rel="next" href="/users?page=3">3</a> <a href="/users?page=4">4</a> <a class="next_page" rel="next" href="/users?page=3">Next</a>
<span class="range">(11 - 20/33)</span>
<span class="per_page_options">
Per page:
<span class="current">10</span>,
<a href="/users?page=1&amp;per_page=20">20</a>,
<a href="/users?page=1&amp;per_page=50">50</a>,
<a href="/users?page=1&amp;per_page=100">100</a>
</span>
</p>
```

@ -0,0 +1,60 @@
//-- 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.
//++
.legacy-pagination
font-size: 90%
p.legacy-pagination
margin-top: 8px
.legacy-pagination,
.other-formats
margin: 10px 0
.legacy-pagination a
padding: 1px 2px
.legacy-pagination
.previous_page
width: 100%
height: 15px
padding-left: 18px
.next_page
width: 100%
height: 15px
padding-right: 18px
&.disabled
display: none
.previous_page.disabled
display: none
.range
padding-left: 0.5em
.per_page_options
padding-left: 0.5em
border-left: 1px solid #4B4B4B
margin-left: 0.5em

@ -26,15 +26,12 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
a, a:link
color: $content_link_color
color: $content-link-color
text-decoration: none
font-weight: $content_link_font_weight
a:hover, a:active
color: $content_link_hover_active_color
color: $content-link-hover-active-color
text-decoration: underline
a
@ -64,14 +61,11 @@ a
a.icon, a.icon-context
color: $content_icon_link_color
color: $content-icon-link-color
font-weight: normal
a.icon:hover, a.icon-context:hover
text-decoration: none
a.button_highlight.icon-context:hover
color: $button_highlight_font_color
#content table th a.no-decoration-on-hover:hover, a.no-decoration-on-hover:hover
text-decoration: none

@ -27,7 +27,7 @@
//++
$ng-modal-padding: 3em
$ng-modal-background: $base-body-color
$ng-modal-background: $body-background
$ng-modal-close-color: $light-gray
$ng-modal-image-height: 135px
$ng-modal-image-width: $ng-modal-image-height
@ -39,13 +39,13 @@ $ng-modal-image-width: $ng-modal-image-height
.ng-modal-window
// overlay
+position(fixed, 0px 0px 0px 0px)
+position(fixed, 0 0 0 0)
background: rgba(0, 0, 0, 0.5)
text-align: left
z-index: 10000
.ng-modal-bg
+position(absolute, 0px 0px 0px 0px)
+position(absolute, 0 0 0 0)
cursor: pointer
&.ng-enter
@ -66,7 +66,6 @@ $ng-modal-image-width: $ng-modal-image-height
margin: auto
max-height: 95%
position: relative
overflow: auto
width: 95%
padding: $ng-modal-padding / 2
margin-top: .6em
@ -86,30 +85,15 @@ $ng-modal-image-width: $ng-modal-image-height
float: right
cursor: pointer
label
padding: 0 50px 0 0
& > input
margin-left: 50px
input
width: 230px
height: 30px
line-height: 30px
padding: 0 5px
background: #ffffff
border: 1px solid #cacaca
font-size: 13px
color: #222222
border-radius: 2px
button
margin: 30px 7px 0 0
.select2-container
margin: 0 0 10px 0
#modal-sorting
min-height: 120px
.select2-container
float: left
margin-right: 20px
@media(max-width: 1800px)
width: 280px
@media(max-width: 1400px)
@ -118,6 +102,15 @@ $ng-modal-image-width: $ng-modal-image-height
width: 160px
@media(max-width: 800px)
width: 120px
label.option-label
float: left
margin-right: 20px
.columns-modal-content
margin-bottom: 15px
label
display: inline
padding-right: 30px
ul.export-options
margin: 0
@ -131,11 +124,11 @@ ul.export-options
a
cursor: pointer
text-decoration: none
color: $global_font_color
color: $body-font-color
font-weight: normal
&:hover, &:active
text-decoration: none
color: $global_font_color
color: $body-font-color
span.export-label
display: block
padding: 10px 0 0 0
@ -144,3 +137,7 @@ ul.export-options
.ui-dialog.ui-widget
overflow: visible
// remove iframe border explicitly because Firefox does add it for some reason
#modalIframe
border: 0

@ -26,8 +26,6 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
@import global/all
#content
.mypage-box
@include content-box
@ -43,11 +41,28 @@ div.box-actions
margin-right: 16px
z-index: 500
#invisible-grid
#list-top
padding: 0 4px
#list-right
padding: 0 4px 0 10px
#list-left
padding: 0 10px 0px 4px
.block-receiver
border: 1px dashed $my_page_edit_box_border_color
border: 1px dashed $my-page-edit-box-border-color
margin-bottom: 20px
padding: 15px 0 15px 0
#visible-grid &
min-height: 32px
// TODO: this fixes an issue which currently breaks the layout
// It has to be removed once it is fixed upstream
// @see https://github.com/zurb/foundation-apps/issues/575
&.left, &.right
@extend .medium-6
div.mypage-box
margin-top: 8px
padding-bottom: 8px

@ -0,0 +1,13 @@
# News
```
<div class="news">
<a href="/projects/seeded_project">Seeded Project</a>:
<h4 class="overview"><a href="/news/507-sed-ex-ipsa-recusandae-quibusdam">sed ex ipsa recusandae quibusdam</a></h4>
<p class="author additional-information">Added by <a href="/users/34">Reinhold Weber</a> <time class="timestamp" title="03/10/2014 05:20 PM">9 months</time> ago</p>
<div>
<div class="summary">Curtus absorbeo causa adficio aegrus sed deserunt. Dolores quo abeo quos ante aestivus coerceo ullus.</div>
</div>
</div>
```

@ -0,0 +1,52 @@
//-- 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.
//++
.news
margin-bottom: 30px
&.box > p
margin-top: -15px
.timestamp
border-bottom: 1px dotted
cursor: help
.additional-information
font-size: 11px
h4.overview
margin-bottom: 0
border: 0
.summary
font-style: italic
p.author
font-style: italic
/* to accomodate the .profile-wrap class
height: 42px

@ -0,0 +1,49 @@
# Notifications
```
<div class="notification-box">
<a href="#" class="notification-box--close">&times;</a>
<div class="notification-box--content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laudantium ea delectus incidunt accusantium repudiandae deserunt excepturi non esse vero distinctio et reprehenderit, cupiditate quidem consectetur rerum iste magnam voluptatibus.</p>
</div>
</div>
```
## Error
```
<div class="notification-box -error">
<a href="#" class="notification-box--close">&times;</a>
<div class="notification-box--content">
<p>An error occured, here are the facts:</p>
<ul>
<li>Fact 1: You made a mistake</li>
<li>Fact 2: You <em>really</em> made a mistake</li>
<li>Fact 3: You <strong>should fix it</strong></li>
</ul>
</div>
</div>
```
## Warning
```
<div class="notification-box -warning">
<a href="#" class="notification-box--close">&times;</a>
<div class="notification-box--content">
<p>This is a warning. You may ignore it, but bad things might happen.</p>
</div>
</div>
```
## Success
```
<div class="notification-box -success">
<div class="notification-box--icon -check"></div>
<a href="#" class="notification-box--close">&times;</a>
<div class="notification-box--content">
<p>Successful update. <a href="#">A link to the past</a></p>
</div>
</div>
```

@ -0,0 +1,60 @@
//-- 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.
//++
// NOTE: these are demo ski
.notification-box
box-shadow: 1px 2px 3px #ddd
border-width: 1px
border-style: solid
padding: 10px 10px
&.-error
background: #fedada
border-color: #ca3f3f
&.-success
background: #d8fdd1
border-color: #35c53f
&.-warning
background: #f4f4aa
border-color: #000
.notification-box--icon
width: 20px
height: 20px
float: left
margin: 3px
&.-check::after
content: '\2714'
.notification-box--close
float: right

@ -26,6 +26,8 @@
// See doc/COPYRIGHT.rdoc for more details.
//++
$pagination--font-size: 0.8125rem
.pagination
+display(flex)
+justify-content(space-between)
@ -46,7 +48,7 @@
+display(flex)
margin: 0
padding: 0
font-size: 90%
font-size: $pagination--font-size
.pagination--pages &
+justify-content(flex-start)
@ -55,7 +57,7 @@
+justify-content(flex-end)
.pagination--item
min-width: 17px
min-width: 25px
margin: 0 5px 0 0
white-space: nowrap
@ -73,13 +75,13 @@
a
margin: 0
display: block
min-width: 17px
min-width: 25px
text-align: center
padding: 3px 3px
background: #f8f8f8
border-radius: 2px
border: 1px solid #cccccc
color: $global_font_color
color: $body-font-color
font-weight: normal
cursor: pointer
text-decoration: none
@ -87,15 +89,15 @@
background: #eaeaea
.pagination--space
width: 17px
width: 25px
background: #ffffff
border: 1px solid #ffffff
font-style: italic
padding: 3px 0px
padding: 3px 0
.pagination--label
+flex(1)
padding: 3px 0px
padding: 3px 0
white-space: nowrap
text-align: right
overflow: hidden
@ -104,7 +106,7 @@
.pagination--range
+flex(1)
margin: 0 0 0 5px
padding: 3px 0px
padding: 3px 0
display: block
overflow: hidden
text-overflow: ellipsis

@ -1 +1,17 @@
# Preview
```
<fieldset class="preview">
<legend class="preview--legend">Preview - Description</legend>
<div class="wiki">
<h2>An article that's still being written.</h2>
</div>
</fieldset>
```
```
<fieldset class="preview">
<legend class="preview--legend">Preview - Description</legend>
<span class="preview--nothing-to-preview">Nothing to preview</span>
</fieldset>
```

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save