maemo.org - Talk - Customize N900 Conversations

maemo.org - Talk (https://talk.maemo.org/index.php)

- Maemo 5 / Fremantle (https://talk.maemo.org/forumdisplay.php?f=40)

- - Customize N900 Conversations (https://talk.maemo.org/showthread.php?t=36618)

Re: Customize N900 Conversations

Haha just took a little push then b666m? Must have been annoying you too!

I would love to have done it myself but I wouldn't have a clue where to start!

Thanks a lot.

Re: Customize N900 Conversations

yep.
mainly because my conversation style is scrolling soooooo daaaaamn slow - thx @ mozilla engine. ^^
i'm glad i found the solution so fast. *g*

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 566030)

EDIT1:
actually if you're looking closely you just have to change:

Code:

window.pageYOffset

to:

Code:

(2 * window.innerWidth)

this can be done really fast with VI in the command line or just leafpad. no need for SSH into the device or copy the new files over. (:

Yeeeeee !!! U r King ! :D
Thanks !!!

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 552670)

meep... something new...

i'm trying to get this:
http://img73.imageshack.us/img73/4927/ichathelpge9.png

this is a picture of miranda using ieview and ichat for displaying the conversations.

there the bubbles are getting resized to fit the text within.
small text -> small bubble.
huge text -> huge bubble.
(ok... i don't believe that apple uses the exact same method/code but hey... it works in miranda ^^)

so i adapted the code in a first attampt to the conversation layout:
http://img5.imageshack.us/img5/3917/...0030218074.png

it's creating a 9 cell table via html and filling the cells with pictures and text via css.

it's not working perfectly yet...
i only implemented it for the contact's bubble...
dont worry about the misalignment of the avatar
(i was just too lazy to edit the margins ^^ but the border is in the right place as you can see)

something is messing with the default code... especially the top side of the bubble doesn't work at all :/

i attach the iChat zip-file. there you can find the iChat.css and iChat.ivt (which is just a html-file with another extension). so you can take a look at it and try to adapt the code to the rtcom-code on your own. maybe you're luckier than me. ;)

(btw: only the html-file needs some patchwork... for the css you can mostly copy the blocks which are named in the html over...)

so here's my html-code so far:

Code:

<div id="MessageContainerOther" class="Message Other">



  <table cellpadding="0" cellspacing="0" class="recieveframe">



  <tr><td width="100%" align="right">



    <table cellpadding="0" cellspacing="0" class="recieve">



    <tr><td>



      <td class="recieveleft"><div class="recievelefttop" /></div></td>



      <td class="recievetext"><div class="recievetexttop"></div>



  <div id="MessageOther" class="MessagingBubbleOtherBackgroundColor MessagingBubbleBorderColor BubbleOther">   

    <img id="MessagePresenceOther" src="" class="MessagePresence"/>

    <span id="MessageSenderNameOther" class="MessageNameField AccentColor1 Other"></span>

    <span id="MessageTextOther" class="MessageText Other"></span>

    <div class="MessageRight Other">

      <img id="MessageBusinessCardImgOther" class="MessageBusinessCardImg" src=""/>

      <span id="MessageTimeStampOther" class="MessageTimeStamp SecondaryTextColor Other SmallSystemFont">12:30 PM</span>

      <span id="MessageDeliveryTimeStampOther" class="MessageDeliveryTimeStamp SecondaryTextColor Other SmallSystemFont"> | 1:30 PM</span>

      <img id="MessageStatusImgOther" class="MessageStatusImg" src=""/>

    </div>

  </div>



  <br /><div class="recievetextbot"></div></td>



        <td class="recieveright"><div class="recieverighttop" /></div></td>



      </td></tr>



    </table>

  </td>

  <td>&nbsp;</td>

  <td width="30" style="vertical-align: bottom;">

  <div class="Avatar">

    <div id="AvatarImgOther" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor Other"></div>

  </div> 

  </td></tr>

</table>



  <div class="Avatar">

    <div id="AvatarImgOther" class="MessageAvatar MessagingAvatarBorderColor DefaultBackgroundColor Other"></div>

  </div> 

</div>

Did you manage to get the conversations bubbles working well?
I also want this but only if it's not going to be slow.

Can you please give instructions with file attachments to go from a stock configuration to your version with bubbles?

Re: Customize N900 Conversations

Quote:

Originally Posted by byte_76 (Post 566739)

Did you manage to get the conversations bubbles working well?
I also want this but only if it's not going to be slow.

i don't know if that would be faster ... ^^
but i didn't manage it sadly.
it seems like both top corners wouldn't load the images at all :/
everything else seems to work and just need little tweaking.
but without the two top corners i don't want to spend my time anymore on this.

Quote:

Can you please give instructions with file attachments to go from a stock configuration to your version with bubbles?

there are already many instructions in this thread.
i think the latest style is on page 35 ... instructions are linked within it. :)

Re: Customize N900 Conversations

Just now I noticed to little problem with IM conversation.
Look on this picture, something wrong with borders around the avatars :confused:

http://talk.maemo.org/httpi42.tinypic.com2ibyccp.png http://i42.tinypic.com/2ibyccp.jpg

Something wrong with this blocks ?

Code:

* Avatars

 */

img.MessageAvatar { 

  width: 64px;

  height: 64px;

  outline-style: solid; 

  outline-width: 4px; 

  outline-offset: -1px; 

  -moz-outline-radius: 13px; 

  padding: 1px;

  vertical-align: middle; 

}



div.MessageAvatar { 

  width: 64px;

  height: 64px;

  -moz-border-radius: 10px; 

  border-width: 1px;

  border-style: solid;

  display: inline-block;

  vertical-align: middle;

}

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 513658)

that's what i've done:

........
instructions:
1. just unzip the four files (3 css, 1 html and 1 js) somewhere in your MyDocs folder (i.e. MyDocs/sms/)
2. open x-term
3. type "sudo gainroot" (you need to have "rootsh" installed)
4. type "cp MyDocs/sms/* /usr/share/rtcom-messaging-ui/html/"
5. open any conversation, close it and open it again for reloading the layout :)

edit: for your own avatar place a picture named "avatar.png" with 64 * 64 pixels in the html-folder

just for clarity, do i need to run the cp command for each of the 4 files (substituting * with the filename)?

thanks

Re: Customize N900 Conversations

Quote:

Originally Posted by bonerp (Post 568493)

just for clarity, do i need to run the cp command for each of the 4 files (substituting * with the filename)?

thanks

No,

the character "*" will include all the files so in this case:

all the files here
"MyDocs/sms/"

are going to be copied here:

/usr/share/rtcom-messaging-ui/html/

Nico

Re: Customize N900 Conversations

Quote:

Originally Posted by nicorumiz (Post 568523)

No,

the character "*" will include all the files so in this case:

all the files here
"MyDocs/sms/"

are going to be copied here:

/usr/share/rtcom-messaging-ui/html/

Nico

How do I check that they have been copied over to /usr/share/rtcom-messaging-ui/html/ correctly?

thanks

Re: Customize N900 Conversations

Sorted it now thanks people