Merge pull request #2196 from opf/fix/17325_no_default_description_set

17325 no default description set

app/assets/javascripts/angular/ui_components/inplace-editor-directive.js

@@ -34,7 +34,8 @@ module.exports = function($timeout, $sce, TextileService) {
     scope: {
       type: '@inedType',
       entity: '=inedEntity',
-      attribute: '@inedAttribute'
+      attribute: '@inedAttribute',
+      placeholder: '@'
     },
     link: link,
     controller: Controller
@@ -162,6 +163,13 @@ module.exports = function($timeout, $sce, TextileService) {
       } else {
         $scope.readValue = $scope.entity.props[$scope.attribute];
       }
+
+      if ((!$scope.readValue || $scope.readValue.length === 0) && $scope.placeholder) {
+        $scope.readValue = $scope.placeholder;
+        $scope.placeholderSet = true;
+      } else {
+        $scope.placeholderSet = false;
+      }
     }
 
     function togglePreview() {

app/assets/stylesheets/content/_in_place_editing.sass

@@ -39,11 +39,15 @@
   .ined-input-wrapper
     input, textarea
       width: 370px
-  .ined-read-value:hover
-    outline: 1px solid #cacaca
-    cursor: pointer
-    .editing-link-wrapper a
-      @extend .visible-on-focus
+  .ined-read-value
+    &.default
+      span
+        font-style: italic
+    &:hover
+      outline: 1px solid #cacaca
+      cursor: pointer
+      .editing-link-wrapper a
+        @extend .visible-on-focus
   form
     position: relative
     display: inline

config/locales/js-de.yml

@@ -154,6 +154,7 @@ de:
     label_global_queries: "Öffentliche Filter"
     label_custom_queries: "Benutzerdefinierte Filter"
     label_columns: "Spalten"
+    label_click_to_enter_description: "Klicken um die Beschreibung einzugeben..."
 
     text_are_you_sure: "Sind Sie sicher?"
 

config/locales/js-en.yml

@@ -153,6 +153,7 @@ en:
     label_global_queries: "Global queries"
     label_custom_queries: "Custom queries"
     label_columns: "Columns"
+    label_click_to_enter_description: "Click to enter description..."
 
     text_are_you_sure: "Are you sure?"
 

gulpfile.js

@@ -95,5 +95,6 @@ gulp.task('tests:protractor', ['webdriver:update', 'webpack', 'sass', 'express']
 gulp.task('default', ['webpack', 'sass', 'express']);
 gulp.task('watch', function() {
   gulp.watch('app/assets/javascripts/angular/**/*.js', ['webpack']);
+  gulp.watch('config/locales/js-*.yml', ['webpack']);
   gulp.watch('app/assets/stylesheets/**/*.sass', ['sass']);
 });

karma/tests/work_packages/directives/inplace-editor-directive-test.js

@@ -51,6 +51,7 @@ describe('inplaceEditor Directive', function() {
         'ined-type="text" ' +
         'ined-entity="workPackage" ' +
         'ined-attribute="subject" ' +
+        'placeholder="The default text" ' +
         'title="{{ workPackage.props.subject }}" ' +
       '></h2>';
 
@@ -132,14 +133,14 @@ describe('inplaceEditor Directive', function() {
         });
         context('not present', function() {
           beforeEach(function() {
-          scope.workPackage = {
-            props: {
-              subject: 'Some subject',
-              lockVersion: '1'
-            },
-            links: { }
-          };
-          compile();
+            scope.workPackage = {
+              props: {
+                subject: 'Some subject',
+                lockVersion: '1'
+              },
+              links: { }
+            };
+            compile();
           });
           it('should render the value without editing elements', function() {
             expect(element.find('.inplace-editor').length).to.eq(0);
@@ -326,6 +327,34 @@ describe('inplaceEditor Directive', function() {
           expect(elementScope.isEditing).to.eq(true);
         });
       });
+
+      describe('default text', function() {
+        beforeEach(function() {
+          scope.workPackage = {
+            props: {
+              subject: '',
+              lockVersion: '1'
+            },
+            links: {
+              updateImmediately: {
+                fetch: function() {}
+              }
+            }
+          };
+
+          compile();
+        });
+
+        it('should render the default text', function() {
+          var text = element.find('.ined-read-value .read-value-wrapper').text();
+
+          expect(text).to.eq('The default text');
+        });
+
+        it('should set default text switch', function() {
+          expect(elementScope.placeholderSet).to.be.true;
+        });
+      });
     });
     describe('edit mode', function() {
       beforeEach(function() {

public/templates/components/inplace_editor.html

@@ -1,6 +1,6 @@
 <span ng-if="!entity.links.updateImmediately">{{ entity.props[attribute] }}</span>
 <div ng-if="entity.links.updateImmediately" class="inplace-editor type-{{type}}" ng-class="{busy: isBusy, preview: isPreview}">
-  <div class="ined-read-value" ng-hide="isEditing" ng-switch="type">
+  <div class="ined-read-value" ng-class="{ default: placeholderSet }" ng-hide="isEditing" ng-switch="type">
     <span class="read-value-wrapper" ng-switch-when="wiki_textarea" ng-bind-html="readValue"></span>
     <span class="read-value-wrapper" ng-switch-default ng-bind="readValue"></span>
     <span class="editing-link-wrapper">

public/templates/work_packages/tabs/overview.html

@@ -7,7 +7,8 @@
           ined-type="wiki_textarea"
           ined-entity="workPackage"
           ined-attribute="rawDescription"
-    ></span>
+          placeholder="{{ I18n.t('js.label_click_to_enter_description') }}">
+    </span>
   </div>
 </div>