From 3eb319565f7b8d6557ff41109be8b5cf1ffc390a Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 10 Dec 2013 16:12:18 +1000 Subject: [PATCH 1/2] Closes #22 and closes #19. Fixed height for specgrogram container, loading gif, title attribues for playback controls. - Loading gif is just the background image behind the spectrogram, which gets covered when the spectrogram image loads. --- src/app/annotationViewer/_annotation_viewer.scss | 13 ++++++++++++- .../annotationViewer/annotationViewer.tpl.html | 3 ++- src/app/listen/listen.tpl.html | 5 +++-- src/assets/img/load.gif | Bin 0 -> 2608 bytes 4 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/assets/img/load.gif diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss index 61acadda..0bd87a2e 100644 --- a/src/app/annotationViewer/_annotation_viewer.scss +++ b/src/app/annotationViewer/_annotation_viewer.scss @@ -11,9 +11,19 @@ $marqueeBorderColorInactive: #00FF00; baw-annotation-viewer { + + width: 100%; text-align: center; + + + & .annotation-viewer-ctrl { + background: url(/assets/img/load.gif) center center no-repeat; + + } + + & #scroller { display: inline-block; } @@ -59,13 +69,14 @@ baw-annotation-viewer { & #scroller{ + overflow-x: scroll; overflow-y: hidden; line-height: 0; } & .annotation-viewer { - + height: 255px; display: inline-block; position: relative; line-height: 0; diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html index 1b13d55f..2ba6b9b6 100644 --- a/src/app/annotationViewer/annotationViewer.tpl.html +++ b/src/app/annotationViewer/annotationViewer.tpl.html @@ -1,5 +1,6 @@ -
+
+
diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html index a22e0e0f..d8e3624b 100644 --- a/src/app/listen/listen.tpl.html +++ b/src/app/listen/listen.tpl.html @@ -7,6 +7,7 @@

Site: {{model.audioRecording.siteId}}, {{absoluteDateChunkStart() | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}

+
@@ -18,7 +19,7 @@

Site: {{model.audioRecording.siteId}}, - +

@@ -35,7 +36,7 @@

Site: {{model.audioRecording.siteId}}, - +

diff --git a/src/assets/img/load.gif b/src/assets/img/load.gif new file mode 100644 index 0000000000000000000000000000000000000000..87e08733daccd0dbe32f10f986482f44664259d5 GIT binary patch literal 2608 zcmdVcdr(tX9tZGCZgP`cW8N3Y4Ud398I{LcrC8k#35?BOUM@eXTSXU^uL8Xv_7!}JS5kf&QNEBDGifyN&yKJzuJ3H-vyF1f8f1ZEN zna}*r_j@9vBZAkUAshWh*aXJ%$bM@M^mdmlf3 zeEYHGAvZGC;c&1N$g3?`GQsj2Dt^XILt ztva1KuyoyuK+*Ha<@ zJI?l+UlJRhn1F>!!q@l*f=-UD)eBczKmefmkX&^XmqsChxhY1WM|Zs@D@1ta^$^7c zd+@6X4F_}mwzq99S+Q|z;8o>Xv^yC@9~nO2!vQFeEltZo_AQBrcTw}CbOy`>2rfKS zb&LjwrRGyvY&jotFHjH@vw@nu+q21{EeaNAFUDc1DcbB)=P-75gqq$FPgh5(B|R8J z9i={fy-6LdF0%kkwfO7nkac2A0g(nL;Gqwty_UX@!R`r@0wlCsjA{bVB5f_P4f;&w zHm1vi+R-oH8(8sHf^aHBL%P8XPrACXxHZO@zn{lZ70({2T^X8$3aSs1>!O2mt%lu2 zWkzujPHaD2*dL29f&*Bcb4p?n`yJxL5h`Jk&FR;TIwb-c@h2nT`{LkDAH!cdH@UB% z6n~>O2BzJl_K23MIys7cw=Y;Ho+tq?T0FcXOZI|?2{Y(206_#EVJWE&pbR!EtD?fy zQ$)^7*QD!obkPb_O1M*EvB7o*dt8VhP_xdC8nXa=)uqi}qHfkm=&pIhM1#sgd-qLhabeqAm8R<1~MJ zmV0!I{tD-nP{%yIm@C462WZbbVgK%_v`f6Px=gOEpKk=o!w-M&brO+#h05>D*)XP$~ zU+o^R`~uk3<;_#vIz~t|4@=>Gdx`D_cw+@8yY8flO9ZY4_%@^v)8_y58V`SI8JR)$ zH1I-e4;>`YsKpIGzcb?hy-}XWnU8RXQF)z+4D!Fw%xQcqr6SU*C`+l0z>O>wZd)({ ziUb$|T{iuP!cyPJog=yeCrY{CwViJI9uPW?q}D$D&ggW6QT~(|ixn6NhkasB^#5!` z`fVF=k`9vgMB0$<5Uu2Tr_u1S_MgYvCLDae>XhC9yVC)KK9V^@F_S30RX z86U1nz$Nb{UyeDtJoW@|7@c(L4hku9Ubp|yH=H_Ong~EY-Ml$Jbn}DG^diOkXwXYG zQ+8HS9iO$fr}2mK!*C5tC_Wzi_4aH*wJfB0<{I@8^g3Ru)3ai)e%la=N6Yi z48}>^7RlG|o#qTq$mP5-f zZ*k?k954{oFDP1iv+P&%K2C~*~ z*M)5dy*H-jI@-UwIT;i^GF%*`1k7b8rR7k8rF+6)+Eze;@?0bf?WRhjZO4d}h&#lW zvss5#M2wsRcvu)nCl4^)gRSj0!9%<2I+ zlLTcl2Sm(FXkuVYH9lceZ5o;yQN?8TPngqtRHlh*+u}L~x-w7piV{{y{nuXv^kugj zZ>(D13 Date: Wed, 11 Dec 2013 10:39:49 +1000 Subject: [PATCH 2/2] Code review for spectroLoading branch. - Corrected bad default image height (255px --> 256px) - Moved default image height to image element (divs around image are designed to flex around image... only the image should have fixed dimensions) - Corrected an existing bug in the enforcedImageHeight binding - it should now work correctly (also checked, the enforcedImageHeight does override the default height created above) --- src/app/annotationViewer/_annotation_viewer.scss | 7 +++++-- src/app/annotationViewer/annotationViewer.tpl.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss index 0bd87a2e..96bd7d5d 100644 --- a/src/app/annotationViewer/_annotation_viewer.scss +++ b/src/app/annotationViewer/_annotation_viewer.scss @@ -76,7 +76,6 @@ baw-annotation-viewer { } & .annotation-viewer { - height: 255px; display: inline-block; position: relative; line-height: 0; @@ -85,7 +84,11 @@ baw-annotation-viewer { & img { - + /* set a temporary height to avoid UI jumping around on image load + -- note: this value is usually overridden with a element level style by + the enforcedImageHeight value model. + */ + height: 256px; } // overlay diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html index 2ba6b9b6..0c198d54 100644 --- a/src/app/annotationViewer/annotationViewer.tpl.html +++ b/src/app/annotationViewer/annotationViewer.tpl.html @@ -18,7 +18,7 @@
+ ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">