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

Thanks, I tried this, but you are right, this option only for one-line message :)

I tried to edit block placed below to the timestamp

Code:

div.MessageRight {

  float: left;

  padding-right: 10px;

  white-space: nowrap;

  text-align: left;

  display: inline-block;

}

I change the"float: left;" to "float: right;"... Timestamp jump to the right, in front of the name, but not below the name... It stayed on the same line and move the name to left.
How I can get this time&date below the name (another line) ?
Thanks

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 547758)

as i said... move the timestamp-div-block in the html file below the message-text-block.

if this doesn't work immediately you can add a margin-left line with a value of the bubble-width to make a break via css. ^^

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 547625)

now when i look at this... i think it would be even cooler if you could remove those spaces in between the avatars and the bubbles:

http://img59.imageshack.us/img59/8905/34zaz5k.png

others avatar:
- only round off bottom left corner
others bubble:
- only round off top right corner

your avatar:
- only round off bottom right corner
your bubble:
- only round off top left corner

so that this would look like one big bubble without any spaces.
(this would look especially cool if it's only a one-line message)

That is looking Awesome ,reminds me of my nokia 7610 design :p

The right portion can be more pointy same as the left portion of the txt msg bubble and then it would be perfect .

Can anyone do the coding/modding and zip it and upload it same as the one b666m did already on the page 4 ?

Cheers

Re: Customize N900 Conversations

I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages. :(

Code:

    <span id="MessageTextSelf" class="MessageText Self"></span>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

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

    <div class="MessageRight Self">

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 548800)

I tried this, that does not work how to I want... Timestamp not jumping to other line in the short messages. :(

Code:

    <div id="MessageTextSelf" class="MessageText Self"></div>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

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

    <div class="MessageRight Self">

div and span are for block-building.

div adds a new break (after the /div !!!). span only groups things. :)

Re: Customize N900 Conversations

Quote:

Originally Posted by SR90 (Post 548777)

if Schturman uploads his current sms-layout as shown in his screenshots i could edit those few lines. :)

(i don't want to do all the work on my own to get these results xD)

Re: Customize N900 Conversations

Quote:

Originally Posted by b666m (Post 548808)

Code:

    <div id="MessageTextSelf" class="MessageText Self"></div>

      <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span>

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

    <div class="MessageRight Self">

div and span are for block-building.

div adds a new break (after the /div !!!). span only groups things. :)

Haaaa, Thanks ! I forgot about it :o I try this later...

Quote:

Originally Posted by SR90

Here is my files for this picture:

http://i48.tinypic.com/34zaz5k.png

But this files edited for right to left for hebrew language, I do not think it will suit you :)

Re: Customize N900 Conversations

Quote:

Originally Posted by Schturman (Post 548835)

But this files edited for right to left for hebrew language, I do not think it will suit you :)

thanks :)

np... i won't touch neither the js-file nor the html-file ^^

and the css-file should just be responsible for the style. so i think it'll work out for everyone.

but i'm going to test that right now ;)

edit: ok, you're right... the style looks great... the alignment isn't the same... so i guess i'll have to make some patchwork *G*

Re: Customize N900 Conversations

first attempt:

looks good for own messages :)

don't get the other's avatar and message aligning to the right side and the space between bubble and avatar is strange too :/
but i'll keep trying :D

(btw: i used the direction-command you used in your html. but there i have some problems with text-wrapping and so on :/)

ahhh... nearly forget the image xD

http://img715.imageshack.us/img715/5...0022717060.png

Re: Customize N900 Conversations

update:

alignment to the right side is ok.
after some problems with the alignment of the own avatar and messages it all looks pretty good.
but i don't have any clue why there are gaps between bubbles and avatars again.... -.-'

http://img109.imageshack.us/img109/2...0022718414.png

edit:
that's the code so far:

Code:

/**

 * Style rules for the MessageBuffer

 */



/**

 * the body defaults

 */

body {

  padding: 0px 16px;

  margin: 0px;

}



/**

 * The table column formats

 */



div.Message.Self {

  float: left;

}



div.Message.Other {

  float: right;

}



div.Message:first-child {

  padding-top: 0px;

}



div.Message:last-child {

  padding-bottom: 0px;

}



div.BubbleSelf {

  background: #600000;



  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topright: 30px;



  border-style: solid;



  border-width: 2px;



  margin: 4px 0px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;  

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



div.BubbleOther {

  background: #2F4F4F;



  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topleft: 30px;



  border-style: solid;



  border-width: 2px;

  

  margin: 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



div.BubbleSelfClicked {

  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topright: 30px;



  border-style: solid;



  border-width: 2px;



  margin: 4px 0px;

  padding: 8px;



  display: inline-block;

  min-height: 44px;

  max-width: 620px;

 /* overflow: hidden; this bugs mouse events. see bug #123077 */

}





div.BubbleOtherClicked {

  text-shadow:black 3px 2px 5px;







  -moz-border-radius-topleft: 30px;



  border-style: solid;



  border-width: 2px;

  

  margin: 4px 0px;

  padding: 8px;

  

  display: inline-block;

  min-height: 44px;

  max-width: 620px;

  /* overflow: hidden; this bugs mouse events. see bug #123077 */

}



/**

 * Others' Avatars

 *

 * This needs a "drop down" shadow, but no idea if that can be done

 *Adele: please note that this drop down shadow might be subjected to change

 *I've talked about it with Vilja who's in charge of address book layout

 *and we might change it so that it's a double border colour to indicate

 *that the avatar is clickable. drop shawdow doesn't seem to work with

 *dark backgrounds unless it's a light colour drop shadow.

 *PLEASE tell me if it's difficult to implement the drop shadow.

 * Looks like drop shadow is dropped from ui specs. And bug 139130 made me

 *remove the space for it anyway.

 */



div.Avatar {

  width: 60px;

  display: inline-block;

  vertical-align: top;

}



.MessageAvatar.Self {

  margin-top: 4px;

  margin-right: 0px;



  width: 60px;



  height:60px;



  -moz-border-radius-bottomleft: 30px;



  border-width: 2px;



  border-style: solid;



}



.MessageAvatar.Other {

  margin-top: 4px;



  width: 60px;



  height:60px;



  -moz-border-radius-bottomright: 30px;



  border-width: 2px;



  border-style: solid;



}



img.MessagePresence {

  vertical-align: middle;

  width: 16px;

  height: 16px;

}



/**

 * the Name field

 */

span.MessageNameField {

  word-wrap: break-word;

  vertical-align: middle;

}



/**

 * the Text field

 */

span.MessageText.Self {

  text-align: left;

  vertical-align: middle;

  word-wrap: break-word;

}



span.MessageText.Other {

  text-align: right;

  vertical-align: middle; 

  word-wrap: break-word;

}



/**

 * the TimeStamp default rules

 */

div.MessageRight {

  float: right;

  margin-left: 8px;

  white-space: nowrap;

  text-align: right;

  display: inline-block;

}



img.MessageBusinessCardImg {

  vertical-align: middle;

}



img.MessageStatusImg {

  vertical-align: middle;

}



.MessagingWidgetsSmiley {

  height: 24px;

  width: 24px;

}