Make white headers possible (#5561)

* Make white headers possible * Give custom logos some padding * Fix colors for border of help icon * decrease hight of custom logo * Center OpenProject logo on header * Change footer color to neutral dark grey [ci skip]
8 years ago · a64697c44a
parent 580633bd13
commit a64697c44a
6 changed files with 79 additions and 19 deletions
--- a/app/assets/stylesheets/content/_custom_logo.sass
+++ b/app/assets/stylesheets/content/_custom_logo.sass
@ -1,4 +1,4 @@
 img.custom-logo-preview
-  height: 55px
+  height: 42px
  box-shadow: 0 0 3px lightgrey
-  @include varprop(background-color, primary-color)
+  @include varprop(background-color, header-bg-color)
--- a/app/assets/stylesheets/layout/_top_menu.sass
+++ b/app/assets/stylesheets/layout/_top_menu.sass
@ -33,7 +33,7 @@
  left: calc(50% - #{$main-menu-width} / 2)

  .home-link
-    margin-top: 13px
+    margin-top: 14px
    display: block
    background: $header-home-link-bg
    background-size: 140px
@ -76,14 +76,16 @@
      height: $header-height
      line-height: $header-height
      zoom: 1
-      @include default-font($header-item-font-color, $header-item-font-size)
+      @include varprop(color, header-item-font-color)
+      @include varprop(font-size, header-item-font-size)
+      font-weight: normal
      text-decoration: none
      padding: 0 15px 0 15px

    > a:hover
      @include varprop(background, header-item-bg-hover-color)
+      @include varprop(color, header-item-font-hover-color)

-      color: $header-item-font-hover-color
    > ul
      top: $header-height + $header-border-bottom-width
      display: none
@ -121,7 +123,7 @@
      @include varprop(background-color, header-item-bg-hover-color)
    &.open
      @include varprop(background-color, header-item-bg-hover-color)
-      color: $header-item-font-hover-color
+      @include varprop(color, header-item-font-hover-color)

      .button--dropdown-indicator
        &:before
@ -197,7 +199,9 @@
 .top-menu-search--button
  line-height: $header-height
  height: $header-height
-  @include default-font($header-item-font-color, $header-item-font-size)
+  @include varprop(color, header-item-font-color)
+  @include varprop(font-size, header-item-font-size)
+  font-weight: normal
  background: transparent
  &:hover
    text-decoration: none
@ -217,7 +221,7 @@
    display: block
    &:hover
      @include varprop(background, header-item-bg-hover-color)
-      color: $header-item-font-hover-color
+      @include varprop(color, header-item-font-hover-color)

 input.top-menu-search--input
  margin: 0
@ -328,7 +332,9 @@ input.top-menu-search--input
      // To accommodate the padding of the help icon which exisits because of the circle
      margin-top: -5px
  .icon-help:before
-    border: 2px solid $header-item-font-color
+    border-width: 2px
+    border-style: solid
+    @include varprop(border-color, header-item-font-color)
    border-radius: 50%
    width: 26px
    height: 26px
--- a/app/views/custom_styles/_inline_css.erb
+++ b/app/views/custom_styles/_inline_css.erb
@ -30,9 +30,9 @@ See doc/COPYRIGHT.rdoc for more details.
 <style>
  <% if CustomStyle.current.logo.present? %>
    #logo .home-link {
-      margin: 0px;
+      margin-top: 12px;
      width: 230px;
-      height: 55px;
+      height: 30px;
      background-image: url("<%= custom_style_logo_path(digest: CustomStyle.current.digest, filename: CustomStyle.current.logo_identifier) %>");
      background-repeat: no-repeat;
      background-position: center;
@ -43,11 +43,38 @@ See doc/COPYRIGHT.rdoc for more details.
  :root {
  <%  DesignColor.overwritten.each do |design_color| %>
    --<%= design_color.variable %>: <%= design_color.hexcode %>;
-
+    <% if design_color.variable == "header-border-bottom-color" %>
+      --header-border-bottom-width: 1px;
+    <% end %>
    <% if design_color.variable == "alternative-color" %>
      --button--alt-highlight-background-hover-color: <%= darken_color design_color.hexcode, 0.82 %>;
    <% end %>
  <% end %>
  }

+  <%# Conditional styles %>
+  <% if DesignColor.overwritten.map(&:variable).include?('header-border-bottom-color') %>
+    <%# Remove top border of left menu to not have to borders adding to 2px %>
+    #main-menu #toggle-project-menu {
+      border-top: 0px;
+    }
+     <%# On white background the input needs a border to contrast better. %>
+    .top-menu-search input.top-menu-search--input,
+    .top-menu-search input.top-menu-search--input:focus {
+      border: 1px solid #CCCCCC; /* Same color as border of foundation input fields */
+    }
+
+    <%# Trying to hit the query cache for the condition here: %>
+    <% if DesignColor.overwritten.map(&:variable).include?('header-bg-color') &&
+          DesignColor.overwritten.select { |design_color| design_color.variable == 'header-bg-color' }.try(:first).try(:hexcode) == '#FFFFFF' &&
+          DesignColor.overwritten.select { |design_color| design_color.variable == 'header-item-bg-hover-color' }.try(:first).try(:hexcode) == '#FFFFFF' %>
+      <%# Disable hover background color to not overlap border %>
+      #top-menu li > a:hover,
+      #top-menu li.drop-down:hover,
+      #top-menu li.drop-down.open,
+      .top-menu-search.-collapsed .top-menu-search--button:hover {
+        background: transparent;
+      }
+    <% end %>
+  <% end %>
 </style>
--- a/app/views/custom_styles/show.html.erb
+++ b/app/views/custom_styles/show.html.erb
@ -67,7 +67,7 @@ See doc/COPYRIGHT.rdoc for more details.
  </section>
 <% end %>

-<%= form_tag update_design_colors_path, method: :post, class: "form" do %>
+<%= form_tag update_design_colors_path, method: :post, class: "form -wide-labels" do %>
  <section class="form--section">
    <fieldset class="form--fieldset">
      <legend class="form--fieldset-legend"><%= I18n.t('admin.custom_styles.custom_colors') %></legend>
@ -77,10 +77,15 @@ See doc/COPYRIGHT.rdoc for more details.
          <label class="form--label"><%= design_color.variable %>:</label>
          <span class="form--field-container">
            <span class="form--text-field-container">
-              <%= styled_text_field_tag "design_colors[]" + design_color.variable, design_color.hexcode, placeholder: DesignColor.defaults[design_color.variable] %>
+              <%= styled_text_field_tag "design_colors[]" + design_color.variable,
+                                        design_color.hexcode,
+                                        placeholder: (DesignColor.defaults[design_color.variable] =~ /#[0-9A-F]{6}/ ? DesignColor.defaults[design_color.variable] : '') %>
            </span>
          </span>
-          <%= icon_for_color(OpenStruct.new( variable: design_color.variable, hexcode: design_color.get_hexcode ), class: 'timelines-x-update-color timelines-color-properties-preview', data: { target: '#color_hexcode' }) %>
+          <%= icon_for_color OpenStruct.new( variable: design_color.variable,
+                                             hexcode: design_color.get_hexcode ),
+                             class: 'timelines-x-update-color timelines-color-properties-preview',
+                             data:  { target: '#color_hexcode' } %>
          <div class="form--field-instructions">
            <% if design_color.variable == "primary-color" %>
              <%= t("admin.custom_styles.instructions.primary_color") %>
@ -88,6 +93,16 @@ See doc/COPYRIGHT.rdoc for more details.
              <%= t("admin.custom_styles.instructions.primary_color_dark") %>
            <% elsif design_color.variable == "alternative-color" %>
              <%= t("admin.custom_styles.instructions.alternative_color") %>
+            <% elsif design_color.variable == "header-bg-color" %>
+              <%= t("admin.custom_styles.instructions.header_bg_color") %>
+            <% elsif design_color.variable == "header-item-bg-hover-color" %>
+              <%= t("admin.custom_styles.instructions.header_item_bg_hover_color") %>
+            <% elsif design_color.variable == "header-item-font-color" %>
+              <%= t("admin.custom_styles.instructions.header_item_font_color") %>
+            <% elsif design_color.variable == "header-item-font-hover-color" %>
+              <%= t("admin.custom_styles.instructions.header_item_font_hover_color") %>
+            <% elsif design_color.variable == "header-border-bottom-color" %>
+              <%= t("admin.custom_styles.instructions.header_border_bottom_color") %>
            <% end %>
          </div>
        </div>
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -48,6 +48,11 @@ en:
        primary_color: "Main color."
        primary_color_dark: "Typically a darker version of the main color used for hover effects."
        alternative_color: "Strong accent color, typically used for most the important button on a screen."
+        header_bg_color: "Background color of the header."
+        header_item_bg_hover_color: "Background color of clickable header items when hovered with the mouse."
+        header_item_font_color: "Font color of clickable header items."
+        header_item_font_hover_color: "Font color of clickable header items when hovered with the mouse."
+        header_border_bottom_color: "Thin line under the header. Leave this field empty if you don't want any line."
    enterprise:
      upgrade_to_ee: "Upgrade to Enterprise Edition"
      add_token: "Upload an Enterprise Edition support token"
@ -1979,7 +1984,7 @@ en:
  text_custom_field_hint_activate_per_project_and_type: >
    Custom fields need to be activated per work
    package type and per project.
-  text_custom_logo_instructions: "A white logo on transparent background is recommended. For best results on both, conventional and retina displays, make sure your image's dimensions are 460px by 110px."
+  text_custom_logo_instructions: "A white logo on transparent background is recommended. For best results on both, conventional and retina displays, make sure your image's dimensions are 460px by 60px."
  text_default_administrator_account_changed: "Default administrator account changed"
  text_default_encoding: "Default: UTF-8"
  text_destroy: "Delete"
--- a/lib/open_project/design.rb
+++ b/lib/open_project/design.rb
@ -76,8 +76,8 @@ module OpenProject
      'header-search-field-bg-color'                         => "#FFFFFF",
      'header-search-field-font-color'                       => "#000000",
      'header-search-field-border'                           => "0",
-      'footer-bg-color'                                      => "$primary-color",
-      'footer-font-color'                                    => "$font-color-on-primary",
+      'footer-bg-color'                                      => "#41494E",
+      'footer-font-color'                                    => "#FFFFFF",
      'footer-height'                                        => "55px",
      'footer-content-height'                                => "55px",
      'footer-content-line-height'                           => "55px",
@ -245,7 +245,14 @@ module OpenProject
    ##
    # Returns the keys of variables that are customizable through the design
    def self.customizable_variables
-      %w(primary-color primary-color-dark alternative-color)
+      %w( primary-color
+          primary-color-dark
+          alternative-color
+          header-bg-color
+          header-item-font-color
+          header-item-font-hover-color
+          header-item-bg-hover-color
+          header-border-bottom-color )
    end
  end
 end