From: olivier <> Date: Wed, 15 Apr 2009 18:37:35 +0000 (+0000) Subject: eztelemeta: fancier item and player display X-Git-Tag: 1.1~651 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=218648bb362380bf7082afa64d396998b36a5753;p=telemeta.git 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 index 00000000..9d7a3ac1 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 index bc7336cb..00000000 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 index 00000000..34c7ca05 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 index 2a7e1bf2..00000000 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 9e9004fe..5064491f 100644 --- 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 f2d9b52f..cdc48307 100644 --- 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 9f0604e1..45706f2f 100755 --- 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} -
-
{'Sound'|i18n('eztelemeta')} :
-
{$item.title|wash}
+
+
+
{'Sound'|i18n('eztelemeta')} :
+
{$item.title|wash}
-
{'Duration'|i18n('eztelemeta')} :
-
- 00:00:00 - / - {$item.duration_str} -
+
{'Duration'|i18n('eztelemeta')} :
+
+ 00:00:00 + / + {$item.duration_str} +
- {if $item.description } -
{'Description'|i18n('eztelemeta')} :
-
{$item.description|wash}
- {/if} + {if $item.description } +
{'Description'|i18n('eztelemeta')} :
+
{$item.description|wash}
+ {/if} - {if $item.creator } -
{'Creator'|i18n('eztelemeta')} :
-
{$item.creator|wash}
- {/if} + {if $item.creator } +
{'Creator'|i18n('eztelemeta')} :
+
{$item.creator|wash}
+ {/if} - {if $item.rights } -
{'Legal rights'|i18n('eztelemeta')} :
-
{$item.rights|wash}
- {/if} -
+ {if $item.rights } +
{'Legal rights'|i18n('eztelemeta')} :
+
{$item.rights|wash}
+ {/if} +
+
+ {undef} diff --git a/tools/eztelemeta/doc/Makefile b/tools/eztelemeta/doc/Makefile index 5af893f3..51562767 100644 --- 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 $^ $@