diff options
| -rw-r--r-- | app/assets/stylesheets/pages/profiles/preferences.scss | 64 | ||||
| -rw-r--r-- | app/views/profiles/preferences/show.html.haml | 11 | ||||
| -rw-r--r-- | lib/gitlab/themes.rb | 2 | ||||
| -rw-r--r-- | spec/lib/gitlab/themes_spec.rb | 2 |
4 files changed, 75 insertions, 4 deletions
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 305feaacaa1..c197494b152 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -1,3 +1,67 @@ +@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; + } +} + +.application-theme { + label { + margin-right: 20px; + text-align: center; + } + + .preview { + font-size: 0; + margin-bottom: 10px; + + &.indigo { + @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500); + } + + &.dark { + @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600); + } + + &.light { + @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100); + } + + &.blue { + @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500); + } + + &.green { + @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500); + } + } + + .preview-row { + display: block; + } + + .quadrant { + display: inline-block; + height: 50px; + width: 80px; + } +} + .syntax-theme { label { margin-right: 20px; diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml index 9787a567b4d..2b72eeab8d6 100644 --- a/app/views/profiles/preferences/show.html.haml +++ b/app/views/profiles/preferences/show.html.haml @@ -5,11 +5,18 @@ = 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 + GitLab navigation theme + %p Customize the appearance of the application header and navigation sidebar. .col-lg-8.application-theme - Gitlab::Themes.each do |theme| = label_tag do - .preview{ class: theme.css_class } + .preview{ class: theme.name.downcase } + .preview-row + .quadrant.one + .quadrant.two + .preview-row + .quadrant.three + .quadrant.four = f.radio_button :theme_id, theme.id = theme.name diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb index 5e1e65854a3..e871557e243 100644 --- a/lib/gitlab/themes.rb +++ b/lib/gitlab/themes.rb @@ -16,7 +16,7 @@ module Gitlab 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(5, 'Green', 'ui_green') ].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 cc8da6774b2..ecacea6bb35 100644 --- a/spec/lib/gitlab/themes_spec.rb +++ b/spec/lib/gitlab/themes_spec.rb @@ -14,7 +14,7 @@ describe Gitlab::Themes, lib: true do 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 'Blue' + expect(described_class.by_id(3).name).to eq 'Light' end end |