Merge pull request #1972 from verg/user_pref_save_btn

Add Save button to top of user preferences

app/assets/javascripts/discourse/templates/user/preferences.js.handlebars

@@ -2,6 +2,12 @@
 
   <form class="form-horizontal">
 
+    <div class="control-group save-button" id='save-button-top'>
+      <div class="controls">
+        {{partial 'user/preferences/saveButton'}}
+      </div>
+    </div>
+
     <div class="control-group">
       <label class="control-label">{{i18n user.username.title}}</label>
       <div class="controls">
@@ -84,13 +90,13 @@
       <label class="control-label">{{i18n user.email_settings}}</label>
       <div class="controls">
         {{#if Discourse.SiteSettings.enable_mailing_list_mode}}
-          <label>
+          <label class="checkbox-label">
             {{view Ember.Checkbox checkedBinding="mailing_list_mode"}}
             {{i18n user.mailing_list_mode}}
           </label>
         {{/if}}
 
-        <label>{{view Ember.Checkbox checkedBinding="email_digests"}}
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="email_digests"}}
         {{i18n user.email_digests.title}}</label>
 
         {{#if email_digests}}
@@ -98,11 +104,11 @@
             {{combobox valueAttribute="value" content=digestFrequencies value=digest_after_days}}
           </div>
         {{/if}}
-        <label>{{view Ember.Checkbox checkedBinding="email_private_messages"}}
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="email_private_messages"}}
         {{i18n user.email_private_messages}}</label>
-        <label>{{view Ember.Checkbox checkedBinding="email_direct"}}
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="email_direct"}}
         {{i18n user.email_direct}}</label>
-        <label>{{view Ember.Checkbox checkedBinding="email_always"}}
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="email_always"}}
         {{i18n user.email_always}}</label>
       </div>
       <div class='instructions'>
@@ -113,25 +119,27 @@
     <div class="control-group other">
 
       <label class="control-label">{{i18n user.other_settings}}</label>
-      <div class="controls">
+      <div class="controls controls-dropdown">
         <label>{{i18n user.auto_track_topics}}</label>
         {{combobox valueAttribute="value" content=autoTrackDurations value=auto_track_topics_after_msecs}}
       </div>
 
-      <div class="controls">
+      <div class="controls controls-dropdown">
         <label>{{i18n user.new_topic_duration.label}}</label>
         {{combobox valueAttribute="value" content=considerNewTopicOptions value=new_topic_duration_minutes}}
       </div>
 
       <div class="controls">
-        <label>{{view Ember.Checkbox checkedBinding="external_links_in_new_tab"}}
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="external_links_in_new_tab"}}
         {{i18n user.external_links_in_new_tab}}</label>
-        <label>{{view Ember.Checkbox checkedBinding="enable_quoting"}}
+      </div>
+      <div class="controls">
+        <label class="checkbox-label">{{view Ember.Checkbox checkedBinding="enable_quoting"}}
         {{i18n user.enable_quoting}}</label>
       </div>
 
       <div class="controls">
-        <label>
+        <label class='checkbox-label'>
           {{view Ember.Checkbox checkedBinding="dynamic_favicon"}}
           {{i18n user.dynamic_favicon}}
         </label>
@@ -141,17 +149,17 @@
 
     <div class="control-group category">
       <label class="control-label">{{i18n user.categories_settings}}</label>
-      <div class="controls">
+      <div class="controls category-controls">
         <label>{{i18n user.watched_categories}}</label>
         {{category-group categories=watchedCategories}}
       </div>
       <div class="instructions">{{i18n user.watched_categories_instructions}}</div>
-      <div class="controls">
+      <div class="controls category-controls">
         <label>{{i18n user.tracked_categories}}</label>
         {{category-group categories=trackedCategories}}
       </div>
       <div class="instructions">{{i18n user.tracked_categories_instructions}}</div>
-      <div class="controls">
+      <div class="controls category-controls">
         <label>{{i18n user.muted_categories}}</label>
         {{category-group categories=mutedCategories}}
       </div>
@@ -160,8 +168,7 @@
 
     <div class="control-group">
       <div class="controls">
-          <button {{action save}} {{bind-attr disabled="saveDisabled"}} class="btn btn-primary">{{saveButtonText}}</button>
-          {{#if saved}}{{i18n saved}}{{/if}}
+        {{partial 'user/preferences/saveButton'}}
       </div>
     </div>
 

app/assets/javascripts/discourse/templates/user/preferences/_save_button.js.handlebars

@@ -0,0 +1,2 @@
+<button {{action save}} {{bind-attr disabled="saveDisabled"}} class="btn btn-primary">{{saveButtonText}}</button>
+{{#if saved}}{{i18n saved}}{{/if}}

app/assets/stylesheets/desktop/user.scss

@@ -72,6 +72,10 @@
       width: 280px;
     }
   }
+
+  #save-button-top {
+    float: right;
+  }
 }
 
 .user-navigation {

app/assets/stylesheets/mobile/user.scss

@@ -3,6 +3,13 @@
 @import "../common/foundation/mixins";
 
 .user-preferences {
+  .control-group {
+    // border-bottom: 1px solid #e5e5e5;
+    padding: 8px 36px 8px 8px;
+  }
+  .control-label {
+    font-weight: bold;
+  }
   textarea {
     width: 530px;
     height: 100px;
@@ -15,9 +22,11 @@
   }
   .instructions {
     color: $primary_medium;
-    margin-left: 165px;
     margin-top: 5px;
   }
+  .category-controls {
+    padding-top: 8px;
+  }
   .avatar {
     margin-left: 3px;
   }
@@ -32,12 +41,29 @@
     width: 520px;
   }
 
-  .other .controls {
+  .other .controls-dropdown {
     margin-top: 10px;
+    padding-left: 5px;
     select {
       width: 280px;
     }
   }
+
+  .save-button {
+    width: 100%;
+    overflow: auto;
+    max-width: 200px;
+    button {
+      display: block;
+    }
+  }
+
+  .checkbox-label {
+    overflow: auto;
+    display: block;
+    width: 100%;
+    padding: 5px 8px;
+  }
 }
 
 #about-me {