Merge branch '55057-system-message-to-core' into 'master'

Port EE System Header And Footer feature to CE

Closes #55057

See merge request gitlab-org/gitlab-ce!25241

app/assets/stylesheets/framework.scss

@@ -65,3 +65,4 @@
 @import 'framework/terms';
 @import 'framework/read_more';
 @import 'framework/flex_grid';
+@import 'framework/system_messages';

app/assets/stylesheets/framework/system_messages.scss

+.header-message,
+.footer-message {
+  padding: 0 15px;
+  border: 1px solid transparent;
+  border-radius: 0;
+  position: fixed;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  z-index: 1000;
+
+  p {
+    @include str-truncated(100%);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.header-message {
+  top: 0;
+  height: $system-header-height;
+  line-height: $system-header-height;
+}
+
+.footer-message {
+  bottom: 0;
+  height: $system-footer-height;
+  line-height: $system-footer-height;
+}
+
+.with-performance-bar {
+  .header-message {
+    top: $performance-bar-height;
+  }
+}
+
+// System Header
+.with-system-header {
+  // main navigation
+  // login page
+  .navbar-gitlab,
+  .fixed-top {
+    top: $system-header-height;
+  }
+
+  // left sidebar eg: project page
+  // right sidebar eg: MR page
+  .nav-sidebar,
+  .right-sidebar {
+    top: $system-header-height + $header-height;
+  }
+
+  .content-wrapper {
+    margin-top: $system-header-height + $header-height;
+  }
+
+  // Performance Bar
+  // System Header
+  &.with-performance-bar {
+    // main navigation
+    header.navbar-gitlab {
+      top: $performance-bar-height + $system-header-height;
+    }
+
+    .layout-page {
+      margin-top: $header-height + $performance-bar-height + $system-header-height;
+    }
+
+    // left sidebar eg: project page
+    // right sidebar eg: MR page
+    .nav-sidebar,
+    .right-sidebar {
+      top: $header-height + $performance-bar-height + $system-header-height;
+    }
+  }
+}
+
+// System Footer
+.with-system-footer {
+  // left sidebar eg: project page
+  // right sidebar eg: mr page
+  .nav-sidebar,
+  .right-sidebar,
+    // navless pages' footer eg: login page
+    // navless pages' footer border eg: login page
+  &.devise-layout-html body .footer-container,
+  &.devise-layout-html body hr.footer-fixed {
+    bottom: $system-footer-height;
+  }
+}
+
+.fullscreen-layout {
+  .header-message,
+  .footer-message {
+    position: static;
+    top: auto;
+    bottom: auto;
+  }
+
+  .content-wrapper {
+    .with-system-header & {
+      margin-top: 0;
+    }
+
+    .with-system-footer & {
+      margin-top: 0;
+    }
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -276,6 +276,8 @@ $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
 $performance-bar-height: 35px;
+$system-header-height: 35px;
+$system-footer-height: $system-header-height;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;

app/controllers/admin/appearances_controller.rb

@@ -74,6 +74,10 @@ class Admin::AppearancesController < Admin::ApplicationController
       favicon_cache
       new_project_guidelines
       updated_by
+      header_message
+      footer_message
+      message_background_color
+      message_font_color
     ]
   end
 end

app/helpers/appearances_helper.rb

@@ -40,4 +40,36 @@ module AppearancesHelper
       render 'shared/logo_type.svg'
     end
   end
+
+  def header_message
+    return unless current_appearance&.show_header?
+
+    class_names = []
+    class_names << 'with-performance-bar' if performance_bar_enabled?
+
+    render_message(:header_message, class_names)
+  end
+
+  def footer_message
+    return unless current_appearance&.show_footer?
+
+    render_message(:footer_message)
+  end
+
+  private
+
+  def render_message(field_sym, class_names = [])
+    class_names << field_sym.to_s.dasherize
+
+    content_tag :div, class: class_names, style: message_style do
+      markdown_field(current_appearance, field_sym)
+    end
+  end
+
+  def message_style
+    style = []
+    style << "background-color: #{current_appearance.message_background_color};"
+    style << "color: #{current_appearance.message_font_color}"
+    style.join
+  end
 end

app/helpers/application_helper.rb

@@ -214,12 +214,19 @@ module ApplicationHelper
     class_names = []
     class_names << 'issue-boards-page' if current_controller?(:boards)
     class_names << 'with-performance-bar' if performance_bar_enabled?
-
+    class_names << system_message_class
     class_names
   end
-  # EE feature: System header and footer, unavailable in CE
   def system_message_class
+    class_names = []
+
+    return class_names unless appearance
+
+    class_names << 'with-system-header' if appearance.show_header?
+    class_names << 'with-system-footer' if appearance.show_footer?
+
+    class_names
   end
   # Returns active css class when condition returns true
@@ -292,4 +299,10 @@ module ApplicationHelper
       snippets: snippets_project_autocomplete_sources_path(object)
     }
   end
+
+  private
+
+  def appearance
+    ::Appearance.current
+  end
 end

app/models/appearance.rb

@@ -8,12 +8,19 @@ class Appearance < ActiveRecord::Base
   cache_markdown_field :description
   cache_markdown_field :new_project_guidelines
+  cache_markdown_field :header_message, pipeline: :broadcast_message
+  cache_markdown_field :footer_message, pipeline: :broadcast_message
   validates :logo,        file_size: { maximum: 1.megabyte }
   validates :header_logo, file_size: { maximum: 1.megabyte }
+  validates :message_background_color, allow_blank: true, color: true
+  validates :message_font_color, allow_blank: true, color: true
   validate :single_appearance_row, on: :create
+  default_value_for :message_background_color, '#E75E40'
+  default_value_for :message_font_color, '#FFFFFF'
+
   mount_uploader :logo,         AttachmentUploader
   mount_uploader :header_logo,  AttachmentUploader
   mount_uploader :favicon,      FaviconUploader
@@ -41,6 +48,14 @@ class Appearance < ActiveRecord::Base
     logo_system_path(favicon, 'favicon')
   end
+  def show_header?
+    header_message.present?
+  end
+
+  def show_footer?
+    footer_message.present?
+  end
+
   private
   def logo_system_path(logo, mount_type)

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

@@ -42,6 +42,7 @@
             %br
             Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.
+  = render partial: 'admin/appearances/system_header_footer_form', locals: { form: f }
   %hr
   .row

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

+- form = local_assigns.fetch(:form)
+
+%hr
+.row
+  .col-lg-4.profile-settings-sidebar
+    %h4.prepend-top-0
+      = _('System header and footer')
+
+  .col-lg-8
+    .form-group
+      = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
+      = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
+    .form-group
+      = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
+      = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
+    .form-group.js-toggle-colors-container
+      %button.btn.btn-link.js-toggle-colors-link{ type: 'button' }
+        = _('Customize colors')
+    .form-group.js-toggle-colors-container.hide
+      = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
+      = form.color_field :message_background_color, class: "form-control"
+    .form-group.js-toggle-colors-container.hide
+      = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
+      = form.color_field :message_font_color, class: "form-control"

app/views/layouts/application.html.haml

@@ -5,7 +5,9 @@
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render 'peek/bar'
-    = render  partial: "layouts/header/default", locals: { project: @project, group: @group }
+    = header_message
+    = render partial: "layouts/header/default", locals: { project: @project, group: @group }
     = render 'layouts/page', sidebar: sidebar, nav: nav
+    = footer_message
     = yield :scripts_body

app/views/layouts/devise.html.haml

@@ -2,6 +2,7 @@
 %html.devise-layout-html{ class: system_message_class }
   = render "layouts/head"
   %body.ui-indigo.login-page.application.navless.qa-login-page{ data: { page: body_data_page } }
+    = header_message
     .page-wrap
       = render "layouts/header/empty"
       .login-page-broadcast
@@ -34,3 +35,4 @@
           = link_to _("Explore"), explore_root_path
           = link_to _("Help"), help_path
           = link_to _("About GitLab"), "https://about.gitlab.com/"
+      = footer_message

app/views/layouts/devise_empty.html.haml

@@ -2,6 +2,7 @@
 %html{ lang: "en", class: system_message_class }
   = render "layouts/head"
   %body.ui-indigo.login-page.application.navless
+    = header_message
     = render "layouts/header/empty"
     = render "layouts/broadcast"
     .container.navless-container
@@ -15,3 +16,4 @@
         = link_to _("Explore"), explore_root_path
         = link_to _("Help"), help_path
         = link_to _("About GitLab"), "https://about.gitlab.com/"
+    = footer_message

changelogs/unreleased/55057-system-message-to-core.yml

+---
+title: Port System Header and Footer feature to Core
+merge_request: 25241
+author:
+type: added

db/migrate/20180314145917_add_header_and_footer_banners_to_appearances_table.rb

+# frozen_string_literal: true
+
+class AddHeaderAndFooterBannersToAppearancesTable < ActiveRecord::Migration[4.2]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  def change
+    add_column :appearances, :header_message, :text
+    add_column :appearances, :header_message_html, :text
+
+    add_column :appearances, :footer_message, :text
+    add_column :appearances, :footer_message_html, :text
+
+    add_column :appearances, :message_background_color, :text
+    add_column :appearances, :message_font_color, :text
+  end
+end

db/schema.rb

@@ -37,6 +37,12 @@ ActiveRecord::Schema.define(version: 20190204115450) do
     t.integer "cached_markdown_version"
     t.text "new_project_guidelines"
     t.text "new_project_guidelines_html"
+    t.text "header_message"
+    t.text "header_message_html"
+    t.text "footer_message"
+    t.text "footer_message_html"
+    t.text "message_background_color"
+    t.text "message_font_color"
     t.string "favicon"
   end

doc/customization/system_header_and_footer_messages.md

+# Adding a system message to every page
+
+> [Introduced][ee-1283] in [GitLab Premium][eep] 10.7.
+
+Navigate to the **Admin** area and go to the **Appearance** page.
+
+Under **System header and footer** insert your header message and/or footer message.
+Both background and font color of the header and footer are customizable.
+
+![appearance](system_header_and_footer_messages/appearance.png)
+
+After saving, all GitLab pages will contain the custom system header and/or footer messages:
+
+![custom_header_footer](system_header_and_footer_messages/custom_header_footer.png)
+
+The GitLab sign in page will also show the header and the footer messages:
+
+![sign_up_custom_header_and_footer](system_header_and_footer_messages/sign_up_custom_header_and_footer.png)

locale/gitlab.pot

@@ -951,6 +951,9 @@ msgstr ""
 msgid "Average per day: %{average}"
 msgstr ""
+msgid "Background Color"
+msgstr ""
+
 msgid "Background Jobs"
 msgstr ""
@@ -2450,6 +2453,9 @@ msgstr ""
 msgid "Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out %{notification_link}."
 msgstr ""
+msgid "Customize colors"
+msgstr ""
+
 msgid "Customize how FogBugz email addresses and usernames are imported into GitLab. In the next step, you'll be able to select the projects you want to import."
 msgstr ""
@@ -3432,6 +3438,12 @@ msgstr ""
 msgid "Follow the steps below to export your Google Code project data."
 msgstr ""
+msgid "Font Color"
+msgstr ""
+
+msgid "Footer message"
+msgstr ""
+
 msgid "For internal projects, any logged in user can view pipelines and access job details (output logs and artifacts)"
 msgstr ""
@@ -3759,6 +3771,9 @@ msgstr ""
 msgid "GroupsTree|Search by name"
 msgstr ""
+msgid "Header message"
+msgstr ""
+
 msgid "Health Check"
 msgstr ""
@@ -7051,6 +7066,9 @@ msgstr ""
 msgid "Starts at (UTC)"
 msgstr ""
+msgid "State your message to activate"
+msgstr ""
+
 msgid "Status"
 msgstr ""
@@ -7132,6 +7150,9 @@ msgstr ""
 msgid "System default (%{default})"
 msgstr ""
+msgid "System header and footer"
+msgstr ""
+
 msgid "System metrics (Custom)"
 msgstr ""