Merge branch '11489-branded-appearance-to-ce' into 'master'

Branded appearance to CE

Closes #11489 

The difference with the EE version is only that there is no distinction between light and dark logos, though this wasn't used anyway. If this is fine, I'll create a MR on EE too.

TODO:
- [x] Copy docs
- [x] Make new screenshots
- [ ] Remove Custom Welcome message feature?

@rymai: I was unsure what labels to add to ping you, so I just ping you like this :wink: 

/cc @DouweM

See merge request !2927

4 files changed, 99 insertions, 0 deletions

diff --git a/app/views/admin/appearances/_form.html.haml b/app/views/admin/appearances/_form.html.haml
new file mode 100644
index 00000000000..6f325914d14
--- /dev/null
+++ b/app/views/admin/appearances/_form.html.haml
@@ -0,0 +1,58 @@
+= form_for @appearance, url: admin_appearances_path, html: { class: 'form-horizontal'} do |f|
+  - if @appearance.errors.any?
+    .alert.alert-danger
+      - @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
+      = f.text_field :title, class: "form-control"
+  .form-group
+    = f.label :description, class: 'control-label'
+    .col-sm-10
+      = f.text_area :description, class: "form-control", rows: 10
+      .hint
+        Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('markdown', 'markdown'), target: '_blank'}.
+  .form-group
+    = f.label :logo, class: 'control-label'
+    .col-sm-10
+      - if @appearance.logo?
+        = image_tag @appearance.logo_url, class: 'appearance-logo-preview'
+        - if @appearance.persisted?
+          %br
+          = link_to 'Remove logo', logo_admin_appearances_path, data: { confirm: "Logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-logo"
+        %hr
+      = f.hidden_field :logo_cache
+      = f.file_field :logo, class: ""
+      .hint
+        Maximum file size is 1MB. Pages are optimized for a 640x360 px logo.
+
+  %fieldset.app_logo
+    %legend
+      Navigation bar:
+  .form-group
+    = f.label :header_logo, 'Header logo', class: 'control-label'
+    .col-sm-10
+      - if @appearance.header_logo?
+        = image_tag @appearance.header_logo_url, class: 'appearance-light-logo-preview'
+        - if @appearance.persisted?
+          %br
+          = link_to 'Remove header logo', header_logos_admin_appearances_path, data: { confirm: "Header logo will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-logo"
+        %hr
+      = f.hidden_field :header_logo_cache
+      = f.file_field :header_logo, class: ""
+      .hint
+        Maximum file size is 1MB. Pages are optimized for a 72x72 px header logo
+
+  .form-actions
+    = f.submit 'Save', class: 'btn btn-save'
+    - if @appearance.persisted?
+      = link_to 'Preview last save', preview_admin_appearances_path, class: 'btn', target: '_blank'
+
+    - if @appearance.updated_at
+      %span.pull-right
+        Last edit #{time_ago_with_tooltip(@appearance.updated_at)}
diff --git a/app/views/admin/appearances/preview.html.haml b/app/views/admin/appearances/preview.html.haml
new file mode 100644
index 00000000000..dd4a64e80bc
--- /dev/null
+++ b/app/views/admin/appearances/preview.html.haml
@@ -0,0 +1,29 @@
+- page_title "Preview | Appearance"
+%h3.page-title
+  Appearance settings - Preview
+%hr
+
+.ui-box
+  .title
+    Sign-in page
+  %div
+    .login-page
+      .container
+        .content
+          .login-title
+            %h1= brand_title
+      %hr
+      .container
+        .content
+          .row
+            .col-sm-7
+              .brand-image
+                = brand_image
+              .brand_text
+                = brand_text
+            .col-sm-4
+              .login-box
+                %h3.page-title Sign in
+                = text_field_tag :login, nil, class: "form-control top", placeholder: "Username or Email"
+                = password_field_tag :password, nil, class: "form-control bottom", placeholder: "Password"
+                = button_tag "Sign in", class: "btn-create btn"
diff --git a/app/views/admin/appearances/show.html.haml b/app/views/admin/appearances/show.html.haml
new file mode 100644
index 00000000000..089e8e4cb7a
--- /dev/null
+++ b/app/views/admin/appearances/show.html.haml
@@ -0,0 +1,7 @@
+- page_title "Appearance"
+%h3.page-title
+  Appearance settings
+%p.light
+  You can modify the look and feel of GitLab here
+
+= render 'form'
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index ac1d5429382..280a1b93729 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -56,6 +56,11 @@
       = icon('cog fw')
       %span
         Background Jobs
+  = nav_link(controller: :appearances) do
+    = link_to admin_appearances_path, title: 'Appearances' do
+      = icon('image')
+      %span
+        Appearance
 
   = nav_link(controller: :applications) do
     = link_to admin_applications_path, title: 'Applications' do