xtras/mathuaerknedam 125:420f608db334: Header in Compact variant...
commits at adium.im
commits at adium.im
Thu Aug 27 21:26:14 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/420f608db334
revision: 125:420f608db334
author: mathuaerknedam
date: Thu Aug 27 16:32:51 2009 -0500
Header in Compact variant now dynamically scales horizontally.
diffs (302 lines):
diff -r 4c79e05ef024 -r 420f608db334 Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Wed Aug 26 22:36:33 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Thu Aug 27 16:32:51 2009 -0500
@@ -7,7 +7,7 @@
</title>
<style type="text/css">
- @import url( "./Variants/Classic.css" );
+ @import url( "./Variants/Compact.css" );
body
{
@@ -43,20 +43,20 @@
<span class="x-iconmask outgoing" style="-webkit-mask-box-image: url(/Users/mneedham/Library/Application%20Support/Adium%202.0/Users/Default/libpurple/icons/23c091f19e3feacaf0cc782065025af54fc64cd0.png);"></span>
<span class="x-color outgoing" style="background-color: seagreen"></span>
</div>
+
<!--
-
-<div id="topic" title="">
+<div id="topic" title="1.3.6 http://adium.im || Adium VV? See http://adium.im/blog/2009/08/pidgin-2-6-0-and-adium-vv/ || #adium-devl for development talk || Paste into http://paste.lisp.org/new/adium">
<style type="text/css">
@import url(./Topic.css);
</style>
- <span id="topicEdit" contenteditable="">Welcome</span>
+ <span id="topicEdit" ondblclick="this.setAttribute('contentEditable', true); this.focus();">1.3.6 <a href="http://adium.im" title="http://adium.im">http://adium.im</a> || Adium VV? See <a href="http://adium.im/blog/2009/08/pidgin-2-6-0-and-adium-vv/" title="http://adium.im/blog/2009/08/pidgin-2-6-0-and-adium-vv/">http://adium.im/blog/2009/08/pidgin-2-6-0-and-adium-vv/</a> || <a href="irc://irc.freenode.net/#adium-devl" title="irc://irc.freenode.net/#adium-devl">#adium-devl</a> for development talk || Paste into <a href="http://paste.lisp.org/new/adium" title="http://paste.lisp.org/new/adium">http://paste.lisp.org/new/adium</a></span>
</div>
--!>
<div id="Chat" class="groupchat">
-<div class="history date_separator event SERVICE showIcons">
+<div class="history date_separator event SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -66,7 +66,7 @@
</div>
-<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -79,7 +79,7 @@
</span>
</div>
-<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -90,7 +90,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore. </span>
</span>
- <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -104,7 +104,7 @@
</div>
</div>
-<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -117,7 +117,7 @@
</span>
</div>
-<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -128,7 +128,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'm pretty sure I've heard this one before. </span>
</span>
- <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -139,7 +139,7 @@
<span class="x-mark">‣</span>
<span class="x-message">So what happens next? </span>
</span>
- <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -154,7 +154,7 @@
</div>
</div>
-<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -167,7 +167,7 @@
</span>
</div>
-<div class="history date_separator event SERVICE showIcons">
+<div class="history date_separator event SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -176,7 +176,7 @@
</span>
</div>
-<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -189,7 +189,7 @@
</span>
</div>
-<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -200,7 +200,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'm pretty sure I've heard this one before. </span>
</span>
- <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -215,7 +215,7 @@
</div>
<!--
-<div class="date_separator event SERVICE showIcons">
+<div class="date_separator event SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -225,7 +225,7 @@
</div>
--!>
-<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -236,7 +236,7 @@
<span class="x-mark">‣</span>
<span class="x-message">|If I remember correctly, they explode outward at the speed of light. </span>
</span>
- <div class="consecutive outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+ <div class="consecutive outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -247,7 +247,7 @@
<span class="x-mark">‣</span>
<span class="x-message">But that might be if you cross the streams… </span>
</span>
- <div class="consecutive outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+ <div class="consecutive outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -262,7 +262,7 @@
</div>
</div>
-<div class="mention incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="mention incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon_wide.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon_wide.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -275,7 +275,7 @@
</span>
</div>
-<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon_tall.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon_tall.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -288,7 +288,7 @@
</span>
</div>
-<div class="event notification SERVICE showIcons">
+<div class="event notification SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
@@ -297,14 +297,14 @@
</span>
</div>
-<div class="status away SERVICE showIcons">
+<div class="status away SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
<span class="x-mark">‣</span>
<span class="x-message">Jeff went away </span>
</span>
- <div class="consecutive status away_message SERVICE showIcons">
+ <div class="consecutive status away_message SERVICE hideIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:55 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:55 </span>
@@ -314,7 +314,7 @@
</div>
</div>
-<div class="incoming autoreply message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="incoming autoreply message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -327,7 +327,7 @@
</span>
</div>
-<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./buddy_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./buddy_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -341,7 +341,7 @@
<span id="insert"></span>
</div>
-<div class="incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -356,7 +356,7 @@
</div>
-<hr id="focus" style="position: absolute; top: 128px;">
+<hr id="focus" style="position: absolute; top: 824px;">
<script type="text/javascript">
var highlightActive = false;
diff -r 4c79e05ef024 -r 420f608db334 Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Compact.css
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Compact.css Wed Aug 26 22:36:33 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Compact.css Thu Aug 27 16:32:51 2009 -0500
@@ -384,7 +384,8 @@
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .4) !important;
top: 8px !important;
height: 20px !important;
- width: 256px;
+ //width: 272px;
+ right: inherit !important;
text-align: left !important;
padding: 8px;
-webkit-background-size: auto !important;
@@ -412,10 +413,12 @@
.serviceIcon
{
float: right;
+ top: -7px !important;
+ margin-left: 1ex;
}
img.serviceIcon
{
- top: 0px !important;
+ top: -11px !important;
}
diff -r 4c79e05ef024 -r 420f608db334 Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Wed Aug 26 22:36:33 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Thu Aug 27 16:32:51 2009 -0500
@@ -2,8 +2,8 @@
!# %serviceIconImg% doesn't work in topic (waiting)
!# %sendercolor% fails in header (waiting)
!# topic needs more per-variant styling?
- !# header/topic need hideIcons/showIcons styling?
- !compact has serviceicon height failure
+ !# header/topic need hideIcons/showIcons styling? Alternating does, but it needs a %variant% keyword. the header in Alternating looks a little weird anyway. it might be nice to do somethign different if there isn't an icon.
+ !compact has serviceicon height failure, okay in preview/mockup but not in chat?
Other
# compact and history needs some way to distinguish sender from text besides bold. If the first word is bold, there it's hard to tell. For example, in IRC, I've seen "Cappuccino trac: Ticket #119..." where "Cappuccino trac" is bold.
More information about the commits
mailing list