Reply
Thread Tools
b666m's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#321
wrrrrrrrrraaaaah....
these gaps are driving me nuts! o.O

i can't see any lines in the code which are causing this "problem"
 
Ronaldo's Avatar
Posts: 682 | Thanked: 208 times | Joined on Jan 2010 @ UK
#322
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's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#323
wow... this one is tricky...

screen1:


screen2:


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).

 

The Following User Says Thank You to b666m For This Useful Post:
Schturman's Avatar
Posts: 5,339 | Thanked: 4,133 times | Joined on Jan 2010 @ Israel
#324
Originally Posted by b666m View Post
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...

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

 
b666m's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#325
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.



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's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#326
played around a bit:



mhm... will try to overlay the bubble with the avatar (:
 
Schturman's Avatar
Posts: 5,339 | Thanked: 4,133 times | Joined on Jan 2010 @ Israel
#327
Wow, this one looks very cool !


What I can do with my text-line ?


Originally Posted by Schturman View Post
I played with this option, but I get strange result...
Not only timestamp jumping to another line, but text-line jumping too...

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

 
b666m's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#328
Originally Posted by Schturman View Post
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 ... maybe i'll play a little bit with transparency ^^)



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;
}
 

The Following 2 Users Say Thank You to b666m For This Useful Post:
b666m's Avatar
Posts: 1,090 | Thanked: 476 times | Joined on Jan 2010 @ Ingolstadt, Germany
#329
last tweak for tonight:



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:


Last edited by b666m; 2010-02-28 at 00:06.
 

The Following 2 Users Say Thank You to b666m For This Useful Post:
Posts: 276 | Thanked: 109 times | Joined on Dec 2009 @ Vancouver,Canada / Dubai,UAE
#330
Originally Posted by b666m View Post
last tweak for tonight:



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:

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 . Best thread so far !
 
Reply

Tags
bada rox, his lunchbox

Thread Tools

 
Forum Jump


All times are GMT. The time now is 02:30.