From c764e3b3964e137038b964c44b0b736828478868 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sat, 24 Jan 2015 09:41:57 -0500 Subject: Create initial Notes Angular app Lists all notes and populates content section with the body of a note when one is clicked. --- app/assets/javascripts/application.js | 2 ++ app/assets/javascripts/notes.coffee | 3 --- app/assets/javascripts/notes.js | 15 +++++++++++++++ app/assets/javascripts/services/notes.js | 29 +++++++++++++++++++++++++++++ 4 files changed, 46 insertions(+), 3 deletions(-) delete mode 100644 app/assets/javascripts/notes.coffee create mode 100644 app/assets/javascripts/notes.js create mode 100644 app/assets/javascripts/services/notes.js (limited to 'app/assets') diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 9e42736..f1823cb 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -14,4 +14,6 @@ //= require jquery_ujs //= require turbolinks //= require angular/angular +//= require angular-resource/angular-resource +//= require_tree ./services //= require_tree . diff --git a/app/assets/javascripts/notes.coffee b/app/assets/javascripts/notes.coffee deleted file mode 100644 index 24f83d1..0000000 --- a/app/assets/javascripts/notes.coffee +++ /dev/null @@ -1,3 +0,0 @@ -# Place all the behaviors and hooks related to the matching controller here. -# All this logic will automatically be available in application.js. -# You can use CoffeeScript in this file: http://coffeescript.org/ diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js new file mode 100644 index 0000000..9a92f3e --- /dev/null +++ b/app/assets/javascripts/notes.js @@ -0,0 +1,15 @@ +(function() { + angular + .module('nt.Notes', [ + 'nt.NoteService' + ]) + .controller('MainController', [ + '$scope', + 'NoteService', + function($scope, NoteService) { + $scope.noteService = NoteService; + + $scope.noteService.get_notes(); + } + ]); +})(); diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js new file mode 100644 index 0000000..b1b4e90 --- /dev/null +++ b/app/assets/javascripts/services/notes.js @@ -0,0 +1,29 @@ +angular + .module('nt.NoteService', ['ngResource']) + .factory('NoteService', [ + '$resource', + function($resource) { + var Note = $resource('/notes/:id.json', { id: '@id' }); + + return { + notes: [], + current_note: null, + + get_notes: function() { + this.notes = Note.query(); + }, + + get_note: function(note) { + this.current_note = Note.get({ id: note.id }); + }, + + save: function() { + Note.save({ + id: this.current_note.id, + title: this.current_note.title, + body: this.current_note.body + }); + } + }; + } + ]); -- cgit v1.2.3 From 384167b6122e44971aac7f98a0131f8cad1ef47f Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sat, 24 Jan 2015 09:45:54 -0500 Subject: main view: Create "New" button Non-functional. To be used to create a new note. --- app/assets/stylesheets/layouts/_global.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss index 5113083..02dbe0c 100644 --- a/app/assets/stylesheets/layouts/_global.scss +++ b/app/assets/stylesheets/layouts/_global.scss @@ -17,6 +17,10 @@ body { margin-top: 70px; } +.margin-left-8 { + margin-left: 8px; +} + .padding-13 { padding: 13px; @@ -48,10 +52,10 @@ body { height: 30px; padding: 20px; - .right-button { + .right-section { position: absolute; right: 40px; - top: -33px; + top: -22px; } } -- cgit v1.2.3 From 154fb936beb820d5e8db616899a6a95bc8d1c080 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sat, 24 Jan 2015 10:41:07 -0500 Subject: main view: Create & update work Add hooks to create new notes and save existing notes from the interface. --- app/assets/javascripts/services/notes.js | 27 +++++++++++++++++-- app/assets/stylesheets/components/type.scss | 4 +++ app/assets/stylesheets/layouts/_global.scss | 41 ++++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js index b1b4e90..bfa0b03 100644 --- a/app/assets/javascripts/services/notes.js +++ b/app/assets/javascripts/services/notes.js @@ -3,7 +3,13 @@ angular .factory('NoteService', [ '$resource', function($resource) { - var Note = $resource('/notes/:id.json', { id: '@id' }); + var Note = $resource('/notes/:id.json', + { id: '@id' }, + { + save: { + method: 'PUT' + } + }); return { notes: [], @@ -14,15 +20,32 @@ angular }, get_note: function(note) { - this.current_note = Note.get({ id: note.id }); + this.current_note = note; }, save: function() { + console.log(this.current_note.body); Note.save({ id: this.current_note.id, title: this.current_note.title, body: this.current_note.body }); + }, + + create: function () { + var _this = this; + + if (this.new_note_title) { + Note.save({ + title: this.new_note_title, + body: '' + }, function(response) { + _this.show_create = false; + delete _this.new_note_title; + _this.current_note = response; + _this.get_notes(); + }); + } } }; } diff --git a/app/assets/stylesheets/components/type.scss b/app/assets/stylesheets/components/type.scss index 7e8fc05..d4e4ecf 100644 --- a/app/assets/stylesheets/components/type.scss +++ b/app/assets/stylesheets/components/type.scss @@ -3,6 +3,10 @@ } +.font-size-16 { + font-size: 16px; +} + .font-size-28 { font-size: 28px; } diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss index 02dbe0c..88973e3 100644 --- a/app/assets/stylesheets/layouts/_global.scss +++ b/app/assets/stylesheets/layouts/_global.scss @@ -4,6 +4,10 @@ body { } +.display-inline-block { + display: inline-block; +} + .display-block { display: block; } @@ -13,6 +17,10 @@ body { } +.margin-top--15 { + margin-top: -15px; +} + .margin-top-70 { margin-top: 70px; } @@ -41,6 +49,19 @@ body { } +.border-none { + border: none; +} + +.outline-none { + outline: none; +} + + +.width-100\% { + width: 100%; +} + .min-height-100\% { min-height: 100%; } @@ -121,8 +142,11 @@ $sidebar-width: 250px; .note-editor { margin-left: $sidebar-width; padding: 12px 15px; - font: 18px/1.7 Georgia, Times, serif; outline: none; + + textarea { + font: 18px/1.7 Georgia, Times, serif; + } } @@ -134,6 +158,12 @@ $sidebar-width: 250px; border-radius: 6px; } +button.button { + border: none; + font: 16px Avenir, Helvetica, sans-serif; + cursor: pointer; +} + .button:hover { background-color: #178E17; color: #eee; @@ -144,3 +174,12 @@ $sidebar-width: 250px; -webkit-box-shadow:inset 0 2px 4px 0 #0D4F0D; box-shadow:inset 0 2px 4px 0 #0D4F0D; } + + +input.form-field { + border: 2px solid rgb(213, 202, 202); + width: 260px; + height: 42px; + padding: 0 10px; + font-size: 16px; +} -- cgit v1.2.3 From 397bdfd9ee28b62afb88d9e2e6872d679a9e3b19 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sat, 24 Jan 2015 23:17:55 -0500 Subject: services/notes.js: Simplify save function Leverage Angular `$resource`s `$save` method to simplify this function. --- app/assets/javascripts/services/notes.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js index bfa0b03..389f25d 100644 --- a/app/assets/javascripts/services/notes.js +++ b/app/assets/javascripts/services/notes.js @@ -24,12 +24,7 @@ angular }, save: function() { - console.log(this.current_note.body); - Note.save({ - id: this.current_note.id, - title: this.current_note.title, - body: this.current_note.body - }); + this.current_note.$save(); }, create: function () { -- cgit v1.2.3 From 0ec62bcbe1abc707d1ce8ac47aefe378f0ae361e Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sat, 24 Jan 2015 23:26:50 -0500 Subject: services/notes.js: Change `save` function to `update` Angular uses `save` for new resources. Change this to `update` since it operates on existing resources. --- app/assets/javascripts/services/notes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js index 389f25d..bda6ae7 100644 --- a/app/assets/javascripts/services/notes.js +++ b/app/assets/javascripts/services/notes.js @@ -6,7 +6,7 @@ angular var Note = $resource('/notes/:id.json', { id: '@id' }, { - save: { + update: { method: 'PUT' } }); @@ -23,8 +23,8 @@ angular this.current_note = note; }, - save: function() { - this.current_note.$save(); + update: function() { + this.current_note.$update(); }, create: function () { -- cgit v1.2.3