From 6e800ea2d93cd6c97ca30a2aa8d6fc0b708c5f52 Mon Sep 17 00:00:00 2001 From: Tyler Renelle Date: Mon, 9 Sep 2013 13:27:25 -0400 Subject: [PATCH] use markdown for profile-editing. Add save button. will remove linky once everything's in markdown --- Gruntfile.js | 2 + bower.json | 7 +++- public/js/app.js | 2 +- views/index.jade | 4 ++ views/options/profile.jade | 69 +++++++++++++++++++++----------- views/shared/modals/members.jade | 6 +-- 6 files changed, 60 insertions(+), 30 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index ea6ce7c7ce..ed246fdaf4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -16,6 +16,8 @@ module.exports = function(grunt) { 'public/bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js', 'public/bower_components/angular/angular.min.js', 'public/bower_components/angular-sanitize/angular-sanitize.min.js', + 'public/bower_components/showdown/compressed/showdown.js', + 'public/bower_components/angular-markdown-directive/markdown.js', 'public/bower_components/angular-route/angular-route.min.js', 'public/bower_components/angular-resource/angular-resource.min.js', 'public/bower_components/angular-ui/build/angular-ui.min.js', diff --git a/bower.json b/bower.json index c8edf3c963..612c18d804 100644 --- a/bower.json +++ b/bower.json @@ -31,9 +31,12 @@ "bootstrap": "v2.3.2", "angular-route": "1.2.0-rc.1", "angular-ui-utils": "~0.0.4", - "angular-sanitize": "1.2.0-rc.1" + "angular-sanitize": "1.2.0-rc.1", + "angular-markdown-directive": "~0.1.0" }, "resolutions": { - "jquery": "~2.0.3" + "jquery": "~2.0.3", + "angular": "1.2.0-rc.1", + "bootstrap": "v2.3.2" } } diff --git a/public/js/app.js b/public/js/app.js index 8b2ceb2715..9ff4cbd041 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1,7 +1,7 @@ "use strict"; window.habitrpg = angular.module('habitrpg', - ['ngRoute', 'ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'sharedServices', 'authServices', 'notificationServices', 'ui.bootstrap', 'ui.keypress']) + ['ngRoute', 'ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'sharedServices', 'authServices', 'notificationServices', 'ui.bootstrap', 'ui.keypress', 'btford.markdown']) .constant("API_URL", "") .constant("STORAGE_USER_ID", 'habitrpg-user') diff --git a/views/index.jade b/views/index.jade index 425e14cf9b..6164b1abf9 100644 --- a/views/index.jade +++ b/views/index.jade @@ -29,7 +29,11 @@ html script(type='text/javascript', src='/bower_components/jquery/jquery.min.js') script(type='text/javascript', src='/bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js') script(type='text/javascript', src='/bower_components/angular/angular.min.js') + script(type='text/javascript', src='/bower_components/angular-sanitize/angular-sanitize.min.js') + script(type='text/javascript', src='/bower_components/showdown/compressed/showdown.js') + script(type='text/javascript', src='/bower_components/angular-markdown-directive/markdown.js') + script(type='text/javascript', src='/bower_components/angular-route/angular-route.min.js') script(type='text/javascript', src='/bower_components/angular-resource/angular-resource.min.js') script(type='text/javascript', src='/bower_components/angular-ui/build/angular-ui.min.js') diff --git a/views/options/profile.jade b/views/options/profile.jade index 2d316b7559..7c9decc496 100644 --- a/views/options/profile.jade +++ b/views/options/profile.jade @@ -38,28 +38,49 @@ // ------- Edit ------- .span4 - // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak - img.pull-right(ng-src='{{user.profile.imageUrl}}') - .control-group - label.control-label(for='profileImageUrl') Photo Url - .controls - input#profileImageUrl(type='url', ng-model='user.profile.imageUrl', placeholder='Image Url', ng-blur='set("profile.imageUrl", user.profile.imageUrl)') - .control-group - label.control-label(for='profileFullName') Full Name - .controls - input#profileFullName(type='text', placeholder='Full Name', ng-model='user.profile.name', ng-blur='set("profile.name", user.profile.name)', ) - .control-group - label.control-label(for='profileBlurb') Blurb - .controls - textarea#profileBlurb(placeholder='Blurb', ng-model='user.profile.blurb', ng-blur='set("profile.blurb", user.profile.blurb)') - .control-group - label.control-label(for='profileWebsite') Websites - .controls + button.btn.btn-default(ng-click='_editing.profile = true', ng-show='!_editing.profile') Edit + button.btn.btn-primary(ng-click='_editing.profile = false', ng-show='_editing.profile') Save + div(ng-show='!_editing.profile') + h4 Display Name + span(ng-show='profile.profile.name') {{profile.profile.name}} + span.muted(ng-hide='profile.profile.name') - None - + + h4 Photo + img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}') + span.muted(ng-hide='profile.profile.imageUrl') - None - + + h4 Blurb + p(ng-show='profile.profile.blurb', btf-markdown='profile.profile.blurb') + span.muted(ng-hide='profile.profile.blurb') - None - + //{{profile.profile.blurb | linky:'_blank'}} + + h4 Websites + ul(ng-show='profile.profile.websites') + // TODO let's remove links eventually, since we can do markdown on profiles + li(ng-repeat='website in profile.profile.websites') + a(target='_blank', ng-href='{{website}}') {{website}} + span.muted(ng-hide='profile.profile.websites') - None - + + div.whatever-options(ng-show='_editing.profile') + // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak + .control-group.option-large + label.control-label Display Name + input.option-content(type='text', placeholder='Full Name', ng-model='user.profile.name', ng-blur='set("profile.name", user.profile.name)', ) + .control-group.option-large + label.control-label Photo Url + input.option-content(type='url', ng-model='user.profile.imageUrl', placeholder='Image Url', ng-blur='set("profile.imageUrl", user.profile.imageUrl)') + .control-group.option-large + label.control-label Blurb + textarea.option-content(style='height:15em;', placeholder='Blurb', ng-model='user.profile.blurb', ng-blur='set("profile.blurb", user.profile.blurb)') + small + a(target='_blank', href='http://daringfireball.net/projects/markdown/') Use Markdown form formatting + .control-group.option-large + label.control-label Websites form(ng-submit='addWebsite()') - input#profileWebsite(type='url', ng-model='_newWebsite', placeholder='Add Website') - ul - // would prefer if there were and index in #each, instead using data-website to search with indexOf - li(ng-repeat='website in user.profile.websites') - | {{website}} - a(data-website='{{website}}', ng-click='removeWebsite($index)') - i.icon-remove + input.option-content(type='url', ng-model='_newWebsite', placeholder='Add Website') + ul + // would prefer if there were and index in #each, instead using data-website to search with indexOf + li(ng-repeat='website in user.profile.websites') + | {{website}} + a(ng-click='removeWebsite($index)') + i.icon-remove diff --git a/views/shared/modals/members.jade b/views/shared/modals/members.jade index 4e32eac066..a14e92d45f 100644 --- a/views/shared/modals/members.jade +++ b/views/shared/modals/members.jade @@ -8,10 +8,10 @@ div(ng-controller='MemberModalCtrl') .row-fluid .span6 img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}') - p(ng-show='profile.profile.blurb') {{profile.profile.blurb | linky:'_blank'}} + p(ng-show='profile.profile.blurb', btf-markdown='profile.profile.blurb') ul(ng-show='profile.profile.websites') - li(ng-repeat='website in profile.profile.websites') - a(href='{{website}}') {{website}} + li(ng-repeat='website in profile.profile.websites') + a(href='{{website}}', target='_blank') {{website}} h3 Stats include ../profiles/stats .span6