From 7817c72ea13b67d466a5231ac1f0b19c78dee4c5 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Tue, 2 May 2017 15:58:43 -0700 Subject: [PATCH] Another checkpoint --- scripts/system/html/css/SnapshotReview.css | 83 +++++++-------------- scripts/system/html/img/blast_icon.svg | 20 +++++ scripts/system/html/img/fb_icon.svg | 13 ++++ scripts/system/html/img/fb_logo.png | Bin 1257 -> 0 bytes scripts/system/html/img/fb_logo72.png | Bin 1587 -> 0 bytes scripts/system/html/img/hifi_icon.svg | 19 +++++ scripts/system/html/img/shareIcon.png | Bin 15201 -> 0 bytes scripts/system/html/img/shareToFeed.png | Bin 15486 -> 0 bytes scripts/system/html/img/twitter_icon.svg | 12 +++ scripts/system/html/img/twitter_logo.png | Bin 552 -> 0 bytes scripts/system/html/img/twitter_logo72.png | Bin 1394 -> 0 bytes scripts/system/html/js/SnapshotReview.js | 34 ++++++--- 12 files changed, 116 insertions(+), 65 deletions(-) create mode 100644 scripts/system/html/img/blast_icon.svg create mode 100644 scripts/system/html/img/fb_icon.svg delete mode 100644 scripts/system/html/img/fb_logo.png delete mode 100644 scripts/system/html/img/fb_logo72.png create mode 100644 scripts/system/html/img/hifi_icon.svg delete mode 100644 scripts/system/html/img/shareIcon.png delete mode 100644 scripts/system/html/img/shareToFeed.png create mode 100644 scripts/system/html/img/twitter_icon.svg delete mode 100644 scripts/system/html/img/twitter_logo.png delete mode 100644 scripts/system/html/img/twitter_logo72.png diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 7d4239985f..c0d5991e0b 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -125,36 +125,21 @@ input[type=button].naked:active { font-family: Raleway-SemiBold; font-size: 14px; color: white; - width: 60px; + width: 75px; height: 100%; - margin-right: 10px; - margin-bottom: 15px; + margin-bottom: 0px; +} +.showShareButtonsButtonDiv.active:hover { + background-color: rgba(0, 0, 0, 0.45); + background-size: 2px; } .showShareButtonsButtonDiv > label { text-shadow: 2px 2px 3px #000000; - margin-bottom: -10px; + margin-bottom: -14px; margin-left: 12px; } -.showShareButton.active { - border-color: #00b4ef; - border-width: 3px; - background-color: white; -} -.showShareButton.active:hover { - background-color: #afafaf; -} -.showShareButton.active:active { - background-color: white; -} -.showShareButton.inactive { - border-width: 0; - background-color: white; -} -.showShareButton.inactive:hover { - background-color: #afafaf; -} -.showShareButton.inactive:active { - background-color: white; +.showShareButtonsButtonDiv:hover > label { + text-shadow: none; } .showShareButtonDots { display: block; @@ -164,56 +149,44 @@ input[type=button].naked:active { font-size: 60px; position: absolute; left: 6px; - bottom: 42px; + bottom: 32px; color: white; pointer-events: none; } .shareButtons { display: flex; - align-items: center; - margin-left: 0; - margin-bottom: 15px; - height: 100%; + align-items: flex-end; + height: 40px; width: calc(100% - 60px); + margin-bottom: 25px; + margin-left: 0; +} +.shareButtons img { + width: 40px; + height: 40px; +} +.shareButton { + width: 40px; + height: 40px; + display: inline-block; } .blastToConnections { - text-align: left; - margin-right: 20px; - height: 29px; + background-image: url(../img/fb_logo.png); } .shareWithEveryone { background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center; - border-width: 0px; - text-align: left; - margin-right: 8px; - height: 29px; - width: 30px; - border-radius: 3px; -} -.facebookButton { - background-image: url(../img/fb_logo.png); - width: 29px; - height: 29px; - display: inline-block; - margin-right: 8px; -} -.twitterButton { - background-image: url(../img/twitter_logo.png); - width: 29px; - height: 29px; - display: inline-block; - margin-right: 8px; - border-radius: 3px; } .shareControlsHelp { height: 25px; line-height: 25px; position: absolute; bottom: 0; - left: 65px; + left: 73px; right: 0; font-family: Raleway-Regular; - font-weight: 400; + font-weight: 500; + padding-left: 8px; + color: white; } /* // END styling of share overlay diff --git a/scripts/system/html/img/blast_icon.svg b/scripts/system/html/img/blast_icon.svg new file mode 100644 index 0000000000..31df8e7f53 --- /dev/null +++ b/scripts/system/html/img/blast_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/scripts/system/html/img/fb_icon.svg b/scripts/system/html/img/fb_icon.svg new file mode 100644 index 0000000000..6d67d17bb2 --- /dev/null +++ b/scripts/system/html/img/fb_icon.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/scripts/system/html/img/fb_logo.png b/scripts/system/html/img/fb_logo.png deleted file mode 100644 index 1de20bacd8fb5719db3291365576d6368a5ff510..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1257 zcmbVMTWl0n7(QC5q@|jWMiwtH8D1>y?#%4$&dv;bo1NJ$YuM6kx44mqGMzcw9oo4# zGj*qp1_ML_4>k(n5-tsiiSfl4LTZe`R*D1>$y#dyO^uc(e5f=9v2sbxlwI(l;lY!f z8-82B4;>;C8A*8a< zC=xd10-F_5m0YG=h@eH=HdqWRl}f%6>C?>~j9?hX)$sehrd;q^1DY*5Ud`H2RS=*h znTla6x`w!lVz=IJM^LnCK{Ya&$HJObX_Ta^m?Ih(;lnXib$u-vw(Kl?QpU1qD>q<3 zEDJ5Y-;`h$7B*DLj%qwTkqb038Fs6w^eCFxC+JeY3N#1l72don)SDk?NqHgO}Q8y62gF;@OxAIXydJhLV(a5-nH`|JzDKU^9cYk%%SL;T8keAC>Dovm2? z*1frSCL1C3k&nJYi8fw*!=Cj^TVTe!(4sS$f09vJMZ5g`mMPB z)0@99?y9}F{f&crZ8^C*JwLkmKr;4sU6}j(R_xwCcYeA(h_ W+`9J^=-T9dKIvqe@Ofg#?tcLbL$|sB diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png deleted file mode 100644 index 8e3a2370dd2bab99c363f5bf5d06d8e89ee30e5c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1587 zcmbVMeM}Q)7(Y=F4GtK@PgstVZElmc*DtOoEwpz9Di*p@uoI(P+oNsD_3HJY2P_-- zfgke&L`)o_Btz%?V#w5>PIM}cIMiS^6#=JNK#Vw*MFjkMhhQ>VDWdcd8RRqJJTrPm6GPxX{2Z}|oSSS(;Me^D9^hK@rfS29!+PQcBh-j!)a?iMY>rXu7o(sBd|Gb zs7Qv0U^q@HiW7_E2n-`4M1oGgM(&iuY>l0ScV*&t0$~Z zHy`+fzo1uoaguQskhUa-rohn&qt3TVqg35ecu>X zL25j?YLCTb-O|&sWMSU$&fJRb>YcTFT9qO3UpzoIg*-j=^wfk)-p7w)V!GPvSo5sX z6B*^Is_t#42C|m-)D@qu9V%I}^*!Ar>0nc8uMz~12&Mbt#aI&RL!bB>J+n41odYc#bKHLUn$@#Gts;TN~(|4`a` zq5j+1dwV_eTLkAT?ka)J7e*qx_Une%u6p6PHGQbxd^MnNNYFV$pYvDVbZOOw>@{XX zSsL>qc&Ny-qwZK|UC)`CYV2jy_e9B|rAXNbH)+{G!MdYm%c+=4`Q@K}*IRtMvUPi+ z{L%B1h;Jx#QTx7sqBcfHJPb>z3h!z-e(UU}rIVr**Y7>+tS=1DNbk-O94WcHEI6W# z85rNc8GXL;!^+R@44n(kI_!Ed%TiI^IM{oJy|?Sn`&?~KqL1yqXzHk`{ORh{zV`LE z9~^8cxN*HRCiI$mbQb4A_eMXl2=}zyEBLuMr1z2IiEI~`sj6#?v>bW-Rdh0#`I~WK z>h^%rt!G{EnuM;SO;he#(aYDqY#X%0skI&0hV(1)`e%`)ropU{P3af+Z*17|!Aa(2 z{h{)jrJIZ4fUvcRe4!bBCkO}2Mk7Hu7!daB?}>pkx5D#k?X01vX`(c`?W!epUS;;Q sE7^S|?6hW8Memb{eba`wwS|le1lD8gSC&6Z!uW4or%l5TX>wNl3u=i}%K!iX diff --git a/scripts/system/html/img/hifi_icon.svg b/scripts/system/html/img/hifi_icon.svg new file mode 100644 index 0000000000..acbb98a3b3 --- /dev/null +++ b/scripts/system/html/img/hifi_icon.svg @@ -0,0 +1,19 @@ + + + + + + + diff --git a/scripts/system/html/img/shareIcon.png b/scripts/system/html/img/shareIcon.png deleted file mode 100644 index 0486ac920222964fc18287bd03131bc70ed942bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15201 zcmeI3TZ|J`7{|{F5-IM!pkbp3!>mRyPUq6=jMFYlyU<3uuFINTObkqCPP-G@nPFzS z?d}u0(FBA@l&l7fl1PX?NRS6_5Wx_m5i}A*P*CK-#E1%-5LbvsGrhOF-RueB#hhQ# zK78N#f8U({xlCWWy}xf=yXzho0H8e{iw*z)I-SoQ3jhF@@}a)~01J)SMhk#Ni=9s! z*!yZH0Q|4&;IKWMSTD$W)-5S|61odn12~A?1w)dzK$}Ryw5o;3t4EKMgsOzdAzy+? z7!f$4#>P#!VZ3ip9^WGK3fUcYi3OpMHL}o_h(b1_SwbO17V8R{B{*T4B#J}qEg`bU zX-Etw`iY2cLc-_vQ!?ub5&_=L`uHH{eVE`F)=x7$&3Y+@6&PM%SfUIWb`b<2no3F- zh^{TSGnG_`9I>ll3fJkPMo2Gjt14A~Cxxo1IZ<*}bFo>`H5J z%z*R&wDg=Q!`@M-*`q?#MxB=V&#yk zDSF;oCDP53+IrWj!Kh@zu%o0HFU9!>S)btJ1h0=`0s_O-6)BBus*!-Uq)4_jmnsco zo9pO`ni`u^mD z&&HEgxe%tGL{X82lx}7vJFI4r~Fm z$+;z$%@4nRzs|L{IGM{Gr8jU0LL&4L$l6zSz4cNmTsI~TAyx~)|5|ZsvYLa z-I~I6D(4Man)L=ll402I^Lcz?@x@vnZdUZG1(+F*s#&O6&V9vs%bMoIjKYnrgmsCs zu(TEGewGyzrRYF(ZP+E!)gPP{&8?+2qgx1Wf&{h;32YY<*e)cnT}WWNkid2!f$c&9 z+l2(S3khr&64)*zuw6)CyO6+kA%X2e0^5ZIwhIYt7ZTVmB(PmbV7rjOb|Hc7LIT@` z1hxwaY!?#PE+nvBNMO5=z;+>l?Lq?Eg#@+>32YY<*e)cnT}WWNkid2!F{@p!+Fv-K zri92m*&Y7qaNr;SfRJMY2>`|)0ASk$0N4KoVB60C@K3jnwp zkM;}}&L5i$bxbgKKHL4_DBK^>=ZEfo^uk-;zrViYtBcQdpIPazUb@M4o2UV zyDxnFET7E(;a(aLp!HVuUXpp^t{Ep+SfgPU~B)pPj@|X zwk`DK>J?1K{vE-#Wvd^IeX*O|{$29Y07Op|9@#PE+O?#wXJ6;kTD-d+)JR UXL=U)Ie&tU_x42(t=as{e=9bQEdT%j diff --git a/scripts/system/html/img/shareToFeed.png b/scripts/system/html/img/shareToFeed.png deleted file mode 100644 index f681c49d8f83a3f77ec8db52f62ff2bd1e6ee628..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15486 zcmeI3ZEO_B8OH}h;@XV~#K_=)(De}10rvLg-n^^3a~z+I-E!tIZn0Y+-rJqCx4zrm z?yh}j%OR&yC{C=pA*!IHp$$@6wIz{h(S%v{3E6 z_+D%iMo~UQnxABUn3@0c?EL3>X79@m2AfxvmEK(n04Qr}^tS*2EC7H-U%DLt0FFFw z1pt(&jqN%BUoJQQW`Ny4T>t?4rqtSIv;|gkf)cgyq7s6(cvLk-z*7@fd7&E`mJsZe zWUuvK2mfrfNTS!e-Wi|*Y8~v78v8Z4uD`ie=zp}ES}n;XMz_~mYbLa`1%j43MS~Wn%|!^bz1retZM2iEW*jRm3`M(0iX~|W zLD3w=aujVzWA&9FG&T-#PLI2&?ME66xm|NPn9$!1`V&8%w5o2vL}bqxNW#q(7oS!U&8) z+0aSaMo;+&YL{XtdY3ZIz9*)q-Mt}&vxk%CnK?79492BtWadmtmMn!7o_JK{>NLn3 ziq@(q5nrmxf|;kc)YX|)<+fCGycZLP_?#v(ccRH=xf{5|o2rT&=W=bGQh~ z%~4cNgw(Qv00C(5B5&}Y8X|9DVGu=>!hN3}BD*X&J8QJHTe^L~J`!6*BY_9Wj>d1Hm^+sr-om$?!4hYz4zPD)W_@+Vwh>7ogAOblRPs3q&0;TQwrO&LZ&)bm@|FHQM5D@RfSViC>r*&F4#Y zN1r1&2@=>YB(PmbV7rjOb|Hc7LIT@`1hxwaY!?#PE+nvBNMO5=z;+>l?Lq?Eg#@+> z32YY<*e)cnT}WWNkid2!f$c&9+l2(S3khr&64)*zuw6)CyO6+kA%X2e0^5ZIwhIYt z7ZTVmB(PmbV7rjOb|Hc7LIT@`#7*rg&3>~9WzlPmS!;YN7oKi3KL-^WTLJ*|F9jg6 z1%PWe07$$GKo14LdmR99y8xK4?706}0{}$}oBXw{@z>u!>+Nc-om2epw{BZobZz+qU??!Ptvi9hLDn4!!pHPi~w%aXohb6B}&bUL);4_1hU8>%Mu$`H|;= zHy`T0cyw{(#dl*Rk1lv&&gS*YF8pWBg;V#IyhSJeS2k;Y_nl*|UmRUux3r3%_jurM z+N!I|-??q1Y&f|6<6lu9+_CZN``9gqvFX`jl?@(sFFLYe ztgF~IR@A#~^Xh+!byN3__aOiqHW4kcpN4=j6gr82la(CI;-5)jASM0cS;pMx| zghrp)J#b=Hge$jo6fLQB-E(Q^e0yR8TmH%;57stsxjJ<2^n=^azqCJm5-h5%neF$k zsC@s}(t(oq9(cY2%pT{%JH;m#eo}PevGA3@$akDA*&~m?J<>im@#Kj^^Y@*7>E1u| zA8FXOtKu@)wfguAV;}#wboLVuogDPLAN^(V@$ssy2M_erMATX;^=I;|6j0zW$m!6R%wyJM;6G<)NoOY!1%;+3)&dhZmf3e(g8T zS1(6?U$eG*p>I&QviQ)LGPCx^`SK6GKm6;;m63s6``n2eGr``uQv0)ehPRnt2shO? L`=7qA<9q)H#YG)p diff --git a/scripts/system/html/img/twitter_icon.svg b/scripts/system/html/img/twitter_icon.svg new file mode 100644 index 0000000000..0393d963f2 --- /dev/null +++ b/scripts/system/html/img/twitter_icon.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/scripts/system/html/img/twitter_logo.png b/scripts/system/html/img/twitter_logo.png deleted file mode 100644 index 59fd027c2a59cffb4c4f353dbc0ddce2cc3e92d4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 552 zcmV+@0@wYCP)ca5h;T6e`N!ZW%_7Fh zh-L^Db6)RjfuD}F`pZz7)+*=?1MeO>1_Vr(aX5V=K z@A6xs&1GO<5aVQ2;b%fmI~ZW%B^;rP%iP^h{_K772fv|vpZwYO5T_dK=KlZBP{N0|RFI72{;g)@5^- zWs&5@629+${-1W`*WByB{$NjC2*8N7-ZT_pc9Uh%6JeI*Vq|7y`0(@p?T`PCJpa4v q@gE|SAa-*p2ScsC7&Vu+<^lkzl%{SoyW=zf00003WXL}mU6Q! zd!4HfH9!}ZopW{;GGxBDo$Sm%-<)&)^UuGFHrD%LHNvd)4WtS~Om7%sdczRY8-|$P zFvRqRA*MGBF}<;B#n_b%@8D2=I+I~RVFCL6vNtGeb>)>2!w4!p?EWHdXBKAA-0=aw z+|Va{`?nAfl$cZQ&BpzHc_I>fJRXR&HBgqzwvLKI5>M7?Lm!t~OId8ViY2iu9=EEsAl5?I~BjG<-+H~aDH z9=_2l0ssO~8Ivq4?#%vw{!|s3J}j|tggLc(E4M9^>>LH4u7^L|8NJVm4;Gv6bf`U@ zEKII#ZlyoF#dPdpn{(cgr7>fuF5(h@?{>TaxgZ_?`ApjJy|&??a&=nm;wBSAw_Dur z#6LZ5-@8%Od@jjhGc9VL!Ymuom{J#ZaHy__uj}U3pGYP)8j79aSyohAVLe)I-IQqM z+`XQ%7*GI?UgqCD7bRNJWXYp*LRxqb0X*hm_qg%#KC!l&zdp10Y{|CLhzT;h-4^-2 zcfr1v2(n;JBhoa#cnC8_FBX`7f689J$NJ!@}I2nb38xfPI(SV&aruL$!K zaSRNC3O8HfX2T+MPDtm*rLIY--!FTE%6M3_a!C!uCDrF$e5HrYPfsw^Ru)Qfa7oTw zc_C7H1!+bLfOINu%fy1LRR0$Cg@|vHrOF-ulBJ9}$fDKk;F_McR~K;&y#n>KB*Gh{ zj6yaQug}Pp9`>bz<$H_kRlOs}Kz55~M;A%=DWz+YG9sB+vrinMof{O0GIWeDiZQ+MS&9o^igQ? zTSS6a8pH2(L>G1@G^EKV4#p`v)j*lJIR?Jz;dh@59`1}zs&25TM**nqPHMtacBzV; z>{sPhURKgf2ot|#C8qs`)Z$BOwo{H+i%q@5F#m-56HiolOWYK}~bSALm_` zh-AyzGhT7`$>67#_~hH}vH}O%BFRs}TM)On@0dA-&9pdWu?IT=c8YAX=VkQh^@DveR-yri@0^X)u1P%D;gMXzn=wq{@x0}eBC*^re* z$!yM13F>^&?kTB#O!~to zbxlc{S1R$)W*@@{Tz1B3MQb@^#vm#X5@0GKkAxIW$_NUy*~cUWh6D0&K$DAU!>awC zhasjn3^Bc7i0KVOOm7%sdczRY8-|$PShZsR0V1^GX^jP^B>(^b07*qoM6N<$f{Z' + ''; shareBar.innerHTML = shareBarInnerHTML; @@ -214,16 +214,16 @@ function showUploadingMessage(selectedID, destination) { var socialIcon = document.createElement("img"); switch (destination) { case 'blast': - socialIcon.src = "img/shareIcon.png"; + socialIcon.src = "img/blast_icon.svg"; break; case 'hifi': - socialIcon.src = "img/shareToFeed.png"; + socialIcon.src = "img/hifi_icon.svg"; break; case 'facebook': - socialIcon.src = "img/fb_logo72.png"; + socialIcon.src = "img/fb_icon.svg"; break; case 'twitter': - socialIcon.src = "img/twitter_logo72.png"; + socialIcon.src = "img/twitter_icon.svg"; break; } uploadingMessage.appendChild(socialIcon); @@ -330,20 +330,34 @@ function shareButtonHovered(destination, selectedID) { if (selectedID.id) { selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"); + var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"), + shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes, + itr; + + for (itr = 0; itr < shareButtonsDiv.length; itr += 1) { + shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)"; + } switch (destination) { case 'blast': shareBarHelp.style.backgroundColor = "#EA4C5F"; + shareBarHelp.innerHTML = "Blast to my connections"; + document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F"; break; case 'hifi': shareBarHelp.style.backgroundColor = "#1FC6A6"; + shareBarHelp.innerHTML = "Share in Snapshots Feed"; + document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6"; break; case 'facebook': shareBarHelp.style.backgroundColor = "#3C58A0"; + shareBarHelp.innerHTML = "Share on Facebook"; + document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0"; break; case 'twitter': shareBarHelp.style.backgroundColor = "#00B4EE"; + shareBarHelp.innerHTML = "Share on Twitter"; + document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE"; break; } }