FLUID-4596: adds reasonable styling to the language and caption menus…

…. Also: * removes horrendous red focus outline in favour of the default for now * removes apparently unnecessary call to nonexistent event (eek) to avoid console errors when navigating with the keybooard * improved labels for the language menu items
amb26 · Feb 28, 2012 · 3cf9300 · 3cf9300
1 parent e0e0d45
commit 3cf9300
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 29 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -1,11 +1,5 @@
-/*
- * Videoplayer container
- */
-
-.fl-videoPlayer:focus,
-.fl-videoPlayer :focus {
-    /* TODO: This is a temporary style, to be replaced when we have the final designs */
-    border: 1px solid red;
+.fl-videoPlayer {
+    font-family: sans-serif;
 }
 
 /*
@@ -159,22 +153,42 @@ a.fl-videoPlayer-button-wrapper {
     display: inline;
 }
 
-/*
- * Language menus
- * colours are temporary
- */
-.fl-videoPlayer-languageMenu * {
-    display: block;
+.fl-videoPlayer-languageMenu {
+    position: absolute;
+    bottom: 2.3em;
+    padding: 0;
+    width:22%;
+    font-size: 15%;
+    background: #f2f2f2;
+    z-index: 2;
 }
-.fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem:hover {
-    color: yellow;
+
+/* TODO: This is a temporary workaround to absolute positioning issues with the menu buttons */
+.fl-videoPlayer-captions .fl-videoPlayer-languageMenu {
+    margin-left: -3em;
 }
+
+.fl-videoPlayer-transcript .fl-videoPlayer-languageMenu {
+    margin-left: 0em;
+}
+
+.fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem {
+    display: block;
+    background: #fff;
+    width: 81%;
+    padding: 5% 5% 5% 10%;
+    margin: 2% 0 0% 2%;
+}
+
+.fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem:hover,
 .fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem-selected,
 .fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem-active.fl-videoPlayer-menuItem-selected {
-    color: orange;
+    background-color: #ffcc00;
 }
+
 .fl-videoPlayer-languageMenu .fl-videoPlayer-menuItem-active {
-    color: green;
+    background: #fff;
+    font-weight: bold;
 }
 
 /*
@@ -199,6 +213,7 @@ ul.fl-videoPlayer-captions-languageList,
 ul.fl-videoPlayer-captions-languageList li {
     display: block;
 }
+
 ul.fl-videoPlayer-captions-languageList .fl-videoPlayer-caption-selected {
     color: yellow;
 }

diff --git a/demos/Mammals.js b/demos/Mammals.js
@@ -47,14 +47,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         src: "videos/Mammals/Mammals.en.vtt",
                         type: "text/vtt",
                         srclang: "en",
-                        label: "English Subtitles",
+                        label: "English",
                         kind: "subtitles"
                     }, 
                     {
                         src: "videos/Mammals/Mammals.fr.vtt",
                         type: "text/vtt",
                         srclang: "fr",
-                        label: "French Subtitles",
+                        label: "French",
                         kind: "subtitles"
                     }
                 ],
@@ -63,14 +63,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         src: "videos/Mammals/Mammals.transcripts.en.json",
                         type: "JSONcc",
                         srclang: "en",
-                        label: "English Transcripts",
+                        label: "English",
                         kind: "transcripts"
                     }, 
                     {
                         src: "videos/Mammals/Mammals.transcripts.fr.json",
                         type: "JSONcc",
                         srclang: "fr",
-                        label: "French Transcripts",
+                        label: "French",
                         kind: "transcripts"
                     }
                 ]

diff --git a/demos/VideoPlayer.html b/demos/VideoPlayer.html
@@ -86,14 +86,14 @@ <h1>Infusion HTML 5 Video Player</h1>
                             src: "videos/ReorganizeFuture/ReorganizeFuture.en.vtt",
                             type: "text/vtt",
                             srclang: "en",
-                            label: "English Subtitles",
+                            label: "English",
                             kind: "subtitles"
                         },
                         {
                             src: "videos/ReorganizeFuture/ReorganizeFuture.fr.vtt",
                             type: "text/vtt",
                             srclang: "fr",
-                            label: "French Subtitles",
+                            label: "French",
                             kind: "subtitles"
                         }
                     ],
@@ -102,14 +102,14 @@ <h1>Infusion HTML 5 Video Player</h1>
                             src: "videos/ReorganizeFuture/ReorganizeFuture.transcripts.en.json",
                             type: "JSONcc",
                             srclang: "en",
-                            label: "English Transcripts",
+                            label: "English",
                             kind: "transcripts"
                         },
                         {
                             src: "videos/ReorganizeFuture/ReorganizeFuture.transcripts.fr.json",
                             type: "JSONcc",
                             srclang: "fr",
-                            label: "French Transcripts",
+                            label: "French",
                             kind: "transcripts"
                         }
                     ]

diff --git a/html/videoPlayer_template.html b/html/videoPlayer_template.html
@@ -30,7 +30,7 @@
                 </div>
 
                 <div class="fl-videoPlayer-controller-buttons-secondary">
-                    <div class="flc-videoPlayer-captionControls-container">
+                    <div class="flc-videoPlayer-captionControls-container fl-videoPlayer-captions">
                         <a class="flc-videoPlayer-captions-button fl-videoPlayer-button-wrapper" href="#">
                             <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
                             <button class="fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
@@ -41,7 +41,7 @@
                         </ul>
                     </div>
 
-                    <div class="flc-videoPlayer-transcriptControls-container">
+                    <div class="flc-videoPlayer-transcriptControls-container fl-videoPlayer-transcript">
                         <a class="flc-videoPlayer-transcripts-button fl-videoPlayer-button-wrapper" href="#">
                             <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
                             <button class="fl-videoPlayer-button fl-videoPlayer-transcripts-button"></button>

diff --git a/js/MenuButton.js b/js/MenuButton.js
@@ -110,7 +110,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         // focus must be return to the button
         that.locate("language").fluid("activatable", function (evt) {
             that.activate(that.locate("language").index(evt.currentTarget));
-            that.events.activatedByKeyboard.fire();
             return false;
         });
         var noneButton = that.locate("showHide");