Merge pull request #5039 from pablocubico/feature/4466-new-bootstrap-config-profile-page

[NEW] [WIP] #4466 Port settings pages to Bootstrap (edit profile, edit account, privacy, services)

Changelog.md

@@ -7,6 +7,7 @@
 * Port people search page to Bootstrap [#5077](https://github.com/diaspora/diaspora/pull/5077)
 * Clarify explanations and defaults in diaspora.yml.example [#5088](https://github.com/diaspora/diaspora/pull/5088)
 * Consistent header spacing on Bootstrap pages [#5108](https://github.com/diaspora/diaspora/pull/5108)
+* Port settings pages (account, profile, privacy, services) to Bootstrap [#5039](https://github.com/diaspora/diaspora/pull/5039)
 
 ## Bug fixes
 * Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)

app/assets/stylesheets/new-templates.css.scss

@@ -21,6 +21,9 @@
 
 @import 'new_styles/forms';
 
+/* profile and settings pages */
+@import 'new_styles/settings';
+
 /* new SPV */
 @import 'header';
 @import 'footer';

app/assets/stylesheets/new_styles/_base.scss

@@ -164,6 +164,16 @@ $bring-dark-accent-forward-color: #DDD;
   line-height: 1.5;
 }
 
+/* general purpose classes */
+
+.small-horizontal-spacer {
+  height: 20px;
+}
+
+.big-horizontal-spacer {
+  height: 50px;
+}
+
 /* responsive */
 @media (max-width: 767px) {
   body {

app/assets/stylesheets/new_styles/_settings.scss

@@ -0,0 +1,17 @@
+/* Specific styles for the settings pages (profile, user account, privacy, services) */
+#inner_account_delete {
+	width: 700px;
+}
+
+.as-selections #tags {
+	border: none;
+	box-shadow: none;
+}
+
+.enclosed-checkbox label {
+	margin-bottom: 0;
+}
+
+#profile_photo_upload .avatar {
+	max-width: 150px;
+}

app/assets/stylesheets/vendor/autoSuggest.css

@@ -3,16 +3,15 @@
 ul.as-selections {
 	list-style-type: none;
 	border: 1px solid #ccc;
-	padding: 4px 0 4px 4px;
 	margin: 0;
 	overflow: auto;
 	background-color: #fff;
-
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
-  
+	/* 1% padding (all sides) + 98% width = 100% */  
-  width: 214px;
+	padding: 1%;
+	width: 98%;
 }
 
 ul.as-selections.loading {
@@ -22,6 +21,7 @@ ul.as-selections.loading {
 ul.as-selections li {
 	float: left;
 	margin: 1px 4px 1px 0;
+	cursor: pointer;
 }
 
 ul.as-selections li.as-selection-item {
@@ -32,8 +32,8 @@ ul.as-selections li.as-selection-item {
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
 	border: 1px solid #acc3ec;
 	padding: 0;
-  padding-top: 3px;
+  padding-top: 6px;
-  padding-bottom: 3px;
+  padding-bottom: 6px;
   padding-left: 6px;
 	border-radius: 5px;
 	-webkit-border-radius: 5px;
@@ -43,7 +43,7 @@ ul.as-selections li.as-selection-item {
 	-moz-box-shadow: 0 1px 1px #e4edf2;
   line-height: 10px;
   margin-top: -1px;
-  margin-bottom: -1px;
+  margin-bottom: 10px;
 }
 
 ul.as-selections li.as-selection-item:last-child {
@@ -112,9 +112,11 @@ ul.as-selections li.as-original input {
 	outline: none;
 	font-size: 13px;
 	width: auto;
-	height: 14px;
 	padding: 0;
   	margin: 0;
+	height: 20px;
+	line-height: 20px;
+	width: 300px;
 }
 
 ul.as-selections li.as-original.as-original{
@@ -184,14 +186,14 @@ li.as-result-item.active em {
 /* Webkit Hacks  */
 @media screen and (-webkit-min-device-pixel-ratio:0) {	
 	ul.as-selections li.as-selection-item {
-		padding-top: 3px;
+		padding-top: 6px;
-		padding-bottom: 3px;
+		padding-bottom: 6px;
 	}
 	ul.as-selections li.as-selection-item a.as-close {
 		margin-top: -1px;
 	}
 	ul.as-selections li.as-original input {
-		height: 15px;
+		height: 20px;
 	}
 }
 

app/controllers/profiles_controller.rb

@@ -4,6 +4,9 @@
 
 class ProfilesController < ApplicationController
   before_filter :authenticate_user!, :except => ['show']
+  before_filter -> { @css_framework = :bootstrap }, only: [:show, :edit]
+ 
+  layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }, only: [:show, :edit]
 
   respond_to :html, :except => [:show]
   respond_to :js, :only => :update

app/controllers/services_controller.rb

@@ -8,6 +8,9 @@ class ServicesController < ApplicationController
   skip_before_filter :verify_authenticity_token, :only => :create
   before_filter :authenticate_user!
   before_filter :abort_if_already_authorized, :abort_if_read_only_access, :only => :create
+  before_filter -> { @css_framework = :bootstrap }, only: [:index]
+
+  layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }, only: [:index]
 
   respond_to :html
   respond_to :json, :only => :inviter

app/controllers/users_controller.rb

@@ -4,6 +4,9 @@
 
 class UsersController < ApplicationController
   before_filter :authenticate_user!, :except => [:new, :create, :public, :user_photo]
+  before_filter -> { @css_framework = :bootstrap }, only: [:privacy_settings, :edit]
+
+  layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }, only: [:privacy_settings, :edit]
 
   use_bootstrap_for :getting_started
 

app/views/photos/_new_profile_photo.haml

@@ -60,6 +60,8 @@
 #profile_photo_upload
   = owner_image_tag(:thumb_medium)
 
+  .clearfix
+
   #file-upload.btn
     =t('.upload')
 

app/views/profiles/_edit.haml

@@ -9,58 +9,60 @@
   = render 'profiles/edit_public', :profile => profile, :aspect => aspect, :person => person
 
   %hr
-  %br
+
   %h3
     = t('profiles.edit.your_private_profile')
 
-
   %h4
     = t('profiles.edit.your_bio')
-  = text_area_tag 'profile[bio]', profile.bio, :rows => 5, :placeholder => t('fill_me_out')
+  = text_area_tag 'profile[bio]', profile.bio, :rows => 5, :placeholder => t('fill_me_out'), :class => 'span12'
 
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('profiles.edit.your_location')
-  = text_field_tag 'profile[location]', profile.location, :placeholder => t('fill_me_out')
+  = text_field_tag 'profile[location]', profile.location, :placeholder => t('fill_me_out'), :class => 'span12'
 
-
+  .small-horizontal-spacer
-  %br
 
   %h4
     = t('profiles.edit.your_gender')
-  = text_field_tag 'profile[gender]', profile.gender, :placeholder => t("fill_me_out")
+  = text_field_tag 'profile[gender]', profile.gender, :placeholder => t("fill_me_out"), :class => 'span12'
 
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('profiles.edit.your_birthday')
-  = select_date profile.birthday, :prompt => true,
-    :default => true, :order => t('date.order'), :start_year => 2000, :end_year => 1910, :prefix => 'profile[date]'
 
-  %br
+  .row-fluid
-  %br
+    = select_date profile.birthday, { :prompt => true, :default => true, :order => t('date.order'), :start_year => 2000, :end_year => 1910, :prefix => 'profile[date]' }, { :class => 'span4' }
+
+  .small-horizontal-spacer
 
   %h4
     = t('search')
  
-  %p{:class=>"checkbox_select"}
+  .well.enclosed-checkbox
+    = label_tag 'profile[searchable]', :class => "checkbox" do
       = check_box_tag 'profile[searchable]', true, profile.searchable
-    = label_tag 'profile[searchable]', t('profiles.edit.allow_search')
+      = t('profiles.edit.allow_search')
-  %br
+
-  %br
+  .small-horizontal-spacer
 
   %h4
     = t('nsfw')
+  %p
     = t('profiles.edit.nsfw_explanation')
-  %p{:class=>"checkbox_select"}
+  .well.enclosed-checkbox
+    = label_tag 'profile[nsfw]', :class => "checkbox" do
       = check_box_tag 'profile[nsfw]', true, profile.nsfw?
-    = label_tag 'profile[nsfw]', t('profiles.edit.nsfw_check')
+      = t('profiles.edit.nsfw_check')
-  %br
+  
+  .small-horizontal-spacer
+
   = t('profiles.edit.nsfw_explanation2')
-  %br
+  
-  %br
+  .small-horizontal-spacer
-  %br
 
   .submit_block
     =yield(:submit_block)

app/views/profiles/_edit_public.haml

@@ -41,24 +41,27 @@
 
 %h4
   = t('profiles.edit.your_name')
-= label_tag 'profile[first_name]', t('profiles.edit.first_name')
-= text_field_tag 'profile[first_name]', profile.first_name
 
-= label_tag 'profile[first_name]', t('profiles.edit.last_name')
+.row-fluid
-= text_field_tag 'profile[last_name]', profile.last_name
+  .span6
+    = label_tag 'profile[first_name]', t('profiles.edit.first_name')
+    = text_field_tag 'profile[first_name]', profile.first_name, :class => 'span12'
+  .span6
+    = label_tag 'profile[last_name]', t('profiles.edit.last_name')
+    = text_field_tag 'profile[last_name]', profile.last_name, :class => 'span12'
 
-%br
+.small-horizontal-spacer
 
 %h4
   = t('profiles.edit.your_tags')
 
 = text_field_tag 'profile[tag_string]', "", :placeholder => t('profiles.edit.your_tags_placeholder')
 
-%br
+.small-horizontal-spacer
 
 %h4
   = t('profiles.edit.your_photo')
 
 = render 'photos/new_profile_photo', :aspect => aspect, :person => person
 
-%br
+.small-horizontal-spacer

app/views/profiles/edit.haml

@@ -2,16 +2,24 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+.bootstrap_header_padding
 
-#section_header
+.container
+  .row-fluid
+    .span12
+      #section_header
         %h2
           = t('settings')
         = render 'shared/settings_nav'
 
-.span-12.prepend-5.last
+.container
+  .row-fluid
+    .span3
+    .span6
       - content_for :submit_block do
-    = link_to t('cancel'), local_or_remote_person_path(current_user.person), :class => "button"
+        = link_to t('cancel'), local_or_remote_person_path(current_user.person), :class => "btn"
-    = submit_tag t('.update_profile'), :class => "creation", :id => "update_profile"
+        = submit_tag t('.update_profile'), :class => "creation", :id => "update_profile", :class => "btn"
       = render :partial => 'edit', :locals => {:person => @person, 
         :profile => @profile, :aspect => @aspect, :step => @step}
+    .span3
 

app/views/services/index.html.haml

@@ -5,14 +5,20 @@
 - content_for :page_title do
   = t('.edit_services')
 
-#section_header
+.bootstrap_header_padding
+
+.container
+  .row-fluid
+    .span12
+      #section_header
         %h2
           = t('settings')
         = render 'shared/settings_nav'
 
-.span-14.prepend-5.last
+  .row-fluid
+    .span7
       = render 'shared/add_remove_services'
 
-.span-5
+    .span5
       %p
         = t('.services_explanation')

app/views/shared/_settings_nav.haml

@@ -1,5 +1,5 @@
-%ul#settings_nav
+%ul.nav.nav-tabs#settings_nav
-  %li= link_to_unless_current t('profile'), edit_profile_path
+  %li{class: current_page?(edit_profile_path) && 'active'}= link_to t('profile'), edit_profile_path
-  %li= link_to_unless_current t('account'), edit_user_path
+  %li{class: current_page?(edit_user_path) && 'active'}= link_to t('account'), edit_user_path
-  %li= link_to_unless_current t('privacy'), privacy_settings_path
+  %li{class: current_page?(privacy_settings_path) && 'active'}= link_to t('privacy'), privacy_settings_path
-  %li= link_to_unless_current t('_services'), services_path
+  %li{class: current_page?(services_path) && 'active'}= link_to t('_services'), services_path

app/views/users/edit.html.haml

@@ -5,35 +5,42 @@
 - content_for :page_title do
   = t('.edit_account')
 
-#section_header
+.bootstrap_header_padding
+
+.container
+  .row-fluid
+    .span12
+      #section_header
         %h2
           = t('settings')
         = render 'shared/settings_nav'
 
-.span-12.prepend-5.last
+  .row-fluid
-  .span-5.append-1
+    .span3
+    .span6
+      .row-fluid
+        .span6
           %h3
             = t('.your_handle')
           %p
             %b= current_user.diaspora_handle
-  .span-5.last
+        .span6
           %h3
             = t('.your_email')
           = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
             = f.error_messages
-      %p
+            .form-inline
-        = f.text_field :email, :value => @user.unconfirmed_email || @user.email
+              = f.text_field :email, :value => @user.unconfirmed_email || @user.email, :class => "span7"
-        = f.submit t('.change_email'), :class => "button"
+              = f.submit t('.change_email'), :class => "btn"
-    %br
+          .small-horizontal-spacer
           - if @user.unconfirmed_email.present?
             %p= t('.email_awaiting_confirmation', :email => @user.email, :unconfirmed_email => @user.unconfirmed_email)
-    %br
+          .small-horizontal-spacer
 
-  %br
-  %br
       %hr
-  %br
 
+      .row-fluid
+        .span12
           %h3 
             = t('.change_password')
           = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
@@ -51,26 +58,25 @@
             .submit_block
               = link_to t('cancel'), edit_user_path
               = t('or')
-      = f.submit t('.change_password'), :class => "button"
+              = f.submit t('.change_password'), :class => "btn"
 
-  %br
-  %br
       %hr
-  %br
 
+      .row-fluid
+        .span-12
           %h3 
             = t('.change_language')
           = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
             = f.error_messages
 
-    %p
+            .form-inline
               = f.select :language, available_language_options
-      = f.submit t('.change_language'), :class => "button"
+              = f.submit t('.change_language'), :class => "btn"
 
-  %br
-  %br
       %hr
-  %br
+
+      .row-fluid
+        .span-12
 
           %h3#stream-preferences
             = t('.stream_preferences')
@@ -79,45 +85,43 @@
 
             = f.fields_for :stream_preferences do |type|
               #stream_prefs
-      %p.checkbox_select
+                = f.label :show_community_spotlight_in_stream, :class => "checkbox" do
-        = f.label :show_community_spotlight_in_stream, t('.show_community_spotlight')
                   = f.check_box :show_community_spotlight_in_stream
+                  = t('.show_community_spotlight')
 
-      %br
+              .small-horizontal-spacer
-      %p.checkbox_select
+                = f.label :getting_started, :class => "checkbox" do
-        = f.label :getting_started, t('.show_getting_started')
                   = f.check_box :getting_started
+                  = t('.show_getting_started')
 
-      %br
+              .small-horizontal-spacer
-      = f.submit t('.change'), :class => 'button'
+              = f.submit t('.change'), :class => 'btn'
 
-  %br
-  %br
       %hr
-  %br
+
+      .row-fluid
+        .span-12
       
           %h3#auto-follow-back-preferences
             = t('.following')
           = form_for current_user, :url => user_path, :html => { :method => :put } do |f|
             = f.error_messages
           
-    %p.checkbox_select
+            = f.label :auto_follow_back, :class => "checkbox" do
-      = f.label :auto_follow_back, t('.auto_follow_back')
               = f.check_box :auto_follow_back
-    %br
+              = t('.auto_follow_back')
-    %p.checkbox_select
+            .small-horizontal-spacer
-      %span{:style => "color: #999"}
+            %div{:class => "muted"}
               = t('.auto_follow_aspect')
             = f.select :auto_follow_back_aspect_id, aspect_options_for_select(current_user.aspects)
 
-    %br
+            .small-horizontal-spacer
-    = f.submit t('.change'), :class => 'button'
+            = f.submit t('.change'), :class => 'btn'
 
-  %br
-  %br
       %hr
-  %br
 
+      .row-fluid
+        .span-12
           %h3 
             = t('.receive_email_notifications')
           = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
@@ -126,62 +130,61 @@
             = f.fields_for :email_preferences do |type|
               #email_prefs
                 - if current_user.admin?
-          %p.checkbox_select
+                  = type.label :someone_reported, :class => "checkbox" do
-            = type.label :someone_reported, t('.someone_reported')
                     = type.check_box :someone_reported, {:checked =>  @email_prefs['someone_reported']}, false, true
+                    = t('.someone_reported')
 
-          %br
+                .small-horizontal-spacer
-        %p.checkbox_select
+
-          = type.label :started_sharing, t('.started_sharing')
+                = type.label :started_sharing, :class => "checkbox" do
                   = type.check_box :started_sharing, {:checked =>  @email_prefs['started_sharing']}, false, true
-        %br
+                  = t('.started_sharing')
+                .small-horizontal-spacer
 
-        %p.checkbox_select
+                = type.label :mentioned, :class => "checkbox" do
-          = type.label :mentioned, t('.mentioned') 
                   = type.check_box :mentioned, {:checked =>  @email_prefs['mentioned']}, false, true
-        %br
+                  = t('.mentioned')
+                .small-horizontal-spacer
                 
-        %p.checkbox_select
+                = type.label :liked, :class => "checkbox" do
-          = type.label :liked, t('.liked')
                   = type.check_box :liked, {:checked =>  @email_prefs['liked']}, false, true
-        %br
+                  = t('.liked')
+                .small-horizontal-spacer
                 
-        %p.checkbox_select
+                = type.label :reshared, :class => "checkbox" do
-          = type.label :reshared, t('.reshared')
                   = type.check_box :reshared, {:checked =>  @email_prefs['reshared']}, false, true
-        %br
+                  = t('.reshared')
+                .small-horizontal-spacer
                 
-        %p.checkbox_select
+                = type.label :comment_on_post, :class => "checkbox" do
-          = type.label :comment_on_post, t('.comment_on_post')
                   = type.check_box :comment_on_post, {:checked =>  @email_prefs['comment_on_post']}, false, true
-        %br
+                  = t('.comment_on_post')
+                .small-horizontal-spacer
                 
-        %p.checkbox_select
+                = type.label :also_commented, :class => "checkbox" do
-          = type.label :also_commented, t('.also_commented')
                   = type.check_box :also_commented, {:checked =>  @email_prefs['also_commented']}, false, true
-        %br
+                  = t('.also_commented')
+                .small-horizontal-spacer
                 
-        %p.checkbox_select
+                = type.label :private_message, :class => "checkbox" do
-          = type.label :private_message, t('.private_message')
                   = type.check_box :private_message, {:checked =>  @email_prefs['private_message']}, false, true
+                  = t('.private_message')
 
-    %br
+            .small-horizontal-spacer
-    = f.submit t('.change'), :class => "button"
+            
+            = f.submit t('.change'), :class => "btn"
 
-  %br
-  %br
       %hr
-  %br
 
-
+      .row-fluid
-  #account_data.span-5.append-2
+        #account_data.span6
           %h3 
             = t('.export_data')
           = link_to t('.download_xml'), export_user_path, :class => "button"
-    %br
+          .small-horizontal-spacer
           = link_to t('.download_photos'), "#", :class => "button", :id => "photo-export-button", :title => t('.photo_export_unavailable')
 
-  .span-5.last
+        .span6
           %h3
             = t('.close_account_text')
           =link_to t('.close_account_text'), '#close_account_pane', :rel => 'facebox', :class => "button", :id => "close_account"
@@ -192,13 +195,14 @@
                 = t('.close_account.dont_go')
               %p
                 = t('.close_account.make_diaspora_better')
-        .span-10
+              .row-fluid
+                .span6
                   = image_tag 'sadcat.jpg'
-          %br
+                  .small-horizontal-spacer
                   %small
                     %b
                       = t('.close_account.mr_wiggles')
-        .span-10.last
+                .span6
                   %ul
                     %li
                       = t('.close_account.what_we_delete')
@@ -210,7 +214,6 @@
                     %b
                       = t('.close_account.no_turning_back')
 
-
                   = form_for 'user', :url => user_path, :html => { :method => :delete } do |f|
                     = f.error_messages
 
@@ -218,4 +221,6 @@
                       = f.label :close_account_password, t('.current_password'), :for => :close_account_password
                       = f.password_field :current_password, :id => :close_account_password
                     %p
-              = f.submit t('.close_account_text'), :id => "close_account_confirm", :data => { :confirm => t('are_you_sure_delete_account') }
+                      = f.submit t('.close_account_text'), :class => "btn btn-danger", :id => "close_account_confirm", :data => { :confirm => t('are_you_sure_delete_account') }
+
+    .span3

app/views/users/privacy_settings.html.haml

@@ -5,12 +5,19 @@
 - content_for :page_title do
   = t('.title')
 
-#section_header
+.bootstrap_header_padding
+
+.container
+  .row-fluid
+    .span12
+      #section_header
         %h2
           = t('privacy')
         = render 'shared/settings_nav'
 
-.span-12.prepend-5.last
+  .row-fluid
+    .span3
+    .span5
       %h3
         = t('.ignored_users')
 
@@ -20,4 +27,4 @@
         = link_to t('.stop_ignoring'), block_path(block),
           :method => :delete
         %br
-
+    .span3