Download as
Browse Code »

Commit cad471df18e566f733fe317dc3f2bb43ca9b2782

Authored by Antonio Terceiro
1 parent e9d95cb7
Exists in master and in 23 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, merge_deactive_and_ban, news_page, script_to_update, stable, template_mirror_block, tests, tests_fixies

Enhancements on text editor sidebar - first take 

ActionItem2371
Showing 5 changed files with 91 additions and 22 deletions   Show diff stats
app/views/cms/_text_editor_sidebar.rhtml
  Diff comments   View file @cad471d
1 1 <div class='text-editor-sidebar'>
  2 + <meta name='button.add' value='<%= _('Add to the text') %>'/>
  3 + <meta name='button.zoom' value='<%= _('Zoom in') %>'/>
2 4 <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>
3 5 <div class='text-editor-sidebar-box' id='media-upload-box'>
4   - <p><strong><%= _('Media upload') %></strong></p>
  6 + <div class='header'<strong><%= _('Media upload') %></strong></div>
5 7 <div id='media-upload-form'>
6 8 <% form_tag({ :action => 'media_upload' }, :multipart => true) do %>
7 9 <div class='formfield'>
... ... @@ -24,7 +26,7 @@
24 26 </div>
25 27 </div>
26 28 <div id='media-search-box' class='text-editor-sidebar-box'>
27   - <p><strong><%= _('Media search') %></strong></p>
  29 + <div class='header'><strong><%= _('Media search') %></strong></div>
28 30 <p>
29 31 <% form_tag({ :action => 'search' }) do %>
30 32 <span class='formfield'>
... ...
app/views/cms/_textile_quick_reference.rhtml
  Diff comments   View file @cad471d
1 1 <div class='text-editor-sidebar-box'>
2   - <p>
  2 + <div class='header'>
3 3 <strong><%= _('Textile markup quick reference') %></strong>
4 4 <%= link_to(_('(show)'), '#', :id => 'textile-quickref-show') %>
5 5 <%= link_to(_('(hide)'), '#', :id => 'textile-quickref-hide', :style => 'display: none') %>
6   - </p>
  6 + </div>
7 7 <div id='textile-quickref' style='display: none;'>
8 8 <p><%= _('Simple formatting:') %> <code>_<%= _('italics') %>_</code> <code>*<%= _('bold') %>*</code>, <code>-<%= _('striked')%>-</code>.</p>
9 9 <p><%= _('Links:') %> <code>"Noosfero":http://noosfero.org/</code></p>
... ...
public/images/zoom-dark.png 0 → 100644
View file @cad471d

177 Bytes
public/javascripts/article.js
  Diff comments   View file @cad471d
... ... @@ -23,31 +23,69 @@ jQuery(function($) {
23 23 $('#textile-quickref').slideToggle();
24 24 return false;
25 25 })
26   - function insert_items(items, selector) {
  26 + function list_items(items, selector) {
27 27 var html_for_items = '';
  28 + var button_add = $('.text-editor-sidebar meta[name=button.add]').attr('value');
  29 + var button_zoom = $('.text-editor-sidebar meta[name=button.zoom]').attr('value');
28 30 $.each(items, function(i, item) {
29 31 if (item.error) {
30 32 html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
31 33 return;
32 34 }
33 35 if (item.content_type && item.content_type.match(/^image/)) {
34   - html_for_items += '<div class="icon-photos"><img src="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></div>';
  36 + html_for_items += '<div class="item" data-item="span"><span><img src="' + item.url + '"/></span><div class="controls image-controls"><a class="button with-text icon-add" data-item-url="' + item.url + '" href="#">' + button_add + '</a> <a class="button icon-zoom" href="#" title="' + button_zoom + '"><span>' + button_zoom + '/span></a></div></div>';
35 37 } else {
36   - html_for_items += '<div class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></div>';
  38 + html_for_items += '<div class="item ' + item.icon + '" data-item="div"><div><a href="' + item.url + '">' + item.title + '</a></div> <div class="controls file-controls"> <a class="button with-text icon-add" data-item-url="' + item.url + '" href="#">' + button_add + '</a></div></div>';
37 39 }
38 40 });
39 41 $(selector).html(html_for_items);
  42 + $(selector).find('.controls a.icon-add').click(function() {
  43 + var $item = $(this).closest('.item');
  44 + var html_selector = $item.attr('data-item');
  45 + insert_item_in_text($item.find(html_selector));
  46 + return false;
  47 + });
  48 + $(selector).find('.controls a.icon-zoom').click(function() {
  49 + alert('zoom!');
  50 + // FIXME zoom in in the image
  51 + return false;
  52 + });
  53 + }
  54 +
  55 + // FIXME the user may also want to add the item to the abstract textarea!
  56 + var text_field = 'article_body';
  57 +
  58 + function insert_item_in_text($wrapper) {
  59 + if (window.tinymce) {
  60 +
  61 + var html = $wrapper.html();
  62 +
  63 + var editor = tinymce.get(text_field);
  64 +
  65 + editor.setContent(editor.getContent() + html);
  66 +
  67 + } else {
  68 + // simple text editor
  69 + var text = $('#' + text_field).val();
  70 + var $item = $wrapper.children().first();
  71 + if ($item.attr('src')) {
  72 + $('#article_body').val(text + '!' + $item.attr('src') + '!');
  73 + }
  74 + if ($item.attr('href')) {
  75 + $('#article_body').val(text + $item.attr('href'));
  76 + }
  77 + }
40 78 }
41 79 $('#media-search-button').click(function() {
42 80 var query = '*' + $('#media-search-query').val() + '*';
43 81 var $button = $(this);
44   - $('#media-search-box').toggleClass('icon-loading');
  82 + $('#media-search-box .header').toggleClass('icon-loading');
45 83 $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
46   - insert_items(data, '#media-search-results .items');
  84 + list_items(data, '#media-search-results .items');
47 85 if (data.length && data.length > 0) {
48 86 $('#media-search-results').slideDown();
49 87 }
50   - $('#media-search-box').toggleClass('icon-loading');
  88 + $('#media-search-box .header').toggleClass('icon-loading');
51 89 });
52 90 return false;
53 91 });
... ... @@ -57,15 +95,15 @@ jQuery(function($) {
57 95 beforeSubmit:
58 96 function() {
59 97 $('#media-upload-form').slideUp();
60   - $('#media-upload-box').toggleClass('icon-loading');
  98 + $('#media-upload-box .header').toggleClass('icon-loading');
61 99 },
62 100 success:
63 101 function(data) {
64   - insert_items(data, '#media-upload-results .items');
  102 + list_items(data, '#media-upload-results .items');
65 103 if (data.length && data.length > 0) {
66 104 $('#media-upload-results').slideDown();
67 105 }
68   - $('#media-upload-box').toggleClass('icon-loading');
  106 + $('#media-upload-box .header').toggleClass('icon-loading');
69 107 }
70 108 });
71 109 $('#media-upload-more-files').click(function() {
... ...
public/stylesheets/application.css
  Diff comments   View file @cad471d
... ... @@ -3619,19 +3619,26 @@ div.with_media_panel .formfield input {
3619 3619 }
3620 3620  
3621 3621 .text-editor-sidebar-box {
3622   - background: #eeeeec;
  3622 + background: #fcfcf9;
3623 3623 border: 1px solid #d3d7cf;
3624 3624 padding: 10px 10px 0px 10px;
3625 3625 margin-bottom: 10px;
3626 3626 }
3627   -.text-editor-sidebar-box p {
3628   - margin-top: 0px;
  3627 +
  3628 +.text-editor-sidebar-box .header {
  3629 + margin: -10px -10px 0px -10px;
  3630 + padding: 10px;
  3631 + font-weight: bold;
  3632 + border-bottom: 1px solid #d3d7cf;
  3633 + background-color: #eeeeec;
3629 3634 }
  3635 +
3630 3636 .text-editor-sidebar code,
3631 3637 .text-editor-sidebar pre {
3632 3638 border: 1px solid #d3d7cf;
3633 3639 color: black;
3634   - padding: 2px;
  3640 + padding: 4px;
  3641 + background: white;
3635 3642 }
3636 3643 .text-editor-sidebar .icon-loading {
3637 3644 background-image: url(../images/loading-small.gif);
... ... @@ -3639,21 +3646,43 @@ div.with_media_panel .formfield input {
3639 3646 .text-editor-sidebar .items {
3640 3647 margin-bottom: 10px;
3641 3648 }
3642   -.text-editor-sidebar .items div {
  3649 +.text-editor-sidebar .items .item {
3643 3650 background-repeat: no-repeat;
3644 3651 background-position: 0px 0px;
3645 3652 padding-left: 20px;
3646 3653 padding-top: 2px;
3647 3654 padding-bottom: 2px;
3648 3655 border: none;
3649   - margin-bottom: 2px;
  3656 + margin-bottom: 12px;
3650 3657 }
  3658 +
3651 3659 .text-editor-sidebar .items :hover {
3652 3660 background-color: transparent;
3653   - border: none;
3654 3661 }
3655   -.text-editor-sidebar #media-upload-box,
3656   -.text-editor-sidebar #media-search-box {
  3662 +
  3663 +.text-editor-sidebar .items .image-controls {
  3664 + display: none;
  3665 + margin-left: 4px;
  3666 + vertical-align: top;
  3667 +}
  3668 +
  3669 +.text-editor-sidebar .items .item:hover .image-controls {
  3670 + display: inline-block;
  3671 +}
  3672 +
  3673 +.text-editor-sidebar .items .image-controls .icon-zoom {
  3674 + background-image: url(../images/zoom-dark.png);
  3675 + display: block;
  3676 + width: 0px;
  3677 + margin-top: 4px;
  3678 +}
  3679 +
  3680 +.text-editor-sidebar .items .file-controls {
  3681 + margin-top: 4px;
  3682 + margin-bottom: 4px;
  3683 +}
  3684 +
  3685 +.text-editor-sidebar .header {
3657 3686 background-repeat: no-repeat;
3658 3687 background-position: 98% 10px;
3659 3688 }
... ...