From b6d55eb67a134a6512a68751b52de9e6de8cd9cd Mon Sep 17 00:00:00 2001 From: Jens Ulferts Date: Wed, 25 Mar 2015 09:41:06 +0100 Subject: [PATCH 1/5] show border when tabbing --- app/assets/stylesheets/_jstoolbar.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/_jstoolbar.sass b/app/assets/stylesheets/_jstoolbar.sass index c903484e84..4a5e6d03e8 100644 --- a/app/assets/stylesheets/_jstoolbar.sass +++ b/app/assets/stylesheets/_jstoolbar.sass @@ -70,6 +70,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 From 7c132659e1557f47d2b1a4aebdee2f7e9c3ebb31 Mon Sep 17 00:00:00 2001 From: Jens Ulferts Date: Wed, 25 Mar 2015 09:41:48 +0100 Subject: [PATCH 2/5] show toolbar on same line as "Description" title --- app/assets/stylesheets/content/_work_packages.sass | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/content/_work_packages.sass b/app/assets/stylesheets/content/_work_packages.sass index 2582eefd72..aea50c4404 100644 --- a/app/assets/stylesheets/content/_work_packages.sass +++ b/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 From 163649cb55200724f7efbb169962f48a0a3751c8 Mon Sep 17 00:00:00 2001 From: Jens Ulferts Date: Wed, 25 Mar 2015 10:02:42 +0100 Subject: [PATCH 3/5] transform jstoolbar help into button * jstoolbar now takes whatever dom node is provided for the help trigger --- app/assets/javascripts/jstoolbar/jstoolbar.js | 6 +----- app/assets/stylesheets/_jstoolbar.sass | 7 ++++--- .../stylesheets/content/_in_place_editing.sass | 5 +++-- .../app/ui_components/wiki-toolbar-directive.js | 2 +- lib/redmine/wiki_formatting/textile/helper.rb | 15 ++++++--------- 5 files changed, 15 insertions(+), 20 deletions(-) diff --git a/app/assets/javascripts/jstoolbar/jstoolbar.js b/app/assets/javascripts/jstoolbar/jstoolbar.js index f3f30e03e8..a6c58b1352 100644 --- a/app/assets/javascripts/jstoolbar/jstoolbar.js +++ b/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) { diff --git a/app/assets/stylesheets/_jstoolbar.sass b/app/assets/stylesheets/_jstoolbar.sass index 4a5e6d03e8..f6e5538f60 100644 --- a/app/assets/stylesheets/_jstoolbar.sass +++ b/app/assets/stylesheets/_jstoolbar.sass @@ -53,7 +53,7 @@ $jstoolbar--icon-active-background: #eee margin-bottom: 0.25rem line-height: 1.6rem - button, .jstb_help + button @include grid-content padding: 0.25rem margin-left: 0.25rem @@ -83,9 +83,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 diff --git a/app/assets/stylesheets/content/_in_place_editing.sass b/app/assets/stylesheets/content/_in_place_editing.sass index 7034f98d53..c37a8e82b5 100644 --- a/app/assets/stylesheets/content/_in_place_editing.sass +++ b/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 diff --git a/frontend/app/ui_components/wiki-toolbar-directive.js b/frontend/app/ui_components/wiki-toolbar-directive.js index 5042cba247..69ad2636f0 100644 --- a/frontend/app/ui_components/wiki-toolbar-directive.js +++ b/frontend/app/ui_components/wiki-toolbar-directive.js @@ -27,7 +27,7 @@ //++ module.exports = function() { - var HELP_LINK_HTML = '' + I18n.t('js.inplace.link_formatting_help') + '', + var HELP_LINK_HTML = jQuery('')[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', diff --git a/lib/redmine/wiki_formatting/textile/helper.rb b/lib/redmine/wiki_formatting/textile/helper.rb index 8b2eae13d0..4b4f764e49 100644 --- a/lib/redmine/wiki_formatting/textile/helper.rb +++ b/lib/redmine/wiki_formatting/textile/helper.rb @@ -36,18 +36,15 @@ 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) 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(); }); From 1b2026aaecd898f58695896aedad4d471c68606e Mon Sep 17 00:00:00 2001 From: Jens Ulferts Date: Wed, 25 Mar 2015 10:03:23 +0100 Subject: [PATCH 4/5] fix various alignment issues (cross browser) --- app/assets/stylesheets/_jstoolbar.sass | 9 +++++++-- app/assets/stylesheets/content/_in_place_editing.sass | 5 +++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/_jstoolbar.sass b/app/assets/stylesheets/_jstoolbar.sass index f6e5538f60..3a00846096 100644 --- a/app/assets/stylesheets/_jstoolbar.sass +++ b/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 @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 diff --git a/app/assets/stylesheets/content/_in_place_editing.sass b/app/assets/stylesheets/content/_in_place_editing.sass index c37a8e82b5..9452fdae5d 100644 --- a/app/assets/stylesheets/content/_in_place_editing.sass +++ b/app/assets/stylesheets/content/_in_place_editing.sass @@ -152,8 +152,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 From 62e6cb334e5c1919faff3476927ff7f98e1199f6 Mon Sep 17 00:00:00 2001 From: Jens Ulferts Date: Fri, 27 Mar 2015 14:58:41 +0100 Subject: [PATCH 5/5] reestablishing accessibility removed in 163649c --- frontend/app/ui_components/wiki-toolbar-directive.js | 12 ++++++++++-- lib/redmine/wiki_formatting/textile/helper.rb | 6 +++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/frontend/app/ui_components/wiki-toolbar-directive.js b/frontend/app/ui_components/wiki-toolbar-directive.js index 69ad2636f0..e208152293 100644 --- a/frontend/app/ui_components/wiki-toolbar-directive.js +++ b/frontend/app/ui_components/wiki-toolbar-directive.js @@ -27,12 +27,20 @@ //++ module.exports = function() { - var HELP_LINK_HTML = jQuery('')[0], + var HELP_LINK_ONCLICK = 'window.open("/help/wiki_syntax", "", ' + + '"resizable=yes, location=no, width=600, height=640, ' + + 'menubar=no, status=no, scrollbars=yes"); return false;', + HELP_LINK_HTML = jQuery('')[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: '' diff --git a/lib/redmine/wiki_formatting/textile/helper.rb b/lib/redmine/wiki_formatting/textile/helper.rb index 4b4f764e49..06f2e891e0 100644 --- a/lib/redmine/wiki_formatting/textile/helper.rb +++ b/lib/redmine/wiki_formatting/textile/helper.rb @@ -40,7 +40,11 @@ module Redmine '', class: 'jstb_help icon icon-help', onclick: open_help, - title: l(:setting_text_formatting) + 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}'));