You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@esme.apache.org by Richard Hirsch <hi...@gmail.com> on 2009/08/19 10:27:37 UTC

UI Playground - Mrinal's UI on Stax

Hi,

I just hacked the current deployment and added Mrinal's initial UI
from the UI branch. I just added contact information but someone could
probably take this and run with it, adding the other message info

http://esmecloudserverapache.dickhirsch.staxapps.net/track_view

D.

Re: UI Playground - Mrinal's UI on Stax

Posted by Richard Hirsch <hi...@gmail.com>.
Please note:  I didn't do much to get Mrinal's UI working in the
"live" environment. My contribution was just to add the snippet:

<div id="tabs-1">
	<dd class="b-contacts" style="height: 240px; overflow: auto">
                      Following:
                      <lift:UserSnip.following/>
                    </dd>
                    <dd class="b-contacts" style="height: 240px;
overflow: auto">
                      Followers:
                      <lift:UserSnip.followers/>
                    </dd>
	</div>

to Mrinal's existing code.

D.

On Wed, Aug 19, 2009 at 11:44 AM, Richard Hirsch<hi...@gmail.com> wrote:
> No messages to enter - yet - I just did the contacts to prove that
> Mrinal's UI works in a "live" envirorment. Next task is to add
> elements from existing messages page into this html file.
>
> Then after that is completed - you move on to the Bill's design and
> start adding the other stuff.
>
> D.
>
> On Wed, Aug 19, 2009 at 11:41 AM, Anne Kathrine
> Petterøe<yo...@gmail.com> wrote:
>> Messages?
>> Don't know what you are talking about LOL.
>>
>> /Anne
>>
>>
>> On 19. aug.. 2009, at 11.38, Daniel Koller wrote:
>>
>>> Hi all´,
>>>
>>> perhaps not the most relevant of my messages, but I am very impressed by
>>> this prototype.
>>>
>>> Where is the user supposed to enter new messages?
>>>
>>> Kind regards,
>>>
>>> Daniel
>>>
>>>
>>>
>>> On Wed, Aug 19, 2009 at 11:09 AM, Mrinal Wadhwa
>>> <mr...@gmail.com>wrote:
>>>
>>>> Ah, that's weird .. what was giving you that && error ? ... esme build ?
>>>> ..... because that is perfectly valid javascript ... hmmm
>>>>
>>>> Mrinal
>>>>
>>>
>>>
>>>
>>> --
>>> ---
>>> Daniel Koller
>>> Jahnstrasse 20
>>> 80469 München * dakoller@googlemail.com
>>
>>
>

Re: UI Playground - Mrinal's UI on Stax

Posted by Richard Hirsch <hi...@gmail.com>.
I've played some more with the UI -
http://esmecloudserverapache.dickhirsch.staxapps.net/track_view/

I started adding the material from Bill's UI spec.

I now have messages visible (though not entirely :-< - it is a CSS
problem).  I've also used the JQuery accordion component for the left
sidebar. I've got the message box as well but the Javascript doesn't
work.

I'm thinking that with the jQuery "draggable component", you could
probably drag a link ("Replies") and have a tab be created
automatically.

I've sent the code to Anne. Hopefully, she'll have some time to fix
the CSS probs.

I'm gone for a week - maybe someone can pick up the ball and keep
working on the UI.  At this stage, it might be easier to work with the
trunk instead of Mrinal's UI branch

D.

On Wed, Aug 19, 2009 at 12:20 PM, Mrinal Wadhwa<mr...@gmail.com> wrote:
> Hi Daniel,
>
> No messages for now :)
> The message box will probably end up were we have the "Lorem ipsum dolor sit
> amet...." text right now
>
>
> I was just prototyping the concept of having sidebars that Bill Fernandez
> had proposed in his UI design.
> So I was primarily focusing on these goals ...
>
> 1. Sidebars on both sides that can be hidden and shown when needed
> 2. The UI should be fluid ... that is if someone wants to use the client
> from a small, not so obtrusive window ... he/she can just resize a dedicated
> browser window .. this could almost serve like a desktop client .. could
> work well for phones as well.
> 3. Sidebars can be intelligent and hide themselves if there isn't enough
> space ... this did not make it to the deployed code since Dick was having
> some problems deploying it
> If you want's to see the resize behavior in action, you can see it here
> http://experiments.mrinalwadhwa.com/esme-prototype/
> Try resizing your browser window less than 500px width ... this can later be
> configurable.
>
>
> The code also lays down some foundations to build the UI on ... for example
> it uses YUI CSS for grids/fonts/reset  ... also if we build on top of JQuery
> UI ... we could use JQuery's theme ability
> http://jqueryui.com/themeroller/... and build color customization into
> our UI
>
>
> Thank you,
> Mrinal
>
> http://www.mrinalwadhwa.com
>

Re: UI Playground - Mrinal's UI on Stax

Posted by Mrinal Wadhwa <mr...@gmail.com>.
Hi Daniel,

No messages for now :)
The message box will probably end up were we have the "Lorem ipsum dolor sit
amet...." text right now


I was just prototyping the concept of having sidebars that Bill Fernandez
had proposed in his UI design.
So I was primarily focusing on these goals ...

1. Sidebars on both sides that can be hidden and shown when needed
2. The UI should be fluid ... that is if someone wants to use the client
from a small, not so obtrusive window ... he/she can just resize a dedicated
browser window .. this could almost serve like a desktop client .. could
work well for phones as well.
3. Sidebars can be intelligent and hide themselves if there isn't enough
space ... this did not make it to the deployed code since Dick was having
some problems deploying it
If you want's to see the resize behavior in action, you can see it here
http://experiments.mrinalwadhwa.com/esme-prototype/
Try resizing your browser window less than 500px width ... this can later be
configurable.


The code also lays down some foundations to build the UI on ... for example
it uses YUI CSS for grids/fonts/reset  ... also if we build on top of JQuery
UI ... we could use JQuery's theme ability
http://jqueryui.com/themeroller/... and build color customization into
our UI


Thank you,
Mrinal

http://www.mrinalwadhwa.com

Re: UI Playground - Mrinal's UI on Stax

Posted by Richard Hirsch <hi...@gmail.com>.
No messages to enter - yet - I just did the contacts to prove that
Mrinal's UI works in a "live" envirorment. Next task is to add
elements from existing messages page into this html file.

Then after that is completed - you move on to the Bill's design and
start adding the other stuff.

D.

On Wed, Aug 19, 2009 at 11:41 AM, Anne Kathrine
Petterøe<yo...@gmail.com> wrote:
> Messages?
> Don't know what you are talking about LOL.
>
> /Anne
>
>
> On 19. aug.. 2009, at 11.38, Daniel Koller wrote:
>
>> Hi all´,
>>
>> perhaps not the most relevant of my messages, but I am very impressed by
>> this prototype.
>>
>> Where is the user supposed to enter new messages?
>>
>> Kind regards,
>>
>> Daniel
>>
>>
>>
>> On Wed, Aug 19, 2009 at 11:09 AM, Mrinal Wadhwa
>> <mr...@gmail.com>wrote:
>>
>>> Ah, that's weird .. what was giving you that && error ? ... esme build ?
>>> ..... because that is perfectly valid javascript ... hmmm
>>>
>>> Mrinal
>>>
>>
>>
>>
>> --
>> ---
>> Daniel Koller
>> Jahnstrasse 20
>> 80469 München * dakoller@googlemail.com
>
>

Re: UI Playground - Mrinal's UI on Stax

Posted by Anne Kathrine Petterøe <yo...@gmail.com>.
Messages?
Don't know what you are talking about LOL.

/Anne


On 19. aug.. 2009, at 11.38, Daniel Koller wrote:

> Hi all´,
>
> perhaps not the most relevant of my messages, but I am very  
> impressed by
> this prototype.
>
> Where is the user supposed to enter new messages?
>
> Kind regards,
>
> Daniel
>
>
>
> On Wed, Aug 19, 2009 at 11:09 AM, Mrinal Wadhwa <mrinal.wadhwa@gmail.com 
> >wrote:
>
>> Ah, that's weird .. what was giving you that && error ? ... esme  
>> build ?
>> ..... because that is perfectly valid javascript ... hmmm
>>
>> Mrinal
>>
>
>
>
> -- 
> ---
> Daniel Koller
> Jahnstrasse 20
> 80469 München * dakoller@googlemail.com


Re: UI Playground - Mrinal's UI on Stax

Posted by Daniel Koller <da...@googlemail.com>.
Hi all´,

perhaps not the most relevant of my messages, but I am very impressed by
this prototype.

Where is the user supposed to enter new messages?

Kind regards,

Daniel



On Wed, Aug 19, 2009 at 11:09 AM, Mrinal Wadhwa <mr...@gmail.com>wrote:

> Ah, that's weird .. what was giving you that && error ? ... esme build ?
> ..... because that is perfectly valid javascript ... hmmm
>
> Mrinal
>



-- 
---
Daniel Koller
Jahnstrasse 20
80469 München * dakoller@googlemail.com

Re: UI Playground - Mrinal's UI on Stax

Posted by Richard Hirsch <hi...@gmail.com>.
Loading in the browser caused a lift error

D.

On Wed, Aug 19, 2009 at 11:09 AM, Mrinal Wadhwa<mr...@gmail.com> wrote:
> Ah, that's weird .. what was giving you that && error ? ... esme build ?
> ..... because that is perfectly valid javascript ... hmmm
>
> Mrinal
>

Re: UI Playground - Mrinal's UI on Stax

Posted by Mrinal Wadhwa <mr...@gmail.com>.
Ah, that's weird .. what was giving you that && error ? ... esme build ?
..... because that is perfectly valid javascript ... hmmm

Mrinal

Re: UI Playground - Mrinal's UI on Stax

Posted by Richard Hirsch <hi...@gmail.com>.
I'm impressed that you found "my editing" so fast. I had to remove
this snippet, please I got an error for the "&&" part of the code. I
deleted it, because I didn't have time to figure out to fix it.
Probably, if you placed all the Javascript in an external file it
would work.

D

On Wed, Aug 19, 2009 at 10:51 AM, Mrinal Wadhwa<mr...@gmail.com> wrote:
> http://esmecloudserverapache.dickhirsch.staxapps.net/track_view/
>
> This was just my initial play on how some of Bill's ideas around sidebars
> and a fluid resize can be handled .... I was also playing with the idea of
> intelligently hiding sidebars if the page is resized below a certain width
> (500 for now).
>
> @Dick in the code you deployed on full function seems to be missing (it
> seems checked in on my end?) ... so the intelligent resize is not working
> ...
>
>
>
>                        function onWindowResize(e){
>                                var newWindowWidth = $(window).width();
>
>                                if(newWindowWidth < HIDE_LEFTBAR_AT_WIDTH && !leftHiddenManually){
>                                        if(!leftBarHidden) hideLeftBar();
>                                }
>                                if(newWindowWidth > HIDE_LEFTBAR_AT_WIDTH && !leftHiddenManually){
>                                        if(leftBarHidden) showLeftBar();
>                                }
>
>                                if(newWindowWidth < HIDE_RIGHTBAR_AT_WIDTH && !rightHiddenManually){
>                                        if(!rightBarHidden) hideRightBar();
>                                }
>                                if(newWindowWidth > HIDE_RIGHTBAR_AT_WIDTH && !rightHiddenManually){
>                                        if(rightBarHidden) showRightBar();
>                                }
>                        }
>
>
>
>
> I have done some more experiments around this ... just haven't gotten around
> checking stuff in and now we're (at the company I started back in March) are
> close to an alpha release so things are kinda crazy at my end :)
>
> _
> Mrinal
> http://www.mrinalwadhwa.com
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> On Wed, Aug 19, 2009 at 1:57 PM, Richard Hirsch <hi...@gmail.com>wrote:
>
>> Hi,
>>
>> I just hacked the current deployment and added Mrinal's initial UI
>> from the UI branch. I just added contact information but someone could
>> probably take this and run with it, adding the other message info
>>
>> http://esmecloudserverapache.dickhirsch.staxapps.net/track_view
>>
>> D.
>>
>

Re: UI Playground - Mrinal's UI on Stax

Posted by Mrinal Wadhwa <mr...@gmail.com>.
http://esmecloudserverapache.dickhirsch.staxapps.net/track_view/

This was just my initial play on how some of Bill's ideas around sidebars
and a fluid resize can be handled .... I was also playing with the idea of
intelligently hiding sidebars if the page is resized below a certain width
(500 for now).

@Dick in the code you deployed on full function seems to be missing (it
seems checked in on my end?) ... so the intelligent resize is not working
...



			function onWindowResize(e){
				var newWindowWidth = $(window).width();
			
				if(newWindowWidth < HIDE_LEFTBAR_AT_WIDTH && !leftHiddenManually){
					if(!leftBarHidden) hideLeftBar();
				}
				if(newWindowWidth > HIDE_LEFTBAR_AT_WIDTH && !leftHiddenManually){
					if(leftBarHidden) showLeftBar();
				}
				
				if(newWindowWidth < HIDE_RIGHTBAR_AT_WIDTH && !rightHiddenManually){
					if(!rightBarHidden) hideRightBar();
				}
				if(newWindowWidth > HIDE_RIGHTBAR_AT_WIDTH && !rightHiddenManually){
					if(rightBarHidden) showRightBar();
				}
			}




I have done some more experiments around this ... just haven't gotten around
checking stuff in and now we're (at the company I started back in March) are
close to an alpha release so things are kinda crazy at my end :)

_
Mrinal
http://www.mrinalwadhwa.com

















On Wed, Aug 19, 2009 at 1:57 PM, Richard Hirsch <hi...@gmail.com>wrote:

> Hi,
>
> I just hacked the current deployment and added Mrinal's initial UI
> from the UI branch. I just added contact information but someone could
> probably take this and run with it, adding the other message info
>
> http://esmecloudserverapache.dickhirsch.staxapps.net/track_view
>
> D.
>