Skip to content
Snippets Groups Projects
Commit 164dbc6b authored by Annabel Gray's avatar Annabel Gray Committed by Phil Hughes
Browse files

Resolve "Introduce new navigation themes in GitLab 11.0"

parent ce001db9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 216 additions and 122 deletions
app/assets/stylesheets/framework/gitlab_theme.scss
+ 109
− 53
View file @ 164dbc6b
@@ -3,26 +3,26 @@
*/
 
@mixin gitlab-theme(
$color-100,
$color-200,
$color-500,
$color-700,
$color-800,
$color-900,
$location-badge-color,
$search-and-nav-links,
$active-tab-border,
$border-and-box-shadow,
$sidebar-text,
$nav-svg-color,
$color-alternate
) {
// Header
 
.navbar-gitlab {
background-color: $color-900;
background-color: $nav-svg-color;
 
.navbar-collapse {
color: $color-200;
color: $search-and-nav-links;
}
 
.container-fluid {
.navbar-toggler {
border-left: 1px solid lighten($color-700, 10%);
border-left: 1px solid lighten($border-and-box-shadow, 10%);
}
}
 
@@ -31,40 +31,40 @@
> li {
> a:hover,
> a:focus {
background-color: rgba($color-200, 0.2);
background-color: rgba($search-and-nav-links, 0.2);
}
 
&.active > a,
&.dropdown.show > a {
color: $color-900;
color: $nav-svg-color;
background-color: $color-alternate;
}
 
&.line-separator {
border-left: 1px solid rgba($color-200, 0.2);
border-left: 1px solid rgba($search-and-nav-links, 0.2);
}
}
}
 
.navbar-sub-nav {
color: $color-200;
color: $search-and-nav-links;
}
 
.nav {
> li {
color: $color-200;
color: $search-and-nav-links;
 
> a {
&.header-user-dropdown-toggle {
.header-user-avatar {
border-color: $color-200;
border-color: $search-and-nav-links;
}
}
 
&:hover,
&:focus {
@include media-breakpoint-up(sm) {
background-color: rgba($color-200, 0.2);
background-color: rgba($search-and-nav-links, 0.2);
}
 
svg {
@@ -75,12 +75,12 @@
 
&.active > a,
&.dropdown.show > a {
color: $color-900;
color: $nav-svg-color;
background-color: $color-alternate;
 
&:hover {
svg {
fill: $color-900;
fill: $nav-svg-color;
}
}
}
@@ -88,7 +88,7 @@
.impersonated-user,
.impersonated-user:hover {
svg {
fill: $color-900;
fill: $nav-svg-color;
}
}
}
@@ -99,34 +99,34 @@
> a {
&:hover,
&:focus {
background-color: rgba($color-200, 0.2);
background-color: rgba($search-and-nav-links, 0.2);
}
}
}
 
.search {
form {
background-color: rgba($color-200, 0.2);
background-color: rgba($search-and-nav-links, 0.2);
 
&:hover {
background-color: rgba($color-200, 0.3);
background-color: rgba($search-and-nav-links, 0.3);
}
}
 
.location-badge {
color: $color-100;
background-color: rgba($color-200, 0.1);
border-right: 1px solid $color-800;
color: $location-badge-color;
background-color: rgba($search-and-nav-links, 0.1);
border-right: 1px solid $sidebar-text;
}
 
.search-input::placeholder {
color: rgba($color-200, 0.8);
color: rgba($search-and-nav-links, 0.8);
}
 
.search-input-wrap {
.search-icon,
.clear-icon {
fill: rgba($color-200, 0.8);
fill: rgba($search-and-nav-links, 0.8);
}
}
 
@@ -141,38 +141,34 @@
 
.search-input-wrap {
.search-icon {
fill: rgba($color-200, 0.8);
fill: rgba($search-and-nav-links, 0.8);
}
}
}
}
 
.btn-sign-in {
background-color: $color-100;
color: $color-900;
}
 
// Sidebar
.nav-sidebar li.active {
box-shadow: inset 4px 0 0 $color-700;
box-shadow: inset 4px 0 0 $border-and-box-shadow;
 
> a {
color: $color-800;
color: $sidebar-text;
}
 
svg {
fill: $color-800;
fill: $sidebar-text;
}
}
 
.sidebar-top-level-items > li.active .badge.badge-pill {
color: $color-800;
color: $sidebar-text;
}
 
.nav-links li {
&.active a,
a.active {
border-bottom: 2px solid $color-500;
border-bottom: 2px solid $active-tab-border;
 
.badge.badge-pill {
font-weight: $gl-font-weight-bold;
@@ -181,27 +177,27 @@
}
 
.branch-header-title {
color: $color-700;
color: $border-and-box-shadow;
}
 
.ide-file-list .file.file-active {
color: $color-700;
color: $border-and-box-shadow;
}
 
.ide-sidebar-link {
&.active {
color: $color-700;
box-shadow: inset 3px 0 $color-700;
color: $border-and-box-shadow;
box-shadow: inset 3px 0 $border-and-box-shadow;
 
&.is-right {
box-shadow: inset -3px 0 $color-700;
box-shadow: inset -3px 0 $border-and-box-shadow;
}
}
}
}
 
body {
&.ui_indigo {
&.ui-indigo {
@include gitlab-theme(
$indigo-100,
$indigo-200,
@@ -213,19 +209,19 @@ body {
);
}
 
&.ui_dark {
&.ui-light-indigo {
@include gitlab-theme(
$theme-gray-100,
$theme-gray-200,
$theme-gray-500,
$theme-gray-700,
$theme-gray-800,
$theme-gray-900,
$indigo-100,
$indigo-200,
$indigo-500,
$indigo-500,
$indigo-700,
$indigo-700,
$white-light
);
}
 
&.ui_blue {
&.ui-blue {
@include gitlab-theme(
$theme-blue-100,
$theme-blue-200,
@@ -237,7 +233,19 @@ body {
);
}
 
&.ui_green {
&.ui-light-blue {
@include gitlab-theme(
$theme-light-blue-100,
$theme-light-blue-200,
$theme-light-blue-500,
$theme-light-blue-500,
$theme-light-blue-700,
$theme-light-blue-700,
$white-light
);
}
&.ui-green {
@include gitlab-theme(
$theme-green-100,
$theme-green-200,
@@ -249,7 +257,55 @@ body {
);
}
 
&.ui_light {
&.ui-light-green {
@include gitlab-theme(
$theme-green-100,
$theme-green-200,
$theme-green-500,
$theme-green-500,
$theme-light-green-700,
$theme-light-green-700,
$white-light
);
}
&.ui-red {
@include gitlab-theme(
$theme-red-100,
$theme-red-200,
$theme-red-500,
$theme-red-700,
$theme-red-800,
$theme-red-900,
$white-light
);
}
&.ui-light-red {
@include gitlab-theme(
$theme-light-red-100,
$theme-light-red-200,
$theme-light-red-500,
$theme-light-red-500,
$theme-light-red-700,
$theme-light-red-700,
$white-light
);
}
&.ui-dark {
@include gitlab-theme(
$theme-gray-100,
$theme-gray-200,
$theme-gray-500,
$theme-gray-700,
$theme-gray-800,
$theme-gray-900,
$white-light
);
}
&.ui-light {
@include gitlab-theme(
$theme-gray-900,
$theme-gray-700,
app/assets/stylesheets/framework/header.scss
+ 2
− 0
View file @ 164dbc6b
@@ -437,6 +437,8 @@
}
 
.btn-sign-in {
background-color: $indigo-100;
color: $indigo-900;
margin-top: 3px;
font-weight: $gl-font-weight-bold;
 
app/assets/stylesheets/framework/variables.scss
+ 32
− 0
View file @ 164dbc6b
@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
$theme-blue-900: #1a3652;
$theme-blue-950: #0f2235;
 
$theme-light-blue-50: #f2f7fc;
$theme-light-blue-100: #ebf1f7;
$theme-light-blue-200: #c9dcf2;
$theme-light-blue-300: #83abd4;
$theme-light-blue-400: #4d86bf;
$theme-light-blue-500: #367cc2;
$theme-light-blue-600: #3771ab;
$theme-light-blue-700: #2261a1;
$theme-green-50: #f2faf6;
$theme-green-100: #e4f3ea;
$theme-green-200: #c0dfcd;
@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
$theme-green-900: #0d4524;
$theme-green-950: #072d16;
 
$theme-light-green-700: #156b39;
$theme-red-50: #fcf4f2;
$theme-red-100: #fae9e6;
$theme-red-200: #ebcac5;
$theme-red-300: #d99b91;
$theme-red-400: #b0655a;
$theme-red-500: #ad4a3b;
$theme-red-600: #9e4133;
$theme-red-700: #912f20;
$theme-red-800: #78291d;
$theme-red-900: #691a16;
$theme-red-950: #36140f;
$theme-light-red-50: #fff6f5;
$theme-light-red-100: #fae2de;
$theme-light-red-200: #f7d5d0;
$theme-light-red-300: #d9796a;
$theme-light-red-400: #cf604e;
$theme-light-red-500: #c24b38;
$theme-light-red-600: #b03927;
$theme-light-red-700: #a62e21;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424;
app/assets/stylesheets/pages/profiles/preferences.scss
+ 35
− 40
View file @ 164dbc6b
@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
.one {
background-color: $color-1;
border-top-left-radius: $border-radius-default;
}
.two {
background-color: $color-2;
border-top-right-radius: $border-radius-default;
}
.three {
background-color: $color-3;
border-bottom-left-radius: $border-radius-default;
}
.four {
background-color: $color-4;
border-bottom-right-radius: $border-radius-default;
}
}
.multi-file-editor-options {
label {
margin-right: 20px;
@@ -38,44 +16,61 @@
 
.application-theme {
label {
margin-right: 20px;
margin: 0 $gl-padding $gl-padding 0;
text-align: center;
}
 
.preview {
font-size: 0;
margin-bottom: 10px;
height: 48px;
border-radius: 4px;
min-width: 135px;
margin-bottom: $gl-padding-8;
&.ui-indigo {
background-color: $indigo-900;
}
&.ui-light-indigo {
background-color: $indigo-700;
}
 
&.indigo {
@include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
&.ui-blue {
background-color: $theme-blue-900;
}
 
&.dark {
@include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
&.ui-light-blue {
background-color: $theme-light-blue-700;
}
 
&.light {
@include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
&.ui-green {
background-color: $theme-green-900;
}
 
&.blue {
@include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
&.ui-light-green {
background-color: $theme-light-green-700;
}
 
&.green {
@include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
&.ui-red {
background-color: $theme-red-900;
}
&.ui-light-red {
background-color: $theme-light-red-700;
}
&.ui-dark {
background-color: $theme-gray-900;
}
&.ui-light {
background-color: $theme-gray-200;
}
}
 
.preview-row {
display: block;
}
.quadrant {
display: inline-block;
height: 50px;
width: 80px;
}
}
 
.syntax-theme {
app/views/layouts/devise.html.haml
+ 1
− 1
View file @ 164dbc6b
!!! 5
%html.devise-layout-html{ class: system_message_class }
= render "layouts/head"
%body.ui_indigo.login-page.application.navless{ data: { page: body_data_page } }
%body.ui-indigo.login-page.application.navless{ data: { page: body_data_page } }
.page-wrap
= render "layouts/header/empty"
.login-page-broadcast
app/views/layouts/devise_empty.html.haml
+ 1
− 1
View file @ 164dbc6b
!!! 5
%html{ lang: "en", class: system_message_class }
= render "layouts/head"
%body.ui_indigo.login-page.application.navless
%body.ui-indigo.login-page.application.navless
= render "layouts/header/empty"
= render "layouts/broadcast"
.container.navless-container
app/views/profiles/preferences/show.html.haml
+ 1
− 7
View file @ 164dbc6b
@@ -9,13 +9,7 @@
.col-lg-8.application-theme
- Gitlab::Themes.each do |theme|
= label_tag do
.preview{ class: theme.name.downcase }
.preview-row
.quadrant.one
.quadrant.two
.preview-row
.quadrant.three
.quadrant.four
.preview{ class: theme.css_class }
= f.radio_button :theme_id, theme.id, checked: Gitlab::Themes.for_user(@user).id == theme.id
= theme.name
 
changelogs/unreleased/43597-new-navigation-themes.yml 0 → 100644
+ 5
− 0
View file @ 164dbc6b
---
title: Add additional theme color options
merge_request:
author:
type: changed
config/gitlab.yml.example
+ 8
− 3
View file @ 164dbc6b
@@ -78,10 +78,15 @@ production: &base
# username_changing_enabled: false # default: true - User can change her username/namespace
## Default theme ID
## 1 - Indigo
## 2 - Dark
## 3 - Light
## 4 - Blue
## 2 - Light Indigo
## 3 - Blue
## 4 - Light Blue
## 5 - Green
## 6 - Light Green
## 7 - Red
## 8 - Light Red
## 9 - Dark
## 10 - Light
# default_theme: 1 # default: 1
 
## Automatic issue closing
doc/development/fe_guide/style_guide_scss.md
+ 5
− 5
View file @ 164dbc6b
@@ -216,12 +216,12 @@ If you want a line or set of lines to be ignored by the linter, you can use
`// scss-lint:disable RuleName` ([more info][disabling-linters]):
 
```scss
// This lint rule is disabled because the class name comes from a gem.
// scss-lint:disable SelectorFormat
.ui_indigo {
background-color: #333;
// This lint rule is disabled because it is supported only in Chrome/Safari
// scss-lint:disable PropertySpelling
body {
text-decoration-skip: ink;
}
// scss-lint:enable SelectorFormat
// scss-lint:enable PropertySpelling
```
 
Make sure a comment is added on the line above the `disable` rule, otherwise the
lib/gitlab/themes.rb
+ 10
− 5
View file @ 164dbc6b
@@ -12,11 +12,16 @@ module Gitlab
 
# All available Themes
THEMES = [
Theme.new(1, 'Indigo', 'ui_indigo'),
Theme.new(2, 'Dark', 'ui_dark'),
Theme.new(3, 'Light', 'ui_light'),
Theme.new(4, 'Blue', 'ui_blue'),
Theme.new(5, 'Green', 'ui_green')
Theme.new(1, 'Indigo', 'ui-indigo'),
Theme.new(2, 'Light Indigo', 'ui-light-indigo'),
Theme.new(3, 'Blue', 'ui-blue'),
Theme.new(4, 'Light Blue', 'ui-light-blue'),
Theme.new(5, 'Green', 'ui-green'),
Theme.new(6, 'Light Green', 'ui-light-green'),
Theme.new(7, 'Red', 'ui-red'),
Theme.new(8, 'Light Red', 'ui-light-red'),
Theme.new(9, 'Dark', 'ui-dark'),
Theme.new(10, 'Light', 'ui-light')
].freeze
 
# Convenience method to get a space-separated String of all the theme
spec/helpers/preferences_helper_spec.rb
+ 3
− 3
View file @ 164dbc6b
@@ -31,9 +31,9 @@ describe PreferencesHelper do
describe '#user_application_theme' do
context 'with a user' do
it "returns user's theme's css_class" do
stub_user(theme_id: 3)
stub_user(theme_id: 10)
 
expect(helper.user_application_theme).to eq 'ui_light'
expect(helper.user_application_theme).to eq 'ui-light'
end
 
it 'returns the default when id is invalid' do
@@ -41,7 +41,7 @@ describe PreferencesHelper do
 
allow(Gitlab.config.gitlab).to receive(:default_theme).and_return(1)
 
expect(helper.user_application_theme).to eq 'ui_indigo'
expect(helper.user_application_theme).to eq 'ui-indigo'
end
end
 
spec/lib/gitlab/themes_spec.rb
+ 4
− 4
View file @ 164dbc6b
@@ -5,16 +5,16 @@ describe Gitlab::Themes, lib: true do
it 'returns a space-separated list of class names' do
css = described_class.body_classes
 
expect(css).to include('ui_indigo')
expect(css).to include(' ui_dark ')
expect(css).to include(' ui_blue')
expect(css).to include('ui-indigo')
expect(css).to include('ui-dark ')
expect(css).to include('ui-blue')
end
end
 
describe '.by_id' do
it 'returns a Theme by its ID' do
expect(described_class.by_id(1).name).to eq 'Indigo'
expect(described_class.by_id(3).name).to eq 'Light'
expect(described_class.by_id(10).name).to eq 'Light'
end
end
 
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment