incubator-esme-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Ethan Jewett <esjew...@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 Thu, 04 Nov 2010 10:14:55 GMT
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:

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).

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
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message