Adding simple_form, adding profile settings, header image

9 files changed, 71 insertions, 2 deletions

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
new file mode 100644
index 000000000..24f83d18b
--- /dev/null
+++ b/app/assets/javascripts/settings.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss
index d659cbcb3..1f4987527 100644
--- a/app/assets/stylesheets/accounts.scss
+++ b/app/assets/stylesheets/accounts.scss
@@ -1,10 +1,24 @@
 .card {
-  background: $primary-color image-url('background-photo.jpeg');
+  background: #282c37;
   background-size: cover;
   padding: 60px 0;
   padding-bottom: 10px;
   border-radius: 4px 4px 0 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  position: relative;
+
+  &:after {
+    background: rgba(0, 0, 0, 0.5);
+    display: block;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
 
   .name {
     display: block;
@@ -13,6 +27,8 @@
     color: #fff;
     font-weight: 500;
     text-align: center;
+    position: relative;
+    z-index: 2;
 
     small {
       display: block;
@@ -26,6 +42,8 @@
     width: 120px;
     margin: 0 auto;
     margin-bottom: 15px;
+    position: relative;
+    z-index: 2;
 
     img {
       width: 120px;
@@ -38,6 +56,8 @@
   .details {
     display: flex;
     margin-top: 30px;
+    position: relative;
+    z-index: 2;
   }
 
   .counter {
diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss
new file mode 100644
index 000000000..fbe669080
--- /dev/null
+++ b/app/assets/stylesheets/settings.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the settings controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/controllers/settings_controller.rb b/app/controllers/settings_controller.rb
new file mode 100644
index 000000000..cb4688292
--- /dev/null
+++ b/app/controllers/settings_controller.rb
@@ -0,0 +1,27 @@
+class SettingsController < ApplicationController
+  layout 'dashboard'
+
+  before_action :authenticate_user!
+  before_action :set_account
+
+  def show
+  end
+
+  def update
+    if @account.update(account_params)
+      redirect_to settings_path
+    else
+      render action: :show
+    end
+  end
+
+  private
+
+  def account_params
+    params.require(:account).permit(:display_name, :note, :avatar, :header)
+  end
+
+  def set_account
+    @account = current_user.account
+  end
+end
diff --git a/app/helpers/settings_helper.rb b/app/helpers/settings_helper.rb
new file mode 100644
index 000000000..ffbedbaf4
--- /dev/null
+++ b/app/helpers/settings_helper.rb
@@ -0,0 +1,2 @@
+module SettingsHelper
+end
diff --git a/app/models/account.rb b/app/models/account.rb
index 9e6dea4aa..7577d7bd8 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -8,6 +8,10 @@ class Account < ActiveRecord::Base
   has_attached_file :avatar, styles: { large: '300x300#', medium: '96x96#', small: '48x48#' }, default_url: 'avatars/missing.png'
   validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
 
+  # Header upload
+  has_attached_file :header, styles: { medium: '700x335#' }
+  validates_attachment_content_type :header, content_type: /\Aimage\/.*\Z/
+
   # Timelines
   has_many :stream_entries, inverse_of: :account
   has_many :statuses, inverse_of: :account
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index 9f665e8c3..452a0bfba 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -2,7 +2,7 @@
   %link{ rel: 'salmon', href: api_salmon_url(@account.id) }/
   %link{ rel: 'alternate', type: 'application/atom+xml', href: account_url(@account, format: 'atom') }/
 
-.card
+.card{ style: "background-image: url(#{@account.header.url(:medium)})" }
   .avatar= image_tag @account.avatar.url(:large)
   %h1.name
     = @account.display_name.blank? ? @account.username : @account.display_name
diff --git a/app/views/layouts/dashboard.html.haml b/app/views/layouts/dashboard.html.haml
index ea8390bae..8592144d8 100644
--- a/app/views/layouts/dashboard.html.haml
+++ b/app/views/layouts/dashboard.html.haml
@@ -17,6 +17,10 @@
           = link_to oauth_authorized_applications_path do
             = fa_icon 'shield'
             Authorized apps
+        %li{ class: active_nav_class(settings_path) }
+          = link_to settings_path do
+            = fa_icon 'user'
+            Edit profile
     .dashboard__content
       .dashboard__top-bar
         = content_for?(:page_title) ? yield(:page_title) : 'Mastodon'
diff --git a/app/views/settings/show.html.haml b/app/views/settings/show.html.haml
new file mode 100644
index 000000000..ac5a1c36f
--- /dev/null
+++ b/app/views/settings/show.html.haml
@@ -0,0 +1,6 @@
+= simple_form_for @account, url: settings_path, method: :put do |f|
+  = f.input :display_name
+  = f.input :note
+  = f.input :avatar
+  = f.input :header
+  = f.button :submit