Commit 4c6c24856cc326e26b6f7ac91ee6eae9fcc722f7

Authored by Dmitriy Zaporozhets
1 parent 9477448a

Themes refactored

app/assets/images/gitlab_classic.png

2.98 KB

app/assets/images/gitlab_default.png

6.28 KB

app/assets/images/gitlab_modern.png

3.8 KB

app/assets/images/logo_dark.png

2.79 KB | W: | H:

2.53 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/assets/images/logo_white.png

1.64 KB | W: | H:

1.48 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/assets/stylesheets/common.scss
... ... @@ -584,25 +584,6 @@ li.note {
584 584 }
585 585 }
586 586  
587   -.themes_opts {
588   - padding-left:20px;
589   -
590   - label {
591   - width:175px;
592   - margin-right:40px;
593   -
594   - .prev {
595   - @extend .thumbnail;
596   - height:120px;
597   - width:175px;
598   - margin-bottom:10px;
599   - img {
600   - width:180px;
601   - }
602   - }
603   - }
604   -}
605   -
606 587 .git_error_tips {
607 588 @extend .span6;
608 589 text-align:left;
... ...
app/assets/stylesheets/main.scss
... ... @@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
118 118 @import "themes/ui_basic.scss";
119 119  
120 120 /**
121   - * UI mars theme
  121 + * UI themes:
122 122 */
123 123 @import "themes/ui_mars.scss";
124   -
125   -/**
126   - * UI Modern theme
127   - */
128 124 @import "themes/ui_modern.scss";
  125 +@import "themes/ui_gray.scss";
  126 +@import "themes/ui_color.scss";
129 127  
130 128 /**
131 129 * GitLab bootstrap.
... ... @@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
159 157 @import "sections/merge_requests.scss";
160 158 @import "sections/graph.scss";
161 159 @import "sections/events.scss";
  160 +@import "sections/themes.scss";
162 161  
163 162 /**
164 163 * This scss file redefine chozen selectbox styles for
... ...
app/assets/stylesheets/sections/header.scss
... ... @@ -39,15 +39,15 @@ header {
39 39  
40 40 h1 {
41 41 width:90px;
42   - background: url('logo_dark.png') no-repeat 0px -3px;
  42 + background: url('logo_dark.png') no-repeat 0px 2px;
43 43 float:left;
44   - margin-left:5px;
  44 + margin-left:2px;
45 45 font-size:30px;
46 46 line-height:48px;
47 47 font-weight:normal;
48 48 color:$style_color;
49 49 text-shadow: 0 1px 1px #FFF;
50   - padding-left:50px;
  50 + padding-left:45px;
51 51 height:40px;
52 52 font-family: 'Korolev', sans-serif;
53 53 }
... ... @@ -98,7 +98,7 @@ header {
98 98 background-position: 10px;
99 99 padding-left:25px;
100 100 font-size: 13px;
101   - @include border-radius(2px);
  101 + @include border-radius(3px);
102 102 border:1px solid #c6c6c6;
103 103 box-shadow:none;
104 104 &:focus {
... ... @@ -123,7 +123,7 @@ header {
123 123 display: block;
124 124 cursor: pointer;
125 125 img {
126   - @include border-radius(2px);
  126 + @include border-radius(3px);
127 127 right: 5px;
128 128 position: absolute;
129 129 width: 28px;
... ...
app/assets/stylesheets/sections/themes.scss 0 → 100644
... ... @@ -0,0 +1,53 @@
  1 +.themes_opts {
  2 + padding-left:20px;
  3 +
  4 + label {
  5 + width:175px;
  6 + margin-right:40px;
  7 +
  8 + .prev {
  9 + @extend .thumbnail;
  10 + height:30px;
  11 + width:175px;
  12 + margin-bottom:10px;
  13 +
  14 + &.classic {
  15 + background: #31363e;
  16 + }
  17 +
  18 + &.default {
  19 + background: #f1f1f1;
  20 + }
  21 +
  22 + &.modern {
  23 + background: #567;
  24 + }
  25 +
  26 + &.gray {
  27 + background: #708090;
  28 + }
  29 +
  30 + &.violet {
  31 + background: #657;
  32 + }
  33 + }
  34 + }
  35 +}
  36 +
  37 +.code_highlight_opts {
  38 + padding-left:20px;
  39 +
  40 + label {
  41 + width:220px;
  42 + margin-right:40px;
  43 +
  44 + .prev {
  45 + @extend .thumbnail;
  46 + height:151px;
  47 + width:220px;
  48 + margin-bottom:10px;
  49 + }
  50 + }
  51 +}
  52 +
  53 +
... ...
app/assets/stylesheets/themes/ui_color.scss 0 → 100644
... ... @@ -0,0 +1,68 @@
  1 +/**
  2 + * This file represent some UI that can be changed
  3 + * during web app restyle or theme select.
  4 + *
  5 + * Next items should be placed there
  6 + * - link colors
  7 + * - header restyles
  8 + *
  9 + */
  10 +.ui_color {
  11 +
  12 + /*
  13 + * Application Header
  14 + *
  15 + */
  16 + header {
  17 +
  18 + &.navbar-gitlab {
  19 + .navbar-inner {
  20 + background: #657;
  21 + border-bottom: 1px solid #AAA;
  22 +
  23 + .nav > li > a {
  24 + color: #fff;
  25 + text-shadow: 0 1px 0 #111;
  26 + }
  27 + }
  28 + }
  29 +
  30 + .search {
  31 + float: right;
  32 + margin-right: 45px;
  33 + .search-input {
  34 + border: 1px solid #aaa;
  35 + background-color: #D2D5DA;
  36 + background-color: rgba(255, 255, 255, 0.5);
  37 +
  38 + &:focus {
  39 + background-color: white;
  40 + }
  41 + }
  42 + }
  43 + .search-input::-webkit-input-placeholder {
  44 + color: #666;
  45 + }
  46 + .app_logo {
  47 + a {
  48 + h1 {
  49 + background: url('logo_white.png') no-repeat 0px 2px;
  50 + color:#fff;
  51 + text-shadow: 0 1px 1px #111;
  52 + }
  53 + }
  54 + .separator {
  55 + display:none;
  56 + }
  57 +
  58 + }
  59 + .project_name {
  60 + color:#fff;
  61 + text-shadow: 0 1px 1px #111;
  62 + }
  63 + }
  64 + /*
  65 + * End of Application Header
  66 + *
  67 + */
  68 +}
... ...
app/assets/stylesheets/themes/ui_gray.scss 0 → 100644
... ... @@ -0,0 +1,68 @@
  1 +/**
  2 + * This file represent some UI that can be changed
  3 + * during web app restyle or theme select.
  4 + *
  5 + * Next items should be placed there
  6 + * - link colors
  7 + * - header restyles
  8 + *
  9 + */
  10 +.ui_gray {
  11 +
  12 + /*
  13 + * Application Header
  14 + *
  15 + */
  16 + header {
  17 +
  18 + &.navbar-gitlab {
  19 + .navbar-inner {
  20 + background: #708090;
  21 + border-bottom: 1px solid #AAA;
  22 +
  23 + .nav > li > a {
  24 + color: #fff;
  25 + text-shadow: 0 1px 0 #111;
  26 + }
  27 + }
  28 + }
  29 +
  30 + .search {
  31 + float: right;
  32 + margin-right: 45px;
  33 + .search-input {
  34 + border: 1px solid #aaa;
  35 + background-color: #D2D5DA;
  36 + background-color: rgba(255, 255, 255, 0.5);
  37 +
  38 + &:focus {
  39 + background-color: white;
  40 + }
  41 + }
  42 + }
  43 + .search-input::-webkit-input-placeholder {
  44 + color: #666;
  45 + }
  46 + .app_logo {
  47 + a {
  48 + h1 {
  49 + background: url('logo_white.png') no-repeat 0px 2px;
  50 + color:#fff;
  51 + text-shadow: 0 1px 1px #111;
  52 + }
  53 + }
  54 + .separator {
  55 + display:none;
  56 + }
  57 +
  58 + }
  59 + .project_name {
  60 + color:#fff;
  61 + text-shadow: 0 1px 1px #111;
  62 + }
  63 + }
  64 + /*
  65 + * End of Application Header
  66 + *
  67 + */
  68 +}
... ...
app/assets/stylesheets/themes/ui_mars.scss
... ... @@ -46,7 +46,7 @@
46 46 .app_logo {
47 47 a {
48 48 h1 {
49   - background: url('logo_white.png') no-repeat 0px -3px;
  49 + background: url('logo_white.png') no-repeat 0px 2px;
50 50 color:#eee;
51 51 text-shadow: 0 1px 1px #111;
52 52 }
... ...
app/assets/stylesheets/themes/ui_modern.scss
... ... @@ -17,11 +17,11 @@
17 17  
18 18 &.navbar-gitlab {
19 19 .navbar-inner {
20   - background: #333;
21   - border-bottom: 1px solid #111;
  20 + background: #567;
  21 + border-bottom: 1px solid #AAA;
22 22  
23 23 .nav > li > a {
24   - color: #eee;
  24 + color: #fff;
25 25 text-shadow: 0 1px 0 #111;
26 26 }
27 27 }
... ... @@ -31,7 +31,7 @@
31 31 float: right;
32 32 margin-right: 45px;
33 33 .search-input {
34   - border: 1px solid rgba(0, 0, 0, 0.7);
  34 + border: 1px solid #aaa;
35 35 background-color: #D2D5DA;
36 36 background-color: rgba(255, 255, 255, 0.5);
37 37  
... ... @@ -46,8 +46,8 @@
46 46 .app_logo {
47 47 a {
48 48 h1 {
49   - background: url('logo_white.png') no-repeat 0px -3px;
50   - color:#eee;
  49 + background: url('logo_white.png') no-repeat 0px 2px;
  50 + color:#fff;
51 51 text-shadow: 0 1px 1px #111;
52 52 }
53 53 }
... ... @@ -57,7 +57,7 @@
57 57  
58 58 }
59 59 .project_name {
60   - color:#eee;
  60 + color:#fff;
61 61 text-shadow: 0 1px 1px #111;
62 62 }
63 63 }
... ...
app/views/profile/design.html.haml
... ... @@ -3,28 +3,35 @@
3 3 %legend Application theme
4 4 .themes_opts
5 5 = label_tag do
6   - .prev
7   - = image_tag "gitlab_default.png"
  6 + .prev.default
8 7 = f.radio_button :theme_id, 1
9 8 Default
10 9  
11 10 = label_tag do
12   - .prev
13   - = image_tag "gitlab_classic.png"
  11 + .prev.classic
14 12 = f.radio_button :theme_id, 2
15 13 Classic
16 14  
17 15 = label_tag do
18   - .prev
19   - = image_tag "gitlab_modern.png"
  16 + .prev.modern
20 17 = f.radio_button :theme_id, 3
21 18 Modern
  19 +
  20 + = label_tag do
  21 + .prev.gray
  22 + = f.radio_button :theme_id, 4
  23 + SlateGray
  24 +
  25 + = label_tag do
  26 + .prev.violet
  27 + = f.radio_button :theme_id, 5
  28 + Violet
22 29 %br
23 30 .clearfix
24 31  
25 32 %fieldset
26 33 %legend Code review
27   - .themes_opts
  34 + .code_highlight_opts
28 35 = label_tag do
29 36 .prev
30 37 = image_tag "white.png"
... ...
lib/gitlab/theme.rb
1 1 module Gitlab
2 2 class Theme
3 3 def self.css_class_by_id(id)
4   - themes = {
  4 + themes = {
5 5 1 => "ui_basic",
6 6 2 => "ui_mars",
7   - 3 => "ui_modern"
  7 + 3 => "ui_modern",
  8 + 4 => "ui_gray",
  9 + 5 => "ui_color"
8 10 }
9 11  
10 12 id ||= 1
... ...