Login | Register
My pages Projects Community openCollabNet

Discussions > cvs > CVS update: /style/www/dev/docs/

style
Discussion topic

Back to topic list

CVS update: /style/www/dev/docs/

Reply

Author tfahrner
Full name Todd Fahrner
Date 2002-09-19 08:59:16 PDT
Message User: tfahrner
Date: 02/09/19 08:59:16

Added
 /style/www/dev/docs/
  icons.html

Log
 initial commit

File Changes:

Directory: /style/www/dev/docs/
===============================

File [added]: icons.html
Url: http://style.tigris.​org/source/browse/st​yle/www/dev/docs/ico​ns.html?rev=1.1&​content-type=text/x-​cvsweb-markup
Added lines: 285
----------------
<!DOCTYPE html PUBLIC "-//Tigris//DTD XHTML 1.0 Transitional//EN"
"http://style.tigris.​org/tigris_transitio​nal.dtd">
<html>
 <head>
 <style type="text/css"> /* <![CDATA[ */
 
 @import url(http://style.tigris.​org/dev/css/tigris.c​ss);
 
 .filebrowse { paddding-left: 0; margin-left: 0 }
 .filebrowse, .filebrowse ul { list-style-type: none; }
 .filebrowse li { margin-bottom: .67em }
/* ]]> */</style>
 <title>foo</title>
</head>

<body>
<h2>Icon usage in Tigris</h2>
<p>
The technique shown here (view source) makes no use of the img tag, keeping details like height, width, border treatments, and pathname of images out of HTML and in the style system, where they can be managed most cleanly.
</p>

<h3>Two styles of tree browser</h3>

<p>
In this first group of 4, the icon and text are integral (same link or other element). CVSWeb's UI works this way.
</p>


<div class="filebrowse">
<p>
<a href="foo" class="leaf">filebrowse leaf</a>
</p>

<p>
<a href="foo" class="leafnode">filebrowse leafnode/</a>
</p>

<p>
<a href="foo" class="expanded">filebrowse expanded/</a>
</p>

<p>
<a href="foo" class="collapsed">filebrowse collapsed/</a>
</p>
</div>

<p class="stb">
In this second group, the icon and text are separate links, with the icon having a textual fallback. Nidaba (file-sharing component of SourceCast) works this way.
</p>



<div class="filebrowse-alt">
<p>
<a href="foo" class="leaf"><span class="alt">[file​]</span></a​> <a href="bar">filebrowse-alt leaf</a>
</p>

<p>
<a href="foo" class="leafnode"><span class="alt">/<​/span></a> <a href="bar">filebrowse-alt leafnode</a>
</p>

<p>
<a href="foo" class="expanded"><span class="alt">/-​</span></a>​ <a href="bar">filebrowse-alt expanded</a>
</p>

<p>
<a href="foo" class="collapsed"><span class="alt">/+​</span></a>​ <a href="bar">filebrowse-alt collapsed</a>
</p>
</div>


<p>
There are more kinds of trees. Above is a directory tree. Below is a user/group tree. Only the class of the parent changes; the markup is the same. Make up other types as needed, supplying your own widgets:
</p>

<div class="userbrowse">
<p>
<a href="foo" class="leaf">userbrowse leaf</a>
</p>

<p>
<a href="foo" class="leafnode">userbrowse leafnode/</a>
</p>

<p>
<a href="foo" class="expanded">userbrowse expanded/</a>
</p>

<p>
<a href="foo" class="collapsed">userbrowse collapsed/</a>
</p>
</div>

<p>
To represent logical nesting, use ul/li:
</p>


<ul class="filebrowse">
<li>
<a href="foo" class="expanded">filebrowse expanded/</a>
<ul><li>
<a href="foo" class="leaf">filebrowse leaf</a>
</li>
<li>
<a href="foo" class="leaf">filebrowse leaf</a>
</li>
</ul></li>


<li>
<a href="foo" class="expanded">filebrowse expanded/</a>
<ul>
<li>
<a href="foo" class="expanded">filebrowse expanded/</a>
<ul><li>
<a href="foo" class="leaf">filebrowse leaf</a>
</li></ul>
</li>
<li>
<a href="foo" class="collapsed">filebrowse collapsed/</a>
</li>
</ul>
</li>
</ul>


When it isn't possible actually to nest the markup (e.g., when tree must be smooshed into multiple table rows), use the tier<var>n</var> classes on the containing blocks; e.g.:

<table width="100%" cellpadding="3" cellspacing="2" class="filebrowse-alt">
 <tr><th>​Select</th>​<th>Name</th​><th>Files​</th><th>Re​served by</th><th>Last modified</th>​<th>Modified by</th></tr>
 
 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier1">
     <a href="#" class="expanded" title="collapse"><span class="alt">[-] /</span></a> <a href="#" title="view details">User Docs</a>
</div></td>
     <td>0</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
 </tr>
 
 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier2">
 <a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">Installation Guides</a>
</div></td>
    <td>3</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>
 
 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier2">
 <a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">User Manual</a>
</div></td>
    <td>4</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>
 
 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier2">
<a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">HOWTOs</a>
</div></td>
    <td>8</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier1">
 <a href="#" class="expanded" title="collapse"><span class="alt">[-] /</span></a> <a href="drill-detail2.html" title="view details">Releases</a>
</div></td>
     <td>0</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
 </tr>
 
 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier2">
 <a href="#" class="expanded" title="collapse"><span class="alt">[-] /</span></a> <a href="drill-detail.html" title="view details">Stable releases</a>
</div></td>
    <td>2</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
<a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">2.0.0</a>
</div></td>
    <td>18</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
<a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">1.2.5</a>
</div></td>
    <td>12</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>
 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
     <a href="#" class="leaf" title="download"><span class="alt">[down​load]</span>​</a> <a href="#" title="view details">snapshot​-12302.tar</a>​
</div></td>
    <td>--</td>
     <td>username</td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
 <a href="#" class="leaf" title="download"><span class="alt">[down​load]</span>​</a> <a href="#" title="view details">snapshot​-12402.tar</a>​
</div></td>
    <td>--</td>
     <td>username</td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>


 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier2">
 <a href="#" class="expanded" title="collapse"><span class="alt">[-] /</span></a> <a href="#" title="view details">Developer Releases</a>
</div></td>
    <td>0</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="a">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
<a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">2.0.0TR15</a>
</div></td>
    <td>16</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

 <tr class="b">
     <td><input type="checkbox" /></td>
     <td><div class="tier3">
<a href="#" class="collapsed" title="expand"><span class="alt">[+] /</span></a> <a href="#" title="view details">1.2.3</a>
</div></td>
    <td>9</td>
     <td></td>
     <td>3/28/2002</td>
    <td>username</td>
</tr>

</table>

<h3>Messaging</h3>



</body>
</html>
 
 




--------------------​--------------------​--------------------​---------
To unsubscribe, e-mail: cvs-unsubscribe@styl​e.tigris.org
For additional commands, e-mail: cvs-help at style dot tigris dot org

« Previous message in topic | 1 of 1 | Next message in topic »

Messages

Show all messages in topic

CVS update: /style/www/dev/docs/ tfahrner Todd Fahrner 2002-09-19 08:59:16 PDT
Messages per page: