Download as
Browse Code »

Commit 4c6c24856cc326e26b6f7ac91ee6eae9fcc722f7

Authored by Dmitriy Zaporozhets
1 parent 9477448a
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Themes refactored

Showing 15 changed files with 224 additions and 46 deletions   Show diff stats
app/assets/images/gitlab_classic.png
View file @9477448

2.98 KB
app/assets/images/gitlab_default.png
View file @9477448

6.28 KB
app/assets/images/gitlab_modern.png
View file @9477448

3.8 KB
app/assets/images/logo_dark.png
View file @4c6c248

2.79 KB | W: | H:

2.53 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/assets/images/logo_white.png
View file @4c6c248

1.64 KB | W: | H:

1.48 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/assets/stylesheets/common.scss
  Diff comments   View file @4c6c248
@@ -584,25 +584,6 @@ li.note { @@ -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 .git_error_tips { 587 .git_error_tips {
607 @extend .span6; 588 @extend .span6;
608 text-align:left; 589 text-align:left;
app/assets/stylesheets/main.scss
  Diff comments   View file @4c6c248
@@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
118 @import "themes/ui_basic.scss"; 118 @import "themes/ui_basic.scss";
119 119
120 /** 120 /**
121 - * UI mars theme 121 + * UI themes:
122 */ 122 */
123 @import "themes/ui_mars.scss"; 123 @import "themes/ui_mars.scss";
124 -  
125 -/**  
126 - * UI Modern theme  
127 - */  
128 @import "themes/ui_modern.scss"; 124 @import "themes/ui_modern.scss";
  125 +@import "themes/ui_gray.scss";
  126 +@import "themes/ui_color.scss";
129 127
130 /** 128 /**
131 * GitLab bootstrap. 129 * GitLab bootstrap.
@@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono'
159 @import "sections/merge_requests.scss"; 157 @import "sections/merge_requests.scss";
160 @import "sections/graph.scss"; 158 @import "sections/graph.scss";
161 @import "sections/events.scss"; 159 @import "sections/events.scss";
  160 +@import "sections/themes.scss";
162 161
163 /** 162 /**
164 * This scss file redefine chozen selectbox styles for 163 * This scss file redefine chozen selectbox styles for
app/assets/stylesheets/sections/header.scss
  Diff comments   View file @4c6c248
@@ -39,15 +39,15 @@ header { @@ -39,15 +39,15 @@ header {
39 39
40 h1 { 40 h1 {
41 width:90px; 41 width:90px;
42 - background: url('logo_dark.png') no-repeat 0px -3px; 42 + background: url('logo_dark.png') no-repeat 0px 2px;
43 float:left; 43 float:left;
44 - margin-left:5px; 44 + margin-left:2px;
45 font-size:30px; 45 font-size:30px;
46 line-height:48px; 46 line-height:48px;
47 font-weight:normal; 47 font-weight:normal;
48 color:$style_color; 48 color:$style_color;
49 text-shadow: 0 1px 1px #FFF; 49 text-shadow: 0 1px 1px #FFF;
50 - padding-left:50px; 50 + padding-left:45px;
51 height:40px; 51 height:40px;
52 font-family: 'Korolev', sans-serif; 52 font-family: 'Korolev', sans-serif;
53 } 53 }
@@ -98,7 +98,7 @@ header { @@ -98,7 +98,7 @@ header {
98 background-position: 10px; 98 background-position: 10px;
99 padding-left:25px; 99 padding-left:25px;
100 font-size: 13px; 100 font-size: 13px;
101 - @include border-radius(2px); 101 + @include border-radius(3px);
102 border:1px solid #c6c6c6; 102 border:1px solid #c6c6c6;
103 box-shadow:none; 103 box-shadow:none;
104 &:focus { 104 &:focus {
@@ -123,7 +123,7 @@ header { @@ -123,7 +123,7 @@ header {
123 display: block; 123 display: block;
124 cursor: pointer; 124 cursor: pointer;
125 img { 125 img {
126 - @include border-radius(2px); 126 + @include border-radius(3px);
127 right: 5px; 127 right: 5px;
128 position: absolute; 128 position: absolute;
129 width: 28px; 129 width: 28px;
app/assets/stylesheets/sections/themes.scss 0 → 100644
  Diff comments   View file @4c6c248
@@ -0,0 +1,53 @@ @@ -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
  Diff comments   View file @4c6c248
@@ -0,0 +1,68 @@ @@ -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
  Diff comments   View file @4c6c248
@@ -0,0 +1,68 @@ @@ -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
  Diff comments   View file @4c6c248
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 .app_logo { 46 .app_logo {
47 a { 47 a {
48 h1 { 48 h1 {
49 - background: url('logo_white.png') no-repeat 0px -3px; 49 + background: url('logo_white.png') no-repeat 0px 2px;
50 color:#eee; 50 color:#eee;
51 text-shadow: 0 1px 1px #111; 51 text-shadow: 0 1px 1px #111;
52 } 52 }
app/assets/stylesheets/themes/ui_modern.scss
  Diff comments   View file @4c6c248
@@ -17,11 +17,11 @@ @@ -17,11 +17,11 @@
17 17
18 &.navbar-gitlab { 18 &.navbar-gitlab {
19 .navbar-inner { 19 .navbar-inner {
20 - background: #333;  
21 - border-bottom: 1px solid #111; 20 + background: #567;
  21 + border-bottom: 1px solid #AAA;
22 22
23 .nav > li > a { 23 .nav > li > a {
24 - color: #eee; 24 + color: #fff;
25 text-shadow: 0 1px 0 #111; 25 text-shadow: 0 1px 0 #111;
26 } 26 }
27 } 27 }
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 float: right; 31 float: right;
32 margin-right: 45px; 32 margin-right: 45px;
33 .search-input { 33 .search-input {
34 - border: 1px solid rgba(0, 0, 0, 0.7); 34 + border: 1px solid #aaa;
35 background-color: #D2D5DA; 35 background-color: #D2D5DA;
36 background-color: rgba(255, 255, 255, 0.5); 36 background-color: rgba(255, 255, 255, 0.5);
37 37
@@ -46,8 +46,8 @@ @@ -46,8 +46,8 @@
46 .app_logo { 46 .app_logo {
47 a { 47 a {
48 h1 { 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 text-shadow: 0 1px 1px #111; 51 text-shadow: 0 1px 1px #111;
52 } 52 }
53 } 53 }
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 57
58 } 58 }
59 .project_name { 59 .project_name {
60 - color:#eee; 60 + color:#fff;
61 text-shadow: 0 1px 1px #111; 61 text-shadow: 0 1px 1px #111;
62 } 62 }
63 } 63 }
app/views/profile/design.html.haml
  Diff comments   View file @4c6c248
@@ -3,28 +3,35 @@ @@ -3,28 +3,35 @@
3 %legend Application theme 3 %legend Application theme
4 .themes_opts 4 .themes_opts
5 = label_tag do 5 = label_tag do
6 - .prev  
7 - = image_tag "gitlab_default.png" 6 + .prev.default
8 = f.radio_button :theme_id, 1 7 = f.radio_button :theme_id, 1
9 Default 8 Default
10 9
11 = label_tag do 10 = label_tag do
12 - .prev  
13 - = image_tag "gitlab_classic.png" 11 + .prev.classic
14 = f.radio_button :theme_id, 2 12 = f.radio_button :theme_id, 2
15 Classic 13 Classic
16 14
17 = label_tag do 15 = label_tag do
18 - .prev  
19 - = image_tag "gitlab_modern.png" 16 + .prev.modern
20 = f.radio_button :theme_id, 3 17 = f.radio_button :theme_id, 3
21 Modern 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 %br 29 %br
23 .clearfix 30 .clearfix
24 31
25 %fieldset 32 %fieldset
26 %legend Code review 33 %legend Code review
27 - .themes_opts 34 + .code_highlight_opts
28 = label_tag do 35 = label_tag do
29 .prev 36 .prev
30 = image_tag "white.png" 37 = image_tag "white.png"
lib/gitlab/theme.rb
  Diff comments   View file @4c6c248
1 module Gitlab 1 module Gitlab
2 class Theme 2 class Theme
3 def self.css_class_by_id(id) 3 def self.css_class_by_id(id)
4 - themes = { 4 + themes = {
5 1 => "ui_basic", 5 1 => "ui_basic",
6 2 => "ui_mars", 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 id ||= 1 12 id ||= 1