From 9845d86d15049abb91b32a48c9c190031dd7bf32 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Wed, 4 Feb 2015 17:45:26 -0800 Subject: [PATCH] Homepage styling. --- images/button-restart.png | Bin 0 -> 1351 bytes images/button-restart@2x.png | Bin 0 -> 3092 bytes images/button-run.png | Bin 0 -> 1023 bytes images/button-run@2x.png | Bin 0 -> 2261 bytes images/button-terminal.png | Bin 0 -> 1018 bytes images/button-terminal@2x.png | Bin 0 -> 2406 bytes src/ContainerDetails.react.js | 43 ++++++++++--- src/ContainerHome.react.js | 42 +++++++++++-- styles/containers.less | 110 ++++++++++++++++++++-------------- styles/theme.less | 3 +- 10 files changed, 138 insertions(+), 60 deletions(-) create mode 100644 images/button-restart.png create mode 100644 images/button-restart@2x.png create mode 100644 images/button-run.png create mode 100644 images/button-run@2x.png create mode 100644 images/button-terminal.png create mode 100644 images/button-terminal@2x.png diff --git a/images/button-restart.png b/images/button-restart.png new file mode 100644 index 0000000000000000000000000000000000000000..988cdbcd806ac1bff4fd758dff70aa46c9671e1d GIT binary patch literal 1351 zcmV-N1-SZ&P)Px)0ZBwbR9FeUS6ysWMHHSh_b!yC`XJqHyFy`iOGF8Zwjufg{8lmIZI<*lfry|JW-Rok^Q0* zSoPV(TbAEk_AG&(Cqtj2!cODjNRN1`A@6DU-QGZKb!{U^Xru9+D8!*_e_efRbjRw; zo_G@aP9WBms|QVdg+iSuXDWJEz}0B`K5uTHBr7#5VcE-0(SDFum-UE-2A- zp(XT_8@!nQ%m?*hK{PnGL)u39!110dp>{2`bM`S151vwJHnI=)W&537fmk|sP@uZq zXs&wP9`vi%elS!9RpnbW3F{P!o9OEOX)5#haBKLypN=h$r6vvwkmrqf@Ku&s6X1JZ zA@%UA)1`nP2skE;N-a$Ka4FOjt9qtGPeW5N8!#)r7d^XRy3uM&b}ol z7LM({;gvL{l+Ot?w~3Ai3Qj|QZ6i^Aj6Ujcc|bqliJ?%=KH0afgkD3PF*lG->!Y+x z6?q|h=#)n$3#uoU%(l}49ybzIKe+MkenH_UI>5&yf6+b0eJhz!M%4io?U}H$niFV_ zPp0&mic=bjO_WrAEDr>Z(cXPiigUJ;Hw(Y&x*l=bbhbH@ayp+4M9x8OU)U45npe16 z3fxQGddm6zMj}KjP+G}MeSeLvW!a6;5#oMEN1DK)2Bx+T$KC){iXT zT1i`5Bn?BDiHt5qf%adk@iS&5D);-16_qa&O*HWnei$Y&KrBi!jk1^wkqJNW0^}6( z;T2ke_dIpU7yD%2(&BK4XQH*WO`hNd2q~q%LtlSoptjt&`1XJ4aRl`#I!HIOdN^)x@sjd~Ii23wR&7roT1X9nXo zu$VscLb~%u(S*1sC1c|}fXZYh+{X%wap=@#KB#MOny%h{r*kJ}PTOL}M5UKvJFI2* zVZ`i|Zj5*NzaA#O6X0p_VR1gqm^E3%rO4Ba1KLbXS=`gixh{^!X$!L_CKGg(#()Taw4Aa}suY_Ib`khPcG^1Z0Mj+CrY^{{klsL#>AWl&$~(002ov JPDHLkV1kS*h)Mte literal 0 HcmV?d00001 diff --git a/images/button-restart@2x.png b/images/button-restart@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..f4e3151525267f06ca26fc20d432a394c835c317 GIT binary patch literal 3092 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 literal 0 HcmV?d00001 diff --git a/images/button-run.png b/images/button-run.png new file mode 100644 index 0000000000000000000000000000000000000000..1d03b2c5fcd46299489a13c60fa343c6f77d75af GIT binary patch literal 1023 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 literal 0 HcmV?d00001 diff --git a/images/button-terminal.png b/images/button-terminal.png new file mode 100644 index 0000000000000000000000000000000000000000..d988e3a569490cff602b21b723f3c989eb1eaf53 GIT binary patch literal 1018 zcmVPx&v`IukR9FeUS4~V4K@^_ZF2Qn;1XEHfptAL1f`4GVc~D4b`7tp@ID61UW8&Ql z9=LPSL=T?DL=!2rP0+-^$%Ohx;)NC!aB13Tq6Z40-SK_fZrL`wwLhzqY<73%z3+Rw zGxO$qoYmM4zt}wFcDs5tjr%y~KDY}ZR7nzQCX-wFex>tAEs(q#V{drN)52WWIcFn` z^Ip!xMOx!T2ePW`)M)wps2;GT4#+8-B$AI-hN{H6J{1n~d%f(2UST zD6z5rirwtrvjl#$+@y4M4{(W(()hSwY{bC1V)qi9*c}#BNQ=CZ`M2=lfjCf*Jc9wlgIC;?@O^cpL@{*-N4V}R7M^b4e zlAfr_4Td16>ugmHRTv$ePn`xPKCIllWD4@XT|~1Q8~i%l{-NBsk@vy}#YC3%o2NrE zK(XL3=Ni){oF)fHe8}@o6S)C!fXm=527uL$1-BOPzBUG(z5^Q^;4-lF0I<)o)v(%) zfq!)e2e`lq4m|)Q8G4?nb*t4AWPxL*z?lz#ve>XD#9Tdq_4pv6=~i$;sk+v9hbBPtT^5(!nj^U_oxTORsV5*HtFC$AA9TVNZ{Zz99R7ZW= zZQ<3SHs1P138$tK!S>>A@kf$l8greo^F{w!z;nNR949G`bI0bjoS@owS#U{ZT%4=q z;0viOZZ1b@8kWpo51)9zJ4-iQH8p4mA+(qzvFsL2L5Hn(c(vIrH-*UNb0W|VUEoNA zfPspVAft38Lt?@TS>dhENpxl6Zy(;Eary}kG~xm$xOFsI-HSbuRL}wFsvu|~2Z(bC z#`+?pEio@~K2nvp14fW+(2d0aARy^w95TuQ{E83-j`0F#{trOC(&SDiR}0|f?z zmV*+G!J%>5JOcEf?Beff>)kPv+v4lWn5485)1k|98%2x&N~XXZ(f=w;Yy&_r<)s-^ zlP+8;lx98M-Ghak(pYI`{u`#^bQtPMFHT8AaH@)7C+JwEFCkr_7pI?)*c>TN%|RH? o#qykl475Z(07=E6R!@2U2O~AQNPx;AW1|)RCod9TU%^YMHrqryJfkw6g4gl1=Dt0G0|w0n1TV(h=I1E5Y18_NHiuU zLSlR|N_gpu0mFmD1WimxNPMAxpe978NYANo@KY) zZO_@$UAAk$mK6T6s0gE~=hXPV;RKjS4@{a+mFBcFX zBaV6}q%b?8N_=|0aegG1cE+nSc?7hz`D*4oxk37j%~HrGl0ucZsf6l6Zy!Z|O5!gr z&5I*9;zJi>14ArV=`SxUndK|G(Agu^7q zbMj6AfLE72^$NOp3rsv@X{4^A_dWyIz1L&$pDwLka6K1I7wo$YqUUAC&DZ>dijUqYt}=yci?BhR00s66FVj^VUmZRh3HhMdu*!3%MGSlxX5c7vzx z)PcHSC>*D5)RDS6#pQ?qHi&n6JItjVEVo4mhgV!|TzJ8$kbIY;F4T#-X&s@fQxYZ| z0^01^^8gQj^M3c5;Jf(-I?KG`3MHrxO5%^r}u5l3S+IxF3Zp`P0H6xA2C>Hp&Xp2;h32OIoh# z^ui|D%+$Uh7GfecjWGpI8UftQ;4?01^S-J}Q6le`SfOf65M*PtWhM#WHkP%Mqpos2 zZx^^zato8XN{qy6<4O|1Jv`pzPR?X+X4t}RXHHDSMjdRdyiO93*uccnTDj_dOgr20 z_fzE;7w%z$#hh$xHdgAY3Et{>wD2lwz?fskSzrpwD`&JOIqyW`AUS9J?qSYrc5 zVohMS2;jcG-ny3Rm|OFY$Hj~Au-%w!EV)aTw{!2Vz_=WX)58Ee)Wk~6tf(!(kj5kY zp-g#RB5+BjV<> zpz$A&@O-HL!A~)lNIKbE+RR6tB*p}0tsr_XNMSs&@gg+xT*dDyCRf9h2ElN1ZT+TC z&|bzBrx!V1>e?7>%$fl7m_DTBag~?GSvT_By~j0v1b1g@H?i$@66LBgJ$G^sWOqaw zf=y1!5@W4^!6#0pi*AfM0g<5$UP8Gg%K~sdkD+=GPif%<{>iPWTeWIB`N^N8B3_|Uh1FENB{he^-I!eTc}^DVD! zPG)@@qm4P?1Z6*k@O<8ju+X=C4@tk;4}UTjJ-@fR>!a7vUe4y}MVD-KZH(w3joI=6 zN}Of|1}9{zIMMx@ef@R9XB^;A0=wTty8hT$jC%?;M(C*LJemOX)?Wl@&j=?1JNkLe zzDxJX5_u4;;($^djHoMN(eiX`bh%>qoy3SZBGg+XJAg-%V#-Ydl^F&{YO`IB!FNUgvgwsXvMger*1hV>`Q1& zsBB}j+esrpM_?id5uUQn3PrPvP3@dmhzV2kh{l)#CyfBc*)amsdakxH6fLFfl)SVs zD2+*D8x>-kP5>b4@KdGq`kZliQxbKG(mIw<$}05!NsTS#887)(7?Y-VfCT7ZBn87y zIWb}oVr9pLg=1JM@*C8dx)TGjWQqdY+X4Iz-0aVw!sz<77#oEU+iNYVrP}uGE>j6T^5x)Y%CDK5kbr_7)4B0k9di zf)I-rI5ne=)Rj6@_wix`Sw5o^G}AtuMAY#yMxQV^f#>s1KAhA$)Yznj zjTZTblW8niKc?rWvl)ost>nkkh(m&9;FDOvFV3=lJdNY2)3g+XcK%w3kEgS!J$-Kf Y4>W{**Dd&MMgRZ+07*qoM6N<$g2qXt=Kufz literal 0 HcmV?d00001 diff --git a/src/ContainerDetails.react.js b/src/ContainerDetails.react.js index 04907f9edd..fc09f889e7 100644 --- a/src/ContainerDetails.react.js +++ b/src/ContainerDetails.react.js @@ -14,6 +14,7 @@ var boot2docker = require('./Boot2Docker'); var ProgressBar = require('react-bootstrap/ProgressBar'); var ContainerDetailsHeader = require('./ContainerDetailsHeader.react'); var ContainerHome = require('./ContainerHome.react'); +var RetinaImage = require('react-retina-image'); var ContainerDetails = React.createClass({ mixins: [Router.State, Router.Navigation], @@ -270,6 +271,30 @@ var ContainerDetails = React.createClass({ } }.bind(this)); }, + handleItemMouseEnterRun: function () { + var $action = $(this.getDOMNode()).find('.action .run'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveRun: function () { + var $action = $(this.getDOMNode()).find('.action .run'); + $action.css("visibility", "hidden"); + }, + handleItemMouseEnterRestart: function () { + var $action = $(this.getDOMNode()).find('.action .restart'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveRestart: function () { + var $action = $(this.getDOMNode()).find('.action .restart'); + $action.css("visibility", "hidden"); + }, + handleItemMouseEnterTerminal: function () { + var $action = $(this.getDOMNode()).find('.action .terminal'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveTerminal: function () { + var $action = $(this.getDOMNode()).find('.action .terminal'); + $action.css("visibility", "hidden"); + }, render: function () { var self = this; @@ -544,17 +569,17 @@ var ContainerDetails = React.createClass({
-
- - Run +
+ + Run
-
- - Restart +
+ + Restart
-
- - Terminal +
+ + Terminal
diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js index 8f3a2a7304..673fc3b954 100644 --- a/src/ContainerHome.react.js +++ b/src/ContainerHome.react.js @@ -2,8 +2,25 @@ var $ = require('jquery'); var React = require('react/addons'); var ContainerHome = React.createClass({ + handleResize: function () { + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); + }, + componentDidMount: function() { + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); + window.addEventListener('resize', this.handleResize); + }, + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, componentDidUpdate: function () { // Scroll logs to bottom + $('.web-preview').height(window.innerHeight - 240); + $('.mini-logs').height(window.innerHeight / 2 - 100); + $('.folders').height(window.innerHeight / 2 - 150); var parent = $('.mini-logs'); if (parent.length) { if (parent.scrollTop() >= this._oldHeight) { @@ -17,18 +34,33 @@ var ContainerHome = React.createClass({ var preview; if (this.props.defaultPort) { preview = ( - +
+

Web Preview

+
+ +
+
); } return (
-

Web Preview

-
+
{preview}
-
- {this.props.logs} +
+
+

Logs

+
+ {this.props.logs} +
+
+
+

Edit Files

+
+

Buncha folders

+
+
diff --git a/styles/containers.less b/styles/containers.less index 11afe4eeb8..8336abd233 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -288,12 +288,6 @@ .btn-delete { font-size: 24px; color: white; - opacity: 0.8; - transition: all 0.25s; - &:hover { - opacity: 1; - color: white; - } } .state-new { .at2x('container-white.png', 20px, 20px); @@ -367,10 +361,6 @@ .btn-delete { font-size: 24px; color: @gray-lighter; - transition: all 0.25s; - &:hover { - color: @brand-action; - } } } @@ -510,31 +500,30 @@ .details-header-actions { flex: 1 auto; text-align: left; - margin-top: -5px; + margin-top: -12px; .action { display: inline-block; .action-icon { - &.icon:before { - text-align: center; - } color: @gray-normal; font-size: 30px; - margin-right: 30px; - transition: all 0.25s; - &:hover { - color: @brand-action; - /*background: linear-gradient(-180deg, darken(#24B8EB, 10%) 4%, darken(#24A3EB, 10%) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent;*/ - } + margin-right: 20px; } .btn-label { position: relative; - top: -9px; + top: 0px; display: block; color: @brand-action; font-size: 10px; - display: none; + &.run { + left: 8px; + } + &.restart { + left: 1px; + } + &.terminal { + left: -2px; + } + visibility: hidden; } } } @@ -543,7 +532,7 @@ flex: 1 auto; text-align: right; margin-right: 3px; - margin-top: 6px; + margin-top: 3px; .tab { margin-left: 16px; padding: 6px 10px; @@ -635,27 +624,58 @@ background-color: #FFF; &.home { background-color: #F9F9F9; - flex: 1; - .widget { - border-radius: 4px; - border: 1px solid @gray-lightest; - &.web-preview { - iframe { - border: 0; - border-radius: 4px; + .content { + display: flex; + flex: 1 auto; + flex-direction: row; + padding: 10px 27px; + .left { + width: 60%; + flex-direction: column; + .web-preview { + margin-right: 30px; + .widget { + background-color: white; + width: 100%; + height: 100%; + border-radius: 4px; + border: 1px solid @gray-lightest; + iframe { + border: 0; + border-radius: 4px; + width: 100%; + height: 100%; + } + } } } - &.mini-logs { - background-color: @gray-darkest; - color: @gray-lightest; - padding: 10px; - width: 300px; - height: 300px; - overflow: hidden; - font-family: Menlo; - font-size: 8px; - p { - margin-bottom: 5px; + .right { + width: 40%; + flex-direction: column; + .mini-logs { + margin-bottom: 50px; + .widget { + border-radius: 4px; + border: 1px solid @gray-lightest; + background-color: @gray-darkest; + color: @gray-lightest; + height: 100%; + padding: 10px; + overflow: scroll; + font-family: Menlo; + font-size: 8px; + white-space: pre-wrap; + p { + margin-bottom: 0px; + } + } + } + .folders { + .widget { + background-color: white; + border-radius: 4px; + border: 1px solid @gray-lightest; + } } } } @@ -669,7 +689,7 @@ color: @gray-lightest; white-space: pre-wrap; p { - margin-bottom: 8px; + margin-bottom: 0px; } } .settings { diff --git a/styles/theme.less b/styles/theme.less index b9fb909e2d..132faa7545 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -122,7 +122,7 @@ input[type="text"] { background-color: transparent; color: @gray-normal; border: 1px solid @gray-normal; - border-radius: 25px; + border-radius: 40px; box-shadow: none; font-weight: 400; text-shadow: none; @@ -173,6 +173,7 @@ input[type="text"] { &.only-icon { padding: 6px 7px 6px 7px; &.small { + width: 22px; padding: 2px 5px 3px 5px; } }