kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Resolve "Introduce new navigation themes in GitLab 11.0"

Browse source
This commit is contained in:
Annabel Gray 2018-06-07 07:37:02 +00:00 committed by Phil Hughes
parent ce001db938
commit 164dbc6b77
13 changed files with 216 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
app/assets/stylesheets/framework/gitlab_theme.scss
View file

@ -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 @@
> 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 @@
&.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 @@
.impersonated-user, .impersonated-user,
.impersonated-user:hover { .impersonated-user:hover {
svg { svg {
fill: $color-900; fill: $nav-svg-color;
} }
} }
} }
@ -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 @@
.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 @@
} }
.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 {
); );
} }
&.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 {
); );
} }
&.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 {
); );
} }
&.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,

2
app/assets/stylesheets/framework/header.scss
View file

@ -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;

32
app/assets/stylesheets/framework/variables.scss
View file

@ -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;
$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;

75
app/assets/stylesheets/pages/profiles/preferences.scss
View file

@ -1,25 +1,3 @@
@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 @@
.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;
&.indigo { &.ui-indigo {
@include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500); background-color: $indigo-900;
} }
&.dark { &.ui-light-indigo {
@include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600); background-color: $indigo-700;
} }
&.light { &.ui-blue {
@include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100); background-color: $theme-blue-900;
} }
&.blue { &.ui-light-blue {
@include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500); background-color: $theme-light-blue-700;
} }
&.green { &.ui-green {
@include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500); background-color: $theme-green-900;
}
&.ui-light-green {
background-color: $theme-light-green-700;
}
&.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 { .preview-row {
display: block; display: block;
} }
.quadrant {
display: inline-block;
height: 50px;
width: 80px;
}
} }
.syntax-theme { .syntax-theme {

2
app/views/layouts/devise.html.haml
View file

@ -1,7 +1,7 @@
!!! 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

2
app/views/layouts/devise_empty.html.haml
View file

@ -1,7 +1,7 @@
!!! 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

8
app/views/profiles/preferences/show.html.haml
View file

@ -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

5
changelogs/unreleased/43597-new-navigation-themes.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Add additional theme color options
merge_request:
author:
type: changed

11
config/gitlab.yml.example
View file

@ -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

10
doc/development/fe_guide/style_guide_scss.md
View file

@ -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

15
lib/gitlab/themes.rb
View file

@ -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

6
spec/helpers/preferences_helper_spec.rb
View file

@ -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
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

8
spec/lib/gitlab/themes_spec.rb
View file

@ -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