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
Show 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 @@
*/
@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
View file @ 06941114
......@@ -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
View file @ 06941114
......@@ -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
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 {
label {
margin-right: 20px;
......@@ -38,43 +16,60 @@
.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;
&.indigo {
@include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
&.ui-indigo {
background-color: $indigo-900;
}
&.dark {
@include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
&.ui-light-indigo {
background-color: $indigo-700;
}
&.light {
@include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
&.ui-blue {
background-color: $theme-blue-900;
}
&.blue {
@include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
&.ui-light-blue {
background-color: $theme-light-blue-700;
}
&.green {
@include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
&.ui-green {
background-color: $theme-green-900;
}
&.ui-light-green {
background-color: $theme-light-green-700;
}
.preview-row {
display: block;
&.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;
}
}
.quadrant {
display: inline-block;
height: 50px;
width: 80px;
.preview-row {
display: block;
}
}
......
app/views/layouts/devise.html.haml
View file @ 06941114
!!! 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
View file @ 06941114
!!! 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
View file @ 06941114
......@@ -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
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
# 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
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
`// 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
View file @ 06941114
......@@ -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
View file @ 06941114
......@@ -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
View file @ 06941114
......@@ -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
......
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