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 403 margin-bottom: 40px;
404 404 @include round-borders-all(4px);
405 405 @include shade;
406   - border-color:#CCC;
  406 + border-color:#DDD;
407 407  
408 408 ul {
409 409 margin:0;
... ...
app/assets/stylesheets/main.scss
  Diff comments   View file @04bf40a
... ... @@ -74,12 +74,17 @@ $hover: #FDF5D9;
74 74 * - main menu styles
75 75 *
76 76 */
77   -@import "ui_basic.scss";
  77 +@import "themes/ui_basic.scss";
78 78  
79 79 /**
80 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 90 * Gitlab bootstrap.
... ...
app/assets/stylesheets/themes/ui_basic.scss 0 → 100644
  Diff comments   View file @04bf40a
... ... @@ -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 @@
  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 @@
  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   -/**
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   -/**
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 85 end
86 86  
87 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 89 end
94   -
95 90 end
... ...
app/views/profile/design.html.haml
  Diff comments   View file @04bf40a
... ... @@ -10,6 +10,10 @@
10 10 = label_tag do
11 11 = f.radio_button :theme_id, 2
12 12 Classic
  13 +
  14 + = label_tag do
  15 + = f.radio_button :theme_id, 3
  16 + Modern
13 17 %br
14 18 %h3 Code review
15 19 %hr
... ...
app/views/refs/_tree_file.html.haml
  Diff comments   View file @04bf40a
... ... @@ -21,8 +21,7 @@
21 21 = preserve do
22 22 = raw file.colorize(options: { linenos: 'True'})
23 23 - else
24   - %h3
25   - %center Empty file
  24 + %h4.nothing_here_message Empty file
26 25 - elsif file.image?
27 26 .view_file_content_image
28 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 @@
  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
... ...