incubator-esme-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Richard Hirsch <hirsch.d...@gmail.com>
Subject Re: svn commit: r1030614 - in /incubator/esme/trunk/server/src/main/webapp: images/bg-update-bot.png images/bg-update-mid.png images/bg-update-top.png style/style.css templates-hidden/message.html templates-hidden/message_update_box.html
Date Fri, 05 Nov 2010 08:21:50 GMT
On Thu, Nov 4, 2010 at 11:14 AM, Ethan Jewett <esjewett@gmail.com> wrote:
> Anne and I had a little off-list chat about this (on gChat, but we'll
> actually use ESME for this in the future since it is now totally usable!).
> Here is a summary:
>
> *** Topic 1 ***
>
> I think we still may want to have an auto-expanding update area for two
> reasons:
>
> 1. There is currently a lot of wasted space under the update area, which is
> there mostly to make room for the like of reply text when the message is a
> reply. I'd like to get rid of most of the empty space.
>
> 2. I'd like to change the size of the message box to accommodate larger
> messages.
>
> Anne, as usual, had very pragmatic suggestions, which amounted to: Let's
> just keep it static and make the message box a bit larger to take up some of
> the extra space. I'm not really attached to either option, so we wanted
> opinions if people have a preference one way or the other. I'm more than
> happy to change back to the static background while keeping the CSS and HTML
> simplifications I made, and this is what I plan to do if no one has another
> preference.
>
> *** Topic 2 ***
>
> There was also a second piece of the discussion, involving a larger
> interface change that I want to bring up: I'd like to make it possible to
> access the message input area from any page on ESME. Most of the motivation
> for this is to allow messaging (and replies / resends) from the tag and
> conversation pages, but I don't see a reason we can't also allow posting
> from any other page. We came up with two possible ways of accomplishing
> this, both of which involve moving the update box into the base template
> instead of only the main timeline template:

But don't you think moving the update box to the main template would
eat up space?

I'd like more of an inline update box like that from twitter rather
than from seesmic web.
>
> 1. Have something like Twitter.com's new interface where there is always a
> small text box displayed and clicking on it expands to a full message-input
> interface.
>
> 2. Have something like streamie.org's interface where the message-input area
> slides down from the header upon request (thought I think if we do this we
> should make it more "in your face" than Streamie's implementation).

Could we "borrow" that CSS code from streamie?

>
> Thoughts on this? I think I'm going to prototype in a branch, so people can
> comment as progress is made.
>
> Ethan
>
> On Wed, Nov 3, 2010 at 10:48 PM, Anne Kathrine Petterøe
> <yojibee@gmail.com>wrote:
>
>> So I was just testing the latest changes and now I suddenly remembered what
>> these Jira tasks were ;-)
>> The "problem" with this change is that the reply line in the update box is
>> limited to a single line no matter how long the original message is.
>> To be honest I thought we had deleted these Jira tasks a while back,
>> because
>> I can't really see why we should change that? Do we really want to have
>> (possibly) super long messages displayed once again in the update box?
>> Wouldn't it steal too much screen space in that case?
>>
>> /Anne
>>
>> On 3 November 2010 22:31, Anne Kathrine Petterøe <yojibee@gmail.com>
>> wrote:
>>
>> > I'll take a look at it, if necessary I'll involve Joy.
>> >
>> > What did we decide on regarding the follow button again?
>> >
>> > /Anne
>> >
>> >
>> >
>> > On 3 November 2010 22:02, Richard Hirsch <hirsch.dick@gmail.com> wrote:
>> >
>> >> On Wed, Nov 3, 2010 at 8:09 PM, Ethan Jewett <esjewett@gmail.com>
>> wrote:
>> >> > 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.
>> >>
>> >> I can test with IE on Friday when I get back to work .
>> >>
>> >> >
>> >> > 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?
>> >> >
>> >> @Anne Can you help here?
>> >>
>> >> > Thanks!
>> >> > Ethan
>> >> >
>> >> > On Wed, Nov 3, 2010 at 8:01 PM, <esjewett@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
>> >> >>
>> >> >>
>> >> >>
>> >> >
>> >>
>> >
>> >
>>
>

Mime
View raw message