xtras/mathuaerknedam 18:6768c3a29e4c: abolish segmented history....
commits at adium.im
commits at adium.im
Tue May 5 21:47:41 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/6768c3a29e4c
revision: 18:6768c3a29e4c
author: mathuaerknedam
date: Tue May 05 16:47:23 2009 -0500
abolish segmented history. use em for timestamp width. switch alternating to use new gradients.
diffstat:
SO3e.AdiumMessageStyle/Contents/Resources/Incoming/Content.html | 2 +-
SO3e.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css | 66 +++++----
SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time1.css | 8 +-
SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css | 20 +-
SO3e.AdiumMessageStyle/Contents/Resources/Variants/Time-Icon.css | 10 +-
SO3e.AdiumMessageStyle/Contents/Resources/todo.txt | 8 +-
6 files changed, 62 insertions(+), 52 deletions(-)
diffs (268 lines):
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/Incoming/Content.html
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Incoming/Content.html Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Incoming/Content.html Tue May 05 16:47:23 2009 -0500
@@ -4,7 +4,7 @@
<span class="t-wrap">
<span class="t-sender" title="%senderPrefix% %senderScreenName%">%sender% </span>
<span class="t-rtime" title="%time{dd MMM yyyy}%">%time% </span>
- <span class="t-ltime" title="ltime %time{dd MMM yyyy}%">%shortTime%:%time{ss}% </span>
+ <span class="t-ltime" title="%time{dd MMM yyyy}%">%shortTime%:%time{ss}% </span>
<span class="t-mark">‣</span>
<span class="t-message" title="%time%">%message% </span>
</span>
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css Tue May 05 16:47:23 2009 -0500
@@ -69,17 +69,6 @@
color: rgba(64, 64, 64, 1);
}
-.message.consecutive
-{
- background: none !important;
-}
-
-.IRC.message:not(.consecutive),
-.message[ico*="buddy_icon.png"]:not(.consecutive)
-{
--webkit-border-radius: 5px;
-}
-
.incoming.message:not(.consecutive)
{
-webkit-border-top-right-radius: 0px;
@@ -96,15 +85,31 @@
-webkit-border-radius: 5px;
}
-.message:not(.t-hover):not(.consecutive):not(.history)
+.message:not(.autoreply):not(.consecutive):not(.history):not(.t-hover)
{
background:
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 53px 0px no-repeat;
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 48px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 48px 32px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 53px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240, 240, 240, 1))) 53px 16px no-repeat;
+ -webkit-background-size: 48px 16px, 48px 100%, 5px 32px, 5px 100%, 100% 16px, 100% 100%;
}
-.message.t-hover:not(.consecutive)
+.message.autoreply:not(.consecutive):not(.history):not(.t-hover)
+{
+ background:
+ -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .25))) 48px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 48px 32px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1))) 53px 0px no-repeat;
+ -webkit-background-size: 48px 100%, 5px 32px, 5px 100%, 100% 100%;
+ -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, .4), 0px 0px 1px rgba(0, 0, 0, 1);
+}
+
+.message.t-hover:not(.consecutive),
+.message.history.t-hover:not(.consecutive)
{
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 1)), to(rgba(192, 192, 192, 1))) 0px 0px no-repeat,
@@ -113,11 +118,16 @@
-webkit-box-shadow: 0px 2px 4px rgba(255, 255, 255, 1), 0px -1px 1px rgba(0, 0, 0, .4);
}
+.message.consecutive
+{
+ background: none !important;
+}
+
.message.t-hover .t-sender,
.message.t-hover .t-ltime,
.message.t-hover .t-message
{
- color: rgba(0, 0, 0, 1);
+ color: rgba(0, 0, 0, 1) !important;
}
.status:not(.consecutive),
@@ -161,6 +171,11 @@
-webkit-border-radius: 5px;
}
+.autoreply img.t-icon
+{
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat;
+}
+
.incoming img.t-icon
{
right: 8px;
@@ -223,19 +238,10 @@
padding-bottom: 3px;
}
-.message.autoreply:not(.history) .t-sender
+.message.autoreply:not(.history) .t-sender,
+.message.autoreply:not(.history) .t-message
{
- color: rgba(244, 244, 244, 1) !important;
- background:
- -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(96, 96, 96, 1)), to(rgba(64, 64, 64, 1))) 53px 0px no-repeat;
- -webkit-background-size: 48px 100%;
- -webkit-border-top-left-radius: 5px;
- margin-top: -2px;
- margin-bottom: 2px;
- margin-right: -10px;
- margin-left: -56px;
- padding-left: 56px;
+ color: rgba(244, 244, 244, 1);
}
.t-rtime
@@ -249,7 +255,7 @@
left: 54px;
margin-top: 1px;
font-size: .9em;
- width: 40px;
+ width: 5em;
text-align: right;
white-space: nowrap;
overflow: hidden;
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time1.css
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time1.css Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time1.css Tue May 05 16:47:23 2009 -0500
@@ -388,7 +388,7 @@
.history.event:not(.consecutive)
{
display: block;
- margin-top: 1px;
+ margin-top: 0px;
margin-left: 32px;
margin-bottom: 0px;
-webkit-border-radius: 0px;
@@ -421,11 +421,11 @@
-webkit-border-top-right-radius: 5px;
}
-.history.message:not(.consecutive)
+.history.message:not(.consecutive):not(.t-hover)
{
background:
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .375))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat;
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat;
}
.history.message.t-hover:not(.consecutive)
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css Tue May 05 16:47:23 2009 -0500
@@ -305,6 +305,12 @@
{
//position: absolute;
//left: 45px;
+}
+
+.message:not(.history) .t-mark,
+.status .t-mark,
+.event .t-mark
+{
margin-right: -2px;
}
@@ -390,7 +396,7 @@
.history.event:not(.consecutive)
{
display: block;
- margin-top: 1px;
+ margin-top: 0px;
margin-left: 32px;
margin-bottom: 0px;
-webkit-border-radius: 0px;
@@ -426,8 +432,8 @@
.history.message:not(.consecutive):not(.t-hover)
{
background:
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .375))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat;
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 5px 0px no-repeat;
}
.history.message.t-hover:not(.consecutive)
@@ -503,14 +509,10 @@
display: none;
}
-.history.message:not(.consecutive) .t-mark
-{
- display: none;
-}
-
-.history.message.consecutive .t-mark
+.history.message .t-mark
{
display: inline;
+ float: left;
}
.history.event .t-message
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/Variants/Time-Icon.css
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Time-Icon.css Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Time-Icon.css Tue May 05 16:47:23 2009 -0500
@@ -238,7 +238,7 @@
left: 12px;
margin-top: 1px;
font-size: .9em;
- width: 40px;
+ width: 5em;
text-align: right;
white-space: nowrap;
overflow: hidden;
@@ -332,7 +332,7 @@
.history.event:not(.consecutive)
{
display: block;
- margin-top: 1px;
+ margin-top: 0px;
//margin-left: 32px;
margin-bottom: 0px;
-webkit-border-radius: 0px;
@@ -369,9 +369,9 @@
.history.message:not(.consecutive)
{
background:
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, .375))) 0px 0px no-repeat,
- -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(240, 240, 240, 1))) 53px 0px no-repeat;
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, .5)), to(rgba(248, 248, 248, .5))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 1))) 53px 0px no-repeat;
}
.history.message .t-wrap
diff -r b2e2fd343db0 -r 6768c3a29e4c SO3e.AdiumMessageStyle/Contents/Resources/todo.txt
--- a/SO3e.AdiumMessageStyle/Contents/Resources/todo.txt Mon May 04 21:52:31 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/todo.txt Tue May 05 16:47:23 2009 -0500
@@ -3,6 +3,9 @@
# Doesn't yet scale well for different fonts/sizes! (mostly a problem for timestamp)
+ #time width set to 5em, which works for most fonts (not wide latin, zapfino, bank gothic, blair, or monaco.)
+ #after http://trac.adium.im/ticket/11981 is fixed, scale background and t-wrap margin too.
+ #then check for anything else that doesn't work well with alternative fonts/sizes.
# Dark variant?
# RTL variant?
# disable all-by-sender depresses on right-click?
@@ -26,6 +29,5 @@
-implement new autoreply and gradients in alternating?
-check buddy_icon.png t-hover backgrounds
-tweak icon-time2 mark/sender/message alignment?
+diagnose weird formatting problem, file webkit bug.
+implement some sort of action using the new class?
More information about the commits
mailing list