xtras/mathuaerknedam 465:289616e08db3: Stockholm: move status ti...

commits at adium.im commits at adium.im
Wed Mar 31 04:03:05 UTC 2010


details:	http://hg.adium.im/xtras/mathuaerknedam/rev/289616e08db3
revision:	465:289616e08db3
author:		mathuaerknedam
date:		Tue Mar 30 23:02:42 2010 -0500

Stockholm: move status timestamp to right and allow it to scale. Wrap long screennames around initial timestamp. Improve scaling of sender/timestamp.

diffs (372 lines):

diff -r da2da043c97b -r 289616e08db3 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Incoming/Content.html
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Incoming/Content.html	Tue Mar 30 21:12:44 2010 -0500
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Incoming/Content.html	Tue Mar 30 23:02:42 2010 -0500
@@ -3,8 +3,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time" title="%time{dd MMM yyyy}%">%time%</div>
 		<div class="x-sender">%sender%</div>
-		<div class="x-time" title="%time{dd MMM yyyy}%">%time%</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text">%message%</div>
diff -r da2da043c97b -r 289616e08db3 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html	Tue Mar 30 21:12:44 2010 -0500
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Mockup.html	Tue Mar 30 23:02:42 2010 -0500
@@ -40,8 +40,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -55,8 +55,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -81,8 +81,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -100,8 +100,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -119,8 +119,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -134,8 +134,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -161,8 +161,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -188,8 +188,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -203,8 +203,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">yhn | ujm</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -226,7 +226,7 @@
 <HR>
 
 <div class="x-status_container date_separator event AIM showIcons">
-	<div class="x-status_left">12:22</div>
+	<div class="x-status_left">12:22 PM</div>
 	<div class="x-status_right">Sunday, December 6, 2009</div>
 </div>
 
@@ -237,8 +237,8 @@
 <HR>
 
 <div class="x-status_container focus date_separator event AIM showIcons">
-	<div class="x-status_left">12:22</div>
-	<div class="x-status_right">Sunday, December 6, 2009</div>
+	<div class="x-status_left">12:22 PM </div>
+	<div class="x-status_right">Sunday, December 6, 2009 -status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIcons-status_containerdate_separatoreventAIMshowIcons</div>
 </div>
 
 <HR>
@@ -252,8 +252,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
-		<div class="x-sender">ujm | yhn</div>
 		<div class="x-time">12:22 PM</div>
+		<div class="x-sender">ujm | yhn -status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focus date_separator event AIM showIcons-status_container focusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIcons-status_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIconsstatus_containerfocusdate_separatoreventAIMshowIcons</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -271,8 +271,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">ujm | yhn</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -294,8 +294,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">ujm | yhn</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -313,8 +313,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">ujm | yhn</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
@@ -336,8 +336,8 @@
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
 	<div class="x-header">
+		<div class="x-time">12:22 PM</div>
 		<div class="x-sender">ujm | yhn</div>
-		<div class="x-time">12:22 PM</div>
 	</div>
 	<div class="x-message">
 		<div class="x-text"><a href=http://>1</a></div>
diff -r da2da043c97b -r 289616e08db3 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Status.html
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Status.html	Tue Mar 30 21:12:44 2010 -0500
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Status.html	Tue Mar 30 23:02:42 2010 -0500
@@ -1,5 +1,5 @@
 <div class="x-status_container %messageClasses% %service% %userIcons%">
-	<div class="x-status_left" title="%time{dd MMM yyyy}%">%shortTime%</div>
+	<div class="x-status_left" title="%time{dd MMM yyyy}%">%time%</div>
 	<div class="x-status_right">%message%</div>
 </div>
 <div id="insert"></div>
diff -r da2da043c97b -r 289616e08db3 Stockholm ☿.AdiumMessageStyle/Contents/Resources/Styles/main.css
--- a/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Styles/main.css	Tue Mar 30 21:12:44 2010 -0500
+++ b/Stockholm ☿.AdiumMessageStyle/Contents/Resources/Styles/main.css	Tue Mar 30 23:02:42 2010 -0500
@@ -110,9 +110,8 @@
 	font-weight: bold;
 	text-shadow: #4D4D4D 1px 1px 1px;
 	margin-bottom: 0px;
-	padding-bottom: 2px;
+	padding-bottom: 4px;
 	padding-left: 8px;
-	min-height: 17px;
 	-webkit-background-size:
 		2px 2px,
 		1px 3px,
@@ -157,10 +156,8 @@
 
 .x-sender
 {
-	padding: 4px 30px 0px 0px;
-	overflow: hidden;
-	min-height: 15px;
 	padding-top: 3px;
+	padding-right: 16px;
 }
 
 
@@ -245,8 +242,10 @@
 
 .x-header .x-time
 {
-	position: absolute;
-	top: 3px;
+	float: right;
+	margin-right: 8px;
+	margin-left: 8px;
+	margin-top: 3px;
 }
 
 .consecutive .x-time
@@ -297,19 +296,6 @@
 {
 	margin-top: 11px;
 	margin-bottom: -2px;
-	position: relative;
-	clear: both;
-	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right top no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) right top no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) 0px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) 0px 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) left bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(185, 185, 185, 1)), to(rgba(185, 185, 185, 1))) 1px 2px no-repeat;
 	-webkit-background-size:
 		2px 2px,
 		2px 2px,
@@ -327,71 +313,70 @@
 	-webkit-border-bottom-right-radius: 4px;
 }
 
+.x-status_container:not(.focus)
+{
+	color: rgba(120, 120, 120, 1);
+	color: rgba(143, 143, 143, 1);
+	background:
+	/* corners */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(173, 173, 173, 1)), to(rgba(173, 173, 173, 1))) right top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(173, 173, 173, 1)), to(rgba(173, 173, 173, 1))) left top no-repeat,
+
+	/* left edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(218, 218, 218, 1)), to(rgba(218, 218, 218, 1))) left top no-repeat,
+	/* right edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(218, 218, 218, 1)), to(rgba(218, 218, 218, 1))) right top no-repeat,
+
+	/* top darkest edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(173, 173, 173, 1)), to(rgba(173, 173, 173, 1))) 1px 0px no-repeat,
+	/* top dark edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(218, 218, 218, 1)), to(rgba(218, 218, 218, 1))) 1px 1px no-repeat,
+	/* bottom edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) left bottom no-repeat,
+	/* body */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 1px 2px no-repeat;
+}
+
+.x-status_container.focus
+{
+	color: white;
+	background:
+	/* corners */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) right top no-repeat,
+
+	/* left edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) left top no-repeat,
+	/* right edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) right top no-repeat,
+
+	/* top darkest edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), to(rgba(140, 140, 140, 1))) 0px 0px no-repeat,
+	/* top dark edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(168, 168, 168, 1)), to(rgba(168, 168, 168, 1))) 0px 1px no-repeat,
+	/* bottom edge */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) left bottom no-repeat,
+	/* body */
+		-webkit-gradient(linear, left top, left bottom, from(rgba(185, 185, 185, 1)), to(rgba(185, 185, 185, 1))) 1px 2px no-repeat;
+}
+
 .x-status_left
 {
-	color: #FFF;
-	font-size: .95em;
-	font-size: 9.5px;
-	width: 36px;
-	text-align: center;
-	float: left;
+	float: right;
 	font-weight: bold;
-	position: absolute;
-	left: 2px;
-	top: 4px;
-	overflow: hidden;
-	white-space: nowrap;
-	vertical-align: bottom;
+	margin-right: 8px;
+	margin-left: 8px;
+	margin-top: 4px;
+}
+
+.focus .x-status_left
+{
 }
 
 .x-status_right
 {
-	color: #787878;
 	font-size: .95em;
-	margin-left: 38px;
 	padding: 4px 7px 3px 7px;
-	text-align: left;
-	vertical-align: bottom;
-}
-
-.x-status_container:not(.focus) .x-status_right
-{
-	border-left: transparent;
-	background:
-		-webkit-gradient(linear, left top, left bottom, from(rgba(173, 173, 173, 1)), to(rgba(173, 173, 173, 1))) right top no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(rgba(218, 218, 218, 1)), to(rgba(218, 218, 218, 1))) right top no-repeat,
-
-		-webkit-gradient(linear, left top, left bottom, from(rgba(173, 173, 173, 1)), to(rgba(173, 173, 173, 1))) 1px 0px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(218, 218, 218, 1)), to(rgba(218, 218, 218, 1))) 1px 1px no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(rgba(241, 241, 241, 1)), to(rgba(241, 241, 241, 1))) 1px 2px no-repeat;
-	-webkit-background-size:
-		2px 2px,
-
-		1px 100%,
-
-		100% 1px,
-		100% 1px,
-		100% 100%;
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-bottom-right-radius: 4px;
-}
-
-.x-status_container.focus .x-status_right
-{
-	color: white;
-	border-left: 1px solid rgba(255, 255, 255, .2);
-	background: none;
-	-webkit-background-size:
-		2px 2px,
-
-		1px 100%,
-
-		100% 1px,
-		100% 1px,
-		100% 100%;
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-bottom-right-radius: 4px;
 }
 
 /*.history .x-status_left


More information about the commits mailing list