From ac5545e9cae7a2127810e988b245ec03b9b476e6 Mon Sep 17 00:00:00 2001 From: Kenshin Date: Mon, 19 Dec 2016 18:21:01 +0800 Subject: [PATCH] Add focus mode controlbar UI. --- src/assets/css/simpread.css | 43 +++++++++++++++++++++++++++++++++ src/assets/images/close.png | Bin 0 -> 953 bytes src/assets/images/setting.png | Bin 0 -> 1132 bytes src/assets/images/top.png | Bin 0 -> 751 bytes src/contentscripts.js | 21 ++++++++++++++-- src/focus-controlbar-tmpl.html | 7 ++++++ src/manifest.json | 4 +++ 7 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 src/assets/images/close.png create mode 100644 src/assets/images/setting.png create mode 100644 src/assets/images/top.png create mode 100644 src/focus-controlbar-tmpl.html diff --git a/src/assets/css/simpread.css b/src/assets/css/simpread.css index e500f236..251dab64 100644 --- a/src/assets/css/simpread.css +++ b/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; } \ No newline at end of file diff --git a/src/assets/images/close.png b/src/assets/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..25f677b8e2e54f3881ee1c612353fec9b1a6a355 GIT binary patch literal 953 zcmV;q14jIbP)TfSRg)eSUtv zys@!y*3AJn;I!K(eZ;AnB1@%VaY5qItu^!}nEnMOFL4;wq{-U#(WZ-`?J~ z?My~TG_0Z(p6BI7WSL~r7z4*~N+Pmuj1dv}L_|De42&^F5t-lG+IrHS-{STX0Dx2~ zH6tP`B9e9-2O^@z7?5Q6d?F%qySuwDJ98uMrEhYnRC*5JF3C!`TvSzt#gtX`<8JWw za4s7JfWg5*8w3G@Ab9m=ia=FStyWp9)vnCH)WPWJ=pB;lj^lXY(x|FxqtQSR1Rj8= zsZ{F13A>g+E|hSQe005axW(&X%BH}d~jU<2{6NyCJah#vZMq?d3ENdmx9yyWlyh5q!B7on!3Aj;1RsRu@{LaqKi(c?3%H{G)Yi%CD-`!ZPO(ywSv)NPtZ;MEN zb93|0tKdw$N25mQ00000NkvXXu0mjfWvRKd literal 0 HcmV?d00001 diff --git a/src/assets/images/setting.png b/src/assets/images/setting.png new file mode 100644 index 0000000000000000000000000000000000000000..2066034c1f3364c6bcb2680662b768a534f4b674 GIT binary patch literal 1132 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_*1mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VX;-`;;_Kaj^> z;_2(kevgGqjEN`qTLMr6<6Tb|#}JFtwO97~g#-$)e~?exUhvW-f;%~((@XW1#{F3W z^BUX}8rcnwxK%Pd_Lis;VqOzc!;&n*HPtKdK#QM&11qOa^2Y0@*Xf+|%zJj`%>Oyo z#{Vs^On!c@_ZDDu`fvQ=D2<9 zU~MsE(CY-jH24d=JM>{m&jT5__X$Nkx)YIpr>t5@huc{0&F#Y0Z_S<9x6w|1Fp zMTnG@KHeC5yl-t~lY1TK>072@LKTUpx^mSI^{f$Fop~zzlhHj6^=*5NQ-gd%;}S0f z?y@&)nI0;b{&mI2_>(hA+*i-eJNaV5*1WrikL-Te-NQHM*2c%n-%njqd`pL;y6VFF z#meqsybDgR+pt6--22#~;KX~pCekJ=SSwW*=B$a6*Xo^peewmJ)wgdiDb#%MUUlv= zQK7%v`S(3qw{FU(+ikU0_Ipp}cH_XMOs*?T5;r=x`^xCR^#(Zhg4*(u1u6%U;{wQ$uY73o8Qy zD;|X}C>nC}Q!>*kK^jbS4NPWflz6oQff{^4HWcTlm6RtIr80Qt zCZ?zQCZ=a5XDgWN8R!}6nkfVtnkiIRn8ll!C?ITC$S5f(u+rBrFE7{21Ze_dpeDWi zqV&5rm-+z>mH-(Xl2MwQWM$=&pIn-onpa|F6#!IP%wV|u|89Mt8c8HIV5_aHJW?~$ zGfEf?4GoNJH83a`no|#gT0al~&W2Fk3LB5%}sU?*KsSIFu=@;as+iwa3xkwzz zHs27SDh5MiOLIeG3sYkwi3@q+KqW#*N`f=1QW;DP^$fk8?l?Bg0m{ZB$%Y1bGNfhZ zqyoc0KO;Xk6%-Oh`S~UK#hE2wj$UeFab;$5ex6=lYKeYwN}g_JZaP9RIZwa1C|Tdo e(8SmRLK+(D0o}^gCddi2iow&>&t;ucLK6Tb)2S~2 literal 0 HcmV?d00001 diff --git a/src/assets/images/top.png b/src/assets/images/top.png new file mode 100644 index 0000000000000000000000000000000000000000..ca2bbb9b8652ab4eef7aa2a1c192659b56e032f8 GIT binary patch literal 751 zcmVKl|M*TVHn1LZ^~8g&3n0t4nitsmWUeS-cmym zK|?fZj+Ry~H8dqekmisX6$Jg6gKBCBtgI;nxr>+$W`bT4lB)>8d7qYh>Y$>xL0WvK zkMDf%^E>Z(-j8FF*h%f#QTJUyAu0wivw{n%tE-Pm!rk94E-r35A<@AxNd*CFYilhC zf-~+uEXmxxU($5^zod3kwZfQE*K1aK7?FtdG|T*@?XL(;WmGPyV0%;j<<5(!|7 z3>q67Q|^A<-FqdK1VMniBk4AeughnR#vuo2Te^)m1cIw z%r2W*NmyWJ8K4_D4@`#VCB=YCz;HYsuZqXx0IaR8Z3HwoH`f4nfi9ppVm<-%%+Jq{ zFDxv41bQTWHnT93BA^o(kyKk+S_-Voprxhd5OB}T&PAV@*$1F|Zfz(X@T6@{AFd!T1_c6O3=T3TAl02d^U0SdE}bP{+Z z>4-_9y}kXoyWf=5;qHXtx%+EL{WCK&GaG`6D3wYbaQ7ier`_Em^%G$Sx6G^~PbWWF zugt7>J9B{L<>jwHpQM*Sbe7vgzynD?@@qG<=fK73>FL?+%tPgJxo<$Pq-Q{o-(Cs< zkAd5ga%T1vxH2_0HCL#4sMXcg??At#CqNDu{BzM-TU(QoP5@(>OlI+4&7+FNVpYIV hNpEcTpZwnezX9||SNM2IGE)Em002ovPDHLkV1jl7MYjL| literal 0 HcmV?d00001 diff --git a/src/contentscripts.js b/src/contentscripts.js index 6e5efd5a..6b1a5ed4 100644 --- a/src/contentscripts.js +++ b/src/contentscripts.js @@ -55,7 +55,10 @@ function focuseMode() { } // background mask - $( "body" ).append( '
' ) + $( "body" ).append( '
' ); + + // 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 ); } -} \ No newline at end of file +} + +/* + 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)" ); + }); +} diff --git a/src/focus-controlbar-tmpl.html b/src/focus-controlbar-tmpl.html new file mode 100644 index 00000000..ded40cf3 --- /dev/null +++ b/src/focus-controlbar-tmpl.html @@ -0,0 +1,7 @@ +
+
    +
    • +
    • +
    • +
+
\ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 3a6da866..e0e1dd7f 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -19,5 +19,9 @@ "run_at" : "document_end" } ], + "web_accessible_resources": [ + "focus-controlbar-tmpl.html", + "/assets/images/*" + ], "manifest_version": 2 } \ No newline at end of file