Merge pull request #5380 from Faldrian/feature/3098-publisher-imageupload-layouterror-fix

Feature/3098 publisher imageupload layouterror fix

Changelog.md

@@ -86,6 +86,7 @@ This is disabled by default since it requires the installation of additional pac
 * Fix translations on mobile password reset pages [#5318](https://github.com/diaspora/diaspora/pull/5318)
 * Handle unset user agent when signing out [#5316](https://github.com/diaspora/diaspora/pull/5316)
 * More robust URL parsing for oEmbed and OpenGraph [#5347](https://github.com/diaspora/diaspora/pull/5347)
+* Fix Publisher doesn't expand while uloading images [#3098](https://github.com/diaspora/diaspora/issues/3098)
 
 ## Features
 * Don't pull jQuery from a CDN by default [#5105](https://github.com/diaspora/diaspora/pull/5105)

app/assets/stylesheets/bookmarklet.css.scss

@@ -1 +1,2 @@
 #bookmarklet { padding:10px 10px 30px 10px; margin-top: 0; }
+body.page-status_messages.action-bookmarklet { margin-top: 0px }

app/assets/stylesheets/mentions.css.scss

@@ -66,19 +66,22 @@
     }
   }
 
+  .mentions-box {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    top: 0px;
+    padding: 4px 6px;
+  }
+
   .mentions {
-    bottom: 0;
     color: white;
     font-size: 14px;
     font-family: Arial, Helvetica, sans-serif;
-    left: 0;
     line-height: normal;
     overflow: hidden;
-    padding: 4px;
+    width: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 445px;
     white-space: pre-wrap;
     word-wrap: break-word;
 

app/assets/stylesheets/publisher.css.scss

@@ -78,9 +78,7 @@
       }
      
       .mentions-input-box .mentions {
-        padding: 4px 6px !important;
         line-height: 20px !important;
-        width: 100% !important;
       }
 
       &.with_attachments .row-fluid#photodropzone_container {

app/assets/stylesheets/publisher_blueprint.css.scss

@@ -36,8 +36,14 @@
     textarea {
       margin-bottom: 30px;
     }
+
+    #publisher_textarea_wrapper.with_attachments {
+      textarea {
+        margin-bottom: 20px;
+      }
+    }
   }
-  
+
   .mentions-autocomplete-list ul {
     width: 483px;
   }
@@ -64,7 +70,7 @@
 
     .public_toggle {
       text-align: right;
-      
+
       .dropdown {
         text-align: left;
       }
@@ -107,6 +113,7 @@
 
   #status_message_fake_text {
     min-height: 20px;
+    padding: 4px 6px;
   }
 
   .content_creation {
@@ -179,10 +186,11 @@
       @include opacity(1);
     }
   }
-  
+
   .markdownIndications {
     position: absolute;
     bottom: 0px;
+    left: 5px;
   }
 
   @include border-radius(2px);
@@ -208,16 +216,11 @@
   }
 
   &.with_attachments {
-    padding-bottom: 38px;
+    padding-bottom: 25px;
   }
 
   #photodropzone {
-    z-index: 3;
+    margin: 0 5px;
-    position: absolute;
-    bottom: 15px;
-    right: 35px;
-    width: 430px;
-    left: 5px;
     padding: 0;
 
     li {
@@ -298,8 +301,6 @@
 }
 
 #publisher-images {
-  padding-left: 5px;
-
   #locator {
     bottom: 1px !important;
     display: inline-block;

app/assets/templates/stream_tpl.jst.hbs

@@ -66,7 +66,7 @@
             </div>
 
 
-            <!--Since stream-interactions is fixed, we need a double span5 declaration here :(-->
+            <!--Since stream-interactions is fixed, we need a double span6 declaration here :(-->
             <div class="span6">
                 <section id="stream-interactions" class="span6"/>
             </div>

app/helpers/application_helper.rb

@@ -21,16 +21,8 @@ module ApplicationHelper
     timeago_tag(time, options.merge(:class => 'timeago', :title => time.iso8601, :force => true)) if time
   end
 
-  def bookmarklet
+  def bookmarklet_url( height = 400, width = 620)
-    raw_bookmarklet
+    "javascript:(function(){f='#{AppConfig.pod_uri.to_s}bookmarklet?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&notes='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=1&';a=function(){if(!window.open(f+'noui=1&jump=doclose','diasporav1','location=yes,links=no,scrollbars=yes,toolbar=no,width=#{width},height=#{height}'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()"
-  end
-
-  def raw_bookmarklet( height = 400, width = 620)
-    "javascript:(function(){f='#{AppConfig.pod_uri.to_s}bookmarklet?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&notes='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=1&';a=function(){if(!window.open(f+'noui=1&jump=doclose','diasporav1','location=yes,links=no,scrollbars=no,toolbar=no,width=#{width},height=#{height}'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()"
-  end
-
-  def magic_bookmarklet_link
-    bookmarklet
   end
 
   def contacts_link

app/views/publisher/_publisher_blueprint.html.haml

@@ -16,7 +16,6 @@
         %params
           #publisher_textarea_wrapper
             = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :id => "hide_publisher", :title => t('shared.publisher.discard_post'))
-            %ul#photodropzone
             - if current_user.getting_started?
               = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
                 :title => popover_with_close_html( '1. ' + t('shared.public_explain.share') ),
@@ -24,7 +23,7 @@
             - else
               = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}..."
             = status.hidden_field :text, :value => h(publisher_hidden_text), :class => 'clear_on_submit'
-
+            %ul#photodropzone
             %span#publisher-images
               %span.markdownIndications
                 != t('shared.publisher.formatWithMarkdown', markdown_link: link_to(t('help.markdown'), 'https://diasporafoundation.org/formatting', target: :blank))

app/views/shared/_right_sections.html.haml

@@ -66,7 +66,7 @@
     %h5.title-header
       = t('bookmarklet.heading')
   .content
-    != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), magic_bookmarklet_link))
+    != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_url))
 
 - if AppConfig.settings.paypal_hosted_button_id.present? || AppConfig.bitcoin_donation_address
   .section

lib/assets/javascripts/jquery.mentionsInput.js

@@ -34,7 +34,7 @@
       autocompleteListItem       : _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %></li>'),
       autocompleteListItemAvatar : _.template('<img  src="<%= avatar %>" />'),
       autocompleteListItemIcon   : _.template('<div class="icon <%= icon %>"></div>'),
-      mentionsOverlay            : _.template('<div class="mentions"><div></div></div>'),
+      mentionsOverlay            : _.template('<div class="mentions-box"><div class="mentions"><div></div></div></div>'),
       mentionItemSyntax          : _.template('@[<%= value %>](<%= type %>:<%= id %>)'),
       mentionItemHighlight       : _.template('<strong><span><%= value %></span></strong>')
     }
@@ -139,7 +139,7 @@
       mentionText = mentionText.replace(/ {2}/g, '&nbsp; ');
 
       elmInputBox.data('messageText', syntaxMessage);
-      elmMentionsOverlay.find('div').html(mentionText);
+      elmMentionsOverlay.find('div > div').html(mentionText);
     }
 
     function resetBuffer() {