From 263debf312df51b0e6e2c8c55963fc38c8bf5133 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Tue, 3 Feb 2015 16:29:15 -0800 Subject: [PATCH] Made default page working. --- images/running 2.png | Bin 0 -> 554 bytes images/running 2@2x.png | Bin 0 -> 1105 bytes images/running.png | Bin 527 -> 555 bytes images/running@2x.png | Bin 1128 -> 1166 bytes images/runningwave.png | Bin 347 -> 356 bytes images/runningwave@2x.png | Bin 638 -> 657 bytes package.json | 3 +- src/Containers.react.js | 8 +-- src/Main.js | 12 ++--- src/NewContainer.react.js | 108 ++++++++++++++++++++++++++++++++++++++ src/Routes.js | 4 +- styles/containers.less | 61 +++++++++++++++++++++ styles/variables.less | 4 +- 13 files changed, 186 insertions(+), 14 deletions(-) create mode 100644 images/running 2.png create mode 100644 images/running 2@2x.png create mode 100644 src/NewContainer.react.js diff --git a/images/running 2.png b/images/running 2.png new file mode 100644 index 0000000000000000000000000000000000000000..4a81d6da9795245119c8ec83e0b8936cb17e5fe6 GIT binary patch literal 554 zcmV+_0@eMAP)Px$)FgQps?H3?Oa9k5`RAC4T5(u9_XoAI{T8HT2 zNDzEMYe>Lh5J(aXqCkiDW_y=%rKByB^lta|y|**FGgFmc%*y3iSzg=})lCtri0DFu z*$c*PF}s$>=WFeBK8kcLez00Kfk+)_PM#q9x$# z+DMOyaX}B0o<*?@ZKijF0;9&ZldM7XCW=ax;Rn9}o*50EjVngDV;PN`)v2Y}WlMry z`MES&tE0k6?`a-6*D4U~ zCvErbc^WO}_BxvsK1 zSV9HL$fE$%0XutH%BOILv?aXi4 zTM!ByUY1y!0Pg=4KG%pL);ZoBVjJ`3z#UwmmYf0Px(3rR#lR9FekSvyQrK@`37AQF%eDAbkMNoBMmCfG@1qJ{1fi3I_Aqm9y;AduLh zm9YmxVK6LEXkvq%CWK03rJX_00%MTP8hqDtXWrYLnTNOw`@6~R&i9_f{Le+vA&p1V zXNlDfBGpTZyNRhAX?((ofY~_FJiaOCrdFm)ohe^FC29hLLG6)%m{dn0AQ5Y0CY0tQOuNeX#wPAVzI~ z0(yo~J9V(Da%*{uLb{F7Ts)}fKM67z(MWn6KMygT$#zV?;dm9F6$-Ud>7*rr(S`>vwNhJZ2IK~lU1$?iG(~&) zc{Ts)=RWm`A|AThLCq~gSR(j?DV1nIyg<8~qiW%8&aX=l)FU^Vd7dQ4c`Wcp#5+&a z-0NSyqf+ubeC0T)_Iuc958%JW?E{iC*<1cdCJBzDF{QzT+Zm&_M;SH0_|7XoRF;PZ z`ly+*=gC(E%U{4aL{M2DbWP=4IziHZP*Z%T64BrKdmuj^Enob8BW;urd-|iZir3Utxlh6 zW(*dNugK)K(pPFsP;ol0Gr!@~VUH5mPiZ-Wg|pQ$-1ji0UnLY^b3`UL#Gl-WQV-#{ z+fje@VcyjG-Mw+bp1?er9QUiWCMW0-rd*vx!*dR65brtHR@`h&a~`(p4KT^kBQqi* z7k|CX#|Ae{vAl#WlUGT-%*O^dnPQh<{A8*J$pp3nK_zc8%kmwC>(45!P145(H<{wE z4ti(PX(wOHjE@a&7(u8n+vFu&FY~d%P0m4=pn0a(hoX-SZrCKyt*(iNsF!)zye^w$ z*<;hMuN|+j+Sv%R-@yU5Kr4PNs-r4VUs~WeO{<>~Ok4SZlW@Zni$U=_7L03wf;Knu~!d5Y#FPu@Xd~?5i&& z(y$sN4LOmWmZB4EiPu;`r2;|WYxF2$C5}P2Hq#m$_Bq8z$Y@{i3B;l%*8X_X*2Gej zco;N%=tEdHbnr+Bis_MT)bN|3XucaZfa#EI=ZGuR< zel;y&535`TLXU~KJW?IQ-ezT|SY6;Uc4}x-GE+WV^nEvn;fC3P0XA-Isv3+SObz=6 zrX$E{7&vLS(o+oVmP5I0m7zhMA{A&7+WhNqa5@Iojj{eb)Li6>{sA-FuZ`s-XJ}g2 zXQ*ae04~R2V(3ccxfbj>mGud`@x+rS{eT@Hw7mcL1$+TXhxUXlP4fc)0000BaR=?P6YC#I})Q0G3>YVxbqIPdI9c={YGNECfh&c_6-lf#f;keyf8XD-#W)+ zkY#w9GS!&1uYYi%#sz+;@i8UKxT^ugXiMDU1z1B@YN(Y)7EdSSJsLafcw6`&%sFg;R zVbzdvPg15>DdQ+jm$ps~wPcWGv;;}jaDtXgr!@Vqbz$e*(nVpArKijslz=uhCnYz< zajxPZAkAZH$sl-K4_QIVI2WjXt)`P?057e-XFN?k0EwB~CW~%U((lw~*%+wby?lZF e10;8uzknZ0Y`x(OY+-T$0000`#8 diff --git a/images/running@2x.png b/images/running@2x.png index b2777164bfe6b95f26cfc8c0aa059c28e9911153..43517a2c30afa4f1b7b1d1214b14fcd441121d69 100644 GIT binary patch delta 1132 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 FV1lkFEJ*+W delta 600 zcmV-e0;m0v1^xt(F@HEoL_t(o3GI|UXcR#d$A7a~&8eq_f*=MoF%iXxh#IjF>}(7O z=|ls1ImE;&igk)$I=evd;|K&R1w~L1gj5z5et{o|ayd~0T1bK)$>p*;{#6n-IXB!M zDhM;|vO90yd-I>)ycuxK5pV(lfEA`eotd}$G>s=$`+>La#mw66WEbwFCNF0tW9E4Ns>zVs05!Yjx#W{ zjju^!<9vS#+&7HBp`LbiPD|A0IOj_368bg_IGJnUMx`-ve&$$#Hf>{{9Gc>ssMN&3}`)tBU=tIFZPQFla+MOVhLj6RaJ3&(g8`_@$5~#YyTy%K_D2zjAyj z(_lDQlj3=1L?zRs!b#XNd0I{OjjATvRQ%R(O%o5~)-xO(TIfIXjFqH0<5{|Ocoxm~ z)g(_%NPke|vWR}3KR(lMf5EES6s=lLr);~T0;grTWPhjVz1YONnSi9<%xjvB&w17I zo|xDP5r3$9eo@Uji*RgOF1y>X$J|lbN-h*`stR=&as! zvf#PiCOg9Z3-#QYYyLC6j#t!av-?EmkTT9vNsv7(y9W~lSL~{7Z^Y+>Ci`)>u3IQj zTdju&s!`WlItzpUL||0V;R0)P`)`-ft*XJa4%On&!+Ifwz>?SP@OY?^kI@+S?+7>o mj({WJ2si?cfFtnN2z&

Containers

- }> - - +
diff --git a/src/Main.js b/src/Main.js index 4582a2235f..cbc6c57068 100644 --- a/src/Main.js +++ b/src/Main.js @@ -14,6 +14,9 @@ if (process.env.NODE_ENV === 'development') { } if (!window.location.hash.length || window.location.hash === '#/') { + router.run(function (Handler) { + React.render(, document.body); + }); SetupStore.run(function () { boot2docker.ip(function (err, ip) { if (err) { console.log(err); } @@ -21,21 +24,18 @@ if (!window.location.hash.length || window.location.hash === '#/') { router.transitionTo('containers'); ContainerStore.init(function (err) { if (err) { console.log(err); } - router.run(function (Handler) { - React.render(, document.body); - }); }); }); }); } else { + router.run(function (Handler) { + React.render(, document.body); + }); boot2docker.ip(function (err, ip) { if (err) { console.log(err); } docker.setHost(ip); ContainerStore.init(function (err) { if (err) { console.log(err); } - router.run(function (Handler) { - React.render(, document.body); - }); }); }); } diff --git a/src/NewContainer.react.js b/src/NewContainer.react.js new file mode 100644 index 0000000000..5f1162bae5 --- /dev/null +++ b/src/NewContainer.react.js @@ -0,0 +1,108 @@ +var $ = require('jquery'); +var React = require('react/addons'); +var RetinaImage = require('react-retina-image'); +var ContainerStore = require('./ContainerStore'); + +var NewContainer = React.createClass({ + _searchRequest: null, + getInitialState: function () { + return { + query: '', + results: ContainerStore.recommended(), + loading: false, + tags: {}, + active: null, + }; + }, + componentDidMount: function () { + this.refs.searchInput.getDOMNode().focus(); + ContainerStore.on(ContainerStore.CLIENT_RECOMMENDED_EVENT, this.update); + }, + update: function () { + if (!this.state.query.length) { + this.setState({ + results: ContainerStore.recommended() + }); + } + }, + search: function (query) { + if (this._searchRequest) { + this._searchRequest.abort(); + this._searchRequest = null; + } + + if (!query.length) { + return; + } + + this.setState({ + loading: true + }); + + var self = this; + this._searchRequest = $.get('https://registry.hub.docker.com/v1/search?q=' + query, function (result) { + self.setState({ + query: query, + loading: false + }); + self._searchRequest = null; + if (self.isMounted()) { + self.setState(result); + } + }); + }, + handleChange: function (e) { + var query = e.target.value; + + if (query === this.state.query) { + return; + } + + clearTimeout(this.timeout); + if (!query.length) { + this.setState({ + query: query, + results: ContainerStore.recommended() + }); + } else { + var self = this; + this.timeout = setTimeout(function () { + self.search(query); + }, 200); + } + }, + render: function () { + var loadingClasses = React.addons.classSet({ + hidden: !this.state.loading, + loading: true + }); + var magnifierClasses = React.addons.classSet({ + hidden: this.state.loading, + icon: true, + 'icon-magnifier': true, + 'search-icon': true + }); + return ( +
+
+
+
+
+ Pick an image to create new container. +
+
+
+ +
+ +
+
+
+
+
+
+ ); + } +}); + +module.exports = NewContainer; diff --git a/src/Routes.js b/src/Routes.js index 92b9df7d3a..a577ed605b 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -3,7 +3,7 @@ var Setup = require('./Setup.react'); var Containers = require('./Containers.react'); var ContainerDetails = require('./ContainerDetails.react'); var Preferences = require('./Preferences.react'); -var NoContainers = require('./NoContainers.react'); +var NewContainer = require('./NewContainer.react'); var Router = require('react-router'); var Route = Router.Route; @@ -23,7 +23,7 @@ var routes = ( - + diff --git a/styles/containers.less b/styles/containers.less index 5bf7647653..6651ced1bd 100644 --- a/styles/containers.less +++ b/styles/containers.less @@ -19,6 +19,66 @@ } } +.new-container { + padding: 35px 20px 32px 25px; + .new-container-header { + display: flex; + flex: 1; + .text { + flex: 1 auto; + width: 50%; + font-size: 14px; + color: @gray-lighter; + } + .search { + flex: 1 auto; + margin-right: 30px; + .search-bar { + top: -7px; + position: relative; + .loading { + position: absolute; + left: 10px; + top: 7px; + width: 16px; + height: 16px; + -webkit-animation-name: spin; + -webkit-animation-duration: 1.8s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + } + .search-icon { + font-size: 18px; + color: @gray-lighter; + position: absolute; + top: 5px; + left: 10px; + } + input { + border-radius: 20px; + font-size: 12px; + height: 30px; + padding: 4px 8px 4px 35px; + color: @gray-darkest; + margin-bottom: 3px; + border-color: @gray-lightest; + box-shadow: none; + + &:focus { + box-shadow: none; + border-color: @gray-lighter; + } + + &::-webkit-input-placeholder { + color: #CCC; + font-weight: 400; + } + } + } + } + } +} + .containers { box-sizing: border-box; height: 100%; @@ -293,6 +353,7 @@ } .details { + background-color: #F9F9F9; margin: 0; padding: 0; box-sizing: border-box; diff --git a/styles/variables.less b/styles/variables.less index 3d8a1b7f92..ba3833fa96 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -1,7 +1,7 @@ @brand-primary: #24B8EB; @brand-action: #24B8EB; -@brand-positive: #16E568; -@brand-negative: #F47A45; +@brand-positive: #15CC35; +@brand-negative: #FF5F52; @gray-darkest: #253237; @gray-darker: #394C51;