diff --git a/app/assets/javascripts/app/forms/picture_form.js b/app/assets/javascripts/app/forms/picture_form.js index 92640363b..2f46dc71e 100644 --- a/app/assets/javascripts/app/forms/picture_form.js +++ b/app/assets/javascripts/app/forms/picture_form.js @@ -1,11 +1,24 @@ -app.forms.Picture = app.views.Base.extend({ - templateName : "picture-form", - +app.forms.PictureBase = app.views.Base.extend({ events : { 'ajax:complete .new_photo' : "photoUploaded", "change input[name='photo[user_file]']" : "submitForm" }, + photoUploaded : $.noop, + + postRenderTemplate : function(){ + this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content")) + }, + + submitForm : function (){ + this.$("form").submit(); + } +}); + +/* multi photo uploader */ +app.forms.Picture = app.forms.PictureBase.extend({ + templateName : "picture-form", + initialize : function() { this.photos = new Backbone.Collection() this.photos.bind("add", this.render, this) @@ -38,4 +51,18 @@ app.forms.Picture = app.views.Base.extend({ photoContainer.append(photoView) }) } +}); + +/* wallpaper uploader */ +app.forms.Wallpaper = app.forms.PictureBase.extend({ + templateName : "wallpaper-form", + + photoUploaded : function(evt, xhr) { + resp = JSON.parse(xhr.responseText) + if(resp.success) { + $("#profile").css("background-image", "url(" + resp.data.wallpaper + ")") + } else { + alert("Upload failed! Please try again. " + resp.error); + } + } }); \ No newline at end of file diff --git a/app/assets/javascripts/app/pages/profile.js b/app/assets/javascripts/app/pages/profile.js index 8490a2c70..ae3b97f4c 100644 --- a/app/assets/javascripts/app/pages/profile.js +++ b/app/assets/javascripts/app/pages/profile.js @@ -9,7 +9,8 @@ app.pages.Profile = app.views.Base.extend({ subviews : { "#profile-info" : "profileInfo", - "#canvas" : "canvasView" + "#canvas" : "canvasView", + "#wallpaper-upload" : "wallpaperForm" }, events : { @@ -38,7 +39,7 @@ app.pages.Profile = app.views.Base.extend({ this.model = new app.models.Profile.findByGuid(options.personId) this.stream = options && options.stream || new app.models.Stream() - this.model.bind("change", this.setPageTitle, this) + this.model.bind("change", this.setPageTitleAndBackground, this) /* binds for getting started pulsation */ this.stream.bind("fetched", this.pulsateNewPostControl, this) @@ -47,6 +48,7 @@ app.pages.Profile = app.views.Base.extend({ this.stream.preloadOrFetch(); this.canvasView = new app.views.Canvas({ model : this.stream }) + this.wallpaperForm = new app.forms.Wallpaper() // send in isOwnProfile data this.profileInfo = new app.views.ProfileInfo({ model : this.model.set({isOwnProfile : this.isOwnProfile()}) }) @@ -60,9 +62,11 @@ app.pages.Profile = app.views.Base.extend({ ]("pulse") }, - setPageTitle : function() { - if(this.model.get("name")) + setPageTitleAndBackground : function() { + if(this.model.get("name")) { document.title = this.model.get("name") + this.$el.css("background-image", "url(" + this.model.get("wallpaper") + ")") + } }, toggleEdit : function(evt) { diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 4bc38b406..719aaea8b 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -441,19 +441,6 @@ div[data-template=flow] { right : 10px; top : 10px; - - .label { - padding : 2px 5px; - padding-bottom : 3px; - - span { - display : inline-block; - position : relative; - top : 1px; - font-family : Roboto-Bold; - } - } - & > a { @include transition(opacity); @include opacity(0.4); @@ -465,4 +452,17 @@ div[data-template=flow] { text-decoration : none; } } -} \ No newline at end of file +} + +/* bootstrap label fixes for Roboto */ +.label { + padding : 2px 5px; + padding-bottom : 3px; + + span { + display : inline-block; + position : relative; + top : 1px; + font-family : Roboto-Bold; + } +} diff --git a/app/assets/stylesheets/new_styles/_composer.scss b/app/assets/stylesheets/new_styles/_composer.scss index 7b8e8114a..89e5af3d3 100644 --- a/app/assets/stylesheets/new_styles/_composer.scss +++ b/app/assets/stylesheets/new_styles/_composer.scss @@ -11,9 +11,7 @@ #photo_upload_button { position: relative; - margin : { - bottom : 9px; - } + margin-bottom : 9px; input{ @include opacity(0); @@ -21,6 +19,7 @@ top: 0; left: 0; height:100%; + cursor : pointer; } } diff --git a/app/assets/stylesheets/new_styles/_profile.scss b/app/assets/stylesheets/new_styles/_profile.scss index d3a440fc5..0f769d14c 100644 --- a/app/assets/stylesheets/new_styles/_profile.scss +++ b/app/assets/stylesheets/new_styles/_profile.scss @@ -13,7 +13,7 @@ NOTE: I noticed that just turning the brightness down had an adverse affect on contrast, thus the "washing out" at -50 contrast. For more info on this specific command, read the documentation on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */ - image : url('/imagetest.jpg'); + //image : url('/imagetest.jpg'); size : cover; attachment : fixed; diff --git a/app/assets/templates/profile.jst.hbs b/app/assets/templates/profile.jst.hbs index 9106abed4..03711e064 100644 --- a/app/assets/templates/profile.jst.hbs +++ b/app/assets/templates/profile.jst.hbs @@ -1,3 +1,7 @@ +{{#if isOwnProfile}} +
+{{/if}} +