maemo.org - Talk

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)

b666m 2010-02-11 21:35

Re: Customize N900 Conversations
 
screenshot please ;)

i need to see the layout :)

EDIT: maybe changing the value from 400px to 780px fixes it?! ^^

sierra052 2010-02-11 22:17

Re: Customize N900 Conversations
 
quick question: not really good at commands/terminal windows. if i install ur zip file, would I have to do anything else?

b666m 2010-02-11 22:19

Re: Customize N900 Conversations
 
Quote:

Originally Posted by sierra052 (Post 522014)
quick question: not really good at commands/terminal windows. if i install ur zip file, would I have to do anything else?

you don't "install" them.
you unzip the files from the archive, copy them to your phone and move them to the right place (and overwrite the original files).
instructions are given here many times before.
just search and read. ;)

Schturman 2010-02-11 22:23

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 521958)
screenshot please ;)

i need to see the layout :)

EDIT: maybe changing the value from 400px to 780px fixes it?! ^^

Hmmmm.... I don't understand, but now my avatar Ok :eek:
But I see something strange....
If "Other" send me a very short message, his avatar and bubble moving to right for some pixels... See this picture... :confused:

http://i50.tinypic.com/2q2plr4.png

b666m 2010-02-11 22:31

Re: Customize N900 Conversations
 
it seems like the bubbles would align right to the middle of the screen (to the 400px).
so just try to change 400px into 600px and look if the bubbles move 200px to the right... ^^

Schturman 2010-02-11 22:38

Re: Customize N900 Conversations
 
Now it's moving a lot :(
http://i48.tinypic.com/18j3t3.png

b666m 2010-02-11 22:41

Re: Customize N900 Conversations
 
thought so ^^

change:
Code:

div.MessageNormal {
  text-align: right;
  vertical-align: middle;
}

to:
Code:

div.MessageNormal.Self {
  text-align: right;
  vertical-align: middle;
}

div.MessageNormal.Other {
  text-align: left;
  vertical-align: middle;
}

you could also align the bubbles but that should work too ^^

Reflektorfalke 2010-02-11 22:44

Re: Customize N900 Conversations
 
Quote:

Originally Posted by qole (Post 520482)
Hi All,

I'm using Reflektorfalke's bubble mod for my IM conversations, because I like the way it resizes to match the length of the text, but the conversation tends to get a bit messy when there are several small messages.

Does anyone have a fix for this? Some way to reserve the whole width of the screen for each message, without the bubble filling the whole width?

http://farm3.static.flickr.com/2772/...d1c69406_o.png

@qole:Thankx for finding this bug.
I was able to reproduce this behaviour with very small messages.

However, had a quick look and tried to fix it.
Also tried B666mīs hint with the min-width: 400px...
Well, it just behaved weird, too weird to solve in a few minutes :-(
Will have a look at it and try to find a soultion as soon as I have time, but dont have very much time for playing around at the moment :-(

Schturman 2010-02-11 22:53

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 522048)
thought so ^^

change:
Code:

div.MessageNormal {
  text-align: right;
  vertical-align: middle;
}

to:
Code:

div.MessageNormal.Self {
  text-align: right;
  vertical-align: middle;
}

div.MessageNormal.Other {
  text-align: left;
  vertical-align: middle;
}

you could also align the bubbles but that should work too ^^

Sorry, not work :(
I tried the 300 and 350 px, and got this pic:

http://i47.tinypic.com/2v9diex.png

b666m 2010-02-11 22:55

Re: Customize N900 Conversations
 
upload your current html- and css-file please. i'll take a look. ;)

EDIT: but it seems ok now. you should only have to change back to 600px?!

Schturman 2010-02-11 22:59

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 522073)
upload your current html- and css-file please. i'll take a look. ;)

EDIT: but it seems ok now. you should only have to change back to 600px?!

I tried change to 600, not good :(

Here html and css. :cool:
Thanks

b666m 2010-02-11 23:28

Re: Customize N900 Conversations
 
aloha.
that seems like a loading bug anywhere!? (js-file?!)

look at your contact's messages closely.
you'll recognize that sometimes the name-text-alignment is twisted.
the message (of your contact) is shown as it would be a message from you:
text left, name right - and not name left, text right as it should be.

edit: mkay. i don't see this behaviour on your screens. but my conversation is totally weird. xD

edit2: i don't like the programming of the im-conversation at all. the sms-conversation is completely well done - but im seems to be totally screwed up by default. it's nothing fancy. all white/grey on black with colored nicks and even without bubbles or something else. i'll stick to pidgin. ^^

maybe someone will find the time to adopt the sms-look to the im-conversation-layout. *G*

Schturman 2010-02-11 23:33

Re: Customize N900 Conversations
 
Okay, thank you. I keep trying :/

b666m 2010-02-11 23:41

Re: Customize N900 Conversations
 
i have to say that it's pretty annoying.
it seems like three different employees made sms-conversation, im-conversation and sms-single-view.
i would prefer one code (as far as it's possible) for all of these.

as i said: i will stick to pidgin for im because i'm running it on my ubuntu laptop too and can synchronize my logs in an easy way. :)

let's hope that the theme/skinable layout will be released soon. until now it's only quick and dirty hacking of some files. themes/skins will make this conversation-app muuuuuuuuch smoother and better. ;)

qole 2010-02-12 01:05

Re: Customize N900 Conversations
 
1 Attachment(s)
Quote:

Originally Posted by Reflektorfalke (Post 522052)
@qole:Thankx for finding this bug.
I was able to reproduce this behaviour with very small messages.

However, had a quick look and tried to fix it.
Also tried B666mīs hint with the min-width: 400px...
Well, it just behaved weird, too weird to solve in a few minutes :-(
Will have a look at it and try to find a soultion as soon as I have time, but dont have very much time for playing around at the moment :-(

Well, as I said, the 400px hack fixed my problem. It still returns to the top of the conversation when I open the IM session, but otherwise, it looks good!

(EDIT: Except for the misalignment on the right for short messages...
EDIT2: Fixed misalignment problems!)

ADDED: Attachment with my html and css files in case anyone else wants them. (fixed alignment version)

http://farm3.static.flickr.com/2682/...4598c8c9_o.png

b666m 2010-02-12 01:10

Re: Customize N900 Conversations
 
Quote:

Originally Posted by qole (Post 522284)
Well, as I said, the 400px hack fixed my problem. It still returns to the top of the conversation when I open the IM session, but otherwise, it looks good!

http://farm5.static.flickr.com/4047/...0a4582cf_o.png

the only thing which you didn't get is that the other's message (bubble + avatar) is aligned to the right side.
it aligns to the middle (400px). ^^

but nice work :)
(even i don't like it when my eyes have to jump left-right-left-right-... for reading the messages xD)

qole 2010-02-12 01:52

Re: Customize N900 Conversations
 
Didn't even notice that the "other" bubbles are centre aligned. It is only noticeable on very very short messages...

Added my files the post above if anyone wants them...

qole 2010-02-12 03:30

Re: Customize N900 Conversations
 
Easy fix for the right (other) misalignment.

Add "text-align: right;" to "div.MessageOther" (right under the "float: right;")

qole 2010-02-12 07:38

Re: Customize N900 Conversations
 
Updated my post above with the new screenshot and fixed files.

b666m 2010-02-12 13:11

Re: Customize N900 Conversations
 
Quote:

Originally Posted by qole (Post 522404)
Easy fix for the right (other) misalignment.

Add "text-align: right;" to "div.MessageOther" (right under the "float: right;")

hehe ^^
i've mentioned it few postings back *G*

but it's really good looking now :)
maybe Schturman wants to test your files and see if it's working for him. ;)

Schturman 2010-02-12 18:04

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 522909)
hehe ^^
i've mentioned it few postings back *G*

but it's really good looking now :)
maybe Schturman wants to test your files and see if it's working for him. ;)

THANK YOU very much to you and to qole!

I played with the
Code:

Add "text-align: right;" to "div.MessageOther" (right under the "float: right;")
and in the bubble too. And now it's solved my problem :D

Now I still don't understand why messages jumping to the top :confused:
But it's less disturbing... ;)

Schturman 2010-02-12 18:40

Re: Customize N900 Conversations
 
Another question...
If I want change the my Nickname to something like "Me" (in hebrew language = "אני") , I need back to this post ?

I need play with this block ?
Code:

* the Name field
 */
span.MessageNameField.Self {
  color:#4169E1;
  word-wrap: break-word;
  vertical-align: middle;
}

change that to something like:
Code:

* the Name field
 */
span.MessageNameField.אני {
  color:#4169E1;
  word-wrap: break-word;
  vertical-align: middle;
}

?
Thanks

b666m 2010-02-12 18:42

Re: Customize N900 Conversations
 
you may can hack-around in the css-file but the normal way would be editing the js-file.
i already described this anywhere in the thread. ^^

EDIT: there it is:
http://talk.maemo.org/showthread.php...404#post502404

Reflektorfalke 2010-02-12 18:54

Re: Customize N900 Conversations
 
Quote:

Originally Posted by qole (Post 522284)
Attachment 7086

Well, as I said, the 400px hack fixed my problem. It still returns to the top of the conversation when I open the IM session, but otherwise, it looks good!

(EDIT: Except for the misalignment on the right for short messages...
EDIT2: Fixed misalignment problems!)

ADDED: Attachment with my html and css files in case anyone else wants them. (fixed alignment version)

http://farm3.static.flickr.com/2682/...4598c8c9_o.png

Thankx again Qole for finding and fixing this bug!!!

For those who want to use the blue version I uploaded the fixed version here - Post 108

b666m 2010-02-12 18:57

Re: Customize N900 Conversations
 
next step is to deactivate the borders (which imho are pretty ugly *G*) and use background-images for the bubbles to get a nice 3d-effect ;)

Reflektorfalke 2010-02-12 19:25

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 523534)
next step is to deactivate the borders (which imho are pretty ugly *G*) and use background-images for the bubbles to get a nice 3d-effect ;)

Absolutely! I started playing with 3d background images a week ago. Its pretty easy with fixed bubble-size, but a bit more challnging with resizing bubbles (if possible at all with .css??? ).
To bad I donīt have the time to keep working on that at the moment :-(

b666m 2010-02-12 19:58

Re: Customize N900 Conversations
 
1 Attachment(s)
this is an interesting one:
http://www.guistuff.com/css/css_imagetech1.html
so you can make a bubble-image and always cut out pieces you need for your background.
example: (not the best but the first i found *G*)
i took a nice looking bubble and divided it into 9 pieces.
4 corners, 4 edges and 1 middle-background.
now you have to know, where you are at the message/layout and choose a piece as current background.
with this technique you can make a bubble of any size without zooming in/out and getting grainy/pixelated. :D

EDIT: as i said... the example isn't that good because the edges aren't straight... so it would not look good if you repeatly stack them together. ^^
EDIT2: and don't ask me about the performance - i haven't got any clue. it may be loading forever on longer conversations xD

Schturman 2010-02-12 21:11

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 523508)
you may can hack-around in the css-file but the normal way would be editing the js-file.
i already described this anywhere in the thread. ^^

EDIT: there it is:
http://talk.maemo.org/showthread.php...404#post502404

Yes, thanks. I've found this post and I tried play with .js file.
I found this line:
Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = node_tags[i];

and I tried change to this:
Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = "My name";

And I got the result without both names (not my and not from "other") :(
Why ?

starman 2010-02-12 21:31

Re: Customize N900 Conversations
 
does anyone fancy making a custom star trek lcars style conversation layout??

or

how do i edit and test these files on a mac, itll be fun to learn :)

b666m 2010-02-12 21:50

Re: Customize N900 Conversations
 
1 Attachment(s)
Quote:

Originally Posted by Schturman (Post 523809)
Yes, thanks. I've found this post and I tried play with .js file.
I found this line:
Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = node_tags[i];

and I tried change to this:
Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = "My name";

And I got the result without both names (not my and not from "other") :(
Why ?

didn't test this one.
name_tag is declined as a string.
so i thought replacing the variable with a string containing your name should do it.
but you should only replace the node_tags[i] with "yourname" in the block where your items are fetched.

btw:
nothing fancy, just new background image in bubble-style.
as you can see i have some problems getting the timestamp in that bubble. don't know why it's not working - the html-blocks are set correctly :(

edit: the big font-size is only there because i've done a bigger font conversation layout for users who are having problems with their eyesight. (it's looking quite strange xD)

b666m 2010-02-12 22:17

Re: Customize N900 Conversations
 
just for those who are interested in how i did this:
http://www.gamexe.net/css/fluid-css-speech-bubbles/

and my next thought is to combine that technique with the following one:
http://trentrichardson.com/examples/csstooltips/

not to do this as hover but to strech the bubble dynamicly with help of images and not just filling the background with color. ^^

Schturman 2010-02-12 22:25

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 523875)
didn't test this one.
name_tag is declined as a string.
so i thought replacing the variable with a string containing your name should do it.
but you should only replace the node_tags[i] with "yourname" in the block where your items are fetched.

Nu... I do it...
I write my name "Emil" but I get the screen without names :(
Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = "Emil";

http://i47.tinypic.com/27ypr8z.png

b666m 2010-02-12 22:28

Re: Customize N900 Conversations
 
why do you use it for IM-conversation?
you can set your display-name (/nick) in your account settings?!

it's only meant for sms-conversation. ^^

btw: a 3d-bubble could easily be done with fixed width and flexible height as seen in the hover-example in my posting before.

if you want to have it also resized to width this one could get complicated. but it would be possible. coding just requires a lot of patience. *g*

Schturman 2010-02-12 22:39

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 523925)
why do you use it for IM-conversation?
you can set your display-name (/nick) in your account settings?!

it's only meant for sms-conversation. ^^

Aaaaaaaaa.... I thought I can do this in the IM too.... without changing my nickname or displayname in my account settings. I thought it is possible change the my name only for telephone IM conversation and not in all of my accounts (ICQ, MSN, Yahoo, Skape...)
It's possible ?

b666m 2010-02-12 22:57

Re: Customize N900 Conversations
 
try to change:
Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

to:
Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

if (item.name_str != "" && name_tag && item.self) {
        name_tag.innerHTML = "yourname";
    }

and please change the node_tag[i] back *G*

EDIT: have forgotten to paste over the second if-block, sorry. now that's my suggestion on how to do this. (haven't tested it ^^)

Schturman 2010-02-13 00:18

Re: Customize N900 Conversations
 
Quote:

Originally Posted by b666m (Post 523972)
try to change:
Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

to:
Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

if (item.name_str != "" && name_tag && item.self) {
        name_tag.innerHTML = "yourname";
    }

and please change the node_tag[i] back *G*

EDIT: have forgotten to paste over the second if-block, sorry. now that's my suggestion on how to do this. (haven't tested it ^^)


Yeeeeeeee ! :D
I did it, THANK you very very much !!!

b666m 2010-02-13 01:30

Re: Customize N900 Conversations
 
1 Attachment(s)
tried to get the bubbles to work like in this html/css example:
http://trentrichardson.com/examples/csstooltips/

with one image of a bubble and one image of the mid-section.
the mid-section appeared but i had no top and bottom of the bubble. xD

i guess it would work but it maybe would be the best to rewrite the html and css file completely. ^^

easy to make is following: (as shown in a post somewhere back)
http://www.gamexe.net/css/fluid-css-speech-bubbles/
(the problem with the timestamp is surely solvable ^^)

b666m 2010-02-13 02:35

Re: Customize N900 Conversations
 
2 Attachment(s)
don't know how the iphone is resizing the bubbles but they only have two PNGs for them - one for your and one for your contact's messages.
i attached the original image and the same only zoomed in 15 times.
so i guess they are using the kind of trick i described earlier today with dividing the bubble into 9 pieces and stacking them together.
that's possible because of the layout of the bubbles.
you have nice straight edges (just for a few pixels on opposite ends), no color-grades in the middle and therefore you are able to let them repeat right to / below each other without ruining the bubble-look.
maybe i'll try to make an iphone-them for the conversations *G*.

smegheadz 2010-02-13 03:07

Re: Customize N900 Conversations
 
sounds like having 1 pixel thick line with it set to repeat as background for a non fixed width/height container. i used to do that instead of making a large image, just have a small one repeat. saved time in loading the page and made sure the background displayed the same for window stretching/resizing.

b666m 2010-02-13 05:29

Re: Customize N900 Conversations
 
Quote:

Originally Posted by smegheadz (Post 524211)
sounds like having 1 pixel thick line with it set to repeat as background for a non fixed width/height container. i used to do that instead of making a large image, just have a small one repeat. saved time in loading the page and made sure the background displayed the same for window stretching/resizing.

uff... then maybe you could help me out ^^
i've been trying for about 3 hours now and i only get the 4 corners shown properly.
everything in between seems to be messy and afterwards you wouldn't recognize my bubble as a bubble anymore. xD

maybe you could write some html- and css-code for this little purple bubble i posted above resizing correctly.

that's what i've got till now:
HTML:
Code:

<div class="TopLeft"><div class="TopRight"><div class="BottomLeft"><div class="BottomRight">
<span class="Message"> (here's everything: Name, Text, Timestamp) </span>
</div></div></div></div>

CSS:
Code:

.TopLeft { background: url(tl.png) top left no-repeat; }
.TopRight { background: url(tr.png) top right no-repeat; }
.BottomLeft { background: url(bl.png) bottom left no-repeat; }
.BottomRight { background: url(br.png) bottom right no-repeat; }

my attempt to cut out the correct areas from that little purple bubble png:
Code:

display: block; height: 20px; width: 15px; background: url(bubble.png); background-position: -24px -14px;
DIDN'T WORK. :(

ehm yes... i would appreciate your help for getting the filling between my 4 corners to work ;)


All times are GMT. The time now is 15:39.

vBulletin® Version 3.8.8