Permalink
Browse files

Add style to example application

  • Loading branch information...
Dominik Guzei
Dominik Guzei committed Feb 1, 2012
1 parent f2dc1ea commit 1189f9ec7111c22c8dfd7e30ba6439632557cfb3
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -3,6 +3,9 @@ App = @App
App.mediators.pagesMediator = SC.Object.create {
- currentPage: null
+ currentPage: null,
+
+ listNotesIsCurrent: NO
+ createNoteIsCurrent: NO
}
@@ -49,7 +49,7 @@ App.states.AuthenticationState = SC.State.extend {
authenticationMediator.set 'password', password
@gotoState 'Authentication.LoggedIn'
else
- authenticationMediator.set 'error', 'username or password are wrong.'
+ authenticationMediator.set 'error', 'Username or password are wrong.'
).handleActions('authenticate', 'loginFormSubmitted')
loginFormCancelled: ->
@@ -7,12 +7,23 @@ App = @App
pagesMediator = App.mediators.pagesMediator
pages = App.views.pages
+ROUTES = {
+ listNotes: 'notes'
+ createNote: 'notes/create'
+}
+
App.states.BrowsingState = SC.State.extend {
initialSubstate: 'Public'
- logout: ->
- @gotoState 'Browsing.Public.ListNotes'
+ # implement navigation as actions
+ listNotes: (->
+ SC.routes.set 'location', ROUTES.listNotes
+ ).handleActions 'logout', 'listNotesClicked'
+
+ createNote: (->
+ SC.routes.set 'location', ROUTES.createNote
+ ).handleActions 'createNoteClicked'
Public: SC.State.extend {
@@ -29,11 +40,15 @@ App.states.BrowsingState = SC.State.extend {
ListNotes: SC.State.extend {
- representRoute: 'notes'
+ representRoute: ROUTES.listNotes
enterState: ->
- SC.routes.set('location', 'notes')
+ SC.routes.set 'location', ROUTES.listNotes
pagesMediator.set 'currentPage', pages.ListNotesView
+ pagesMediator.set 'listNotesIsCurrent', YES
+
+ exitState: ->
+ pagesMediator.set 'listNotesIsCurrent', NO
}
}
@@ -54,11 +69,15 @@ App.states.BrowsingState = SC.State.extend {
return true
CreateNote: SC.State.extend {
- representRoute: 'notes/create'
+ representRoute: ROUTES.createNote
enterState: ->
- SC.routes.set('location', 'notes/create')
+ SC.routes.set 'location', ROUTES.createNote
pagesMediator.set 'currentPage', pages.CreateNoteView
+ pagesMediator.set 'createNoteIsCurrent', YES
+
+ exitState: ->
+ pagesMediator.set 'createNoteIsCurrent', NO
}
}
}
@@ -1,3 +1,10 @@
-{{view App.views.NavigationView}}
-{{view App.views.PagesView}}
+<img id="logo" src="/assets/logo.png"/>
+
+<h1>Quick Notes</h1>
+<p id="slogan">Example for Statecharts and Routing in Ember.js</p>
+
+<div id="app-content">
+ {{view App.views.NavigationView}}
+ {{view App.views.PagesView}}
+</div>
@@ -1,16 +1,18 @@
-<h2>Login:</h2>
+<div>
+ <h2>Login</h2>
-{{#if mediator.loggedIn}}
- <p>You are logged in as '{{mediator.userName}}'.</p>
-{{else}}
- <p class="notice">{{mediator.notice}}</p>
- <p class="error">{{mediator.error}}</p>
+ {{#if mediator.loggedIn}}
+ <p>You are logged in as '{{mediator.userName}}'.</p>
+ {{else}}
+ <p class="notice">{{mediator.notice}}</p>
+ <p class="error">{{mediator.error}}</p>
- <input type="text" placeholder="username" id="login-username" />
- <input type="password" placeholder="password" id="login-password" />
+ <input type="text" placeholder="username" id="login-username" />
+ <input type="password" placeholder="password" id="login-password" />
- <button type="button" {{action "login"}}>login</button>
+ <button type="button" {{action "login"}}>login</button>
- <p class="info">You can use 'user' as userName and 'password' as password.</p>
-{{/if}}
+ <p class="info">You can use 'user' as userName and 'password' as password.</p>
+ {{/if}}
+</div>
@@ -1,10 +1,25 @@
<ul>
- <li><a href="#notes">List</a></li>
- <li><a href="#notes/create">Create</a></li>
+ <li>
+ {{#view SC.Button action="listNotesClicked"
+ target="parentView"
+ classBinding="parentView.listNotesIsCurrent:active"}}
+ List Notes
+ {{/view}}
+ </li>
+
+ <li>
+ {{#view SC.Button
+ action="createNoteClicked"
+ target="parentView"
+ classBinding="parentView.createNoteIsCurrent:active"}}
+ Create Note
+ {{/view}}
+ </li>
+
{{#if loggedIn}}
- <li><button type="button" {{action "logout"}}>Logout</button></li>
+ <li><button type="button" {{action "logoutClicked"}}>Logout</button></li>
{{else}}
- <li><button type="button" {{action "login"}}>Login</button></li>
+ <li><button type="button" {{action "loginClicked"}}>Login</button></li>
{{/if}}
</ul>
@@ -1,5 +1,5 @@
-<h2>Create Note:</h2>
+<h2>Create Note</h2>
<p>This could be the page to create new notes.</p>
@@ -1,8 +1,16 @@
-<h2>Notes:</h2>
-<ul>
- <li>First Note</li>
- <li>Second Note</li>
- <li>Third Note</li>
- <li>Fourth Note</li>
+<h2>Notes</h2>
+<ul id="notes">
+ <li>
+ <h3>First Note</h3>
+ <p>Content of first note..</p>
+ </li>
+ <li>
+ <h3>Second Note</h3>
+ <p>Content of second note..</p>
+ </li>
+ <li>
+ <h3>Third Note</h3>
+ <p>Content of third note..</p>
+ </li>
</ul>
@@ -6,14 +6,24 @@ App = @App
App.views.NavigationView = SC.View.extend {
templateName: 'app_templates_navigation'
- elementId: 'navigation'
+ elementId: 'nav-main'
+ tagName: 'nav'
loggedInBinding: 'App.mediators.authenticationMediator.loggedIn'
- logout: ->
+ listNotesIsCurrentBinding: 'App.mediators.pagesMediator.listNotesIsCurrent'
+ createNoteIsCurrentBinding: 'App.mediators.pagesMediator.createNoteIsCurrent'
+
+ listNotesClicked: ->
+ App.statechart.send 'listNotesClicked'
+
+ createNoteClicked: ->
+ App.statechart.send 'createNoteClicked'
+
+ logoutClicked: ->
App.statechart.send 'logout'
- login: ->
+ loginClicked: ->
App.statechart.send 'login'
}
@@ -11,8 +11,3 @@
*= require_self
*= require_tree .
*/
-
-#login-overlay {
- width: 400px;
- display: none;
-}
@@ -0,0 +1,84 @@
+
+#app {
+ margin: 40px auto;
+ width: 400px;
+}
+
+#logo {
+ margin-top: 5px;
+ float: left;
+ margin-right: 1em;
+}
+
+#app-content {
+ clear: both;
+ margin-top: 1em;
+ border: 1px solid #ddd;
+ background-color: #efefef;
+
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+#login-overlay {
+ width: 400px;
+ display: none;
+
+ border:10px solid #666;
+ background-color: white;
+ /* for modern browsers use semi-transparent color on the border. nice! */
+ border:10px solid rgba(82, 82, 82, 0.698);
+
+ /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
+ -moz-border-radius:8px;
+ -webkit-border-radius:8px;
+
+ > div {
+ margin: 10px;
+ }
+
+ p {
+ margin: 0.5em 0;
+
+ &.info {
+ font-size: 0.8em;
+ color: #5E5E5E;
+ }
+
+ &.error {
+ color: #A70A0A;
+ }
+ }
+}
+
+#nav-main {
+
+ float:left;
+ width: 100%;
+
+ li button {
+ border: none;
+ float: left;
+ width: 33.33%;
+ padding: 0.3em 0;
+ background-color: #ddd;
+ margin: 0;
+ }
+
+ li button:hover, li button.active {
+ background-color: #ccc;
+ cursor: pointer;
+ }
+}
+
+#pages {
+ clear: both;
+ padding: 1em;
+}
+
+#notes {
+ li {
+ margin: 0.5em 0;
+ }
+}
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
Oops, something went wrong.

0 comments on commit 1189f9e

Please sign in to comment.