diff options
| -rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss | 122 | ||||
| -rw-r--r-- | app/views/layouts/application.html.haml | 2 | ||||
| -rw-r--r-- | app/views/profiles/preferences/show.html.haml | 13 | ||||
| -rw-r--r-- | app/views/profiles/preferences/update.js.erb | 4 | ||||
| -rw-r--r-- | config/gitlab.yml.example | 12 | ||||
| -rw-r--r-- | lib/gitlab/themes.rb | 8 | ||||
| -rw-r--r-- | spec/lib/gitlab/themes_spec.rb | 10 |
8 files changed, 152 insertions, 20 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index c0524bf6aa3..14e19134302 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -19,6 +19,7 @@ @import "framework/flash"; @import "framework/forms"; @import "framework/gfm"; +@import "framework/gitlab-theme.scss"; @import "framework/header"; @import "framework/highlight"; @import "framework/issue_box"; diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss new file mode 100644 index 00000000000..cec30664288 --- /dev/null +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -0,0 +1,122 @@ +/** + * Styles the GitLab application with a specific color theme + * + * $color-light - + * $color - + * $color-darker - + * $color-dark - + */ +@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { + + + header.navbar-gitlab-new { + background: linear-gradient(to right, $color-darker, $color); + } + + + + + + + + + + .page-with-sidebar { + .toggle-nav-collapse, + .pin-nav-btn { + color: $color-light; + + &:hover { + color: $white-light; + } + } + + .sidebar-wrapper { + background: $color-darker; + } + + .sidebar-action-buttons { + color: $color-light; + background-color: lighten($color-darker, 5%); + } + + .nav-sidebar { + li { + a { + color: $color-light; + + &:hover, + &:focus, + &:active { + background: $color-dark; + } + + i { + color: $color-light; + } + + path, + polygon { + fill: $color-light; + } + + .count { + color: $color-light; + background: $color-dark; + } + + svg { + position: relative; + top: 3px; + } + } + + &.separate-item { + border-top: 1px solid $color; + } + + &.active a { + color: $white-light; + background: $color-dark; + + &.no-highlight { + border: none; + } + + i { + color: $white-light; + } + + path, + polygon { + fill: $white-light; + } + } + } + + .about-gitlab { + color: $color-light; + } + } + } +} + +$theme-black-light: #979797; +$theme-black: #373737; +$theme-black-dark: #272727; +$theme-black-darker: #222; + +$theme-indigo-light: #98c; +$theme-indigo: #548; +$theme-indigo-dark: #436; +$theme-indigo-darker: #325; + +body { + &.ui_indigo { + @include gitlab-theme($theme-indigo-light, $theme-indigo, $theme-indigo-dark, $theme-indigo-darker); + } + + &.ui_dark { + @include gitlab-theme($theme-black-light, $theme-black, $theme-black-dark, $theme-black-darker); + } +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 65ac8aaa59b..0ca34b276a7 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -1,7 +1,7 @@ !!! 5 %html{ lang: I18n.locale, class: page_class } = render "layouts/head" - %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } } + %body{ class: "#{user_application_theme} #{@body_class}", data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}", find_file: find_file_path } } = render "layouts/init_auto_complete" if @gfm_form = render 'peek/bar' = render "layouts/header/default" diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml index 9e7fe556d88..9787a567b4d 100644 --- a/app/views/profiles/preferences/show.html.haml +++ b/app/views/profiles/preferences/show.html.haml @@ -3,6 +3,19 @@ = render 'profiles/head' = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f| + .col-lg-4.application-theme + %h4.prepend-top-0 + GitLab theme + .col-lg-8.application-theme + - Gitlab::Themes.each do |theme| + = label_tag do + .preview{ class: theme.css_class } + = f.radio_button :theme_id, theme.id + = theme.name + + .col-sm-12 + %hr + .col-lg-4.profile-settings-sidebar %h4.prepend-top-0 Syntax highlighting theme diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb index 431ab9d052b..8966dd3fd86 100644 --- a/app/views/profiles/preferences/update.js.erb +++ b/app/views/profiles/preferences/update.js.erb @@ -1,3 +1,7 @@ +// Remove body class for any previous theme, re-add current one +$('body').removeClass('<%= Gitlab::Themes.body_classes %>') +$('body').addClass('<%= user_application_theme %>') + // Toggle container-fluid class if ('<%= current_user.layout %>' === 'fluid') { $('.content-wrapper .container-fluid').removeClass('container-limited') diff --git a/config/gitlab.yml.example b/config/gitlab.yml.example index 1ca0f263f13..5439cd3d4a2 100644 --- a/config/gitlab.yml.example +++ b/config/gitlab.yml.example @@ -77,13 +77,9 @@ production: &base # default_can_create_group: false # default: true # username_changing_enabled: false # default: true - User can change her username/namespace ## Default theme ID - ## 1 - Graphite - ## 2 - Charcoal - ## 3 - Green - ## 4 - Gray - ## 5 - Violet - ## 6 - Blue - # default_theme: 2 # default: 2 + ## 1 - Indigo + ## 2 - Dark + # default_theme: 1 # default: 1 ## Automatic issue closing # If a commit message matches this regular expression, all issues referenced from the matched text will be closed. @@ -749,4 +745,4 @@ test: admin_group: '' staging: - <<: *base
\ No newline at end of file + <<: *base diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb index 19ab76ae80f..1714b6d2c99 100644 --- a/lib/gitlab/themes.rb +++ b/lib/gitlab/themes.rb @@ -12,12 +12,8 @@ module Gitlab # All available Themes THEMES = [ - Theme.new(1, 'Graphite', 'ui_graphite'), - Theme.new(2, 'Charcoal', 'ui_charcoal'), - Theme.new(3, 'Green', 'ui_green'), - Theme.new(4, 'Black', 'ui_black'), - Theme.new(5, 'Violet', 'ui_violet'), - Theme.new(6, 'Blue', 'ui_blue') + Theme.new(1, 'Indigo', 'ui_indigo'), + Theme.new(2, 'Dark', 'ui_dark') ].freeze # Convenience method to get a space-separated String of all the theme diff --git a/spec/lib/gitlab/themes_spec.rb b/spec/lib/gitlab/themes_spec.rb index 7a140518dd2..296ac626938 100644 --- a/spec/lib/gitlab/themes_spec.rb +++ b/spec/lib/gitlab/themes_spec.rb @@ -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_graphite') - expect(css).to include(' ui_charcoal ') - expect(css).to include(' ui_blue') + expect(css).to include('ui_indigo') + # expect(css).to include(' ui_charcoal ') + # 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 'Graphite' - expect(described_class.by_id(6).name).to eq 'Blue' + expect(described_class.by_id(1).name).to eq 'Indigo' + # expect(described_class.by_id(6).name).to eq 'Blue' end end |