Download as
Browse Code »

Commit e643284a3fdb5fe677363c0237d58c8e0e84b635

Authored by Rodrigo Souto
1 parent 8d248734
Exists in master and in 21 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, news_page, script_to_update, template_mirror_block, tests, tests_fixies

[media-panel-improvements] Show/Hide media panel

Showing 5 changed files with 47 additions and 19 deletions   Show diff stats
app/views/cms/_text_editor_sidebar.html.erb
  Diff comments   View file @e643284
@@ -3,9 +3,10 @@ @@ -3,9 +3,10 @@
3 <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span> 3 <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
4 <span class='button-close' data-value='<%= _('Close') %>'></span> 4 <span class='button-close' data-value='<%= _('Close') %>'></span>
5 5
  6 + <div class='header'><strong><%= _('Insert media') %></strong><%= button('vertical-toggle', _('Show/Hide'), '#') %></div>
  7 +
6 <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %> 8 <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>
7 <div class='text-editor-sidebar-box' id='media-upload-box'> 9 <div class='text-editor-sidebar-box' id='media-upload-box'>
8 - <div class='header'><strong><%= _('Insert media') %></strong></div>  
9 <div id='media-upload-form'> 10 <div id='media-upload-form'>
10 <%= form_tag({ :action => 'media_upload' }, :multipart => true) do %> 11 <%= form_tag({ :action => 'media_upload' }, :multipart => true) do %>
11 <div class='formfield'> 12 <div class='formfield'>
@@ -27,7 +28,6 @@ @@ -27,7 +28,6 @@
27 </div> 28 </div>
28 29
29 <div id='published-media' class='text-editor-sidebar-box' data-url='<%= url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier}) %>'> 30 <div id='published-media' class='text-editor-sidebar-box' data-url='<%= url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier}) %>'>
30 - <div class='header'><strong><%= _('Published media') %></strong></div>  
31 <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {}, {}, 31 <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {}, {},
32 "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %> 32 "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>
33 <%= labelled_form_field _('Search'), text_field_tag('q') %> 33 <%= labelled_form_field _('Search'), text_field_tag('q') %>
app/views/shared/_lead_and_body.html.erb
  Diff comments   View file @e643284
@@ -20,16 +20,16 @@ @@ -20,16 +20,16 @@
20 <div class='article-lead' id="article-lead-<%=lead_id.to_s%>"> 20 <div class='article-lead' id="article-lead-<%=lead_id.to_s%>">
21 21
22 <% if f %> 22 <% if f %>
23 - <%= labelled_form_field(_(abstract_label), f.text_area(abstract_method, :style => 'width: 98%; height: 200px;', :class => editor_type)) %> 23 + <%= labelled_form_field(_(abstract_label), f.text_area(abstract_method, :style => 'width: 100%; height: 200px;', :class => editor_type)) %>
24 <% else %> 24 <% else %>
25 - <%= labelled_form_field(_(abstract_label), text_area(object, abstract_method, :style => 'width: 98%; height: 200px;', :class => editor_type)) %> 25 + <%= labelled_form_field(_(abstract_label), text_area(object, abstract_method, :style => 'width: 100%; height: 200px;', :class => editor_type)) %>
26 <% end %> 26 <% end %>
27 </div> 27 </div>
28 <div style="margin-top: 10px;"> 28 <div style="margin-top: 10px;">
29 <% if f %> 29 <% if f %>
30 - <%= labelled_form_field(_(body_label), f.text_area(body_method, :style => 'width: 98%; height: 400px;', :class => editor_type)) %> 30 + <%= labelled_form_field(_(body_label), f.text_area(body_method, :style => 'width: 100%; height: 400px;', :class => editor_type)) %>
31 <% else %> 31 <% else %>
32 - <%= labelled_form_field(_(body_label), text_area(object, body_method, :style => 'width: 98%; height: 400px;', :class => editor_type)) %> 32 + <%= labelled_form_field(_(body_label), text_area(object, body_method, :style => 'width: 100%; height: 400px;', :class => editor_type)) %>
33 <% end %> 33 <% end %>
34 </div> 34 </div>
35 35
public/designs/icons/tango/style.css
  Diff comments   View file @e643284
@@ -72,6 +72,7 @@ @@ -72,6 +72,7 @@
72 .icon-newupload-file { background-image: url(Tango/16x16/actions/filesave.png) } 72 .icon-newupload-file { background-image: url(Tango/16x16/actions/filesave.png) }
73 .icon-slideshow { background-image: url(Tango/16x16/mimetypes/x-office-presentation.png) } 73 .icon-slideshow { background-image: url(Tango/16x16/mimetypes/x-office-presentation.png) }
74 .icon-photos { background-image: url(Tango/16x16/devices/camera-photo.png) } 74 .icon-photos { background-image: url(Tango/16x16/devices/camera-photo.png) }
  75 +.icon-vertical-toggle { background-image: url(Tango/16x16/actions/mail-send-receive.png) }
75 76
76 .icon-text-html { background-image: url(Tango/16x16/mimetypes/text-html.png) } 77 .icon-text-html { background-image: url(Tango/16x16/mimetypes/text-html.png) }
77 .icon-text-plain { background-image: url(Tango/16x16/mimetypes/text-x-generic.png) } 78 .icon-text-plain { background-image: url(Tango/16x16/mimetypes/text-x-generic.png) }
public/javascripts/media-panel.js
  Diff comments   View file @e643284
@@ -116,4 +116,9 @@ jQuery(&quot;#new_folder&quot;).keypress(function( event ) { @@ -116,4 +116,9 @@ jQuery(&quot;#new_folder&quot;).keypress(function( event ) {
116 } 116 }
117 }); 117 });
118 } 118 }
119 -}) 119 +});
  120 +
  121 +jQuery('.text-editor-sidebar .header .icon-vertical-toggle').click(function(){
  122 + jQuery('#content').toggleClass('show-media-panel');
  123 + return false;
  124 +});
public/stylesheets/application.css
  Diff comments   View file @e643284
@@ -3443,11 +3443,18 @@ table.cms-articles .icon:hover { @@ -3443,11 +3443,18 @@ table.cms-articles .icon:hover {
3443 3443
3444 /* Text editors sidebar */ 3444 /* Text editors sidebar */
3445 3445
3446 -.controller-cms div.with_media_panel { 3446 +.controller-cms .with_media_panel {
3447 float: left; 3447 float: left;
  3448 + width: 900px;
  3449 + transition: 1s 0.5s;
  3450 +}
  3451 +
  3452 +.controller-cms .show-media-panel .with_media_panel {
3448 width: 600px; 3453 width: 600px;
  3454 + transition: 1s;
3449 } 3455 }
3450 -div.with_media_panel .formfield input[type="checkbox"] { 3456 +
  3457 +.with_media_panel .formfield input[type="checkbox"] {
3451 width: auto; 3458 width: auto;
3452 } 3459 }
3453 3460
@@ -3512,6 +3519,14 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] { @@ -3512,6 +3519,14 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3512 width: 280px; 3519 width: 280px;
3513 right: 20px; 3520 right: 20px;
3514 top: 70px; 3521 top: 70px;
  3522 + max-height: 45px;
  3523 + overflow: hidden;
  3524 + transition: 1s;
  3525 +}
  3526 +
  3527 +.show-media-panel .text-editor-sidebar {
  3528 + max-height: 800px;
  3529 + transition: 1s 0.5s;
3515 } 3530 }
3516 3531
3517 .text-editor-sidebar-box { 3532 .text-editor-sidebar-box {
@@ -3521,12 +3536,23 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] { @@ -3521,12 +3536,23 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3521 margin-bottom: 10px; 3536 margin-bottom: 10px;
3522 } 3537 }
3523 3538
3524 -.text-editor-sidebar-box .header {  
3525 - margin: -10px -10px 0px -10px;  
3526 - padding: 10px;  
3527 - font-weight: bold;  
3528 - border-bottom: 1px solid #d3d7cf;  
3529 - background-color: #eeeeec; 3539 +.text-editor-sidebar .header {
  3540 + margin: 0 0 10px 0;
  3541 + padding: 10px;
  3542 + font-weight: bold;
  3543 + border: 1px solid #d3d7cf;
  3544 + background-color: #eeeeec;
  3545 + background-repeat: no-repeat;
  3546 + background-position: 98% 10px;
  3547 + position: relative;
  3548 +}
  3549 +
  3550 +.text-editor-sidebar .header .icon-vertical-toggle {
  3551 + position: absolute;
  3552 + right: 6px;
  3553 + top: 6px;
  3554 + padding-top: 0px;
  3555 + padding-bottom: 0px;
3530 } 3556 }
3531 3557
3532 .text-editor-sidebar code, 3558 .text-editor-sidebar code,
@@ -3639,10 +3665,6 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] { @@ -3639,10 +3665,6 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3639 margin-top: 4px; 3665 margin-top: 4px;
3640 } 3666 }
3641 3667
3642 -.text-editor-sidebar .header {  
3643 - background-repeat: no-repeat;  
3644 - background-position: 98% 10px;  
3645 -}  
3646 .text-editor-sidebar .media-upload-error { 3668 .text-editor-sidebar .media-upload-error {
3647 color: red; 3669 color: red;
3648 } 3670 }