From ea7260d107cc39ea6bba82d6f8fdb776968931bd Mon Sep 17 00:00:00 2001 From: Luis Sala Date: Sat, 13 Aug 2011 19:46:45 -0700 Subject: [PATCH] Details view implemented. Basic details view implementation complete. TODO: Implement clicking of photo, usernames and tags. --- .../main.scssc | Bin 56655 -> 61982 bytes css/main.scss | 152 ++++++++++++------ index.html | 58 ++++--- lib/controllers.js | 13 +- lib/main.js | 1 + lib/models.js | 7 +- lib/statechart.js | 29 +++- lib/utils.js | 5 + lib/views.js | 4 +- 9 files changed, 183 insertions(+), 86 deletions(-) create mode 100644 lib/utils.js diff --git a/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc b/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc index ead5deb844115b99d89e08210ef971708f2b3a3d..48a9722015294372e43dca067c3213821721388f 100644 GIT binary patch delta 12793 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 VZ2w>xO#bjFma|Up`tz&m{{w&iZL9zQ delta 7803 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 Ce8f-y diff --git a/css/main.scss b/css/main.scss index e2f06e1..a4a63a6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -77,40 +77,103 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } -/* - // ========================================== \\ - || || - || Application Styles || - || || - \\ ========================================== // -*/ +/* Custom Application Styles */ + +$black: #000; +$light-gray: #ddd; +$green: #090; +$magenta: #f4f; + +$nav-height: 40px; + +$home-widget-width: 300px; +$home-widget-height: 50px; +$home-widget-spacing: 8px; +$home-search-button-width: 80px; + +$widget-font-size: 20px; + +$standard-widget-spacing: 8px; body { - background-color: #000; + background-color: $black; + color: $light-gray; +} + +.button-magenta { + background-color: $magenta; + border-top-color: $magenta * 2; + border-left-color:$magenta * 2; + border-bottom-color: $magenta / 1.2; + border-right-color: $magenta / 1.2; + +} + +.button-green { + background-color: $green; + border-top-color: $green * 2; + border-left-color:$green * 2; + border-bottom-color: $green / 1.2; + border-right-color: $green / 1.2; +} + +@mixin main-content { + margin-top: $nav-height+$home-widget-spacing; + background-color: $black; } .nav { position: fixed; top: 0; - height: 20px; + height: $nav-height; width: 100%; - background-color: #ddd; + background-color: $light-gray; } .nav-title{ text-align: center; + font-size: $widget-font-size; } .nav-settings-button { float: right; + height: $home-widget-height * .75; + font-size: $widget-font-size; } -.nav-black-button { +.nav-back-button { + height: $home-widget-height * .75; + font-size: $widget-font-size; } .home { - margin-top: 30px; + @include main-content; +} + +.home-button-standard { + width: $home-widget-width; + height: $home-widget-height; + margin-bottom: $home-widget-spacing; + font-size: $widget-font-size; +} + +.home-button-search { + width: $home-widget-width * .2; + height: $home-widget-height; + margin-left:$home-widget-spacing; + font-size: $widget-font-size; +} + +.home-search-field { + width: $home-widget-width * .75; + height: $home-widget-height - 6; + margin-bottom: 3px; + font-size: $widget-font-size; +} + +.photo-grid { + @include main-content; } .dashboard-item { @@ -147,29 +210,20 @@ body { } .photo-details { - position: absolute; - top: 10px; - bottom: 10px; - left: 10px; - right: 10px; - z-index: 999; - background-color: #ccc; + @include main-content; } .photo-details-image { - width: 95%; - height: auto; + width: 95%; + height: auto; + } .photo-details-data { - float: right; - width: 50%; - margin-top:2%; - margin-right: 2%; + } .photo-details-user { - margin-top: 10px; } .photo-details-user-profile-picture { @@ -179,28 +233,38 @@ body { } .photo-details-user-profile-username { - float: left; - margin-top: 20px; - margin-left: 10px; - font-size: 30px; + color: $light-gray; + font-size: $widget-font-size; font-weight: bold; } .photo-details-comments { - clear: both; - margin-top: 80px; } .photo-details-comment-item { - margin-top: 10px; - font-size: 18px; + color: $light-gray; +} + +.photo-details-likes { + +} + +.photo-details-like-item { + margin-right: $standard-widget-spacing; + display: inline; +} + +.photo-details-tags { + +} + +.photo-details-tag-item { + margin-right: $standard-widget-spacing; + display: inline; } .photo-details-image-container { - float:left; - width:45%; - margin-top: 2%; - margin-left: 2%; + } .app-button { @@ -267,13 +331,7 @@ body { height: auto; } - .photo-details-image-container { - width: 100%; - } - .photo-details-data { - display: none; - } /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } @@ -285,13 +343,7 @@ body { height: auto; } - .photo-details-image-container { - width: 100%; - } - .photo-details-data { - display: none; - } /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } diff --git a/index.html b/index.html index 1faea36..9974adf 100644 --- a/index.html +++ b/index.html @@ -21,21 +21,24 @@ - + - + - + + + +
+ +

Tags:

+ {{#collection contentBinding="content.tags" class="photo-details-tags" itemClass="photo-details-tag-item"}} + {{#view SC.Button class="button-green"}}{{parentView.content}}{{/view}} + {{/collection}} + +

Likes:

+ + {{#collection contentBinding="content.likes.data" class="photo-details-likes" itemClass="photo-details-like-item"}} + {{#view SC.Button class="button-magenta"}} {{parentView.content.username}} {{/view}} + {{/collection}} + +

Comments:

+ {{#collection contentBinding="content.comments.data" class="photo-details-comments" itemClass="photo-details-comment-item"}} + {{content.from.username}}: {{content.text}} + {{/collection}} + + +
+ diff --git a/lib/controllers.js b/lib/controllers.js index 18c2963..3a0b011 100644 --- a/lib/controllers.js +++ b/lib/controllers.js @@ -4,6 +4,8 @@ // ========================================================================== App.homeViewDelegate = SC.Object.create({ + searchQuery: "SEARCH", + showPhotoGrid: function() { App.statechart.sendAction("showPhotoGrid"); } @@ -36,16 +38,7 @@ App.mediaController = SC.ArrayProxy.create({ openDetails: function(item) { SC.Logger.log("Opening: "+item.get("id")); - - var view = App.MediaDetailsView.create({ - content: item - }); - - this.set("comments", item.getPath("comments.data")); - - view.append(); - - this.set("detailsView", view); + App.statechart.sendAction("showPhotoDetails", item); }, closeDetails: function() { diff --git a/lib/main.js b/lib/main.js index 586580a..766911d 100644 --- a/lib/main.js +++ b/lib/main.js @@ -4,6 +4,7 @@ // ========================================================================== require('./core'); +require('./utils'); require('./models'); require('./datasource'); require('./controllers'); diff --git a/lib/models.js b/lib/models.js index 7d32d56..f7dd4f0 100644 --- a/lib/models.js +++ b/lib/models.js @@ -41,6 +41,11 @@ App.Models.CommentCollection = SC.Record.extend({ data: SC.Record.toMany('App.Models.Comment', {nested: true}) }); +App.Models.LikesCollection = SC.Record.extend({ + count: SC.Record.attr(Number), + data: SC.Record.toMany('App.Models.User', {nested: true}) +}); + App.Models.Tag = SC.Record.extend({ media_count: SC.Record.attr(Number), name: SC.Record.attr(String) @@ -52,7 +57,7 @@ App.Models.Media = SC.Record.extend({ images: SC.Record.toOne('App.Models.ImageCollection', {nested: true}), caption: SC.Record.toOne('App.Models.Comment', {nested: true}), comments: SC.Record.toOne('App.Models.CommentCollection', {nested: true}), - likes: SC.Record.toOne('App.Models.CommentCollection', {nested: true}), + likes: SC.Record.toOne('App.Models.LikesCollection', {nested: true}), tags: SC.Record.attr(Array), createDateTime: function() { return SC.DateTime.create(this.get("created_time")); diff --git a/lib/statechart.js b/lib/statechart.js index c82240d..c964f1a 100644 --- a/lib/statechart.js +++ b/lib/statechart.js @@ -59,7 +59,7 @@ App.statechart = SC.Statechart.create({ enterState: function() { if (!this._photoGrid) { - this._photoGrid = App.PhotoGridView.create().append(); + this._photoGrid = App.PhotoGridView.create(); } this._photoGrid.append(); @@ -69,6 +69,33 @@ App.statechart = SC.Statechart.create({ this._photoGrid.remove(); }, + goBack: function(){ + this.gotoState(this.get("statechart").popHistory()); + }, + + showPhotoDetails: function(item) { + this.get("statechart").pushHistory(this); + this.gotoState("showingPhotoDetails", item); + } + }), // end state: showingPhotoGrid + + //STATE: showingPhotoDetails + showingPhotoDetails: SC.State.extend({ + + _detailsView: null, + + enterState: function(item) { + if (!this._detailsView) { + this._detailsView = App.MediaDetailsView.create(); + } + this._detailsView.set("content", item); + this._detailsView.append(); + }, + + exitState: function(){ + this._detailsView.remove(); + }, + goBack: function(){ this.gotoState(this.get("statechart").popHistory()); } diff --git a/lib/utils.js b/lib/utils.js new file mode 100644 index 0000000..5588faf --- /dev/null +++ b/lib/utils.js @@ -0,0 +1,5 @@ +App.HistorySupport = SC.Object.extend({ + goBack: function(){ + this.gotoState(this.get("statechart").popHistory()); + } +}); \ No newline at end of file diff --git a/lib/views.js b/lib/views.js index fb19f6a..53a12e7 100644 --- a/lib/views.js +++ b/lib/views.js @@ -6,7 +6,7 @@ App.MainView = SC.View.extend({ templateName: "home", - classNames: ["home"], + classNames: ["home"] }); @@ -31,9 +31,7 @@ App.MediaItemView = SC.View.extend({ }, tapEnd: function() { SC.Logger.log("Tap/Click Detected: "+ this.getPath("content.id")); - App.mediaController.openDetails(this.get("content")); - return true; }