eztelemeta: fancier item and player display

diff --git a/tools/eztelemeta/design/standard/images/play.gif b/tools/eztelemeta/design/standard/images/play.gif
new file mode 100644 (file)
index 0000000..9d7a3ac
Binary files /dev/null and b/tools/eztelemeta/design/standard/images/play.gif differ

diff --git a/tools/eztelemeta/design/standard/images/play.png b/tools/eztelemeta/design/standard/images/play.png
deleted file mode 100644 (file)
index bc7336c..0000000
Binary files a/tools/eztelemeta/design/standard/images/play.png and /dev/null differ

diff --git a/tools/eztelemeta/design/standard/images/stop.gif b/tools/eztelemeta/design/standard/images/stop.gif
new file mode 100644 (file)
index 0000000..34c7ca0
Binary files /dev/null and b/tools/eztelemeta/design/standard/images/stop.gif differ

diff --git a/tools/eztelemeta/design/standard/images/stop.png b/tools/eztelemeta/design/standard/images/stop.png
deleted file mode 100644 (file)
index 2a7e1bf..0000000
Binary files a/tools/eztelemeta/design/standard/images/stop.png and /dev/null differ

diff --git a/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js b/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js
index 9e9004fef5b66954b018021c38fcc6d2a4fd2031..5064491ff2b1e8f0a503f3b97c608ba351713d3b 100644 (file)
--- a/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js
+++ b/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js
@@ -27,7 +27,7 @@ function TelemetaPlayer(cfg)
 
     this.setStateStyle = function(link, state) {
         var container = this.findContainer(link);
-        if (state == 'stopped' || state == 'loading') {
+        if (state == 'stopped') {
             if (this.hasClass(container, 'telemeta-playing'))
                 container.className = container.className.replace('telemeta-playing', '');
         }
@@ -37,13 +37,14 @@ function TelemetaPlayer(cfg)
                 container.className = container.className.replace('telemeta-loading', '');
         }
 
-        if (state == 'playing') {
+        if (state == 'playing' || state == 'loading') {
             if (!this.hasClass(container, 'telemeta-playing'))
                 container.className += ' telemeta-playing';
-        } else if (state == 'loading') {
-            if (!this.hasClass(container, 'telemeta-loading'))
-                container.className += ' telemeta-loading';
-        }
+            if (state == 'loading') {
+                if (!this.hasClass(container, 'telemeta-loading'))
+                    container.className += ' telemeta-loading';
+            }
+        } 
     }
 
     this.togglePlayback = function() {

diff --git a/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css b/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
index f2d9b52f2d1e1c76b1bc1a331d310139b421b931..cdc483078abbe6095bfad6643618b920008d9004 100644 (file)
--- a/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
+++ b/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
@@ -1,25 +1,77 @@
 
+/* Core styles
+ * 
+ * These style rules are quite neutral in regard to visual appearance, and
+ * are meant provide basic ergonomic enhancements such as:
+ * - play/pause icons
+ * - sound load blinking
+ * - position hiding when stopped
+ */
+
 .telemeta-item .telemeta-sound a {
     display: block;
-    background: url('../images/play.png') no-repeat left;
-    padding-left: 27px;
-    padding-top: 6px;
+    background: url('../images/play.gif') no-repeat left;
+    padding-left: 29px;
     height: 22px;
+    padding-top: 0.8ex;
 }
 
-.telemeta-playing .telemeta-sound a, .telemeta-loading .telemeta-sound a {
-    background-image: url('../images/stop.png');
+.telemeta-item .telemeta-position, .telemeta-item .telemeta-separator { display: none; }
+.telemeta-playing .telemeta-sound a { background-image: url('../images/stop.gif'); }
+.telemeta-playing .telemeta-position, .telemeta-playing .telemeta-separator { display: inline; }
+.telemeta-loading .telemeta-position { text-decoration: blink; }
+
+/* Compact box styles
+ *
+ * While remaining quite visually neutral, these rules are meant to make telemeta
+ * items more appealing and compact, and may not fit with all designs.
+ */
+
+.telemeta-item {
+    position: relative;
+    background: #EEEEEE;
+    padding: 0.3ex 1.3ex 1.3ex 1.3ex;
+    border: solid 1px #DDDDDD;
 }
 
-.telemeta-item .telemeta-position, .telemeta-item .telemeta-separator {
-    display: none;
+.telemeta-item dd { margin-left: 0; }
+
+.telemeta-item dt.telemeta-sound, .telemeta-item dt.telemeta-duration, 
+.telemeta-item dt.telemeta-description { display: none; }
+
+.telemeta-item .telemeta-sound { padding-right: 8.3em; }
+
+.telemeta-item .telemeta-sound a {
+    text-decoration: none;
+    font-weight: bold;
+    color: #000066;
+    outline: none;
 }
 
-.telemeta-playing .telemeta-position, .telemeta-playing .telemeta-separator,
-.telemeta-loading .telemeta-position, .telemeta-loading .telemeta-separator {
-    display: inline;
+.telemeta-item dd.telemeta-duration {
+    position: absolute;
+    right: 0.7ex;
+    top: 1.4ex;
+    font-size: 80%;
+    color: #000066;
+    padding: 0.4ex 0.7ex 0.3ex 0.7ex;
+    border-bottom: solid 1px #E0E0E0;
+    border-top: solid 1px #DDDDDD;
+    font-weight: bold;
 }
 
-.telemeta-loading .telemeta-position {
-    text-decoration: blink;
+.telemeta-item .telemeta-sound a:hover, .telemeta-playing dd.telemeta-duration { color: #0000AA; }
+.telemeta-playing .telemeta-position { color: #AA0000; }
+.telemeta-item dd.telemeta-description { font-style: italic; margin-left: 0.2em; }
+.telemeta-item .telemeta-creator, .telemeta-item .telemeta-rights { font-size: 90%; margin-bottom: 1px; }
+
+.telemeta-item dt.telemeta-creator, .telemeta-item dt.telemeta-rights {
+    float: left;
+    padding-right: 1ex;
+    position: relative;
+    margin-left: 0.2em;
 }
+
+.telemeta-item .telemeta-clear { clear: both; }
+.telemeta-item .telemeta-position, .telemeta-item .telemeta-separator { display: inline; }
+

diff --git a/tools/eztelemeta/design/standard/templates/content/datatype/view/eztelemetaitem.tpl b/tools/eztelemeta/design/standard/templates/content/datatype/view/eztelemetaitem.tpl
index 9f0604e17433e8d849d11dc3fdcff951544d62d3..45706f2f2557397ea84e13f6f6e2e63d211859ac 100755 (executable)
--- a/tools/eztelemeta/design/standard/templates/content/datatype/view/eztelemetaitem.tpl
+++ b/tools/eztelemeta/design/standard/templates/content/datatype/view/eztelemetaitem.tpl
@@ -1,29 +1,32 @@
 {eztelemetadata_set('eztelemeta_player', true)}
 {def $item=$attribute.content}
-<dl class="telemeta-item">
-    <dt class="telemeta-sound">{'Sound'|i18n('eztelemeta')} :</dt>
-    <dd class="telemeta-sound"><a href="{$item.mp3}">{$item.title|wash}</a></dd>
+<div class="telemeta-item">
+    <dl>
+        <dt class="telemeta-sound">{'Sound'|i18n('eztelemeta')} :</dt>
+        <dd class="telemeta-sound"><a href="{$item.mp3}">{$item.title|wash}</a></dd>
 
-    <dt class="telemeta-duration">{'Duration'|i18n('eztelemeta')} :</dt>
-    <dd class="telemeta-duration">
-        <span class="telemeta-position">00:00:00</span>
-        <span class="telemeta-separator"> / </span>
-        {$item.duration_str}
-    </dd>
+        <dt class="telemeta-duration">{'Duration'|i18n('eztelemeta')} :</dt>
+        <dd class="telemeta-duration">
+            <span class="telemeta-position">00:00:00</span>
+            <span class="telemeta-separator"> / </span>
+            {$item.duration_str}
+        </dd>
 
-    {if $item.description }
-    <dt class="telemeta-description">{'Description'|i18n('eztelemeta')} :</dt>
-    <dd class="telemeta-description">{$item.description|wash}</dd>
-    {/if}
+        {if $item.description }
+        <dt class="telemeta-description">{'Description'|i18n('eztelemeta')} :</dt>
+        <dd class="telemeta-description">{$item.description|wash}</dd>
+        {/if}
 
-    {if $item.creator }
-    <dt class="telemeta-creator">{'Creator'|i18n('eztelemeta')} :</dt>
-    <dd class="telemeta-creator">{$item.creator|wash}</dd>
-    {/if}
+        {if $item.creator }
+        <dt class="telemeta-creator">{'Creator'|i18n('eztelemeta')} :</dt>
+        <dd class="telemeta-creator">{$item.creator|wash}</dd>
+        {/if}
 
-    {if $item.rights }
-    <dt class="telemeta-rights">{'Legal rights'|i18n('eztelemeta')} :</dt>
-    <dd class="telemeta-rights">{$item.rights|wash}</dd>
-    {/if}
-</dl>
+        {if $item.rights }
+        <dt class="telemeta-rights">{'Legal rights'|i18n('eztelemeta')} :</dt>
+        <dd class="telemeta-rights">{$item.rights|wash}</dd>
+        {/if}
+    </dl>
+    <div class="telemeta-clear"></div>
+</div>
 {undef}

diff --git a/tools/eztelemeta/doc/Makefile b/tools/eztelemeta/doc/Makefile
index 5af893f3929cdc6cd3157a44b781e796d310e8c3..51562767b4fc46a4812918617e19a0ee1903f07d 100644 (file)
--- a/tools/eztelemeta/doc/Makefile
+++ b/tools/eztelemeta/doc/Makefile
@@ -8,7 +8,7 @@ README.fr.html: README.fr doc.css
 
 README.fr.pdf: README.fr.latex
        pdflatex $^
-       pdflatex $^
+       pdflatex $^ # Double run is sometimes needed
 
 README.fr.latex: README.fr
        rst2latex -lfr $^ $@