maemo.org - Talk
Page 33 of 109 « First 233132 33 343543 Last »
Show 40 post(s) from this thread on one page

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-27 20:37
Re: Customize N900 Conversations
 
wrrrrrrrrraaaaah....
these gaps are driving me nuts! o.O

i can't see any lines in the code which are causing this "problem" :(

Ronaldo 2010-02-27 20:47
Re: Customize N900 Conversations
 
its looks like its not expanding with the text bubble. looks good thinking of installing it.

good work guys.

can you tell me how i can add my picture to original one instead of "you"

b666m 2010-02-27 21:43
Re: Customize N900 Conversations
 
wow... this one is tricky...

screen1:
http://img444.imageshack.us/img444/7...0022722305.png

screen2:
http://img52.imageshack.us/img52/893...0022722362.png

code1:
Code:
div.Avatar {
  width: 56px;
  display: inline-block;
  vertical-align: top;
}

.MessageAvatar.Self {
  margin-top: 4px;
  margin-right: 0px;
  width: 80px;
  height: 80px;

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

  border-width: 2px;

  border-style: solid;

}
code2:

Code:
div.Avatar {
  width: 80px;
  display: inline-block;
  vertical-align: top;
}

.MessageAvatar.Self {
  margin-top: 4px;
  margin-right: 0px;
  width: 80px;
  height: 80px;

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

  border-width: 2px;

  border-style: solid;

}
so it seems that the first value 56px -> 80px is the line where the bubble aligns to.
the second values 80px * 80px is the frame of the image. unfortunately it's not resizing.

with this knowledge i'm able to remove the gap between my avatar and the bubble.
but i still have to figure out how to remove the gap for my contact but it seems like it would be the same issue - but here just with the bubble (not the avatar).

http://img41.imageshack.us/img41/166...0022722424.png

Schturman 2010-02-27 21:51
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. :)

I played with this option, but I get strange result...
Not only timestamp jumping to another line, but text-line jumping too... :mad:

How I can leave a line of text in his place ?

http://i47.tinypic.com/103buv7.png

b666m 2010-02-27 22:17
Re: Customize N900 Conversations
 
dough!

feeling stupid right now... tried to move the avatars... but moving the bubbles is waaaay easier.. with negative margins xD

changed the style a little bit and added a corner on the avatar's side of the bubble at the bottom - i like it the most this way. :)

http://img641.imageshack.us/img641/4...0022723145.png

Code:
/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  padding: 0px 16px;
  margin: 0px;
}

/**
 * The table column formats
 */

div.Message {
  clear: both;
}

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;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;

  border-style: solid;

  border-width: 2px;

  margin: 4px 0px 4px -4px;
  padding: 8px;

  display: inline-block;
  min-height: 44px; 
  max-width: 628px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  background: #2F4F4F;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 4px -8px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 628px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSelfClicked {
  text-shadow:black 3px 2px 5px;



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

  border-style: solid;

  border-width: 2px;

  margin: 4px 0px 4px -4px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;
  max-width: 628px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  text-shadow:black 3px 2px 5px;



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

  border-style: solid;

  border-width: 2px;
 
  margin: 4px -8px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 628px;
  /* 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;
}

b666m 2010-02-27 22:27
Re: Customize N900 Conversations
 
played around a bit:

http://img717.imageshack.us/img717/3...0022723265.png

mhm... will try to overlay the bubble with the avatar (:

Schturman 2010-02-27 22:46
Re: Customize N900 Conversations
 
Wow, this one looks very cool !


What I can do with my text-line ?


Quote:
Originally Posted by Schturman (Post 549282)
I played with this option, but I get strange result...
Not only timestamp jumping to another line, but text-line jumping too... :mad:

How I can leave a line of text in his place ?

http://i47.tinypic.com/103buv7.png

b666m 2010-02-27 23:01
Re: Customize N900 Conversations
 
Quote:
Originally Posted by Schturman (Post 549344)
What I can do with my text-line ?
mhm... try to change the html back from div (what i told you) to span for the timestamp....

and in the css add a "clear: left;" to the MessageTimeStamp and a "clear: right;" to the MessageDeliveryTimeStamp.



and here's my new creation:
(you could also have the avatar above the bubble... but i think this way around is way cooler :D ... maybe i'll play a little bit with transparency ^^)

http://img62.imageshack.us/img62/609...0022723580.png

Code:
/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  padding: 0px 16px;
  margin: 0px;
}

/**
 * The table column formats
 */

div.Message {
  clear: both;
}

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 {
  position: relative;
  z-index: 2;

  background: #600000;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 45px 0px 4px -23px;
  padding: 8px;

  display: inline-block;
  min-height: 44px; 
  max-width: 628px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  position: relative;
  z-index: 2;

  background: #2F4F4F;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 45px -23px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 628px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSelfClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 45px 0px 4px -23px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;
  max-width: 628px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 45px -23px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 628px;
  /* 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 {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  margin-right: 0px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-width: 2px;

  border-style: solid;

}

.MessageAvatar.Other {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topright: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 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;
}

b666m 2010-02-27 23:21
Re: Customize N900 Conversations
 
last tweak for tonight:

http://i48.tinypic.com/5nufe0.jpg

Code:
/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  padding: 0px 16px;
  margin: 0px;
}

/**
 * The table column formats
 */

div.Message {
  clear: both;
  margin-top: -22px;
}

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 {
  position: relative;
  z-index: 2;

  background: #600000;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px; 
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  position: relative;
  z-index: 2;

  background: #2F4F4F;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 35px -19px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSelfClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;
  max-width: 636px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 35px -19px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* 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 {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  margin-right: 0px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-width: 2px;

  border-style: solid;

}

.MessageAvatar.Other {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topright: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 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;
}
feel free to post critique or suggestions :)

... or just have fun with it xD




edit: with 0.8 opacity for the bubbles and bit re-aligned:

http://img717.imageshack.us/img717/2...0022801054.png

SR90 2010-02-28 03:34
Re: Customize N900 Conversations
 
Quote:
Originally Posted by b666m (Post 549368)
last tweak for tonight:

http://i48.tinypic.com/5nufe0.jpg

Code:
/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  padding: 0px 16px;
  margin: 0px;
}

/**
 * The table column formats
 */

div.Message {
  clear: both;
  margin-top: -22px;
}

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 {
  position: relative;
  z-index: 2;

  background: #600000;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px; 
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  position: relative;
  z-index: 2;

  background: #2F4F4F;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 35px -19px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSelfClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;
  max-width: 636px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  position: relative;
  z-index: 2;

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



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

  border-style: solid;

  border-width: 2px;
 
  margin: 35px -19px 4px 0px;
  padding: 8px;
 
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* 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 {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  margin-right: 0px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-width: 2px;

  border-style: solid;

}

.MessageAvatar.Other {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topright: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 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;
}
feel free to post critique or suggestions :)

... or just have fun with it xD




edit: with 0.8 opacity for the bubbles and bit re-aligned:

http://img717.imageshack.us/img717/2...0022801054.png
That is looking nice b666m , I really like it , you are a genius ;)

Now I have to find an application that changes the design of conversation in n900 since I love all the new designs you have made . The one I asked about seems a bit tricky from all the screenshots you have uploaded . Someone has to upload all the files so I can have all the designs looool :D . Best thread so far !


All times are GMT. The time now is 15:39.
Page 33 of 109 « First 233132 33 343543 Last »
Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8