[linterna-magica-commit] [378] Fix the design of the toggle plugin button.

[Ivaylo Valkov]

Revision: 378
          
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=378
Author:   valkov
Date:     2012-12-31 12:01:48 +0000 (Mon, 31 Dec 2012)
Log Message:
-----------
Fix the design of the toggle plugin button.

Modified Paths:
--------------
    trunk/data/style/template.css
    trunk/src/lm_interface_toggle_plugin.js
    trunk/src/lm_site_youtube.js

Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css       2012-12-31 10:28:23 UTC (rev 377)
+++ trunk/data/style/template.css       2012-12-31 12:01:48 UTC (rev 378)
@@ -88,7 +88,6 @@
     background: url('button-about.png') 0 0 no-repeat !important;
     line-height: 3000px  !important;
     overflow: hidden  !important;
-    border: 1px solid #36393E !important;
     bottom: 0px !important;
 }
 
@@ -122,7 +121,28 @@
     top: 0px !important;
 }
 
+.linterna-magica-toggle-plugin-outer-frame {
+    display: block !important;
+    width: 106px !important; 
+    height: 24px !important;
+    position: absolute !important;
+    right: 0 !important;
+    top: 0 !important;
 
+    background-color: #666666 !important;
+    background-image: -webkit-gradient(linear, left top, left bottom, 
from(#666666), to(#1a1a1a)) !important;
+    background-image: -webkit-linear-gradient(top, #666666, #1a1a1a) 
!important;
+    background-image:    -moz-linear-gradient(top, #666666, #1a1a1a) 
!important;
+    background-image:         linear-gradient(to bottom, #666666, #1a1a1a) 
!important;
+    border-color: #222222 !important;
+    border-width: 1px 0 !important;
+    border-style: solid !important;
+    -webkit-border-radius: 6px 6px 0 0 !important;
+    -moz-border-radius: 6px 6px 0 0 !important;
+    border-radius: 6px 6px 0 0 !important;    
+}
+
+
 .linterna-magica-remote-clip-buttons a {
     float: right !important;
     right: 0px !important;

Modified: trunk/src/lm_interface_toggle_plugin.js
===================================================================
--- trunk/src/lm_interface_toggle_plugin.js     2012-12-31 10:28:23 UTC (rev 
377)
+++ trunk/src/lm_interface_toggle_plugin.js     2012-12-31 12:01:48 UTC (rev 
378)
@@ -59,8 +59,12 @@
        toggle_plugin.setAttribute("id", 
                                   "linterna-magica-toggle-plugin-"+id);
 
+       var span = document.createElement("span");
+       span.setAttribute("class", "linterna-magica-toggle-plugin-outer-frame");
+       span.appendChild(toggle_plugin);
+
        wrapper = document.createElement("p");
-       wrapper.appendChild(toggle_plugin);
+       wrapper.appendChild(span);
        wrapper.setAttribute("class", "linterna-magica-toggle-plugin-wrapper");
     }
     else

Modified: trunk/src/lm_site_youtube.js
===================================================================
--- trunk/src/lm_site_youtube.js        2012-12-31 10:28:23 UTC (rev 377)
+++ trunk/src/lm_site_youtube.js        2012-12-31 12:01:48 UTC (rev 378)
@@ -587,30 +587,6 @@
        
     }
 
-    // Sometimes the toggle plugin button that should be bellow the
-    // HTML5/Flash player shows on top. The following tries to fix
-    // this.  Most of the time the bug occurs in Epiphany.s
-
-    var id = object_data.linterna_magica_id;
-    var toggle_plugin = 
document.getElementById("linterna-magica-toggle-plugin-"+id);
-    
-    if (toggle_plugin)
-    {
-       var lm = document.getElementById("linterna-magica-"+id);
-       var h_lm = parseInt(lm.style.getPropertyValue("height"));
-
-       toggle_plugin = toggle_plugin.parentNode;
-       var display = toggle_plugin.style.getPropertyValue("display");
-       var top = toggle_plugin.offsetTop;
-
-       if (!display && !top)
-       {
-           toggle_plugin.style.setProperty("top", 
-                                           (h_lm +30)+"px",
-                                           "important");
-       }
-    }
-
     // When YouTube's HTML5 player detects that the browser does not
     // have support for any clip, a warning div is displayed. It must
     // be hidden or it displaces Linterna Magica.