Add previews in preferences
This commit is contained in:
parent
7b567597ee
commit
6ee158197d
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue