diff options
| -rw-r--r-- | app/assets/javascripts/services/notes.js | 27 | ||||
| -rw-r--r-- | app/assets/stylesheets/components/type.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/layouts/_global.scss | 41 | ||||
| -rw-r--r-- | app/views/home/main.html.erb | 19 |
4 files changed, 85 insertions, 6 deletions
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; +} diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb index 7d34ad2..610d86f 100644 --- a/app/views/home/main.html.erb +++ b/app/views/home/main.html.erb @@ -3,10 +3,21 @@ <div class="position-relative"> <div class="right-section"> + <span class="display-inline-block margin-top--15" + ng-show="noteService.show_create"> + <input type="text" class="form-field" ng-model="noteService.new_note_title" /> + <button type="button" class="button" + ng-click="noteService.create()">Create</button> + <button type="button" class="button" + ng-click="noteService.show_create = false">Cancel</button> + </span> + <a href="#" class="button" - ng-click="">New</a> + ng-show="!noteService.show_create" + ng-click="noteService.show_create = true">New</a> <a href="#" class="button margin-left-8" + ng-show="noteService.current_note" ng-click="noteService.save()">Save</a> </div> </div> @@ -22,6 +33,8 @@ </div> </div> - <div class="note-editor" contenteditable - ng-bind="noteService.current_note.body"></div> + <div class="note-editor"> + <textarea class="border-none outline-none width-100% font-size-16" + ng-model="noteService.current_note.body"></textarea> + </div> </div> |