TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update relation description styling

Browse Source
pull/4996/head
Oliver Günther 8 years ago
parent e3e2749165
commit d8ea05051b
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
7 changed files with 162 additions and 66 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 41
      app/assets/stylesheets/content/work_packages/inplace_editing/_textareas.sass
  2. 43
      app/assets/stylesheets/content/work_packages/tabs/_relations.sass
  3. 1
      app/assets/stylesheets/open_project_global/_variables.sass
  4. 2
      config/locales/js-en.yml
  5. 4
      frontend/app/components/wp-edit/field-types/wp-edit-wiki-textarea-field.directive.html
  6. 71
      frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.directive.ts
  7. 66
      frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.template.html

41
app/assets/stylesheets/content/work_packages/inplace_editing/_textareas.sass
Unescape View File

@ -37,28 +37,27 @@
font-size: 1rem
line-height: 1.6
.inplace-edit
.textarea-wrapper
// Leave room below textarea for inplace edit controls
position: relative
margin-bottom: 50px
// Don't show all jstb buttons in inplace-edit textareas
.jstHandle, .jstSpacer
.textarea-wrapper
// Leave room below textarea for inplace edit controls
position: relative
margin-bottom: 50px
// Don't show all jstb buttons in inplace-edit textareas
.jstHandle, .jstSpacer
display: none
.jstElements
button
display: none
.jstElements
button
display: none
.jstb_strong,
.jstb_em,
.jstb_ins,
.jstb_del,
.jstb_ul,
.jstb_ol,
.jstb_preview,
.jstb_help
display: inline-flex
justify-content: center
.jstb_strong,
.jstb_em,
.jstb_ins,
.jstb_del,
.jstb_ul,
.jstb_ol,
.jstb_preview,
.jstb_help
display: inline-flex
justify-content: center
// Styles for the Save | Cancel controls below textareas
.inplace-edit--controls

43
app/assets/stylesheets/content/work_packages/tabs/_relations.sass
Unescape View File

@ -62,9 +62,6 @@
padding: 4px
.wp-edit-field
width: 90%
.description-container
border: 1px dotted lightblue
padding: 4px 0 4px 4px
.controls-container
text-align: right
@ -86,6 +83,19 @@
a:hover
text-decoration: none
.relation-row--remove-btn
visibility: hidden
&.-visible .relation-row--remove-btn
visibility: visible
.wp-relations--icon
color: $content-icon-link-color
// Toggle description icon color when expanded
.wp-relations-controls-section.-expanded .wp-relations--description-icon
color: $content-icon-link-pressed-color
.wp-relations-create
margin-top: 1.5em
@ -104,5 +114,32 @@
.wp-relations--subject-field
word-break: break-all
// Relation description field
.wp-relation--description-read-value
width: 100%
padding: 5px
border: 1px solid transparent
// Wrap newlines in the description
white-space: pre-wrap
&.-placeholder
font-style: italic
&:hover
border-color: $light-gray
cursor: text
// Set min-height to read/write identically
.wp-relation--description-read-value,
.wp-relation--description-textarea
min-height: 60px
font-size: 0.875rem
line-height: $base-line-height
padding-top: 10px
.wp-relation--description-wrapper
width: 100%

1
app/assets/stylesheets/open_project_global/_variables.sass
Unescape View File

@ -144,6 +144,7 @@ $content-link-color: $primary-color-dark !default
$content-link-hover-active-color: $primary-color-dark !default
$content-icon-link-color: #4b4b4b !default
$content-icon-link-hover-color: $primary-color-dark !default
$content-icon-link-pressed-color: $gray-dark !default
$content-icon-color: $primary-color-dark !default

2
config/locales/js-en.yml
Unescape View File

@ -221,6 +221,7 @@ en:
placeholders:
default: '-'
selection: 'Please select'
description: 'Click to add description for this relation'
text_are_you_sure: "Are you sure?"
@ -289,6 +290,7 @@ en:
add_existing_child: "Add existing child"
remove_child: "Remove child"
add_new_relation: "Create new relation"
update_description: "Set or update description of this relation"
remove: "Remove relation"
save: "Save relation"
abort: "Abort"

4
frontend/app/components/wp-edit/field-types/wp-edit-wiki-textarea-field.directive.html
Unescape View File

@ -21,7 +21,7 @@
field-controller="vm"
on-save="vm.handleUserSubmit()"
on-cancel="vm.handleUserCancel()"
save-title="{{ vm.field.text.saveTitle }}"
cancel-title="{{ vm.field.text.cancelTitle }}">
save-title="{{ ::$ctrl.text.save }}"
cancel-title="{{ ::$ctrl.text.cancel }}">
</wp-edit-field-controls>
</div>

71
frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.directive.ts
Unescape View File

@ -19,16 +19,26 @@ class WpRelationRowDirectiveController {
public selectedRelationType: RelationResourceInterface;
public userInputs = {
description:this.relatedWorkPackage.relatedBy.description,
showDescriptionEditForm:false,
newRelationText: '',
showDescriptionEditForm: false,
showRelationTypesForm: false,
showRelationInfo:false
showRelationInfo: false,
showRelationControls: false,
};
// Create a quasi-field object
public fieldController = {
active: true,
field: {
required: false
}
}
public relation: RelationResourceInterface = this.relatedWorkPackage.relatedBy;
public text: Object;
constructor(protected $scope: ng.IScope,
protected $element: ng.IAugmentedJQuery,
protected $timeout:ng.ITimeoutService,
protected $http,
protected wpCacheService: WorkPackageCacheService,
@ -38,8 +48,16 @@ class WpRelationRowDirectiveController {
protected PathHelper: op.PathHelper) {
this.text = {
removeButton:this.I18n.t('js.relation_buttons.remove')
cancel: I18n.t('js.button_cancel'),
save: I18n.t('js.button_save'),
removeButton: I18n.t('js.relation_buttons.remove'),
description_label: I18n.t('js.relation_buttons.update_description'),
placeholder: {
description: I18n.t('js.placeholders.description')
}
};
this.userInputs.newRelationText = this.relation.description || '';
this.availableRelationTypes = wpRelationsService.getRelationTypes(true);
this.selectedRelationType = _.find(this.availableRelationTypes, {'name': this.relation.type});
};
@ -57,15 +75,56 @@ class WpRelationRowDirectiveController {
return this.relatedWorkPackage && this.relatedWorkPackage.$loaded;
}
public startDescriptionEdit() {
this.userInputs.showDescriptionEditForm = true;
this.$timeout(() => {
var textarea = this.$element.find('.wp-relation--description-textarea');
var textlen = textarea.val().length;
// Focus and set cursor to end
textarea.focus();
textarea.prop('selectionStart', textlen);
textarea.prop('selectionEnd', textlen);
});
}
public handleDescriptionKey($event) {
if ($event.which === 27) {
this.cancelDescriptionEdit();
}
}
public cancelDescriptionEdit() {
this.userInputs.showDescriptionEditForm = false;
this.userInputs.newRelationText = this.relation.description || '';
}
public saveDescription() {
this.relation.updateImmediately({
description: this.relation.description
}).then(() => {
description: this.userInputs.newRelationText
}).then((savedRelation) => {
this.relation = savedRelation;
this.relatedWorkPackage.relatedBy = savedRelation;
this.userInputs.showDescriptionEditForm = false;
this.wpNotificationsService.showSave(this.relatedWorkPackage);
});
}
public get showDescriptionInfo() {
// Show when relation info is expanded
if (this.userInputs.showRelationInfo) {
return true;
}
// Show when relation has a description
if (this.relation.description) {
return true;
}
// Show depending on mouseover
return this.userInputs.showRelationControls;
}
public saveRelationType() {
this.relation.updateImmediately({
type: this.selectedRelationType.name

66
frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.template.html
Unescape View File

@ -1,7 +1,7 @@
<div class="relation-row"
ng-class="['relation-row-{{ $ctrl.relatedWorkPackage.id }}']"
ng-mouseover="$ctrl.showRelationControls = true"
ng-mouseleave="$ctrl.showRelationControls = false">
ng-mouseover="$ctrl.userInputs.showRelationControls = true"
ng-mouseleave="$ctrl.userInputs.showRelationControls = false">
<div class="grid-block hierarchy-item">
<div class="grid-content medium-3 collapse" aria-hidden="true">
@ -33,20 +33,26 @@
</div>
</div>
<div class="grid-content medium-2 collapse wp-relations-controls-section">
<accessible-by-keyboard ng-show="$ctrl.showRelationControls"
<div class="grid-content medium-2 collapse wp-relations-controls-section"
ng-class="{ '-visible': $ctrl.userInputs.showRelationControls, '-expanded': $ctrl.userInputs.showRelationInfo }">
<accessible-by-keyboard ng-show="$ctrl.showDescriptionInfo"
aria-label="{{ ::$ctrl.text.description_label }}"
link-title="{{ ::$ctrl.text.description_label }}"
execute="$ctrl.userInputs.showRelationInfo = !$ctrl.userInputs.showRelationInfo">
<icon-wrapper icon-name="info1"
css-class="wp-relations--icon wp-relations--description-icon"
icon-title="Info for related workpackage">
</icon-wrapper>
</accessible-by-keyboard>
<accessible-by-keyboard ng-show="$ctrl.showRelationControls"
ng-if="$ctrl.relation.delete"
<accessible-by-keyboard ng-if="$ctrl.relation.delete"
execute="$ctrl.removeRelation($ctrl.relation)"
aria-hidden="false"
aria-label="{{ ::$ctrl.text.remove }}"
link-title="{{ ::$ctrl.text.remove }}"
link-class="relation-row--remove-btn"
class="-shown-in-accessibility-mode">
<icon-wrapper icon-name="remove"
css-class="wp-relations--icon"
icon-title="{{ ::$ctrl.text.removeButton }}">
</icon-wrapper>
</accessible-by-keyboard>
@ -54,35 +60,27 @@
</div>
<div class="grid-block hierarchy-item description-container" ng-show="$ctrl.userInputs.showRelationInfo" ng-init="editDescription = false">
<div class="grid-content medium-10 collapse">
<div ng-hide="$ctrl.userInputs.showDescriptionEditForm">
{{$ctrl.relation.description || 'no description set'}}
</div>
<div ng-show="$ctrl.userInputs.showDescriptionEditForm">
<div class="wp-edit-field inplace-edit">
<input class="wp-inline-edit--field" type="text" ng-model="$ctrl.relation.description" />
</div>
</div>
<div class="wp-relation--description-read-value"
ng-class="{'-placeholder': !$ctrl.relation.description }"
ng-click="$ctrl.startDescriptionEdit()"
ng-hide="$ctrl.userInputs.showDescriptionEditForm"
ng-bind="$ctrl.relation.description || $ctrl.text.placeholder.description">
</div>
<div class="grid-content medium-2 collapse wp-relations-controls-section" ng-hide="$ctrl.userInputs.showDescriptionEditForm">
<accessible-by-keyboard execute="$ctrl.userInputs.showDescriptionEditForm = true">
<icon-wrapper icon-name="edit"
icon-title="edit description">
</icon-wrapper>
</accessible-by-keyboard>
<div class="wp-relation--description-wrapper textarea-wrapper"
ng-show="$ctrl.userInputs.showDescriptionEditForm">
<textarea
msd-elastic="\n"
autofocus
class="wp-relation--description-textarea"
name="description"
ng-keyup="$ctrl.handleDescriptionKey($event)"
ng-model="$ctrl.userInputs.newRelationText"></textarea>
<wp-edit-field-controls field-controller="$ctrl.fieldController"
on-save="$ctrl.saveDescription()"
on-cancel="$ctrl.cancelDescriptionEdit()"
save-title="{{ vm.field.text.save }}"
cancel-title="{{ vm.field.text.cancel }}">
</wp-edit-field-controls>
</div>
<div class="grid-content medium-2 collapse wp-relations-controls-section" ng-show="$ctrl.userInputs.showDescriptionEditForm">
<accessible-by-keyboard execute="$ctrl.saveDescription()">
<icon-wrapper icon-name="checkmark"
icon-title="save description'">
</icon-wrapper>
</accessible-by-keyboard>
<accessible-by-keyboard execute="$ctrl.userInputs.showDescriptionEditForm = false">
<icon-wrapper icon-name="remove"
icon-title="cancel editing'">
</icon-wrapper>
</accessible-by-keyboard>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save