[25858] Relayout upper create form

https://community.openproject.com/wp/25858
pull/5853/head
Oliver Günther 7 years ago
parent 0a611f0924
commit abc9d507bb
  1. 2
      app/assets/fonts/openproject_icon/openproject-icon-font.svg
  2. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.ttf
  3. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.woff
  4. BIN
      app/assets/fonts/openproject_icon/openproject-icon-font.woff2
  5. 4
      app/assets/fonts/openproject_icon/src/to-fullscreen.svg
  6. 5
      app/assets/stylesheets/content/_work_packages.sass
  7. 16
      app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass
  8. 26
      app/assets/stylesheets/content/work_packages/new/_split_view.sass
  9. 18
      app/assets/stylesheets/content/work_packages/new/_type_status_row.sass
  10. 4
      app/assets/stylesheets/layout/_work_packages_details_view.sass
  11. 1
      config/locales/js-en.yml
  12. 45
      frontend/app/components/routing/main/work-packages.new.html
  13. 7
      frontend/app/components/routing/wp-list/wp.list.new.html
  14. 7
      frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html
  15. 2
      frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.ts
  16. 14
      frontend/app/components/work-packages/wp-type-status/wp-type-status.directive.html
  17. 52
      frontend/app/components/work-packages/wp-type-status/wp-type-status.directive.ts
  18. 28
      frontend/app/components/wp-create/wp-create.controller.ts
  19. 1
      frontend/app/components/wp-edit/field-types/wp-edit-date-field.directive.html
  20. 1
      frontend/app/components/wp-edit/field-types/wp-edit-text-field.directive.html
  21. 3
      frontend/app/components/wp-edit/wp-edit-field/wp-edit-field-group.directive.ts
  22. 6
      frontend/app/components/wp-edit/wp-edit-field/wp-edit-field.directive.ts
  23. 11
      frontend/app/components/wp-edit/wp-edit-field/wp-edit-field.module.ts

@ -636,7 +636,7 @@
horiz-adv-x="841.891" d=" M420.9455 669.5409921875C583.733017578125 669.5409921875 716.9228046874999 536.351205078125 716.9228046874999 373.5636875S583.733017578125 77.5863828125 420.9455 77.5863828125S124.9681953125 210.776169921875 124.9681953125 373.5636875S258.157982421875 669.5409921875 420.9455 669.5409921875M420.9455 791.2205507812499C190.7409296875 791.2205507812499 3.28863671875 603.7682578125 3.28863671875 373.5636875S190.7409296875 -44.09317578125 420.9455 -44.09317578125S838.60236328125 143.3591171875 838.60236328125 373.5636875S651.1500703125 791.2205507812499 420.9455 791.2205507812499zM427.5227734375 381.785279296875C409.435271484375 381.785279296875 396.280724609375 394.939826171875 396.280724609375 411.383009765625V533.062568359375C396.280724609375 549.505751953125 409.435271484375 564.3046171875 427.5227734375 564.3046171875C443.96595703125 564.3046171875 457.12050390625 549.505751953125 457.12050390625 533.062568359375V411.383009765625C457.12050390625 394.939826171875 443.96595703125 381.785279296875 427.5227734375 381.785279296875zM578.8000625 260.105720703125C572.2227890624999 260.105720703125 565.645515625 261.7500390625 560.712560546875 266.682994140625L407.790953125 388.362552734375C394.63640625 398.228462890625 392.992087890625 417.960283203125 402.857998046875 431.114830078125C414.3682265625 444.269376953125 432.455728515625 445.9136953125 445.610275390625 436.04778515625L598.5318828124999 314.3682265625C611.6864296875 302.857998046875 613.330748046875 284.77049609375 603.464837890625 271.61594921875C596.8875644531249 263.394357421875 588.66597265625 260.105720703125 578.8000625 260.105720703125z" />
<glyph glyph-name="to-fullscreen"
unicode="&#xF1D2;"
horiz-adv-x="841.891" d=" M759.67508203125 37.4650148437501L759.67508203125 247.93776484375L707.05689453125 247.93776484375L707.05689453125 73.6400187500001L517.960283203125 269.3139035156251L475.208005859375 226.561626171875L670.881890625 37.4650148437501L496.58414453125 37.4650148437501L496.58414453125 -15.1531726562499L759.67508203125 -15.1531726562499z M366.682994140625 420.591192578125L171.009109375 609.68780390625L345.30685546875 609.68780390625L345.30685546875 662.30599140625L82.21591796875 662.30599140625L82.21591796875 399.21505390625L134.83410546875 399.21505390625L134.83410546875 573.5128L323.930716796875 377.838915234375z" />
horiz-adv-x="841.891" d=" M143.055697265625 -26.4989693359377L353.528447265625 -26.4989693359377L353.528447265625 26.1192181640624L179.230701171875 26.1192181640624L374.9045859375 215.2158294921876L332.15230859375 257.9681068359376L143.055697265625 62.2942220703124L143.055697265625 236.5919681640626L90.437509765625 236.5919681640626L90.437509765625 -26.4989693359377z M526.181875 366.4931185546875L715.2784863281249 562.1670033203125L715.2784863281249 387.8692572265625L767.896673828125 387.8692572265625L767.896673828125 650.9601947265625L504.805736328125 650.9601947265625L504.805736328125 598.3420072265625L679.103482421875 598.3420072265625L483.42959765625 409.2453958984375z" />
<glyph glyph-name="toggle"
unicode="&#xF1D3;"
horiz-adv-x="841.891" d=" M215.405705078125 796.153505859375H369.971630859375V641.587580078125H215.405705078125zM215.405705078125 452.49096875H369.971630859375V297.92504296875H215.405705078125zM215.405705078125 105.539794921875H369.971630859375V-49.026130859375H215.405705078125zM471.919369140625 630.0773515625H626.4852949218749V475.51142578125H471.919369140625zM471.919369140625 278.19322265625H626.4852949218749V125.271615234375H471.919369140625z" />

Before

Width:  |  Height:  |  Size: 387 KiB

After

Width:  |  Height:  |  Size: 387 KiB

@ -3,7 +3,7 @@
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-41 164.9 512 512" style="enable-background:new -41 164.9 512 512;" xml:space="preserve">
<g>
<polygon points="421,593.3 421,465.3 389,465.3 389,571.3 274,452.3 248,478.3 367,593.3 261,593.3 261,625.3 421,625.3 "/>
<polygon points="182,360.3 63,245.3 169,245.3 169,213.3 9,213.3 9,373.3 41,373.3 41,267.3 156,386.3 "/>
<polygon points="46,632.2 174,632.2 174,600.2 68,600.2 187,485.2 161,459.2 46,578.2 46,472.2 14,472.2 14,632.2 "/>
<polygon points="279,393.2 394,274.2 394,380.2 426,380.2 426,220.2 266,220.2 266,252.2 372,252.2 253,367.2 "/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 615 B

After

Width:  |  Height:  |  Size: 616 B

@ -32,6 +32,10 @@
@import work_packages/table_relations
@import work_packages/table_inline_create
// WP creation styles
@import work_packages/new/type_status_row
@import work_packages/new/split_view
// Specific field styles
@import work_packages/inplace_editing/edit_fields
@import work_packages/inplace_editing/legacy_inplace_styles
@ -44,7 +48,6 @@
// WP details specific styles
@import work_packages/details/fullscreen_toggle
@import work_packages/details/safari_flexbug_workaround
// WP fullscreen specific styles

@ -1,16 +0,0 @@
// Full screen toggle indicator on the
// left side of the details container
.wp--details--switch-fullscreen
display: inline-block
width: 20px
height: 50px
cursor: pointer
// Align icon
font-size: 0.9rem
text-align: center
padding-top: 10px
span:before
padding: 0

@ -0,0 +1,26 @@
.work-packages--details-content
// Override the top header in create mode
&.-create-mode
top: 0
// Details header containing switch icon and status|type row
.work-packages--new-details-header
margin-top: 0.375em
display: flex
align-items: stretch
// Full screen toggle indicator on the
// left side of the details container
.wp--details--switch-fullscreen
flex: 1
display: inline-block
width: 20px
cursor: pointer
// Align icon
font-size: 0.9rem
text-align: right
padding-top: 14px
span:before
padding: 0

@ -0,0 +1,18 @@
.wp-new-top-row
@include varprop(color, content-link-color)
display: flex
font-size: 24px
// Create some margin to the bottom
margin-bottom: 15px
// Set the correct height when editing these fields
.wp-inline-edit--field
height: 40px
// Add some minor margin between active status and type field
.wp-inline-edit--active-field
margin-right: 5px
// Disable text decoration from toolbar span
.wp-edit-field--display-field:hover
text-decoration: none

@ -83,10 +83,6 @@ body.action-create
width: 100%
+allow-vertical-scrolling
padding: 0 15px
&.-create-mode
top: 0
h2
margin-top: 0.375em
.work-packages--details

@ -237,6 +237,7 @@ en:
placeholders:
default: '-'
subject: 'Enter subject here'
selection: 'Please select'
relation_description: 'Click to add description for this relation'

@ -1,32 +1,31 @@
<div
class="work-package--new-state work-packages--show-view toolbar-container"
ng-if="$ctrl.newWorkPackage">
<div class="toolbar">
<div class="title-container">
<h2>{{ $ctrl.header }}</h2>
</div>
<ul class="toolbar-items hide-when-print">
<li class="toolbar-item hidden-for-mobile">
<wp-zen-mode-toggle-button>
</wp-zen-mode-toggle-button>
</li>
<li class="toolbar-item hidden-for-mobile">
<button id="create-wp-menu-button"
title="{{ I18n.t('js.button_settings') }}"
class="button last work-packages-settings-button toolbar-icon"
has-dropdown-menu
target="CreateWpDropdownMenu"
locals="query">
<i class="button--icon icon-show-more"></i>
</button>
</li>
</ul>
</div>
<wp-edit-field-group work-package="$ctrl.newWorkPackage"
success-state="$ctrl.successState"
in-edit-mode="true">
<wp-subject work-package="$ctrl.newWorkPackage"></wp-subject>
<div class="toolbar">
<div class="title-container">
<wp-type-status work-package="$ctrl.newWorkPackage"></wp-type-status>
</div>
<ul class="toolbar-items hide-when-print">
<li class="toolbar-item hidden-for-mobile">
<wp-zen-mode-toggle-button>
</wp-zen-mode-toggle-button>
</li>
<li class="toolbar-item hidden-for-mobile">
<button id="create-wp-menu-button"
title="{{ I18n.t('js.button_settings') }}"
class="button last work-packages-settings-button toolbar-icon"
has-dropdown-menu
target="CreateWpDropdownMenu"
locals="query">
<i class="button--icon icon-show-more"></i>
</button>
</li>
</ul>
</div>
<wp-single-view work-package="$ctrl.newWorkPackage"></wp-single-view>
<edit-actions-bar
on-cancel="$ctrl.cancelAndBackToList()"

@ -10,14 +10,13 @@
<div has-edit-mode="true"
wp-edit-form="$ctrl.newWorkPackage"
wp-edit-form-on-save="$ctrl.refreshAfterSave(workPackage, 'work-packages.list.details.overview')">
<h2>
<div class="work-packages--new-details-header">
<wp-type-status work-package="$ctrl.newWorkPackage"></wp-type-status>
<div class="work-packages-show-view-button wp--details--switch-fullscreen hidden-for-accessibility"
ng-click="$ctrl.switchToFullscreen()">
<span class="icon-context icon-to-fullscreen"></span>
</div>
{{ $ctrl.header }}
</h2>
<wp-subject work-package="$ctrl.newWorkPackage"></wp-subject>
</div>
<wp-single-view work-package="$ctrl.newWorkPackage"></wp-single-view>
</div>
</div>

@ -1,4 +1,11 @@
<div ng-if="$ctrl.workPackage" class="work-package--single-view">
<div class="wp-new--subject-wrapper" ng-if="$ctrl.workPackage.isNew">
<wp-edit-field work-package-id="$ctrl.workPackage.id"
wrapper-classes="'-no-label'"
field-name="'subject'"></wp-edit-field>
</div>
<div class="work-packages--info-row" ng-if="!$ctrl.workPackage.isNew">
<span ng-bind="$ctrl.idLabel"/>:
<span ng-bind="$ctrl.text.infoRow.createdBy"/>

@ -95,7 +95,7 @@ export class WorkPackageSingleViewController {
scopedObservable(this.$scope, this.wpEditing.temporaryEditResource(this.workPackage.id).values$())
.subscribe((resource:WorkPackageResourceInterface) => {
// Prepare the fields that are required always
this.specialFields = this.getFields(resource, ['status']);
// this.specialFields = this.getFields(resource, ['status']);
if (!resource.project) {
this.projectContext = { matches: false, href: null };

@ -0,0 +1,14 @@
<div ng-if="$ctrl.workPackage" class="wp-new-top-row">
<div class="work-packages--status-selector wp-new-top-row--element">
<wp-edit-field work-package-id="$ctrl.workPackage.id"
wrapper-classes="'wp-new-top-row--status -no-label'"
field-name="'status'">
</wp-edit-field>
</div>
<div class="work-packages--type-selector wp-new-top-row--element">
<wp-edit-field work-package-id="$ctrl.workPackage.id"
wrapper-classes="'wp-new-top-row--type -no-label'"
field-name="'type'">
</wp-edit-field>
</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.
// ++
import {opWorkPackagesModule} from "../../../angular-modules";
import {scopedObservable} from "../../../helpers/angular-rx-utils";
import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
import {WorkPackageCacheService} from "../work-package-cache.service";
class WorkPackageTypeStatusController {
public workPackage:WorkPackageResource;
}
function wpTypeStatusDirective() {
return {
restrict: 'E',
templateUrl: '/components/work-packages/wp-type-status/wp-type-status.directive.html',
scope: {
workPackage: '='
},
bindToController: true,
controller: WorkPackageTypeStatusController,
controllerAs: '$ctrl'
};
}
opWorkPackagesModule.directive('wpTypeStatus', wpTypeStatusDirective);

@ -43,34 +43,6 @@ export class WorkPackageCreateController {
public parentWorkPackage:WorkPackageResourceInterface;
public changeset:WorkPackageChangeset;
public get header():string {
const type = this.changeset.value('type');
if (!type) {
return this.I18n.t('js.work_packages.create.header_no_type');
}
if (this.parentWorkPackage) {
return this.I18n.t(
'js.work_packages.create.header_with_parent',
{
type: type.name,
parent_type: this.parentWorkPackage.type.name,
id: this.parentWorkPackage.id
}
);
}
if (type) {
return this.I18n.t(
'js.work_packages.create.header',
{type: type.name}
);
}
return '';
}
constructor(protected $state:ng.ui.IStateService,
protected $scope:ng.IScope,
protected $q:ng.IQService,

@ -11,6 +11,7 @@
ng-keydown="vm.handleUserKeydown($event)"
ng-required="vm.field.required"
ng-disabled="vm.field.inFlight"
ng-attr-placeholder="{{ vm.field.placeholder }}"
ng-attr-id="{{vm.htmlId}}" />
</op-date-picker>

@ -6,5 +6,6 @@
ng-focus="vm.handleUserFocus()"
ng-disabled="vm.field.inFlight"
ng-keydown="vm.handleUserKeydown($event)"
ng-attr-placeholder="{{ vm.field.placeholder }}"
focus="vm.field.name === 'subject'"
ng-attr-id="{{vm.htmlId}}" />

@ -107,7 +107,8 @@ export class WorkPackageEditFieldGroupController {
this.fields[field.fieldName] = field;
this.registeredFields.putValue(_.keys(this.fields));
if (this.inEditMode) {
const skip = field.fieldName === 'type' || field.fieldName === 'status';
if (this.inEditMode && !skip) {
field.activateOnForm(this.form, true);
} else {
this.states.workPackages

@ -93,8 +93,8 @@ export class WorkPackageEditFieldController {
public get resource() {
return this.wpEditing
.temporaryEditResource(this.workPackage.id)
.getValueOr(this.workPackage);
.temporaryEditResource(this.workPackageId)
.getValueOr(this.wpEditFieldGroup.workPackage);
}
public get isEditable() {
@ -120,7 +120,7 @@ export class WorkPackageEditFieldController {
const promise = form.activate(this.fieldName, noWarnings);
promise
.then(() => this.active = true)
.catch(() => this.deactivate(true))
.catch(() => this.deactivate(true));
return promise;
}

@ -28,14 +28,17 @@
import {Field, FieldFactory} from '../../wp-field/wp-field.module';
import {WorkPackageChangeset} from '../../wp-edit-form/work-package-changeset';
import {$injectFields} from '../../angular/angular-injector-bridge.functions';
export class EditField extends Field {
public template:string;
protected I18n:op.I18n;
constructor(public changeset:WorkPackageChangeset,
public name:string,
public schema:op.FieldSchema) {
super(changeset.workPackage, name, schema);
$injectFields(this, 'I18n');
this.initialize();
}
@ -51,6 +54,14 @@ export class EditField extends Field {
this.changeset.setValue(this.name, this.parseValue(value));
}
public get placeholder() {
if (this.name === 'subject') {
return this.I18n.t('js.placeholders.subject');
}
return '';
}
/**
* Initialize the field after constructor was called.
*/

Loading…
Cancel
Save