Skip to content

G
gitlab-ce
Commit 164dbc6b authored by Annabel Gray's avatar Annabel Gray Committed by Phil Hughes
Browse files
Options

Resolve "Introduce new navigation themes in GitLab 11.0"

parent ce001db9
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 122 deletions
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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 @ 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 { .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 @ 164dbc6b
!!! 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 @ 164dbc6b
!!! 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 @ 164dbc6b
...@@ -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 @ 164dbc6b
---
title: Add additional theme color options
merge_request:
author:
type: changed
config/gitlab.yml.example
View file @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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 @ 164dbc6b
...@@ -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