Use Bootstrap modal for new aspect form

16 files changed, 177 insertions, 117 deletions

diff --git a/app/assets/javascripts/app/collections/aspects.js b/app/assets/javascripts/app/collections/aspects.js
index 1e284274b..7b25d33b5 100644
--- a/app/assets/javascripts/app/collections/aspects.js
+++ b/app/assets/javascripts/app/collections/aspects.js
@@ -1,7 +1,7 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.collections.Aspects = Backbone.Collection.extend({
-  model: app.models.Aspect,
+  model: app.models.AspectSelection,
 
   selectedAspects: function(attribute){
     return _.pluck(_.filter(this.toJSON(), function(a){
diff --git a/app/assets/javascripts/app/models/aspect.js b/app/assets/javascripts/app/models/aspect.js
index 7ff651d84..b9c476806 100644
--- a/app/assets/javascripts/app/models/aspect.js
+++ b/app/assets/javascripts/app/models/aspect.js
@@ -1,9 +1,5 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
 app.models.Aspect = Backbone.Model.extend({
-  toggleSelected: function(){
-    this.set({'selected' : !this.get('selected')}, {async: false});
-  }
+  urlRoot: "/aspects"
 });
 // @license-end
-
diff --git a/app/assets/javascripts/app/models/aspect_selection.js b/app/assets/javascripts/app/models/aspect_selection.js
new file mode 100644
index 000000000..fac37c91d
--- /dev/null
+++ b/app/assets/javascripts/app/models/aspect_selection.js
@@ -0,0 +1,7 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+app.models.AspectSelection = Backbone.Model.extend({
+  toggleSelected: function(){
+    this.set({"selected" : !this.get("selected")}, {async: false});
+  }
+});
+// @license-end
diff --git a/app/assets/javascripts/app/pages/contacts.js b/app/assets/javascripts/app/pages/contacts.js
index 996a5898b..4ae44878b 100644
--- a/app/assets/javascripts/app/pages/contacts.js
+++ b/app/assets/javascripts/app/pages/contacts.js
@@ -16,8 +16,12 @@ app.pages.Contacts = Backbone.View.extend({
     this.chat_toggle = $("#chat_privilege_toggle .entypo");
     this.stream = opts.stream;
     this.stream.render();
-    $("#people_stream.contacts .header .entypo").tooltip({ 'placement': 'bottom'});
-    $(document).on('ajax:success', 'form.edit_aspect', this.updateAspectName);
+    $("#people_stream.contacts .header .entypo").tooltip({"placement": "bottom"});
+    $(document).on("ajax:success", "form.edit_aspect", this.updateAspectName);
+    app.events.on("aspect:create", function(){ window.location.reload() });
+
+    this.aspectCreateView = new app.views.AspectCreate({ el: $("#newAspectContainer") });
+    this.aspectCreateView.render();
   },
 
   toggleChatPrivilege: function() {
@@ -26,13 +30,13 @@ app.pages.Contacts = Backbone.View.extend({
                       .removeClass("enabled")
                       .removeAttr("data-original-title")
                       .attr("title", Diaspora.I18n.t("contacts.aspect_chat_is_not_enabled"))
-                      .tooltip({'placement': 'bottom'});
+                      .tooltip({"placement": "bottom"});
     } else {
       this.chat_toggle.tooltip("destroy")
                       .addClass("enabled")
                       .removeAttr("data-original-title")
                       .attr("title", Diaspora.I18n.t("contacts.aspect_chat_is_enabled"))
-                      .tooltip({'placement': 'bottom'});
+                      .tooltip({"placement": "bottom"});
     }
   },
 
@@ -43,7 +47,7 @@ app.pages.Contacts = Backbone.View.extend({
                             .tooltip("destroy")
                             .removeAttr("data-original-title")
                             .attr("title", Diaspora.I18n.t("contacts.aspect_list_is_not_visible"))
-                            .tooltip({'placement': 'bottom'});
+                            .tooltip({"placement": "bottom"});
     }
     else {
       this.visibility_toggle.removeClass("lock")
@@ -51,7 +55,7 @@ app.pages.Contacts = Backbone.View.extend({
                             .tooltip("destroy")
                             .removeAttr("data-original-title")
                             .attr("title", Diaspora.I18n.t("contacts.aspect_list_is_visible"))
-                            .tooltip({'placement': 'bottom'});
+                            .tooltip({"placement": "bottom"});
     }
   },
 
diff --git a/app/assets/javascripts/app/views/aspect_create_view.js b/app/assets/javascripts/app/views/aspect_create_view.js
new file mode 100644
index 000000000..4ef77c808
--- /dev/null
+++ b/app/assets/javascripts/app/views/aspect_create_view.js
@@ -0,0 +1,63 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+app.views.AspectCreate = app.views.Base.extend({
+
+  templateName: "aspect_create_modal",
+
+  events: {
+    "click .btn.creation": "createAspect"
+  },
+
+  initialize: function(opts) {
+    this._personId = _.has(opts, "personId") ? opts.personId : null;
+  },
+
+  presenter: function() {
+    return _.extend(this.defaultPresenter(), {
+      addPersonId: this._personId !== null,
+      personId : this._personId
+    });
+  },
+
+  postRenderTemplate: function() {
+    this.modal = this.$(".modal");
+  },
+
+  _contactsVisible: function() {
+    return this.$("#aspect_contacts_visible").is(":checked");
+  },
+
+  _name: function() {
+    return this.$("#aspect_name").val();
+  },
+
+  createAspect: function() {
+    var aspect = new app.models.Aspect({
+      "person_id": this._personId,
+      "name": this._name(),
+      "contacts_visible": this._contactsVisible()
+    });
+
+    var self = this;
+    aspect.on("sync", function(response) {
+      var aspectId   = response.get("id"),
+          aspectName = response.get("name");
+
+      self.modal.modal("hide");
+      app.events.trigger("aspect:create", aspectId);
+      Diaspora.page.flashMessages.render({
+        "success": true,
+        "notice": Diaspora.I18n.t("aspects.create.success", {"name": aspectName})
+      });
+    });
+
+    aspect.on("error", function() {
+      self.modal.modal("hide");
+      Diaspora.page.flashMessages.render({
+        "success": false,
+        "notice": Diaspora.I18n.t("aspects.create.failure")
+      });
+    });
+    return aspect.save();
+  }
+});
+// @license-end
diff --git a/app/assets/javascripts/app/views/aspect_membership_view.js b/app/assets/javascripts/app/views/aspect_membership_view.js
index d22452421..4d8d52367 100644
--- a/app/assets/javascripts/app/views/aspect_membership_view.js
+++ b/app/assets/javascripts/app/views/aspect_membership_view.js
@@ -13,12 +13,20 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
 
   events: {
     "click ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
-    "keypress ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler"
+    "keypress ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
+    "click ul.aspect_membership.dropdown-menu > li.newItem": "showModal"
   },
 
   initialize: function() {
     this.list_item = null;
     this.dropdown  = null;
+    if (this.$(".newAspectContainer").length > 0) {
+      this.aspectCreateView = new app.views.AspectCreate({
+        el:       this.$(".newAspectContainer"),
+        personId: this.$("ul.dropdown-menu").data("person_id")
+      });
+      this.aspectCreateView.render();
+    }
   },
 
   // decide what to do when clicked
@@ -140,6 +148,9 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
     this._toggleCheckbox(target);
     this._updateButton('green');
   },
+
+  showModal: function() {
+    this.$("#newAspectModal").modal("show");
+  }
 });
 // @license-end
-
diff --git a/app/assets/javascripts/app/views/aspects_list_view.js b/app/assets/javascripts/app/views/aspects_list_view.js
index 29cdf45a5..c0e5646f7 100644
--- a/app/assets/javascripts/app/views/aspects_list_view.js
+++ b/app/assets/javascripts/app/views/aspects_list_view.js
@@ -6,18 +6,26 @@ app.views.AspectsList = app.views.Base.extend({
   el: '#aspects_list',
 
   events: {
-    'click .toggle_selector' : 'toggleAll'
+    "click .toggle_selector" : "toggleAll"
+  },
+
+  subviews : {
+    "#newAspectContainer" : "aspectCreateView"
   },
 
   initialize: function() {
-    this.collection.on('change', this.toggleSelector, this);
-    this.collection.on('change', this.updateStreamTitle, this);
-    this.collection.on('aspectStreamFetched', this.updateAspectList, this);
+    this.collection.on("change", this.toggleSelector, this);
+    this.collection.on("change", this.updateStreamTitle, this);
+    this.collection.on("aspectStreamFetched", this.updateAspectList, this);
+    app.events.on("aspect:create", function(id) { window.location = "/contacts?a_id=" + id });
+  },
+
+  aspectCreateView: function() {
+    return new app.views.AspectCreate();
   },
 
   postRenderTemplate: function() {
     this.collection.each(this.appendAspect, this);
-    this.$('a[rel*=facebox]').facebox();
     this.updateStreamTitle();
     this.toggleSelector();
   },
@@ -67,6 +75,6 @@ app.views.AspectsList = app.views.Base.extend({
 
   hideAspectsList: function() {
     this.$el.empty();
-  },
+  }
 });
 // @license-end
diff --git a/app/assets/stylesheets/aspects.scss b/app/assets/stylesheets/aspects.scss
index 1aac43f70..3c9b1ac22 100644
--- a/app/assets/stylesheets/aspects.scss
+++ b/app/assets/stylesheets/aspects.scss
@@ -30,18 +30,3 @@
     }
   }
 }
-
-#new_aspect {
-  .checkbox {
-    margin: 0px;
-  }
-
-  label[for="aspect_contacts_visible"],
-  label[for="aspect_chat_enabled"] {
-    display: inline;
-  }
-
-  .bottom_submit_section {
-    padding-top: 20px;
-  }
-}
diff --git a/app/assets/templates/aspect_create_modal_tpl.jst.hbs b/app/assets/templates/aspect_create_modal_tpl.jst.hbs
new file mode 100644
index 000000000..bcb326553
--- /dev/null
+++ b/app/assets/templates/aspect_create_modal_tpl.jst.hbs
@@ -0,0 +1,40 @@
+<div class="modal hide fade" id="newAspectModal" tabindex="-1" role="dialog" aria-labelledby="newAspectModalLabel" aria-hidden="true">
+
+  <div class="modal-header">
+    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3 id="newAspectModalLabel">{{ t "aspects.create.add_a_new_aspect" }}</h3>
+  </div>
+
+  <div class="modal-body">
+    <form>
+      <fieldset>
+        {{#if addPersonId}}
+          <input id="aspect_person_id" type="hidden" value="{{ personId }}">
+        {{/if}}
+
+        <div class="control-group">
+          <label for="aspect_name">{{ t "aspects.name" }}</label>
+          <input id="aspect_name" class="input-block-level" maxlength=20 type="text">
+        </div>
+
+        <div class="control-group">
+          <label for="aspect_contacts_visible" class="checkbox inline">
+            <input id="aspect_contacts_visible" type="checkbox">
+            {{ t "aspects.make_aspect_list_visible" }}
+          </label>
+        </div>
+
+      </fieldset>
+    </form>
+  </div>
+
+  <div class="modal-footer">
+    <div class="btn" data-dismiss="modal" aria-hidden="true">
+      {{ t "cancel" }}
+    </div>
+    <div class="btn creation">
+      {{ t "create" }}
+    </div>
+  </div>
+
+</div>
diff --git a/app/assets/templates/aspects-list_tpl.jst.hbs b/app/assets/templates/aspects-list_tpl.jst.hbs
index 5f29f9313..9883ad5b3 100644
--- a/app/assets/templates/aspects-list_tpl.jst.hbs
+++ b/app/assets/templates/aspects-list_tpl.jst.hbs
@@ -4,5 +4,8 @@
   </a>
 </li>
 <li class="hoverable">
-  <a href="/aspects/new" class="selectable new_aspect" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
+  <a href="#" class="selectable new_aspect" data-toggle="modal" data-target="#newAspectModal">
+    {{ t "aspect_navigation.add_an_aspect" }}
+  </a>
+  <div id="newAspectContainer"></div>
 </li>
diff --git a/app/controllers/aspects_controller.rb b/app/controllers/aspects_controller.rb
index 73b23724b..77e8bfc4a 100644
--- a/app/controllers/aspects_controller.rb
+++ b/app/controllers/aspects_controller.rb
@@ -11,35 +11,15 @@ class AspectsController < ApplicationController
 
   def create
     @aspect = current_user.aspects.build(aspect_params)
-    aspecting_person_id = params[:aspect][:person_id]
+    aspecting_person_id = params[:person_id]
 
     if @aspect.save
-      flash[:notice] = I18n.t('aspects.create.success', :name => @aspect.name)
-
-      if current_user.getting_started || request.referer.include?("contacts")
-        redirect_to :back
-      elsif aspecting_person_id.present?
+      if aspecting_person_id.present?
         connect_person_to_aspect(aspecting_person_id)
-      else
-        redirect_to contacts_path(:a_id => @aspect.id)
       end
+      render json: {id: @aspect.id, name: @aspect.name}
     else
-      respond_to do |format|
-        format.js { render :text => I18n.t('aspects.create.failure'), :status => 422 }
-        format.html do
-          flash[:error] = I18n.t('aspects.create.failure')
-          redirect_to :back
-        end
-      end
-    end
-  end
-
-  def new
-    @aspect = Aspect.new
-    @person_id = params[:person_id]
-    @remote = params[:remote] == "true"
-    respond_to do |format|
-      format.html { render :layout => false }
+      render nothing: true, status: 422
     end
   end
 
diff --git a/app/views/aspect_memberships/_aspect_membership_dropdown.haml b/app/views/aspect_memberships/_aspect_membership_dropdown.haml
index 04650a4d8..ba4ee2fd1 100644
--- a/app/views/aspect_memberships/_aspect_membership_dropdown.haml
+++ b/app/views/aspect_memberships/_aspect_membership_dropdown.haml
@@ -23,4 +23,9 @@
       %li.divider
       %li.newItem
         .add_aspect
-          = link_to t('contacts.index.add_a_new_aspect'), new_aspect_path(:person_id => person.id, :remote => true), :rel => 'facebox'
+          %a{ href: "#" }
+            = t("contacts.index.add_a_new_aspect")
+
+  - if (dropdown_may_create_new_aspect && defined?(person) && person)
+    .newAspectContainer
+      -# JS
diff --git a/app/views/aspects/create.js.erb b/app/views/aspects/create.js.erb
deleted file mode 100644
index 0004d8e52..000000000
--- a/app/views/aspects/create.js.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-// TODO create the aspect and the new aspect membership via Backbone.js and then
-// remove this view!
-
-if( app.aspectMemberships ) {
-  var dropdown = $("ul.dropdown_list[data-person_id=<%= @person.id %>]");
-  $('.newItem', dropdown).before("<%= escape_javascript( aspect_dropdown_list_item(@aspect, @contact.aspects.include?(@aspect))) %>");
-
-  app.aspectMemberships.dropdown = dropdown;
-  app.aspectMemberships.updateSummary();
-
-  $('#profile .dropdown').toggleClass("active");
-}
-
-$.facebox.close();
-app.events.trigger('aspect:create', "<%= escape_javascript(@aspect.id) =>");
diff --git a/app/views/aspects/new.haml b/app/views/aspects/new.haml
deleted file mode 100644
index 54d1ffae9..000000000
--- a/app/views/aspects/new.haml
+++ /dev/null
@@ -1,26 +0,0 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-
--# Using row to enforce a non-percentual width on span6
-.row
-  .span6
-    #facebox_header
-      %h3
-        = t('contacts.index.add_a_new_aspect')
-
-    = form_for(Aspect.new, :remote => @remote) do |aspect|
-      = aspect.error_messages
-      - if @person_id
-        = aspect.hidden_field :person_id, :value => @person_id
-      %p
-        = aspect.label :name , t('.name')
-        = aspect.text_field :name, :maxlength => 20
-
-      %p.checkbox_select
-        = aspect.check_box :contacts_visible, :checked => false, class: 'checkbox'
-        = aspect.label :contacts_visible, t('aspects.edit.make_aspect_list_visible')
-
-      .bottom_submit_section
-        = submit_tag t('cancel'), :class => 'btn', :type => :reset, :rel => "close"
-        = aspect.submit t('.create'), :class => 'btn creation'
diff --git a/app/views/contacts/_aspect_listings.haml b/app/views/contacts/_aspect_listings.haml
index a9b9be9b8..2e0d98945 100644
--- a/app/views/contacts/_aspect_listings.haml
+++ b/app/views/contacts/_aspect_listings.haml
@@ -21,8 +21,11 @@
             = aspect
 
     %li.new_aspect
-      %a{:href => new_aspect_path, :rel => "facebox"}
-        = t('aspects.aspect_listings.add_an_aspect')
+      %a{ "data-toggle" => "modal", "data-target" => "#newAspectModal", href: "#"}
+        = t("aspects.aspect_listings.add_an_aspect")
+
+      #newAspectContainer
+        -# JS
 
     %li.only_sharing{:class => ("active" if params["set"] == "only_sharing")}
       %a{:href => contacts_path(:set => "only_sharing")}
diff --git a/app/views/contacts/_sidebar.html.haml b/app/views/contacts/_sidebar.html.haml
index 45d14e1ce..5b9411a02 100644
--- a/app/views/contacts/_sidebar.html.haml
+++ b/app/views/contacts/_sidebar.html.haml
@@ -1,14 +1,14 @@
 %h3
-  = t('contacts.index.title')
-= render 'contacts/aspect_listings'
+  = t("contacts.index.title")
+= render "contacts/aspect_listings"
 %hr
 - if AppConfig.settings.community_spotlight.enable?
   .text-center.spotlight
-    = link_to t('contacts.spotlight.community_spotlight'), community_spotlight_path, :class => "btn btn-link"
+    = link_to t("contacts.spotlight.community_spotlight"), community_spotlight_path, class: "btn btn-link"
 .text-center
-  .btn.btn-link{ 'data-toggle' => 'modal', 'data-target' => '#invitationsModal'}
-    = t('invitations.new.invite_someone_to_join')
-  = render 'shared/modal',
-      :path => new_user_invitation_path,
-      :id => 'invitationsModal',
-      :title => t('invitations.new.invite_someone_to_join')
+  .btn.btn-link{ "data-toggle" => "modal", "data-target" => "#invitationsModal"}
+    = t("invitations.new.invite_someone_to_join")
+  = render "shared/modal",
+      path: new_user_invitation_path,
+      id: "invitationsModal",
+      title: t("invitations.new.invite_someone_to_join")