From 218648bb362380bf7082afa64d396998b36a5753 Mon Sep 17 00:00:00 2001 From: olivier <> Date: Wed, 15 Apr 2009 18:37:35 +0000 Subject: [PATCH] eztelemeta: fancier item and player display --- .../design/standard/images/play.gif | Bin 0 -> 1204 bytes .../design/standard/images/play.png | Bin 1263 -> 0 bytes .../design/standard/images/stop.gif | Bin 0 -> 1175 bytes .../design/standard/images/stop.png | Bin 1122 -> 0 bytes .../standard/javascript/eztelemeta-player.js | 13 +-- .../standard/stylesheets/eztelemeta.css | 76 +++++++++++++++--- .../content/datatype/view/eztelemetaitem.tpl | 47 ++++++----- tools/eztelemeta/doc/Makefile | 2 +- 8 files changed, 97 insertions(+), 41 deletions(-) create mode 100644 tools/eztelemeta/design/standard/images/play.gif delete mode 100644 tools/eztelemeta/design/standard/images/play.png create mode 100644 tools/eztelemeta/design/standard/images/stop.gif delete mode 100644 tools/eztelemeta/design/standard/images/stop.png diff --git a/tools/eztelemeta/design/standard/images/play.gif b/tools/eztelemeta/design/standard/images/play.gif new file mode 100644 index 0000000000000000000000000000000000000000..9d7a3ac128ac3f730ca0e4a93f789addcf869ac0 GIT binary patch literal 1204 zcmdVZi!<8?0KoBtp3zg~ZXWA;MyDRFyKUxHudYduM6U?zROhv*j@29%ES@0}loUy6 zy=j%AdUZ_MSg%o9Hm`()gplAT4CEmcfQ)vf-I5SmrV;i;Ku&BeUjFzcJu=9t_Wi;RWAhD+BNx zG=44!KZnLMujCwf=YZF9n5bM1Dt9#`cRnbO8=SZ3U7!ulXZa9xz66~gK^t7a_ANAo z64+q`reBfaD$(#=;R1|gfRl6xk`_)fAV_+Dk~WgaM34+f(jkIu@F(j6$l74?PB3{F zS)vUrF+`G=qR5NrGHp zm@4Vrs@0^bWo)%Dh6=_|<&iW^JXIV^1Mg8eaWoK1lg8GlQfk%{9?5^LWhFlrrPK*= z^@8kr7Oqi<(oh#lL+ z&J*I|P7%3tv$$JU(k(9U7ToU!%6kAx&j#fMP|_=_=oM0Wg_SRX2QNj`S0dW0?V5hc z!vSgips-<3*!UV~9NKLj61I)(wvULPzmfFNcLwOZp>baC`@`Xh_0h?-*MIK~Pw)LP zEgPHW(PuVCX7?v%c=S2(n|b*=hUDD>ILqFeT#`>M$!ECW99K5GqL^RVWAF|bJSB5Y zxxBv1;vca1O140`bYkPgA$J4hY$~~1hiiah6A%Lcu(qw_i&UEu&DM?@*wt)HHBzZm zw5O5mAIZQ25Cmn4BZWc%Dv#yLW0gv!R;!PWb;l=Z^*WtSuh$#?4>@X1K~F;r5O>H) z|2+XQ)k6$s=Uvlo^XUy3B0}e)39z_;|LH$^WHRh9a zteL|E^>Q4Y2yL&OqCl)0?AT*Q@KCp?A<^nNp9AZs7A^r+HO4>Ax<+6gGO!)jtzUfK zWp3s5by|&)%Ojs`$)else%FK#SzJ$NsB;nC-jwFqz2`KLC=DsUi7sv+j8yZ{zjvi! zM-y$`xVVd^Cib1-MSX~}d53>UmaQFko(0@LYjKI(&JS_exV6> zwrKJUjd1a&M~xRDpZiU_dL)!te)?s^4!=1*z!?2!Wpo$(FOxIp8e;Zi9sLpJAqEM} zP9$g_t+FkP>6@gsqs|(~#_Nv9`R{8ksd0@nMnFNW+m(;sPQre1cpGSUhh$Z9`!w+@ zBr)2djqGkb!z7s{4?n?rq$a76rO9=WQy0zYPXkP1_5~lx-Q|oxlWWnmu**r2eZ_Y9 vS`hVF{4T%H#_1;~OXqw080bgmF_y))6pX7Ayz{0U{dslTg*bmG6yp0YF;Ml$ literal 0 HcmV?d00001 diff --git a/tools/eztelemeta/design/standard/images/play.png b/tools/eztelemeta/design/standard/images/play.png deleted file mode 100644 index bc7336cbaf6cfa0e6bda3aeca45592cf9aee083f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1263 zcmVRO)uoq1S7^9f`m|()QT7q3zRDDZoA!mm+kKRHRHvWr8Trpax$6BnJ2$< za?TmS1}lGJ(gM91R3BO=K?AyhR&$nei&vc2{Po_74WNgB_dyRL$RVs00LoiNNB4k9 zp~7={efE;$IMM%t^Cu>EgE)m@ebkXkX1DZYWN&wzJv}uNR>WWB4(=2c3#F1OR~ro# zHZEEE!591W_+`g&!pDO1Cnk4*7{ksC5AI6v=D{@kwrifqS{SnBs)40i$n;#m`9hP6 zQ%m>__hw9$KYLoAJO2=F{73269huA3I*K;_Z>Vwik<%8$a7io){up5N&Hab1)6tW z$nw<>i|pEB;rR+LP4&`@Bs)LuIzjM(Ub-I@4s z-a<<714T1vLALe8cyS=b$?r7JvE&gX8fehhhM_c11?ddnJq_5&1G>LNosURMPI$rs?bUzMk^m z=ChQRlaHE02#~RafOI={S*sA|5CC@EHI_(uzo05pgrZHY0?;s7#u- zvik0Q^NRDDKXmN!xyY-2VnvCruC%>Iq|yMH_IYHi#oc@;-4FBFu;+#wYaEr6V-+};4X*#>7>P`w25s=F5j$Un_`Vw1}szqrlzaRmE4KV z;q}p+EL;T^9LI^;;6kCGhli5oMcseB+Axx(YS3R>4(+%Zid4eHloBaG>xjjrI=|mp zR)5aa9#ksskKNIYu@z|1ah%|>Kgh_)hy+qoyn8s59Y+<`fRv&yoiGvrwMNubkt&)r zZ^fhe3oALD2P*6SAgka4u!~WD))l!NhMg0T7APrn=t)(d%j&!LJB@`hPy-r{eMd$zk002ovPDHLkV1kK*W?}#U diff --git a/tools/eztelemeta/design/standard/images/stop.gif b/tools/eztelemeta/design/standard/images/stop.gif new file mode 100644 index 0000000000000000000000000000000000000000..34c7ca050628fe4319c8c89598467c165ae74843 GIT binary patch literal 1175 zcmdthi!<8?0KoAuOj@jKG0}Fb+RUxJwOBWb^YgeQ+%jRU>vd*{n_Jh-VG>P4g*?3C zm5dwp+&ns_*KM@ybgrSbob!l~NJ0qllV3>0Py9s4WA<7~2{0V(8j1DKz#khPqE`RB>d{KOXf>1CYR%jtSkX&b2!x`2HhJ{cl z4KK1MGNefiaYV5_l4<|EXbxc8Z!yI&Y&({{AIq^4I9mjc?iOd^3(h>g%o1N_Nh=kn zmCg~l2T9!hWG<4zH6&LeUsuU8s^zz9;BTrIzO2z_)GXbpk&$aP={#*3AHK_zf5nH% ze0^G-DZLKPtXuh^Uh>^fP-cTBw{i7;qa?RUliLhYnjw1gBBce&Y&GSzXsE554_X%s zTbCGZih}kvcIOJc%gF57V0ItVvbrHox0=;ssOVWO?*S`%!OGsX%HP0}K0{@nrus2h z^%&wkf%s20>i*pPv0vZ#RP*qurs)~jG^lGC)U*%lI)=5qf~|gma`2_HZ+w5~)yi|> z^0SHUp~>yPCJm#LO2L$RczWm6lu|IG9TDw}h<3+jH^=7SY3aIfVRuRa&nOJji$>An z_N;PmR*8t05!s4PqS}+F5a}wiaBS_^zG4lQs}aTe{xWD(gIW*-mp2d!PrB_1$YR_)i;DKbK-~?r8q?{tKhkmvXiX z%zuzy@Nk&KAT+Tv@lnd}q`!UZ1Gy-#3Lk#DBiX$xxtn?78i-CTJ;QV5I}owr?nlIs z3`M7wf8O!7OF}ZxN%RjQja6h02ospGj&l*UXYjQ?soCmLFP1CuynCvxXZKD2nztjf zz;UmRIJAdb$OmLc9^0cOtk_w7n$;Os{)UHZ^h1?Xm2W7|*}o_C;!B69CKg^095Apn z5lAcxeenZb0>~{(x4Z4Or?jW-IcLU)vde;ii{Ip%$!{*7 z`QDZlcI_j2z+YsEvL+krixw<5?RtN{R2w~dak z1Jgo9M+^G!DbMrb{{$BfOm715K8Ce7J&?+-8_CGE!%4rCORR6~+AAoT@c~ zKt;hROW*ori#~GN^StQ3;KG6F4ImC-XLfFV(&4pjE}NgwtjSs!vOiS=3(bhj<&a~g z4nLe-pcnXmB~in`~mGXtXo{AHBWiq0o5?n{DxD*#_8N}jry?8m4G(iWbZhN-n(2A2wgBtNjweG_;#GQ`NQP)JP zGH|`oRvTmC@PA|){S&zrbV0`zsaj=eDZc_t)2%7X(AdkoQYFn8+l&#tsxs+Z$m**% z1we7%=^esOf0@gz8ys})M=F9LAyTl=>`|VXX*!+rAB@S9Uz-30efZRwXyWr`eQw|A z@E{3O^q(hv&r_xEG|LaH8)>f97f`*%cVqJ8Pe9WED3wb3@xnWoyCKgg6>oTK*bu3N zAYtjg&AZ#AeJ2)#T)5_|YOOIj9G^Rs6*K3SzyP}nR<)}0la0U}_uJ8^o3a>kO>9eI zo8n)#447|(oW0zjJm*iYj;0RgW$8Cy-t)Y830x|b^v+_cR@I|Zjlf9FHNw$mJF=5z zBnBK4Q%a-&tz)VSE&jODR_CuZZ`JGm@!|N~q1(`k=Xv3Me~^iZ2?-3G<;|BOncl6i z#-$WF*D)M`W)OE&tSTm*3(0u)#O<2S0`&*}Aj{wauq*Ls)))CahMgDS3X~K&>Ppor oXZ6*atBm;?&;$a{^VD+2KSH?Vzb@>o>;M1&07*qoM6N<$f|86J&j0`b 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 $^ $@ -- 2.39.5