Merge pull request #2745 from ulferts/fix/in_place_edit_quirks

Fix/in place edit quirks

app/assets/javascripts/jstoolbar/jstoolbar.js

@@ -206,10 +206,6 @@ jsToolBar.prototype = {
     }
     this.toolNodes = {}; // vide les raccourcis DOM/**/
 
-    var h = document.createElement('div');
-    h.className = 'jstb_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) {

app/assets/stylesheets/_jstoolbar.sass

@@ -48,21 +48,26 @@ $jstoolbar--icon-active-background: #eee
 
 .jstElements
   @include grid-block
-  justify-content: flex-end
   text-align: center
   margin-bottom: 0.25rem
   line-height: 1.6rem
+  justify-content: flex-end
 
-  button, .jstb_help
+  button
     @include grid-content
+    flex: 0 1 2rem
     padding: 0.25rem
     margin-left: 0.25rem
-    max-width: 1.625rem
     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
 
@@ -70,6 +75,9 @@ $jstoolbar--icon-active-background: #eee
       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
@@ -80,9 +88,10 @@ $jstoolbar--icon-active-background: #eee
 
   .jstb_help
     font-size: 0.8125rem
-    padding: 0.125rem
+    padding: 0.35rem
+    line-height: 1rem
 
-    a.icon-help:before
+    &:before
       color: $body-font-color
       padding: 0
 

app/assets/stylesheets/content/_in_place_editing.sass

@@ -6,7 +6,7 @@ $inplace-edit--color--very-dark: #cacaca
   @extend .form--field.-full-width
 
   &.-preview
-    button, .jstb_help
+    button
       visibility: hidden
     .jstb_preview
       visibility: visible
@@ -34,7 +34,8 @@ $inplace-edit--color--very-dark: #cacaca
     .jstb_del,
     .jstb_ul,
     .jstb_ol,
-    .jstb_preview
+    .jstb_preview,
+    .jstb_help
       display: flex
 
 .inplace-edit--select
@@ -155,8 +156,9 @@ a.inplace-editing--trigger-link,
 
 .inplace-edit--control
   background: $inplace-edit--color--very-dark
-  width: 1.4375rem
-  height: 1.4375rem
+  width: 1.5rem
+  height: 1.5rem
+  line-height: 1.5rem
   border: 1px solid $inplace-edit--dark-background
   display: inline-block
   border-radius: 0.75rem

app/assets/stylesheets/content/_work_packages.sass

@@ -131,3 +131,10 @@ $work-package-details--tab-height: 40px
     border-bottom: 2px solid $content-link-color
     a
       color: $content-link-color
+
+
+// custom hack to have the jsToolbar in the same line as the "Description" title
+
+.inplace-edit.attribute-description
+  .inplace-edit--write
+    margin-top: -48px

frontend/app/ui_components/wiki-toolbar-directive.js

@@ -27,12 +27,20 @@
 //++
 
 module.exports = function() {
-  var HELP_LINK_HTML = '<a href="/help/wiki_syntax" title="' + I18n.t('js.inplace.link_formatting_help') + '" 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">' + I18n.t('js.inplace.link_formatting_help') + '</span></a>',
+  var HELP_LINK_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;',
+      HELP_LINK_HTML = jQuery('<button title="' + I18n.t('js.inplace.link_formatting_help') + '"' +
+                              ' class="jstb_help icon icon-help" ' +
+                              'onclick="' + HELP_LINK_ONCLICK + '">' +
+                              '<span class="hidden-for-sighted">' +
+                              I18n.t('js.inplace.link_formatting_help') +
+                              '</span></button>')[0],
       PREVIEW_ENABLE_TEXT = I18n.t('js.inplace.btn_preview_enable'),
       PREVIEW_DISABLE_TEXT = I18n.t('js.inplace.btn_preview_disable'),
       PREVIEW_BUTTON_CLASS = 'jstb_preview',
       PREVIEW_BUTTON_ATTRIBUTES = {
-        "class": PREVIEW_BUTTON_CLASS + ' icon-issue-watched',
+        'class': PREVIEW_BUTTON_CLASS + ' icon-issue-watched',
         type: 'button',
         title: PREVIEW_ENABLE_TEXT,
         text: ''

lib/redmine/wiki_formatting/textile/helper.rb

@@ -36,18 +36,19 @@ module Redmine
           url = url_for(controller: '/help', action: 'wiki_syntax')
           open_help = "window.open(\"#{ url }\", \"\", \"resizable=yes, location=no, width=600, " +
                       "height=640, menubar=no, status=no, scrollbars=yes\"); return false;"
-          help_link = link_to(url,
-                              class: 'icon icon-help',
-                              onclick: open_help,
-                              title: l(:setting_text_formatting)) do
-                                content_tag :span, class: 'hidden-for-sighted' do
-                                  l(:setting_text_formatting)
-                                end
-                              end
+          help_button = content_tag :button,
+                                    '',
+                                    class: 'jstb_help icon icon-help',
+                                    onclick: open_help,
+                                    title: l(:setting_text_formatting) do
+                                      content_tag :span, class: 'hidden-for-sighted' do
+                                        l(:setting_text_formatting)
+                                      end
+                                    end
 
           javascript_tag(<<-EOF)
             var wikiToolbar = new jsToolBar($('#{field_id}'));
-            wikiToolbar.setHelpLink('#{escape_javascript help_link}');
+            wikiToolbar.setHelpLink(jQuery('#{escape_javascript help_button}')[0]);
             // initialize the toolbar later, so that i18n-js has a chance to set the translations
             // for the wiki-buttons first.
             jQuery(function(){ wikiToolbar.draw(); });