Skip to content

Commit 925ad89

Browse files
annapananaannapanana
authored
Merge pull request #1 from annapanana/styling
Styling
2 parents 6153ab4 + df12108 commit 925ad89

File tree

15 files changed

+139
-18
lines changed

15 files changed

+139
-18
lines changed

‎3-flux/documentation/Untitled.pdf

636 KB
Binary file not shown.

‎3-flux/documentation/data-flow.pdf

833 KB
Binary file not shown.

‎3-flux/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"webpack": "^1.12.9",
2222
"webpack-dev-server": "^1.14.1"
2323
},
24-
"devDependencies": {},
2524
"scripts": {
2625
"dev": "webpack-dev-server --content-base src --inline --hot"
2726
},

‎3-flux/src/assets/icon_done.svg

Lines changed: 18 additions & 0 deletions
Loading

‎3-flux/src/assets/icon_not_done.svg

Lines changed: 18 additions & 0 deletions
Loading

‎3-flux/src/assets/icon_trash.svg

Lines changed: 18 additions & 0 deletions
Loading

‎3-flux/src/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<!-- Custom Fonts -->
1515
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
1616
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
17+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
1718
</head>
1819

1920
<body>

‎3-flux/src/js/components/NewTodo.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
3+
import * as TodoActions from "../actions/TodoActions";
4+
5+
export default class NewTodo extends React.Component {
6+
constructor(props) {
7+
super();
8+
}
9+
10+
render() {
11+
12+
return (
13+
14+
);
15+
}
16+
}

‎3-flux/src/js/components/Todo.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ export default class Todo extends React.Component {
77
super();
88
}
99

10+
// Anna Code Start
1011
removeTodo(e) {
11-
// console.log(this.props.id);
12-
//REMOVE BY ID
1312
TodoActions.deleteTodo(this.props.id);
1413
}
15-
14+
// Anna Code End
15+
// const icon = complete ? "\u2714" : "\u2716"
1616
render() {
1717
const { complete, edit, text } = this.props;
1818

19-
const icon = complete ? "\u2714" : "\u2716"
19+
const icon = complete ? "../../assets/icon_done.svg" : "../../assets/icon_not_done.svg";
20+
const trash = "../../assets/icon_trash.svg";
21+
const iconStyle = {
22+
maxWidth: "50px",
23+
padding: "5px"
24+
};
2025

2126
if (edit) {
2227
return (
@@ -28,7 +33,8 @@ export default class Todo extends React.Component {
2833

2934
return (
3035
<li>
31-
<button onClick={this.removeTodo.bind(this)}>{icon}</button>
36+
<span><img style={iconStyle} src={icon} /></span>
37+
<span onClick={this.removeTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
3238
<span>{text}</span>
3339
</li>
3440
);

‎3-flux/src/js/components/layout/Nav.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,13 @@ export default class Nav extends React.Component {
2222
const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
2323
const navClass = collapsed ? "collapse" : "";
2424

25+
const navStyle = {
26+
backgroundColor: "#3C1053",
27+
backgroundImage: "none"
28+
};
29+
2530
return (
26-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
31+
<nav style={navStyle} class="navbar navbar-inverse navbar-fixed-top" role="navigation">
2732
<div class="container">
2833
<div class="navbar-header">
2934
<button type="button" class="navbar-toggle" onClick={this.toggleCollapse.bind(this)} >

‎3-flux/src/js/pages/Layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Nav from "../components/layout/Nav";
77
export default class Layout extends React.Component {
88
render() {
99
const { location } = this.props;
10-
10+
1111
const containerStyle = {
1212
marginTop: "60px"
1313
};

‎3-flux/src/js/pages/Todos.js

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
22

33
import Todo from "../components/Todo";
4+
import NewTodo from "../components/Todo";
45
import * as TodoActions from "../actions/TodoActions";
56
import TodoStore from "../stores/TodoStore";
67

7-
88
export default class Todos extends React.Component {
99
constructor() {
1010
super();
@@ -35,6 +35,7 @@ export default class Todos extends React.Component {
3535

3636
// Start Anna Code
3737
addTodo(e) {
38+
console.log("??");
3839
e.preventDefault();
3940
TodoActions.createTodo(this.state.newTodo);
4041
this.setState({newTodo: ""});
@@ -52,15 +53,49 @@ export default class Todos extends React.Component {
5253
return <Todo key={todo.id} {...todo}/>;
5354
});
5455

56+
const customUl = {
57+
listStyle: "none",
58+
paddingLeft: "0"
59+
};
60+
61+
const headerStyling = {
62+
fontFamily: "Roboto",
63+
color: "#3C1053",
64+
marginBottom: "20px"
65+
};
66+
67+
const inputStyling = {
68+
borderRadius: "10px",
69+
borderStyle: "solid",
70+
borderWidth: "1px",
71+
borderColor: "#B19FBA",
72+
marginRight: "20px",
73+
minWidth: "200px",
74+
backgroundColor: "#D8CFDD",
75+
padding: "3px 15px 3px 15px"
76+
}
77+
78+
const formStyling = {
79+
paddingBottom: "10px"
80+
}
81+
82+
const standardButton = {
83+
borderRadius: "10px",
84+
borderStyle: "none",
85+
padding: "3px 15px 3px 15px",
86+
fontFamily: "Roboto",
87+
backgroundColor: "#765786",
88+
color: "#FFF"
89+
}
90+
5591
return (
5692
<div>
57-
<button onClick={this.reloadTodos.bind(this)}>Reload!</button>
58-
<h1>Todos</h1>
59-
<form>
60-
<input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
61-
<button onClick={this.addTodo.bind(this)}>Add Todo</button>
93+
<h1 style={headerStyling}>A List of things To Do</h1>
94+
<form style={formStyling}>
95+
<input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
96+
<button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
6297
</form>
63-
<ul>{TodoComponents}</ul>
98+
<ul style={customUl}>{TodoComponents}</ul>
6499
</div>
65100
);
66101
}

‎3-flux/src/js/stores/TodoStore.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class TodoStore extends EventEmitter {
99
{
1010
id: 113464613,
1111
text: "Go Shopping",
12-
complete: false
12+
complete: true
1313
},
1414
{
1515
id: 235684679,
@@ -34,7 +34,7 @@ class TodoStore extends EventEmitter {
3434
this.todos = this.todos.filter((entry) => {
3535
return entry.id !== id;
3636
});
37-
this.emit("change");
37+
// this.emit("change");
3838
}
3939

4040
getAll() {

‎3-flux/test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
'use strict';
2+
playNice() {
3+
4+
}

‎3-flux/webpack.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ module.exports = {
1616
presets: ['react', 'es2015', 'stage-0'],
1717
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
1818
}
19-
}
19+
},
20+
{ test: /\.css$/, loader: "style-loader!css-loader" }
2021
]
2122
},
2223
output: {

0 commit comments

Comments
 (0)