Download as
Browse Code »

Commit 04bf40a923910f36f306673dbcadf5e2747b03a1

Authored by randx
1 parent a6dad85d
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Refactored theme css, added Modern theme pre version

Showing 12 changed files with 415 additions and 254 deletions   Show diff stats
app/assets/images/logo_text_tr.png 0 → 100644
View file @04bf40a

3.21 KB
app/assets/stylesheets/gitlab_bootstrap.scss
  Diff comments   View file @04bf40a
@@ -403,7 +403,7 @@ form { @@ -403,7 +403,7 @@ form {
403 margin-bottom: 40px; 403 margin-bottom: 40px;
404 @include round-borders-all(4px); 404 @include round-borders-all(4px);
405 @include shade; 405 @include shade;
406 - border-color:#CCC; 406 + border-color:#DDD;
407 407
408 ul { 408 ul {
409 margin:0; 409 margin:0;
app/assets/stylesheets/main.scss
  Diff comments   View file @04bf40a
@@ -74,12 +74,17 @@ $hover: #FDF5D9; @@ -74,12 +74,17 @@ $hover: #FDF5D9;
74 * - main menu styles 74 * - main menu styles
75 * 75 *
76 */ 76 */
77 -@import "ui_basic.scss"; 77 +@import "themes/ui_basic.scss";
78 78
79 /** 79 /**
80 * UI mars theme 80 * UI mars theme
81 */ 81 */
82 -@import "ui_mars.scss"; 82 +@import "themes/ui_mars.scss";
  83 +
  84 +/**
  85 + * UI Modern theme
  86 + */
  87 +@import "themes/ui_modern.scss";
83 88
84 /** 89 /**
85 * Gitlab bootstrap. 90 * Gitlab bootstrap.
app/assets/stylesheets/themes/ui_basic.scss 0 → 100644
  Diff comments   View file @04bf40a
@@ -0,0 +1,122 @@ @@ -0,0 +1,122 @@
  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 styles
  8 + * - main menu styles
  9 + *
  10 + */
  11 +.ui_basic {
  12 + /*
  13 + * Common styles
  14 + *
  15 + */
  16 + a {
  17 + color: $link_color;
  18 + &:hover {
  19 + text-decoration:none;
  20 + color: $blue_link;
  21 + }
  22 + }
  23 +
  24 +
  25 + /*
  26 + * Application Header
  27 + *
  28 + */
  29 + header {
  30 + width:100%;
  31 + padding:0;
  32 + margin:0;
  33 + top:1px;
  34 + left:0;
  35 + background: #F1F1F1; /* for non-css3 browsers */
  36 + border-bottom: 1px solid #ccc;
  37 + box-shadow: 0 -1px 0 white inset;
  38 + -moz-box-shadow: 0 -1px 0 white inset;
  39 + -webkit-box-shadow: 0 -1px 0 white inset;
  40 + z-index:10;
  41 + height:60px;
  42 +
  43 + .app_logo {
  44 + width:230px;
  45 + float:left;
  46 + position:relative;
  47 + top:-5px;
  48 +
  49 + a {
  50 + float:left;
  51 +
  52 + h1 {
  53 + text-indent:-9999px;
  54 + width:102px;
  55 + background: url('logo_text.png') no-repeat 0px -3px;
  56 + float:left;
  57 + margin-left:5px;
  58 + font-size:20px;
  59 + line-height:36px;
  60 + font-weight:bold;
  61 + color:#aaa;
  62 + text-shadow: 0 1px 1px #FFF;
  63 + padding-left:50px;
  64 + }
  65 + }
  66 + .separator {
  67 + margin-left:20px;
  68 + float: left;
  69 + height: 60px;
  70 + width: 1px;
  71 + background: white;
  72 + border-left: 1px solid #DDD;
  73 + margin-top: -10px;
  74 + }
  75 + }
  76 + .container {
  77 + .top_panel_content {
  78 + margin:auto;
  79 + position:relative;
  80 + padding:15px 0;
  81 + }
  82 + }
  83 +
  84 + .project_name {
  85 + float:left;
  86 + margin:0;
  87 + margin-right:30px;
  88 + font-size:20px;
  89 + line-height:36px;
  90 + font-weight:bold;
  91 + color:$style_color;
  92 + text-shadow: 0 1px 1px #FFF;
  93 + }
  94 +
  95 + .fbtn {
  96 + float: right;
  97 + margin-right:10px;
  98 + .btn {
  99 + margin-left:8px;
  100 + }
  101 + }
  102 +
  103 + .search {
  104 + float: right;
  105 + margin-right: 55px;
  106 +
  107 + .search-input {
  108 + width:130px;
  109 + background-image: url("icon-search.png");
  110 + background-repeat: no-repeat;
  111 + background-position: 10px;
  112 + padding-left:25px;
  113 + @include border-radius(5px);
  114 + border:1px solid #ccc;
  115 + }
  116 + }
  117 + }
  118 + /*
  119 + * End of Application Header
  120 + *
  121 + */
  122 +}
app/assets/stylesheets/themes/ui_mars.scss 0 → 100644
  Diff comments   View file @04bf40a
@@ -0,0 +1,121 @@ @@ -0,0 +1,121 @@
  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 styles
  8 + * - main menu styles
  9 + *
  10 + */
  11 +.ui_mars {
  12 +
  13 + /*
  14 + * Application Header
  15 + *
  16 + */
  17 + header {
  18 + width:100%;
  19 + padding:0;
  20 + margin:0;
  21 + top:1px;
  22 + left:0;
  23 + background: #474D57 url('bg-header.png') repeat-x bottom;
  24 + z-index:10;
  25 + height:60px;
  26 +
  27 + .fbtn {
  28 + float: right;
  29 + margin-right:10px;
  30 + .btn {
  31 + margin-left:8px;
  32 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E));
  33 + background-image: -webkit-linear-gradient(#595D63 6.6%, #31363E);
  34 + background-image: -moz-linear-gradient(#595D63 6.6%, #31363E);
  35 + background-image: -o-linear-gradient(#595D63 6.6%, #31363E);
  36 + font-size: 12px;
  37 + &:hover {
  38 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#2C2F35));
  39 + background-image: -webkit-linear-gradient(#595D63 6.6%, #2C2F35);
  40 + background-image: -moz-linear-gradient(#595D63 6.6%, #202227);
  41 + background-image: -o-linear-gradient(#595D63 6.6%, #202227);
  42 + background-position:0 0;
  43 + }
  44 +
  45 + border: 1px solid #31363E;
  46 + color:#D6DADF;
  47 + text-shadow: 0 -1px 0 #000000;
  48 + }
  49 + }
  50 + .search {
  51 + float: right;
  52 + margin-right: 55px;
  53 + .search-input {
  54 + background-image:url("icon-search.png");
  55 + float: right;
  56 + text-shadow: none;
  57 + width: 130px;
  58 + background-image: url("icon-search.png");
  59 + background-repeat: no-repeat;
  60 + background-position: 10px;
  61 + border-radius: 100px;
  62 + border: 1px solid rgba(0, 0, 0, 0.7);
  63 + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
  64 + background-color: #D2D5DA;
  65 + background-color: rgba(255, 255, 255, 0.5);
  66 + padding: 5px;
  67 + padding-left: 26px;
  68 +
  69 + &:focus {
  70 + background-color: white;
  71 + }
  72 + }
  73 + }
  74 + .search-input::-webkit-input-placeholder {
  75 + color: #666;
  76 + }
  77 + .app_logo {
  78 + width:230px;
  79 + float:left;
  80 + position:relative;
  81 + top:-5px;
  82 +
  83 + a {
  84 + float:left;
  85 +
  86 + h1 {
  87 + background: url('images.png') no-repeat -3px -6px;
  88 + width: 65px;
  89 + height: 26px;
  90 + margin: 6px 0;
  91 + padding: 0;
  92 + float: left;
  93 + text-indent: -1000em;
  94 + float:left;
  95 + }
  96 + }
  97 + }
  98 + .project_name {
  99 + float:left;
  100 + margin:0;
  101 + margin-right:30px;
  102 + font-size:20px;
  103 + line-height:38px;
  104 + font-weight:bold;
  105 + color:#fff;
  106 + text-shadow: 0 1px 1px #111;
  107 + }
  108 +
  109 + .container {
  110 + .top_panel_content {
  111 + margin:auto;
  112 + position:relative;
  113 + padding:15px 0;
  114 + }
  115 + }
  116 + }
  117 + /*
  118 + * End of Application Header
  119 + *
  120 + */
  121 +}
app/assets/stylesheets/themes/ui_modern.scss 0 → 100644
  Diff comments   View file @04bf40a
@@ -0,0 +1,143 @@ @@ -0,0 +1,143 @@
  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 styles
  8 + * - main menu styles
  9 + *
  10 + */
  11 +.ui_modern {
  12 +
  13 + background:#eee;
  14 +
  15 + > .container {
  16 + background:#FFF;
  17 + border: 1px solid #ccc;
  18 + padding:20px;
  19 + margin-top:30px;
  20 + -moz-box-shadow: 0 0 1px 1px #E3E3E3;
  21 + -webkit-box-shadow: 0 0 1px 1px #E3E3E3;
  22 + box-shadow: 0 0 1px 1px #E3E3E3;
  23 + }
  24 +
  25 + nav.main_menu {
  26 + position: absolute;
  27 + width: 100%;
  28 + left: 0;
  29 + top: 35px;
  30 + @include border-radius(0px);
  31 +
  32 + a.current {
  33 + border-bottom:none;
  34 + }
  35 + }
  36 +
  37 + .commit-box, .issue_form_box {
  38 + margin-top: 0px;
  39 + }
  40 +
  41 + .ui-box {
  42 + @include border-radius(0px);
  43 + }
  44 +
  45 + /*
  46 + * Common styles
  47 + *
  48 + */
  49 + a {
  50 + color: $link_color;
  51 + &:hover {
  52 + text-decoration:none;
  53 + color: $blue_link;
  54 + }
  55 + }
  56 +
  57 +
  58 + /*
  59 + * Application Header
  60 + *
  61 + */
  62 + header {
  63 + width:100%;
  64 + padding:0;
  65 + margin:0;
  66 + top:1px;
  67 + left:0;
  68 + background: #FFF; /* for non-css3 browsers */
  69 + z-index:10;
  70 + height:100px;
  71 +
  72 + .app_logo {
  73 + float:left;
  74 + position:relative;
  75 + top:-5px;
  76 +
  77 + a {
  78 + float:left;
  79 +
  80 + h1 {
  81 +
  82 + left: -30px;
  83 + position: relative;
  84 + text-indent:-9999px;
  85 + width:112px;
  86 + background: url('logo_text_tr.png') no-repeat 0px 0;
  87 + float:left;
  88 + font-size:20px;
  89 + line-height:36px;
  90 + font-weight:bold;
  91 + color:#aaa;
  92 + text-shadow: 0 1px 1px #FFF;
  93 + padding-left:50px;
  94 + }
  95 + }
  96 + }
  97 + .container {
  98 + .top_panel_content {
  99 + margin:auto;
  100 + position:relative;
  101 + padding:15px 0;
  102 + }
  103 + }
  104 +
  105 + .project_name {
  106 + float:left;
  107 + margin:0;
  108 + margin-right:30px;
  109 + font-size:20px;
  110 + line-height:36px;
  111 + font-weight:bold;
  112 + color:$style_color;
  113 + text-shadow: 0 1px 1px #FFF;
  114 + }
  115 +
  116 + .fbtn {
  117 + float: right;
  118 + margin-right:10px;
  119 + .btn {
  120 + margin-left:8px;
  121 + }
  122 + }
  123 +
  124 + .search {
  125 + float: right;
  126 + margin-right: 55px;
  127 +
  128 + .search-input {
  129 + width:130px;
  130 + background-image: url("icon-search.png");
  131 + background-repeat: no-repeat;
  132 + background-position: 10px;
  133 + padding-left:25px;
  134 + @include border-radius(5px);
  135 + border:1px solid #ccc;
  136 + }
  137 + }
  138 + }
  139 + /*
  140 + * End of Application Header
  141 + *
  142 + */
  143 +}
app/assets/stylesheets/ui_basic.scss
View file @a6dad85
@@ -1,122 +0,0 @@ @@ -1,122 +0,0 @@
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 styles  
8 - * - main menu styles  
9 - *  
10 - */  
11 -.ui_basic {  
12 - /*  
13 - * Common styles  
14 - *  
15 - */  
16 - a {  
17 - color: $link_color;  
18 - &:hover {  
19 - text-decoration:none;  
20 - color: $blue_link;  
21 - }  
22 - }  
23 -  
24 -  
25 - /*  
26 - * Application Header  
27 - *  
28 - */  
29 - header {  
30 - width:100%;  
31 - padding:0;  
32 - margin:0;  
33 - top:1px;  
34 - left:0;  
35 - background: #F1F1F1; /* for non-css3 browsers */  
36 - border-bottom: 1px solid #ccc;  
37 - box-shadow: 0 -1px 0 white inset;  
38 - -moz-box-shadow: 0 -1px 0 white inset;  
39 - -webkit-box-shadow: 0 -1px 0 white inset;  
40 - z-index:10;  
41 - height:60px;  
42 -  
43 - .app_logo {  
44 - width:230px;  
45 - float:left;  
46 - position:relative;  
47 - top:-5px;  
48 -  
49 - a {  
50 - float:left;  
51 -  
52 - h1 {  
53 - text-indent:-9999px;  
54 - width:102px;  
55 - background: url('logo_text.png') no-repeat 0px -3px;  
56 - float:left;  
57 - margin-left:5px;  
58 - font-size:20px;  
59 - line-height:36px;  
60 - font-weight:bold;  
61 - color:#aaa;  
62 - text-shadow: 0 1px 1px #FFF;  
63 - padding-left:50px;  
64 - }  
65 - }  
66 - .separator {  
67 - margin-left:20px;  
68 - float: left;  
69 - height: 60px;  
70 - width: 1px;  
71 - background: white;  
72 - border-left: 1px solid #DDD;  
73 - margin-top: -10px;  
74 - }  
75 - }  
76 - .container {  
77 - .top_panel_content {  
78 - margin:auto;  
79 - position:relative;  
80 - padding:15px 0;  
81 - }  
82 - }  
83 -  
84 - .project_name {  
85 - float:left;  
86 - margin:0;  
87 - margin-right:30px;  
88 - font-size:20px;  
89 - line-height:36px;  
90 - font-weight:bold;  
91 - color:$style_color;  
92 - text-shadow: 0 1px 1px #FFF;  
93 - }  
94 -  
95 - .fbtn {  
96 - float: right;  
97 - margin-right:10px;  
98 - .btn {  
99 - margin-left:8px;  
100 - }  
101 - }  
102 -  
103 - .search {  
104 - float: right;  
105 - margin-right: 55px;  
106 -  
107 - .search-input {  
108 - width:130px;  
109 - background-image: url("icon-search.png");  
110 - background-repeat: no-repeat;  
111 - background-position: 10px;  
112 - padding-left:25px;  
113 - @include border-radius(5px);  
114 - border:1px solid #ccc;  
115 - }  
116 - }  
117 - }  
118 - /*  
119 - * End of Application Header  
120 - *  
121 - */  
122 -}  
app/assets/stylesheets/ui_mars.scss
View file @a6dad85
@@ -1,121 +0,0 @@ @@ -1,121 +0,0 @@
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 styles  
8 - * - main menu styles  
9 - *  
10 - */  
11 -.ui_mars {  
12 -  
13 - /*  
14 - * Application Header  
15 - *  
16 - */  
17 - header {  
18 - width:100%;  
19 - padding:0;  
20 - margin:0;  
21 - top:1px;  
22 - left:0;  
23 - background: #474D57 url('bg-header.png') repeat-x bottom;  
24 - z-index:10;  
25 - height:60px;  
26 -  
27 - .fbtn {  
28 - float: right;  
29 - margin-right:10px;  
30 - .btn {  
31 - margin-left:8px;  
32 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E));  
33 - background-image: -webkit-linear-gradient(#595D63 6.6%, #31363E);  
34 - background-image: -moz-linear-gradient(#595D63 6.6%, #31363E);  
35 - background-image: -o-linear-gradient(#595D63 6.6%, #31363E);  
36 - font-size: 12px;  
37 - &:hover {  
38 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#2C2F35));  
39 - background-image: -webkit-linear-gradient(#595D63 6.6%, #2C2F35);  
40 - background-image: -moz-linear-gradient(#595D63 6.6%, #202227);  
41 - background-image: -o-linear-gradient(#595D63 6.6%, #202227);  
42 - background-position:0 0;  
43 - }  
44 -  
45 - border: 1px solid #31363E;  
46 - color:#D6DADF;  
47 - text-shadow: 0 -1px 0 #000000;  
48 - }  
49 - }  
50 - .search {  
51 - float: right;  
52 - margin-right: 55px;  
53 - .search-input {  
54 - background-image:url("icon-search.png");  
55 - float: right;  
56 - text-shadow: none;  
57 - width: 130px;  
58 - background-image: url("icon-search.png");  
59 - background-repeat: no-repeat;  
60 - background-position: 10px;  
61 - border-radius: 100px;  
62 - border: 1px solid rgba(0, 0, 0, 0.7);  
63 - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;  
64 - background-color: #D2D5DA;  
65 - background-color: rgba(255, 255, 255, 0.5);  
66 - padding: 5px;  
67 - padding-left: 26px;  
68 -  
69 - &:focus {  
70 - background-color: white;  
71 - }  
72 - }  
73 - }  
74 - .search-input::-webkit-input-placeholder {  
75 - color: #666;  
76 - }  
77 - .app_logo {  
78 - width:230px;  
79 - float:left;  
80 - position:relative;  
81 - top:-5px;  
82 -  
83 - a {  
84 - float:left;  
85 -  
86 - h1 {  
87 - background: url('images.png') no-repeat -3px -6px;  
88 - width: 65px;  
89 - height: 26px;  
90 - margin: 6px 0;  
91 - padding: 0;  
92 - float: left;  
93 - text-indent: -1000em;  
94 - float:left;  
95 - }  
96 - }  
97 - }  
98 - .project_name {  
99 - float:left;  
100 - margin:0;  
101 - margin-right:30px;  
102 - font-size:20px;  
103 - line-height:38px;  
104 - font-weight:bold;  
105 - color:#fff;  
106 - text-shadow: 0 1px 1px #111;  
107 - }  
108 -  
109 - .container {  
110 - .top_panel_content {  
111 - margin:auto;  
112 - position:relative;  
113 - padding:15px 0;  
114 - }  
115 - }  
116 - }  
117 - /*  
118 - * End of Application Header  
119 - *  
120 - */  
121 -}  
app/helpers/application_helper.rb
  Diff comments   View file @04bf40a
@@ -85,11 +85,6 @@ module ApplicationHelper @@ -85,11 +85,6 @@ module ApplicationHelper
85 end 85 end
86 86
87 def app_theme 87 def app_theme
88 - if current_user && current_user.theme_id == 1  
89 - "ui_basic"  
90 - else  
91 - "ui_mars"  
92 - end 88 + Gitlab::Theme.css_class_by_id(current_user.try(:theme_id))
93 end 89 end
94 -  
95 end 90 end
app/views/profile/design.html.haml
  Diff comments   View file @04bf40a
@@ -10,6 +10,10 @@ @@ -10,6 +10,10 @@
10 = label_tag do 10 = label_tag do
11 = f.radio_button :theme_id, 2 11 = f.radio_button :theme_id, 2
12 Classic 12 Classic
  13 +
  14 + = label_tag do
  15 + = f.radio_button :theme_id, 3
  16 + Modern
13 %br 17 %br
14 %h3 Code review 18 %h3 Code review
15 %hr 19 %hr
app/views/refs/_tree_file.html.haml
  Diff comments   View file @04bf40a
@@ -21,8 +21,7 @@ @@ -21,8 +21,7 @@
21 = preserve do 21 = preserve do
22 = raw file.colorize(options: { linenos: 'True'}) 22 = raw file.colorize(options: { linenos: 'True'})
23 - else 23 - else
24 - %h3  
25 - %center Empty file 24 + %h4.nothing_here_message Empty file
26 - elsif file.image? 25 - elsif file.image?
27 .view_file_content_image 26 .view_file_content_image
28 %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"} 27 %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
lib/gitlab/theme.rb 0 → 100644
  Diff comments   View file @04bf40a
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +module Gitlab
  2 + class Theme
  3 + def self.css_class_by_id(id)
  4 + themes = {
  5 + 1 => "ui_basic",
  6 + 2 => "ui_mars",
  7 + 3 => "ui_modern"
  8 + }
  9 +
  10 + id ||= 1
  11 +
  12 + return themes[id]
  13 + end
  14 + end
  15 +end