xtras/mathuaerknedam 16:78b9dc624ebf: Update mockup.html (long i...
commits at adium.im
commits at adium.im
Mon May 4 21:54:33 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/78b9dc624ebf
revision: 16:78b9dc624ebf
author: mathuaerknedam
date: Mon May 04 16:54:19 2009 -0500
Update mockup.html (long ignored) and tweak SO3e Icon-Time2 to try removing visual hole (compared to Icon-Time1) caused by sendercolor being on the left edge.Current messages now flow like history messages.
diffstat:
SO3e.AdiumMessageStyle/Contents/Resources/Mockup.html | 36 ++----
SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css | 49 +++++++--
2 files changed, 50 insertions(+), 35 deletions(-)
diffs (252 lines):
diff -r d3f433950944 -r 78b9dc624ebf SO3e.AdiumMessageStyle/Contents/Resources/Mockup.html
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Mockup.html Thu Apr 30 17:08:01 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Mockup.html Mon May 04 16:54:19 2009 -0500
@@ -7,7 +7,7 @@
</title>
<style type="text/css">
- @import url( "./Variants/Alternating.css" );
+ @import url( "./Variants/Icon-time2.css" );
body
{
@@ -48,7 +48,7 @@
<div id="Chat" class="groupchat">
-<div class="history date_separator event SERVICE">
+<div class="history date_separator event SERVICE" ico=buddyo_icon.png">
<span class="t-wrap">
<span class="t-time">12:45:48 </span>
<span class="t-mark">‣</span>
@@ -56,7 +56,7 @@
</span>
</div>
-<div class="history outgoing message SERVICE TekJew" style="background-color: seagreen;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="history outgoing message SERVICE TekJew" style="background-color: seagreen;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./outgoing_icon.png" />
<span class="t-color" style="background-color: seagreen"></span>
<span class="t-wrap">
@@ -67,7 +67,7 @@
</span>
</div>
-<div class="history incoming message SERVICE fetchgreebledonx" style="background-color: blue;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="history incoming message SERVICE fetchgreebledonx" style="background-color: blue;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./incoming_icon.png" />
<span class="t-color" style="background-color: blue"></span>
<span class="t-wrap">
@@ -76,7 +76,7 @@
<span class="t-mark">‣</span>
<span class="t-message">I'm pretty sure I've heard this one before. </span>
</span>
- <div class="history consecutive incoming message SERVICE fetchgreebledonx" style="background-color: blue;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+ <div class="history consecutive incoming message SERVICE fetchgreebledonx" style="background-color: blue;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./incoming_icon.png" />
<span class="t-color" style="background-color: blue"></span>
<span class="t-wrap">
@@ -88,7 +88,7 @@
</div>
</div>
-<div class="date_separator event SERVICE">
+<div class="date_separator event SERVICE" ico=buddyo_icon.png">
<span class="t-wrap">
<span class="t-time">12:45:48 </span>
<span class="t-mark">‣</span>
@@ -96,7 +96,7 @@
</span>
</div>
-<div class="outgoing message SERVICE TekJew" ico="%userIconPath%" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="outgoing message SERVICE TekJew" style="background-color: seagreen;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./outgoing_icon.png" />
<span class="t-color" style="background-color: seagreen"></span>
<span class="t-wrap">
@@ -105,7 +105,7 @@
<span class="t-mark">‣</span>
<span class="t-message">If I remember correctly, they explode outward at the speed of light. </span>
</span>
- <div class="consecutive outgoing message SERVICE TekJew" style="background-color: seagreen;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+ <div class="consecutive outgoing message SERVICE TekJew" style="background-color: seagreen;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./outgoing_icon.png" />
<span class="t-color" style="background-color: seagreen"></span>
<span class="t-wrap">
@@ -117,7 +117,7 @@
</div>
</div>
-<div class="mention incoming message SERVICE fetchgreebledonx" ico="%userIconPath%" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="mention incoming message SERVICE fetchgreebledonx" style="background-color: blue;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./incoming_icon.png" />
<span class="t-color" style="background-color: blue"></span>
<span class="t-wrap">
@@ -128,7 +128,7 @@
</span>
</div>
-<div class="outgoing message SERVICE TekJew" style="background-color: seagreen;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="outgoing message SERVICE TekJew" style="background-color: seagreen;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./outgoing_icon.png" />
<span class="t-color" style="background-color: seagreen"></span>
<span class="t-wrap">
@@ -139,21 +139,13 @@
</span>
</div>
-<div class="event notification SERVICE">
- <span class="t-wrap">
- <span class="t-time">12:47:54 </span>
- <span class="t-mark">‣</span>
- <span class="t-message">Jeff has sent you a notification! </span>
- </span>
-</div>
-
-<div class="status away SERVICE">
+<div class="status away SERVICE" ico=buddyo_icon.png">
<span class="t-wrap">
<span class="t-time">12:47:54 </span>
<span class="t-mark">‣</span>
<span class="t-message">Jeff went away </span>
</span>
- <div class="consecutive status away_message SERVICE">
+ <div class="consecutive status away_message SERVICE" ico=buddyo_icon.png">
<span class="t-wrap">
<span class="t-time">12:47:55 </span>
<span class="t-mark">‣</span>
@@ -162,7 +154,7 @@
</div>
</div>
-<div class="incoming autoreply message SERVICE fetchgreebledonx" style="background-color: blue;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="incoming autoreply message SERVICE fetchgreebledonx" style="background-color: blue;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('fetchgreebledonx'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="incoming_icon.png" />
<span class="t-wrap">
<span class="t-sender" title="fetchgreebledonx" >Jeff (Autoreply) </span>
@@ -172,7 +164,7 @@
</span>
</div>
-<div class="outgoing message SERVICE TekJew" style="background-color: seagreen;" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
+<div class="outgoing message SERVICE TekJew" style="background-color: seagreen;" ico=buddyo_icon.png" OnMouseDown="if (event.target.tagName.toLowerCase() != 'a') { var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className += ' t-hover'; } }" OnMouseUp="var elms = document.getElementsByClassName('TekJew'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }" OnMouseOut="var elms = document.getElementsByClassName('%senderScreenName%'); for(var i = 0; i < elms.length; i++) { elms[i].className = elms[i].className.replace(' t-hover', ''); }">
<img class="t-icon" src="./outgoing_icon.png" />
<span class="t-color" style="background-color: seagreen"></span>
<span class="t-wrap">
diff -r d3f433950944 -r 78b9dc624ebf SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css
--- a/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css Thu Apr 30 17:08:01 2009 -0500
+++ b/SO3e.AdiumMessageStyle/Contents/Resources/Variants/Icon-Time2.css Mon May 04 16:54:19 2009 -0500
@@ -231,7 +231,7 @@
.message .t-wrap
{
display: block;
- margin-left: 37px;
+ margin-left: 31px;
padding-left: 9px;
padding-right: 5px;
padding-bottom: 1px;
@@ -241,13 +241,21 @@
.event .t-wrap
{
display: block;
- margin-left: 5px;
- padding-left: 3px;
+ margin-left: 0px;
+ padding-left: 2px;
padding-right: 5px;
padding-bottom: 1px;
//border-left: 1px solid rgba(216, 216, 216, 1);
}
+.status[ico*="buddy_icon.png"] .t-wrap,
+.event[ico*="buddy_icon.png"] .t-wrap,
+.IRC.status .t-wrap,
+.IRC.event .t-wrap
+{
+ margin-left: 6px;
+}
+
.t-sender
{
font-weight: bold;
@@ -290,33 +298,37 @@
.t-mark
{
- position: absolute;
- left: 45px;
+ //position: absolute;
+ //left: 45px;
+ margin-right: -2px;
}
-.message .t-mark
-{
- color: rgba(0, 0, 0, .8)
-}
-
-.autoreply:not(.history):not(.IRC):not(.message[ico*="buddy_icon.png"]) .t-mark,
+.autoreply:not(.history):not(.IRC) .t-mark,
.status .t-mark,
.event .t-mark
{
color: rgba(255, 255, 255, .8)
}
+.message .t-mark,
+.autoreply.message[ico*="buddy_icon.png"] .t-mark
+{
+ color: rgba(0, 0, 0, .8)
+}
+
.message[ico*="buddy_icon.png"] .t-mark,
.status[ico*="buddy_icon.png"] .t-mark,
.event[ico*="buddy_icon.png"] .t-mark,
.IRC .t-mark
{
+ position: absolute;
left: 7px;
}
.message.t-hover .t-sender,
.message.t-hover .t-time,
-.message.t-hover .t-message
+.message.t-hover .t-message,
+.message.t-hover .t-mark
{
color: rgba(0, 0, 0, 1) !important;
}
@@ -365,6 +377,7 @@
margin-top: 16px;
}
+
/* History stuff */
.history.message:not(.consecutive),
@@ -373,7 +386,7 @@
{
display: block;
margin-top: 1px;
- margin-left: 38px;
+ margin-left: 32px;
margin-bottom: 0px;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
@@ -485,6 +498,16 @@
display: none;
}
+.history.message:not(.consecutive) .t-mark
+{
+ display: none;
+}
+
+.history.message.consecutive .t-mark
+{
+ display: inline;
+}
+
.history.event .t-message
{
font-size: .9em;
More information about the commits
mailing list