diff --git a/app/assets/images/gitlab_classic.png b/app/assets/images/gitlab_classic.png deleted file mode 100644 index 4e189e22..00000000 Binary files a/app/assets/images/gitlab_classic.png and /dev/null differ diff --git a/app/assets/images/gitlab_default.png b/app/assets/images/gitlab_default.png deleted file mode 100644 index 6e9dfb58..00000000 Binary files a/app/assets/images/gitlab_default.png and /dev/null differ diff --git a/app/assets/images/gitlab_modern.png b/app/assets/images/gitlab_modern.png deleted file mode 100644 index b2d73b7a..00000000 Binary files a/app/assets/images/gitlab_modern.png and /dev/null differ diff --git a/app/assets/images/logo_dark.png b/app/assets/images/logo_dark.png index fab64c2d..4a3e3391 100644 Binary files a/app/assets/images/logo_dark.png and b/app/assets/images/logo_dark.png differ diff --git a/app/assets/images/logo_white.png b/app/assets/images/logo_white.png index 3f740254..366e3f3f 100644 Binary files a/app/assets/images/logo_white.png and b/app/assets/images/logo_white.png differ diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index aeaddb0b..e45cb876 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -584,25 +584,6 @@ li.note { } } -.themes_opts { - padding-left:20px; - - label { - width:175px; - margin-right:40px; - - .prev { - @extend .thumbnail; - height:120px; - width:175px; - margin-bottom:10px; - img { - width:180px; - } - } - } -} - .git_error_tips { @extend .span6; text-align:left; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 099d5043..7ae32b3a 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @import "themes/ui_basic.scss"; /** - * UI mars theme + * UI themes: */ @import "themes/ui_mars.scss"; - -/** - * UI Modern theme - */ @import "themes/ui_modern.scss"; +@import "themes/ui_gray.scss"; +@import "themes/ui_color.scss"; /** * GitLab bootstrap. @@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @import "sections/merge_requests.scss"; @import "sections/graph.scss"; @import "sections/events.scss"; +@import "sections/themes.scss"; /** * This scss file redefine chozen selectbox styles for diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss index 90a57363..32f6d855 100644 --- a/app/assets/stylesheets/sections/header.scss +++ b/app/assets/stylesheets/sections/header.scss @@ -39,15 +39,15 @@ header { h1 { width:90px; - background: url('logo_dark.png') no-repeat 0px -3px; + background: url('logo_dark.png') no-repeat 0px 2px; float:left; - margin-left:5px; + margin-left:2px; font-size:30px; line-height:48px; font-weight:normal; color:$style_color; text-shadow: 0 1px 1px #FFF; - padding-left:50px; + padding-left:45px; height:40px; font-family: 'Korolev', sans-serif; } @@ -98,7 +98,7 @@ header { background-position: 10px; padding-left:25px; font-size: 13px; - @include border-radius(2px); + @include border-radius(3px); border:1px solid #c6c6c6; box-shadow:none; &:focus { @@ -123,7 +123,7 @@ header { display: block; cursor: pointer; img { - @include border-radius(2px); + @include border-radius(3px); right: 5px; position: absolute; width: 28px; diff --git a/app/assets/stylesheets/sections/themes.scss b/app/assets/stylesheets/sections/themes.scss new file mode 100644 index 00000000..62dd27d0 --- /dev/null +++ b/app/assets/stylesheets/sections/themes.scss @@ -0,0 +1,53 @@ +.themes_opts { + padding-left:20px; + + label { + width:175px; + margin-right:40px; + + .prev { + @extend .thumbnail; + height:30px; + width:175px; + margin-bottom:10px; + + &.classic { + background: #31363e; + } + + &.default { + background: #f1f1f1; + } + + &.modern { + background: #567; + } + + &.gray { + background: #708090; + } + + &.violet { + background: #657; + } + } + } +} + +.code_highlight_opts { + padding-left:20px; + + label { + width:220px; + margin-right:40px; + + .prev { + @extend .thumbnail; + height:151px; + width:220px; + margin-bottom:10px; + } + } +} + + diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss new file mode 100644 index 00000000..4497892d --- /dev/null +++ b/app/assets/stylesheets/themes/ui_color.scss @@ -0,0 +1,68 @@ +/** + * This file represent some UI that can be changed + * during web app restyle or theme select. + * + * Next items should be placed there + * - link colors + * - header restyles + * + */ +.ui_color { + + /* + * Application Header + * + */ + header { + + &.navbar-gitlab { + .navbar-inner { + background: #657; + border-bottom: 1px solid #AAA; + + .nav > li > a { + color: #fff; + text-shadow: 0 1px 0 #111; + } + } + } + + .search { + float: right; + margin-right: 45px; + .search-input { + border: 1px solid #aaa; + background-color: #D2D5DA; + background-color: rgba(255, 255, 255, 0.5); + + &:focus { + background-color: white; + } + } + } + .search-input::-webkit-input-placeholder { + color: #666; + } + .app_logo { + a { + h1 { + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + .separator { + display:none; + } + + } + .project_name { + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + /* + * End of Application Header + * + */ +} diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss new file mode 100644 index 00000000..5ee2b0dd --- /dev/null +++ b/app/assets/stylesheets/themes/ui_gray.scss @@ -0,0 +1,68 @@ +/** + * This file represent some UI that can be changed + * during web app restyle or theme select. + * + * Next items should be placed there + * - link colors + * - header restyles + * + */ +.ui_gray { + + /* + * Application Header + * + */ + header { + + &.navbar-gitlab { + .navbar-inner { + background: #708090; + border-bottom: 1px solid #AAA; + + .nav > li > a { + color: #fff; + text-shadow: 0 1px 0 #111; + } + } + } + + .search { + float: right; + margin-right: 45px; + .search-input { + border: 1px solid #aaa; + background-color: #D2D5DA; + background-color: rgba(255, 255, 255, 0.5); + + &:focus { + background-color: white; + } + } + } + .search-input::-webkit-input-placeholder { + color: #666; + } + .app_logo { + a { + h1 { + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + .separator { + display:none; + } + + } + .project_name { + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + /* + * End of Application Header + * + */ +} diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss index 3773e61c..a9d21241 100644 --- a/app/assets/stylesheets/themes/ui_mars.scss +++ b/app/assets/stylesheets/themes/ui_mars.scss @@ -46,7 +46,7 @@ .app_logo { a { h1 { - background: url('logo_white.png') no-repeat 0px -3px; + background: url('logo_white.png') no-repeat 0px 2px; color:#eee; text-shadow: 0 1px 1px #111; } diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss index 73445ec6..0bb14cdd 100644 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ b/app/assets/stylesheets/themes/ui_modern.scss @@ -17,11 +17,11 @@ &.navbar-gitlab { .navbar-inner { - background: #333; - border-bottom: 1px solid #111; + background: #567; + border-bottom: 1px solid #AAA; .nav > li > a { - color: #eee; + color: #fff; text-shadow: 0 1px 0 #111; } } @@ -31,7 +31,7 @@ float: right; margin-right: 45px; .search-input { - border: 1px solid rgba(0, 0, 0, 0.7); + border: 1px solid #aaa; background-color: #D2D5DA; background-color: rgba(255, 255, 255, 0.5); @@ -46,8 +46,8 @@ .app_logo { a { h1 { - background: url('logo_white.png') no-repeat 0px -3px; - color:#eee; + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; text-shadow: 0 1px 1px #111; } } @@ -57,7 +57,7 @@ } .project_name { - color:#eee; + color:#fff; text-shadow: 0 1px 1px #111; } } diff --git a/app/views/profile/design.html.haml b/app/views/profile/design.html.haml index 4eace607..5099ea5d 100644 --- a/app/views/profile/design.html.haml +++ b/app/views/profile/design.html.haml @@ -3,28 +3,35 @@ %legend Application theme .themes_opts = label_tag do - .prev - = image_tag "gitlab_default.png" + .prev.default = f.radio_button :theme_id, 1 Default = label_tag do - .prev - = image_tag "gitlab_classic.png" + .prev.classic = f.radio_button :theme_id, 2 Classic = label_tag do - .prev - = image_tag "gitlab_modern.png" + .prev.modern = f.radio_button :theme_id, 3 Modern + + = label_tag do + .prev.gray + = f.radio_button :theme_id, 4 + SlateGray + + = label_tag do + .prev.violet + = f.radio_button :theme_id, 5 + Violet %br .clearfix %fieldset %legend Code review - .themes_opts + .code_highlight_opts = label_tag do .prev = image_tag "white.png" diff --git a/lib/gitlab/theme.rb b/lib/gitlab/theme.rb index 6e2be765..7f833867 100644 --- a/lib/gitlab/theme.rb +++ b/lib/gitlab/theme.rb @@ -1,10 +1,12 @@ module Gitlab class Theme def self.css_class_by_id(id) - themes = { + themes = { 1 => "ui_basic", 2 => "ui_mars", - 3 => "ui_modern" + 3 => "ui_modern", + 4 => "ui_gray", + 5 => "ui_color" } id ||= 1