Add focus mode controlbar UI.

src/assets/css/simpread.css

@@ -1,3 +1,6 @@
+/*
+    Focus style
+*/
 .ks-simpread-focus {
     overflow: visible;
     position: relative;
@@ -6,6 +9,9 @@
     background-color: #fff;
 }
 
+/*
+    Background style
+*/
 .ks-simpread-bg {
     display: block;
     position: fixed;
@@ -22,4 +28,41 @@
 @-webkit-keyframes effect {
     from { opacity:0; }
     to   { opacity:1; }
+}
+
+/*
+    Control bar style
+*/
+.ks-simpread-constrolbar {
+    position: fixed;
+    right: 50px;
+    bottom: 50px;
+}
+
+.ks-simpread-constrolbar ul {
+    color: #96a0a8;
+    border: 1px solid #ededed;
+}
+
+.ks-simpread-constrolbar li {
+    list-style: none;
+    cursor: pointer;
+    opacity: .5;
+}
+
+.ks-simpread-constrolbar li:hover {
+    list-style: none;
+    cursor: pointer;
+    opacity: 1;
+    -webkit-transition: opacity .5s ease;
+}
+
+.ks-simpread-constrolbar span {
+    display: block;
+    width: 45px;
+    height: 45px;
+    background-repeat: no-repeat;
+    background-color: #999;
+    background-position: center;
+    border-bottom: solid 1px #ededed;
 }

src/contentscripts.js

@@ -55,7 +55,10 @@ function focuseMode() {
     }
 
     // background mask
-    $( "body" ).append( '<div class="ks-simpread-bg"></div>' )
+    $( "body" ).append( '<div class="ks-simpread-bg"></div>' );
+
+    // add control bar
+    focusConstrolbar();
 
     // click mask remove it
     $( ".ks-simpread-bg" ).one( "click", function( event ) {
@@ -92,4 +95,18 @@ function focusStyle( $target, style, cls, type ) {
         bakstyle = bakstyle.replace( style, "" );
         $target.attr( "style", bakstyle ).removeClass( cls );
     }
-}
+}
+
+/*
+    Add focus constrol bar
+*/
+function focusConstrolbar() {
+    $.get( chrome.extension.getURL( "./focus-controlbar-tmpl.html" ), function( tmpl ) {
+        $( ".ks-simpread-bg" ).append( tmpl );
+        var path = chrome.extension.getURL("/"),
+            $target = $( ".ks-simpread-constrolbar" ).find( "span" );
+        $($target[0]).attr( "style", "background-image:url(" + path + "assets/images/top.png)"     );
+        $($target[1]).attr( "style", "background-image:url(" + path + "assets/images/setting.png)" );
+        $($target[2]).attr( "style", "background-image:url(" + path + "assets/images/close.png)"   );
+    });
+}

src/focus-controlbar-tmpl.html

@@ -0,0 +1,7 @@
+<div class="ks-simpread-constrolbar">
+    <ul>
+        <li><span class="icon"></span></li>
+        <li><span class="icon"></span></li>
+        <li><span class="icon"></span></li>
+    </ul>
+</div>

src/manifest.json

@@ -19,5 +19,9 @@
       "run_at"  : "document_end"
     }
   ],
+  "web_accessible_resources": [
+    "focus-controlbar-tmpl.html",
+    "/assets/images/*"
+  ],
   "manifest_version": 2
 }