Liu Song’s Projects

diff --git a/app/components/Button/index.css b/app/components/Button/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..43477fd2703343154001dff0997d196a6c7bbe31
--- /dev/null
+++ b/app/components/Button/index.css
@@ -0,0 +1,21 @@
+
+.button{
+  margin: auto;
+  display: block;
+  outline: none;
+  padding: 10px;
+  text-align: center;
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  border-radius: 5px;
+  font-family: monospace;
+  box-shadow: 0 2px #ccc;
+  transition: opacity 300ms;
+
+  &:hover{
+    opacity: .9;
+  }
+  &:active{
+    box-shadow: 0 1px #ccc;
+  }
+}
\ No newline at end of file




diff --git a/app/components/Button/index.jsx b/app/components/Button/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..06638e2adf373a730720d0074e971fb2a1abe990
--- /dev/null
+++ b/app/components/Button/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.css';
+
+class Button extends React.Component {
+  render(){
+    const { text, children, ...props } = this.props;
+    return <button className="button" { ...props } >{ text || children }</button>
+  }
+}
+
+export default Button;
\ No newline at end of file




diff --git a/app/components/Text/index.jsx b/app/components/Text/index.jsx
index b8b95ade86197555df063b3fd1f90d5fae8c181e..da4eb758b19ed025ca0a0c3490ee080f8bcee87d 100644
--- a/app/components/Text/index.jsx
+++ b/app/components/Text/index.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 
 class Text extends React.Component {
   render() {
+    const { children } = this.props;
     return (
-      <div></div>
+      <div>{ children }</div>
     );
   }
 }




diff --git a/app/components/TitleBar/index.css b/app/components/TitleBar/index.css
index 0a5a6c9df3098412f3a26c5d639ad80eb5cd143e..95fad7af1d7afd186de642b91451fc06333b4419 100644
--- a/app/components/TitleBar/index.css
+++ b/app/components/TitleBar/index.css
@@ -7,45 +7,52 @@   display: flex;
   align-items: center;
 
   &-title{
+    color: #333;
     width: 100%;
     text-align: center;
     user-select: none;
+    margin-left: -40px;
+    font-size: 14px;
+    font-family: sans-serif;
   }
 
   &-controls{
     display: flex;
     margin-left: 10px;
     align-items: center;
-.title-bar {
+
   background-color: #fff;
+  position: relative;
-}
+      width: 8px;
+      height: 8px;
+  background-color: #fff;
 
-.title-bar {
+  background-color: #fff;
   &-title{
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
-  min-height: 30px;
+
+  box-shadow: 0px 2px 5px #ccc;
 .title-bar {
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   min-height: 30px;
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   background-color: #fff;
 
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   box-shadow: 0px 2px 5px #ccc;
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   position: relative;
-.title-bar {
+  box-shadow: 0px 2px 5px #ccc;
   background-color: #fff;
 
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   display: flex;
-  min-height: 30px;
+  box-shadow: 0px 2px 5px #ccc;
   align-items: center;
-.title-bar {
+  box-shadow: 0px 2px 5px #ccc;
   background-color: #fff;
+  box-shadow: 0px 2px 5px #ccc;
 
-  min-height: 30px;
 
-    background-color:red;
   }
 }
\ No newline at end of file




diff --git a/app/components/TitleBar/index.jsx b/app/components/TitleBar/index.jsx
index 4a98f631127e321bf9d1633d556176a09fb99d5f..0057f35d7b2951dcf137afd654a91d860d999b73 100644
--- a/app/components/TitleBar/index.jsx
+++ b/app/components/TitleBar/index.jsx
@@ -8,10 +8,11 @@     const { title, children } = this.props;
     return (
       <header className="title-bar" style={ { WebkitAppRegion: "drag" } } >
         <div className="title-bar-controls" >
+
 import React from 'react';
-          <span className="button button-minimize" ></span>
+          <span className="title-bar-controls-button title-bar-controls-button-minimize" ></span>
-import React from 'react';
 
+import './index.css';
         </div>
         <span className="title-bar-title" >{ title }</span>
         <div>{ children }</div>




diff --git a/app/components/index.jsx b/app/components/index.jsx
index 2c6d96788fe7bb1a8b01935078c3f0bc04901cb0..ac6e1c201783670e0049e3813014efb22a19db76 100644
--- a/app/components/index.jsx
+++ b/app/components/index.jsx
@@ -1,3 +1,4 @@
 export { default as Window } from './Window';
 export { default as TitleBar } from './TitleBar';
-export { default as Text } from './Text';
\ No newline at end of file
+export { default as Text } from './Text';
+export { default as Button } from './Button';
\ No newline at end of file




diff --git a/app/index.css b/app/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..677f98b9fce0efef0463533bb606563346e3e9dc
--- /dev/null
+++ b/app/index.css
@@ -0,0 +1,6 @@
+
+
+.content {
+    padding: 50px;
+    text-align: center;
+}
\ No newline at end of file




diff --git a/app/index.jsx b/app/index.jsx
index a56c6618a051c3cbd6b2cb188becf47557dbe09d..38fccb08f5b65052250d2a7f6e7ab61a7cb904ab 100644
--- a/app/index.jsx
+++ b/app/index.jsx
@@ -1,12 +1,21 @@
 import React from 'react';
-import { Window, TitleBar, Text } from './components';
+import { Window, TitleBar, Text, Button } from './components';
+
+import './index.css';
 
 class Index extends React.Component {
+  state = { count: 0 }
   render() {
+    const { count } = this.state;
     return (
       <Window>
-        <TitleBar title="hello" controls ></TitleBar>
+import React from 'react';
         <Text>Hello World</Text>
+        <div className="content" >
+          <Text>Hello World</Text>
+          <Text>{ count }</Text>
+          <Button onClick={ () => this.setState({ count: count+1 }) } >Click Me!</Button>
+        </div>
       </Window>
     );
   }