Skip to content

G
gitlab-ce
Commit 06941114 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '43597-new-navigation-themes' into 'master' 

Resolve "Introduce new navigation themes in GitLab 11.0"

Closes #43597

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