Merge branch 'feature/custom_app_logo' into 'master'

Custom header logo

# What does this MR do?

Adds enterprise feature that enables administrator to customize the small header logos in the header/navigation bar. There are 2 custom logos that must be uploaded - one for light themes and one for dark themes.

Both a `dark` and `light` logo must be uploaded for the custom header logo. There are validations to prevent only one. Otherwise if a user chooses a light logo they might have a custom logo but another user with a dark theme would see the standard GitLab logo.

# Are there points in the code the reviewer needs to double check?

Look at the `appearances_helper.rb`, specifically the `brand_header_logos` method. I tried to keep all of the logic inside the appearances helper to avoid future merge conflicts in the view. Is there a better way to do this other than inline styles?

See code comment in `appearances_helper.rb` for another question.

# Why was this MR needed?

Enterprise users like the ability to brand GitLab to their organization. The appearances support was a great first step. This builds upon that by allowing users to upload logos for the header.

# Screenshots

Appearances admin page showing what the page looks like after custom logos have been uploaded. I added the basic and dark backgrounds to the respective logos so they appeared closer to how they will in the header.

![appearances_admin](https://gitlab.com/uploads/subscribers/gitlab-ee/c7e0338be2/appearances_admin.png)

With a dark theme selected.

![dark_logo](https://gitlab.com/uploads/subscribers/gitlab-ee/31faaf70f6/dark_logo.png)

With a light theme selected.

![light_logo](https://gitlab.com/uploads/subscribers/gitlab-ee/46b4942df8/light_logo.png)

See merge request !26

CHANGELOG-EE

+v 7.7.0
+  - Added custom header logo support (Drew Blessing)
+
 v 7.6.2
   - Fix failing migrations for MySQL, LDAP
 

app/assets/stylesheets/sections/appearances.scss

@@ -2,3 +2,11 @@
   max-width: 400px;
   margin-bottom: 20px;
 }
+
+.appearance-dark-logo-preview {
+  background-color: #F1F1F1;
+}
+
+.appearance-light-logo-preview {
+  background-color:  #373737;
+}

app/controllers/admin/appearances_controller.rb

@@ -34,6 +34,16 @@ class Admin::AppearancesController < Admin::ApplicationController
     redirect_to admin_appearances_path, notice: 'Logo was succesfully removed.'
   end
 
+  def header_logos
+    appearance = Appearance.last
+    appearance.remove_light_logo!
+    appearance.remove_dark_logo!
+
+    appearance.save
+
+    redirect_to admin_appearances_path, notice: 'Header logos were succesfully removed.'
+  end
+
   private
 
   # Use callbacks to share common setup or constraints between actions.
@@ -43,6 +53,7 @@ class Admin::AppearancesController < Admin::ApplicationController
 
   # Only allow a trusted parameter "white list" through.
   def appearance_params
-    params.require(:appearance).permit(:title, :description, :logo, :updated_by)
+    params.require(:appearance).permit(:title, :description, :logo,
+                                       :dark_logo, :light_logo, :updated_by)
   end
 end

app/helpers/appearances_helper.rb

@@ -15,6 +15,21 @@ module AppearancesHelper
     end
   end
 
+  def brand_header_logo
+    if brand_item.header_logos?
+      haml_tag(:style) do
+        # Dark theme/light logo
+        haml_concat ".dark_theme .app_logo a h1 {" \
+                    "background: url('#{brand_item.light_logo}') " \
+                    "no-repeat center center !important; }"
+        # Light theme/dark logo
+        haml_concat ".light_theme .app_logo a h1 {" \
+                    "background: url('#{brand_item.dark_logo}') " \
+                    "no-repeat center center !important; }"
+      end
+    end
+  end
+
   def brand_text
     markdown(brand_item.description)
   end

app/models/appearance.rb

@@ -2,6 +2,16 @@ class Appearance < ActiveRecord::Base
   validates :title, presence: true
   validates :description, presence: true
   validates :logo, file_size: { maximum: 1000.kilobytes.to_i }
+  validates :dark_logo, file_size: { maximum: 1000.kilobytes.to_i },
+            presence: true, if: :light_logo?
+  validates :light_logo, file_size: { maximum: 1000.kilobytes.to_i },
+            presence: true, if: :dark_logo?
 
   mount_uploader :logo, AttachmentUploader
+  mount_uploader :dark_logo, AttachmentUploader
+  mount_uploader :light_logo, AttachmentUploader
+
+  def header_logos?
+    dark_logo? && light_logo?
+  end
 end

app/views/admin/appearances/_form.html.haml

@@ -4,6 +4,9 @@
       - @appearance.errors.full_messages.each do |msg|
         %p= msg
 
+  %fieldset.sign-in
+    %legend
+      Sign in/Sign up pages:
   .form-group
     = f.label :title, class: 'control-label'
     .col-sm-10
@@ -25,6 +28,30 @@
       = f.file_field :logo, class: ""
       .hint
         Maximum logo size is 1MB, page optimized for logo size 640x360px
+
+  %fieldset.app_logo
+    %legend
+      Navigation bar:
+  .form-group
+    = f.label :dark_logo, class: 'control-label'
+    .col-sm-10
+      - if @appearance.dark_logo?
+        = image_tag @appearance.dark_logo, class: 'appearance-dark-logo-preview'
+      = f.file_field :dark_logo, class: ""
+      .hint
+        Maximum size is 1MB, page optimized for logo size 40x40px
+    = f.label :light_logo, class: 'control-label'
+    .col-sm-10
+      - if @appearance.light_logo?
+        = image_tag @appearance.light_logo, class: 'appearance-light-logo-preview'
+      = f.file_field :light_logo, class: ""
+      .hint
+        Maximum size is 1MB, page optimized for logo size 41x41px
+      -if @appearance.light_logo? || @appearance.dark_logo?
+        %br
+          = link_to 'Remove header logos', header_logos_admin_appearances_path, data: { confirm: "Header logos will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-logo"
+
+
   .form-actions
     = f.submit 'Save', class: 'btn btn-save'
     = link_to 'Preview', preview_admin_appearances_path, class: 'btn', target: '_blank'

app/views/admin/appearances/show.html.haml

 %h3.page-title
   Appearance settings
 %p.light
-  You can modify look of sign-in and sign-up pages here
-
-%hr
+  You can modify the look and feel of GitLab here
 
 = render 'form'

app/views/layouts/_head_panel.html.haml

@@ -2,6 +2,7 @@
   .navbar-inner
     .container
       %div.app_logo
+        - brand_header_logo if brand_item
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
           %h1 GITLAB
       %h1.title= title

config/routes.rb

@@ -114,6 +114,7 @@ Gitlab::Application.routes.draw do
       member do
         get :preview
         delete :logo
+        delete :header_logos
       end
     end
 

db/migrate/20141213212220_add_header_logos_to_appearances.rb

+class AddHeaderLogosToAppearances < ActiveRecord::Migration
+  def change
+    add_column :appearances, :dark_logo, :string
+    add_column :appearances, :light_logo, :string
+  end
+end

db/schema.rb

@@ -23,6 +23,8 @@ ActiveRecord::Schema.define(version: 20141230100055) do
     t.integer  "updated_by"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.string   "dark_logo"
+    t.string   "light_logo"
   end
 
   create_table "audit_events", force: true do |t|
@@ -367,8 +369,8 @@ ActiveRecord::Schema.define(version: 20141230100055) do
     t.boolean  "archived",                      default: false,    null: false
     t.string   "import_status"
     t.float    "repository_size",               default: 0.0
-    t.text     "merge_requests_template"
     t.integer  "star_count",                    default: 0,        null: false
+    t.text     "merge_requests_template"
     t.boolean  "merge_requests_rebase_enabled", default: false
   end
 

features/admin/appearance.feature

@@ -26,3 +26,12 @@ Feature: Admin Appearance
     Then I should see a logo
     And I remove the logo
     Then I should see logo removed
+
+  Scenario: Header logos
+    Given application has custom appearance
+    And I sign in as an admin
+    And I visit admin appearance page
+    When I attach header logos
+    Then I should see header logos
+    And I remove the header logos
+    Then I should see header logos removed

features/steps/admin/appearance.rb

@@ -37,18 +37,38 @@ class Spinach::Features::AdminAppearance < Spinach::FeatureSteps
     click_button 'Save'
   end
 
+  step 'I attach header logos' do
+    attach_file(:appearance_light_logo, File.join(Rails.root, 'public', 'header_logo_light.png'))
+    attach_file(:appearance_dark_logo, File.join(Rails.root, 'public', 'header_logo_dark.png'))
+    click_button 'Save'
+  end
+
   step 'I should see a logo' do
     page.should have_xpath('//img[@src="/uploads/appearance/logo/1/gitlab_logo.png"]')
   end
 
+  step 'I should see header logos' do
+    page.should have_xpath('//img[@src="/uploads/appearance/light_logo/1/header_logo_light.png"]')
+    page.should have_xpath('//img[@src="/uploads/appearance/dark_logo/1/header_logo_dark.png"]')
+  end
+
   step 'I remove the logo' do
     click_link 'Remove logo'
   end
 
+  step 'I remove the header logos' do
+    click_link 'Remove header logos'
+  end
+
   step 'I should see logo removed' do
     page.should_not have_xpath('//img[@src="/uploads/appearance/logo/1/gitlab_logo.png"]')
   end
 
+  step 'I should see header logos removed' do
+    page.should_not have_xpath('//img[@src="/uploads/appearance/light_logo/1/header_logo_light.png"]')
+    page.should_not have_xpath('//img[@src="/uploads/appearance/dark_logo/1/header_logo_dark.png"]')
+  end
+
   def appearance
     Appearance.last
   end