Hi all, This is the css/html change and images to make the update box expand and contract as necessary when reply text is inserted, or if something else changes in the future (like maybe we want an auto-expanding composition box or something).
Two things I need assistance with to finish this: 1. Testing, especially in IE. I can test in IE 8 and FF once it is deployed to Stax, but if someone can test in IE7 that would be great. I've confirmed it works in Chrome/webkit. 2. The image currently has a very slight gradient, which doesn't work with background repetition. Can someone with more image editing chops than me (and a real image editing program) make the three images single-color? Thanks! Ethan On Wed, Nov 3, 2010 at 8:01 PM, <esjew...@apache.org> wrote: > Author: esjewett > Date: Wed Nov 3 19:01:21 2010 > New Revision: 1030614 > > URL: http://svn.apache.org/viewvc?rev=1030614&view=rev > Log: > [ESME-284] [ESME-296] Make message area expand and contract as needed. Also > split bg-update.png as required. However, the split is not colored > correctly, so we need to redo the image as a single color. > > Added: > incubator/esme/trunk/server/src/main/webapp/images/bg-update-bot.png > (with props) > incubator/esme/trunk/server/src/main/webapp/images/bg-update-mid.png > (with props) > incubator/esme/trunk/server/src/main/webapp/images/bg-update-top.png > (with props) > Modified: > incubator/esme/trunk/server/src/main/webapp/style/style.css > > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html > > > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message_update_box.html > > Added: incubator/esme/trunk/server/src/main/webapp/images/bg-update-bot.png > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/images/bg-update-bot.png?rev=1030614&view=auto > > ============================================================================== > Binary file - no diff available. > > Propchange: > incubator/esme/trunk/server/src/main/webapp/images/bg-update-bot.png > > ------------------------------------------------------------------------------ > svn:mime-type = application/octet-stream > > Added: incubator/esme/trunk/server/src/main/webapp/images/bg-update-mid.png > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/images/bg-update-mid.png?rev=1030614&view=auto > > ============================================================================== > Binary file - no diff available. > > Propchange: > incubator/esme/trunk/server/src/main/webapp/images/bg-update-mid.png > > ------------------------------------------------------------------------------ > svn:mime-type = application/octet-stream > > Added: incubator/esme/trunk/server/src/main/webapp/images/bg-update-top.png > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/images/bg-update-top.png?rev=1030614&view=auto > > ============================================================================== > Binary file - no diff available. > > Propchange: > incubator/esme/trunk/server/src/main/webapp/images/bg-update-top.png > > ------------------------------------------------------------------------------ > svn:mime-type = application/octet-stream > > Modified: incubator/esme/trunk/server/src/main/webapp/style/style.css > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/style/style.css?rev=1030614&r1=1030613&r2=1030614&view=diff > > ============================================================================== > --- incubator/esme/trunk/server/src/main/webapp/style/style.css (original) > +++ incubator/esme/trunk/server/src/main/webapp/style/style.css Wed Nov 3 > 19:01:21 2010 > @@ -230,7 +230,7 @@ label { > } > > .post-form-row { > - margin:7px 0; > + margin-top:10px; > } > .line { > margin-top:12px; > @@ -238,22 +238,22 @@ label { > } > .login-btn, .update-btn, .submit-btn { > float:right; > -} > -.share-select { > - float:left; > +} > + > +.share-select { > + display:inline; > } > -.update-btn { > + > +.update-btn { > + display:inline; > margin-right:40px; > -} > -.update-btn, .share-select { > - margin-top:10px; > -} > +} > + > #form-update label { > font-weight:bold; > color:#000; > margin-top: 5px; > - padding-right:5px; > - float:left; > + padding-right:5px; > } > select.inputBox2 { > background-color:#FFFFFF !important; > @@ -263,8 +263,7 @@ select.inputBox2 { > padding:4px; > } > > -textarea.inputBox2 { > - float:left; > +textarea.inputBox2 { > background-color:#FFFFFF !important; > border:1px solid #a7aaad; > width:95%; > @@ -406,15 +405,27 @@ ul.main-links { > /* UPDATES > > > *******************************************************************************/ > #back-header { > - margin-top:20px; > - } > + margin-top:20px; > +} > + > .container-update { > - > - width: 550px; > - height:185px; > - padding:20px 30px; > - background: url(../images/bg-update.png) no-repeat; > - margin-bottom:20px; > + width: 550px; > + padding:10px 30px; > + background: url(../images/bg-update-mid.png) repeat-y; > +} > + > +.container-update-top { > + height:15px; > + width: 550px; > + padding:0px 30px; > + background: url(../images/bg-update-top.png) no-repeat; > +} > + > +.container-update-bot { > + height:20px; > + width: 550px; > + padding:0px 30px; > + background: url(../images/bg-update-bot.png) no-repeat; > } > > .gray-box { > > Modified: > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html?rev=1030614&r1=1030613&r2=1030614&view=diff > > ============================================================================== > --- > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html > (original) > +++ > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message.html > Wed Nov 3 19:01:21 2010 > @@ -20,11 +20,11 @@ > > > <lift:surround with="base_top" at="left"> > - <div id="back-header"> > + <div id="back-header"> > <lift:embed what="templates-hidden/message_update_box"/> > </div> > > - <div class="container-aux"> > + <div class="container-aux"> > <lift:embed what="templates-hidden/timeline_personal"/> > </div> > </lift:surround> > \ No newline at end of file > > Modified: > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message_update_box.html > URL: > http://svn.apache.org/viewvc/incubator/esme/trunk/server/src/main/webapp/templates-hidden/message_update_box.html?rev=1030614&r1=1030613&r2=1030614&view=diff > > ============================================================================== > --- > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message_update_box.html > (original) > +++ > incubator/esme/trunk/server/src/main/webapp/templates-hidden/message_update_box.html > Wed Nov 3 19:01:21 2010 > @@ -18,74 +18,78 @@ > --> > > <!---UPDATE BOX --> > -<div class="container-update"> > - <h3 id="message_request"> > - > <lift:loc>ui_messages_message_label_message_request</lift:loc> > - </h3> > - <div id="form-update"> > - <div id="messages"></div> > - <div class="post-form-row"> > - <textarea class="inputBox2 tipelement" title="Enter > your status message here." id="vMsg" rows="5" cols="80%"></textarea> > - <div class="row clear" style="display: none"> > - <input id="vTag" style="width: 90%"/> > - </div> > - </div> > - <div class="row clear" style="display: none" > id="reply-to-div"> > - <p> > - > <b><lift:loc>ui_messages_message_label_message_reply</lift:loc></b> > - <span id="reply-to-span"><i></i></span> > - <a href="javascript: clearReplyTo()"> > - > <lift:loc>ui_messages_message_label_message_remove_reply</lift:loc> > - </a> > - </p> > - </div> > - <div class="post-form-row"> > - <div class="share-select"> > - <label> > - > <lift:loc>ui_messages_share</lift:loc> > - </label> > - <select id="vPool" class="inputBox2 > tipelement" title="Select the pool in which your message should be > submitted"> > - <option value="0"> > - > <lift:loc>ui_messages_message_label_message_pool_public</lift:loc> > - </option> > - <lift:UserSnip.accessPools/> > - </select> > - </div> > - <div class="update-btn"> > - <input type="image" > onclick="javascript:post_msg();" src="images/btn-update.gif" /> > - </div> > - </div> > - <script> > - // <![CDATA[ > - var currentConvNumber = 0; > +<div> > + <div class="container-update-top"></div> > + <div class="container-update"> > + <h3 id="message_request"> > + > <lift:loc>ui_messages_message_label_message_request</lift:loc> > + </h3> > + <div id="form-update"> > + <div id="messages"></div> > + <div class="post-form-row"> > + <textarea class="inputBox2 tipelement" title="Enter > your status message here." id="vMsg" rows="5" cols="80%"></textarea> > + <div class="row clear" style="display: none"> > + <input id="vTag" style="width: 90%"/> > + </div> > + </div> > + <div class="row clear" style="display: none" > id="reply-to-div"> > + <p> > + > <b><lift:loc>ui_messages_message_label_message_reply</lift:loc></b> > + <span id="reply-to-span"><i></i></span> > + <a href="javascript: clearReplyTo()"> > + > <lift:loc>ui_messages_message_label_message_remove_reply</lift:loc> > + </a> > + </p> > + </div> > + <div class="post-form-row"> > + <div class="share-select"> > + <label> > + > <lift:loc>ui_messages_share</lift:loc> > + </label> > + <select id="vPool" class="inputBox2 > tipelement" title="Select the pool in which your message should be > submitted"> > + <option value="0"> > + > <lift:loc>ui_messages_message_label_message_pool_public</lift:loc> > + </option> > + <lift:UserSnip.accessPools/> > + </select> > + </div> > + <div class="update-btn"> > + <input type="image" > onclick="javascript:post_msg();" src="images/btn-update.gif" /> > + </div> > + </div> > + <script> > + // <![CDATA[ > + var currentConvNumber = 0; > > - function setReplyTo(id, text, msgPool, > author){ > - currentConvNumber = id; > - > document.getElementById('reply-to-div').style.display = "block"; > - > jQuery('#message_request').html("Reply to: " + author); > - var rep_msg = text > - if (text.length > 50) > - rep_msg = text.substr(0, 47) + > "..." > - > jQuery('#reply-to-span').html(rep_msg); > - jQuery('#vMsg').val("@" + author + " > ") > - jQuery('#vMsg').focus() > - jQuery('#vPool').val(msgPool); > - } > + function setReplyTo(id, text, msgPool, > author){ > + currentConvNumber = id; > + > document.getElementById('reply-to-div').style.display = "block"; > + > jQuery('#message_request').html("Reply to: " + author); > + var rep_msg = text > + if (text.length > 50) > + rep_msg = text.substr(0, 47) + > "..." > + > jQuery('#reply-to-span').html(rep_msg); > + jQuery('#vMsg').val("@" + author + > " ") > + jQuery('#vMsg').focus() > + jQuery('#vPool').val(msgPool); > + } > > - function clearReplyTo(){ > - currentConvNumber = 0; > - > document.getElementById('reply-to-div').style.display = "none"; > - jQuery('#vPool').val(0); > - jQuery('#message_request').html('What are you working > on?'); > - } > + function clearReplyTo(){ > + currentConvNumber = 0; > + > document.getElementById('reply-to-div').style.display = "none"; > + jQuery('#vPool').val(0); > + jQuery('#message_request').html('What are you working > on?'); > + } > > - function clearResend(id){ > - > document.getElementById(id).style.display = "none" > - } > + function clearResend(id){ > + > document.getElementById(id).style.display = "none" > + } > > - // ]]> > - </script> > - <lift:UserSnip.postScript/> > - </div> > + // ]]> > + </script> > + <lift:UserSnip.postScript/> > + </div> > + </div> > + <div class="container-update-bot"></div> > </div> > <!--END UPDATE BOX--> > \ No newline at end of file > > >
