Commit 3c815f97 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Ruben Davila

Add functionality for two themes

parent 6c49a628
......@@ -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";
......
/**
* 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);
}
}
!!! 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"
......
......@@ -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
......
// 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')
......
......@@ -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
......@@ -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
......
......@@ -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
......
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