xtras/mathuaerknedam 87:85738dfabb4d: Adding a togglable topic. ...
commits at adium.im
commits at adium.im
Tue Jul 28 04:09:38 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/85738dfabb4d
revision: 87:85738dfabb4d
author: mathuaerknedam
date: Mon Jul 27 23:11:27 2009 -0500
Adding a togglable topic. It works in the mockup, but in insude Adium. I've also added a togglable header just to demonstrate that it really does work in Adium. Is Adium disabling javascript in the topic? :(
diffs (267 lines):
diff -r 67ad3c1513c1 -r 85738dfabb4d yMous ☿.AdiumMessageStyle/Contents/Resources/Header.css
--- a/yMous ☿.AdiumMessageStyle/Contents/Resources/Header.css Sun Jul 26 21:12:52 2009 -0500
+++ b/yMous ☿.AdiumMessageStyle/Contents/Resources/Header.css Mon Jul 27 23:11:27 2009 -0500
@@ -1,19 +1,49 @@
@charset "utf-8";
-.xxxhead
-{
- padding-bottom: 8px;
- background-color: rgba(63, 63, 63, .12);
+#header {
+ cursor: default;
position: fixed;
top: 0px;
- width: 100%;
+ right: 0px;
+ z-index: 5;
+ //width: 100%;
+ //height: 65px;
}
-.xxxfoot
+/* @group toggle */
+
+.toggle
{
- padding-top: 8px;
- background-color: rgba(63, 63, 63, .12);
position: fixed;
- bottom: 0px;
- width: 100%;
+ top: 2px;
+ right: 3px;
+ padding: 2px;
+ z-index: 10;
+ cursor: default;
+ font-size: 10px !important;
+ font-family: AppleGothic;
+ z-index: 999;
+ cursor: pointer;
+ background: rgba(208, 208, 208, .85);
+ -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
+
+#toggle_hide:before
+{
+ content: "\25BD";
+}
+
+#toggle_hide:hover:before
+{
+ content: "\25BC";
+}
+
+#toggle_show:before
+{
+ content: "\25B3";
+}
+
+#toggle_show:hover:before
+{
+ content: "\25B2";
+}
diff -r 67ad3c1513c1 -r 85738dfabb4d yMous ☿.AdiumMessageStyle/Contents/Resources/Header.html
--- a/yMous ☿.AdiumMessageStyle/Contents/Resources/Header.html Sun Jul 26 21:12:52 2009 -0500
+++ b/yMous ☿.AdiumMessageStyle/Contents/Resources/Header.html Mon Jul 27 23:11:27 2009 -0500
@@ -1,3 +1,24 @@
-<style type="text/css">
+<script type="text/javascript" charset="utf-8">
+ function show_header () {
+ document.getElementById('header_bar').style.display = '';
+ document.getElementById('toggle_show').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = '';
+ }
+ function hide_header () {
+ document.getElementById('header_bar').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = 'none';
+ document.getElementById('toggle_show').style.display = '';
+ }
+</script>
+
+<style type="text/css">
@import url( "./Header.css" );
</style>
+
+<div id="header">
+ <div id="toggle_hide" class="toggle" onClick="hide_header();"></div>
+ <div id="toggle_show" class="toggle" onClick="show_header();" style="display: none"></div>
+ <div id="header_bar">
+ <img class="picture co" src="%incomingIconPath%" />
+ </div>
+</div>
diff -r 67ad3c1513c1 -r 85738dfabb4d yMous ☿.AdiumMessageStyle/Contents/Resources/Mockup.html
--- a/yMous ☿.AdiumMessageStyle/Contents/Resources/Mockup.html Sun Jul 26 21:12:52 2009 -0500
+++ b/yMous ☿.AdiumMessageStyle/Contents/Resources/Mockup.html Mon Jul 27 23:11:27 2009 -0500
@@ -36,14 +36,31 @@
<body>
<div id="topic" title="Adium development channel. For user help, go to #adium. | 1.4b6: http://beta.adium.im | 1.4hg nightly: http://nightly.adium.im">
- <script type="text/ecmascript" defer="defer" encoding="utf-8" src="./roomTopicBanner.js"></script>
- <style type="text/css">
- @import url( "./Topic.css" );
- </style>
+<style type="text/css">
+ @import url( "./Topic.css" );
+</style>
- <span id="toggleButton" style="display: block;" onclick="toggleTopic( event )"></span>
- <span id="topicEdit" ondblclick="this.setAttribute('contentEditable', true); this.focus();">Adium development channel. For user help, go to <a href="irc://irc.freenode.net/#adium" title="irc://irc.freenode.net/#adium">#adium</a>. | 1.4b6: <a href="http://beta.adium.im" title="http://beta.adium.im">http://beta.adium.im</a> | 1.4hg nightly: <a href="http://nightly.adium.im" title="http://nightly.adium.im">http://nightly.adium.im</a></span>
+
+<script type="text/javascript" charset="utf-8">
+ function show_header () {
+ document.getElementById('x-topic').style.display = '';
+ document.getElementById('toggle_show').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = '';
+ }
+
+ function hide_header () {
+ document.getElementById('x-topic').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = 'none';
+ document.getElementById('toggle_show').style.display = '';
+ }
+</script>
+
+ <div id="toggle_hide" class="toggle" onclick="hide_header();"></div>
+ <div id="toggle_show" class="toggle" onclick="show_header();" style="display: none"></div>
+ <div id="x-topic">
+ <span id="topicEdit" ondblclick="this.setAttribute('contentEditable', true); this.focus();">Adium development channel. For user help, go to #adium. | 1.4b6: http://beta.adium.im | 1.4hg nightly: http://nightly.adium.im</span>
+ </div>
</div>
<div id="Chat" class="">
diff -r 67ad3c1513c1 -r 85738dfabb4d yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.css
--- a/yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.css Sun Jul 26 21:12:52 2009 -0500
+++ b/yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.css Mon Jul 27 23:11:27 2009 -0500
@@ -2,75 +2,57 @@
#topic
{
+}
+
+#x-topic
+{
position: fixed;
+ left: 0px;
+ right: 0px;
+ padding: 4px;
+ padding-right: 19px;
+ z-index: 99;
background: rgba(208, 208, 208, .85);
-webkit-background-size: auto auto;
- overflow: hidden;
- min-height: 17px;
- height: 17px;
- width: 100%;
- z-index: 999;
- display: table-row;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
#topicEdit
{
- position: absolute;
- top: 1px;
- left: 8px;
- right: 16px;
- min-height: 15px;
- font-family: Lucida Grande, sans-serif;
- font-size: 11px;
- line-height: 15px;
- //text-align: center;
- color: black !important;
- word-wrap: break-word;
- white-space: pre-wrap;
- -khtml-line-break: after-white-space;
- -khtml-nbsp-mode: space;
}
-#topicEdit a
+.toggle
{
- //color: blue !important;
-}
-
-#toggleButton
-{
- position: absolute;
- top: 3px;
- right: 4px;
- //width: 13px;
- height: 16px;
+ position: fixed;
+ top: 2px;
+ right: 3px;
+ padding: 2px;
z-index: 10;
cursor: default;
font-size: 10px !important;
font-family: AppleGothic;
+ z-index: 999;
+ cursor: pointer;
+ background: rgba(208, 208, 208, .85);
+ -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
-#toggleButton:before
+#toggle_hide:before
{
content: "\25BD";
}
-#toggleButton:hover:before
+#toggle_hide:hover:before
{
content: "\25BC";
}
-#toggleButton.up:before
+#toggle_show:before
{
content: "\25B3";
}
-#toggleButton.up:hover:before
+#toggle_show:hover:before
{
content: "\25B2";
}
-
-#Chat
-{
- padding-top: 17px;
-}
diff -r 67ad3c1513c1 -r 85738dfabb4d yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.html
--- a/yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.html Sun Jul 26 21:12:52 2009 -0500
+++ b/yMous ☿.AdiumMessageStyle/Contents/Resources/Topic.html Mon Jul 27 23:11:27 2009 -0500
@@ -1,9 +1,24 @@
-<script type="text/ecmascript" defer="defer" encoding="utf-8" src="./roomTopicBanner.js"></script>
-
-<style type="text/css">
+<style type="text/css">
@import url( "./Topic.css" );
</style>
-<span id="toggleButton" style="display: none;" onclick="toggleTopic( event )"></span>
-%topic%
+<script type="text/javascript" charset="utf-8">
+ function show_header () {
+ document.getElementById('x-topic').style.display = '';
+ document.getElementById('toggle_show').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = '';
+ }
+
+ function hide_header () {
+ document.getElementById('x-topic').style.display = 'none';
+ document.getElementById('toggle_hide').style.display = 'none';
+ document.getElementById('toggle_show').style.display = '';
+ }
+</script>
+
+ <div id="toggle_hide" class="toggle" onClick="hide_header();"></div>
+ <div id="toggle_show" class="toggle" onClick="show_header();" style="display: none"></div>
+ <div id="x-topic">
+ %topic%
+ </div>
More information about the commits
mailing list