diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index e0181f1ba93578f5f8713cd197da56184c4501ba..61405c1769854e12c8edef948fb4ee08c4cfec5f 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@@ -21,6 +21,9 @@ $default-border-radius: 3px;
@include linear-gradient(lighten($color,20%), darken($color,15%));
}
+@mixin header-gradient($color) {
+ @include linear-gradient(lighten($color, 8%), darken($color, 0%), 0%, 80%);
+}
@mixin linear-gradient($from, $to, $start:0%, $end:100%){
background: mix($from,$to);
diff --git a/app/assets/stylesheets/color_themes/dark_green.scss b/app/assets/stylesheets/color_themes/dark_green.scss
index 2570d2aa7aac8e42334fe1bda1a41fa14d0e219c..50382d6a8bbdcae36044146ce34a8961733507e5 100644
--- a/app/assets/stylesheets/color_themes/dark_green.scss
+++ b/app/assets/stylesheets/color_themes/dark_green.scss
@@ -1,6 +1,91 @@
-body > header {
- background: rgb(0,35,0);
- box-shadow: 0 1px 3px rgba(0,0,0,0.9),
- 0 25px 35px -30px rgba(255,255,255,0.4) inset;
- border-color: rgb(0,35,0);
+@import "mixins";
+
+$main-color: #00CC00;
+$main-color-light-dark: darken($main-color, 10%);
+$main-color-dark: darken($main-color, 36%);
+$link-color: darken($main-color, 8%);
+
+body {
+ header {
+ @include header-gradient($main-color-dark);
+ border-color: $main-color-dark;
+
+ #nav_badges > #notification_dropdown {
+ a {
+ color: $link-color;
+ }
+
+ .view_all {
+ background-color: $main-color-light-dark;
+ }
+ }
+
+ #global_search > form > input {
+ background-color: lighten($main-color-dark, 10%);
+ border-color: $main-color-dark;
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+
+ &:focus {
+ background-color: white;
+ }
+ }
+
+ ul#user_menu.active {
+ box-shadow: 0 1px 3px $main-color-dark;
+ background-color: $main-color-dark;
+
+ li {
+ border-color: darken($main-color-dark, 5%);
+
+ &.user-menu-item a:hover {
+ background-color: lighten($main-color-dark, 15%);
+ }
+ }
+ }
+ }
+
+ a,
+ a.tag,
+ .btn-link,
+ #main_stream .stream_element > .media a.author-name,
+ #hovercard h4 a,
+ .stream_element .from a.self {
+ color: $link-color;
+
+ &:hover, &:focus {
+ color: darken($link-color, 10%);
+ }
+ }
+
+ #publisher_textarea_wrapper > #button_container > .help-block > a {
+ color: lighten($link-color, 42%);
+ }
+
+ .btn.creation {
+ @include button-gradient(lighten($main-color-dark, 5%));
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+ }
+
+ #main_stream .stream_element {
+ &.post_preview {
+ background-color: lighten($main-color, 45%);
+ border-color: lighten($main-color, 40%);
+ }
+ }
+
+ #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
+
+ .poll_form .progress .bar { background-color: darken($main-color, 15%) }
+
+ #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
+ border-bottom-color: $main-color-light-dark;
+ }
+
+ .badge { background-color: $main-color-light-dark }
}
diff --git a/app/assets/stylesheets/color_themes/egyptian_blue.scss b/app/assets/stylesheets/color_themes/egyptian_blue.scss
new file mode 100644
index 0000000000000000000000000000000000000000..21c6a7b93a5ba6369b19a070286929aa709d79f3
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/egyptian_blue.scss
@@ -0,0 +1,91 @@
+@import "mixins";
+
+$main-color: #1034A6;
+$main-color-light-dark: darken($main-color, 5%);
+$main-color-dark: darken($main-color, 18%);
+$link-color: darken($main-color, 5%);
+
+body {
+ header {
+ @include header-gradient($main-color-dark);
+ border-color: $main-color-dark;
+
+ #nav_badges > #notification_dropdown {
+ a {
+ color: $link-color;
+ }
+
+ .view_all {
+ background-color: $main-color-light-dark;
+ }
+ }
+
+ #global_search > form > input {
+ background-color: lighten($main-color-dark, 10%);
+ border-color: $main-color-dark;
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+
+ &:focus {
+ background-color: white;
+ }
+ }
+
+ ul#user_menu.active {
+ box-shadow: 0 1px 3px $main-color-dark;
+ background-color: $main-color-dark;
+
+ li {
+ border-color: darken($main-color-dark, 5%);
+
+ &.user-menu-item a:hover {
+ background-color: lighten($main-color-dark, 15%);
+ }
+ }
+ }
+ }
+
+ a,
+ a.tag,
+ .btn-link,
+ #main_stream .stream_element > .media a.author-name,
+ #hovercard h4 a,
+ .stream_element .from a.self {
+ color: $link-color;
+
+ &:hover, &:focus {
+ color: darken($link-color, 10%);
+ }
+ }
+
+ #publisher_textarea_wrapper > #button_container > .help-block > a {
+ color: lighten($link-color, 38%);
+ }
+
+ .btn.creation {
+ @include button-gradient(lighten($main-color-dark, 5%));
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+ }
+
+ #main_stream .stream_element {
+ &.post_preview {
+ background-color: lighten($main-color, 45%);
+ border-color: lighten($main-color, 40%);
+ }
+ }
+
+ #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
+
+ .poll_form .progress .bar { background-color: darken($main-color, 15%) }
+
+ #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
+ border-bottom-color: $main-color-light-dark;
+ }
+
+ .badge { background-color: $main-color-light-dark }
+}
diff --git a/app/assets/stylesheets/color_themes/magenta.scss b/app/assets/stylesheets/color_themes/magenta.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2892b70d03eb32edb522997db0482039bfc4a648
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/magenta.scss
@@ -0,0 +1,91 @@
+@import "mixins";
+
+$main-color: #FF00FF;
+$main-color-light-dark: darken($main-color, 10%);
+$main-color-dark: darken($main-color, 36%);
+$link-color: darken($main-color, 8%);
+
+body {
+ header {
+ @include header-gradient($main-color-dark);
+ border-color: $main-color-dark;
+
+ #nav_badges > #notification_dropdown {
+ a {
+ color: $link-color;
+ }
+
+ .view_all {
+ background-color: $main-color-light-dark;
+ }
+ }
+
+ #global_search > form > input {
+ background-color: lighten($main-color-dark, 10%);
+ border-color: $main-color-dark;
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+
+ &:focus {
+ background-color: white;
+ }
+ }
+
+ ul#user_menu.active {
+ box-shadow: 0 1px 3px $main-color-dark;
+ background-color: $main-color-dark;
+
+ li {
+ border-color: darken($main-color-dark, 5%);
+
+ &.user-menu-item a:hover {
+ background-color: lighten($main-color-dark, 15%);
+ }
+ }
+ }
+ }
+
+ a,
+ a.tag,
+ .btn-link,
+ #main_stream .stream_element > .media a.author-name,
+ #hovercard h4 a,
+ .stream_element .from a.self {
+ color: $link-color;
+
+ &:hover, &:focus {
+ color: darken($link-color, 10%);
+ }
+ }
+
+ #publisher_textarea_wrapper > #button_container > .help-block > a {
+ color: lighten($link-color, 30%);
+ }
+
+ .btn.creation {
+ @include button-gradient(lighten($main-color-dark, 5%));
+
+ &:hover {
+ background-color: lighten($main-color-dark, 12%);
+ }
+ }
+
+ #main_stream .stream_element {
+ &.post_preview {
+ background-color: lighten($main-color, 45%);
+ border-color: lighten($main-color, 40%);
+ }
+ }
+
+ #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
+
+ .poll_form .progress .bar { background-color: darken($main-color, 15%) }
+
+ #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
+ border-bottom-color: $main-color-light-dark;
+ }
+
+ .badge { background-color: $main-color-light-dark }
+}
diff --git a/app/assets/stylesheets/color_themes/original.scss b/app/assets/stylesheets/color_themes/original.scss
index d20e293ebed2b7fff04c8b0790229ca51c9c59b2..7fc1934eb68187929864b133a18d840ca6254c5a 100644
--- a/app/assets/stylesheets/color_themes/original.scss
+++ b/app/assets/stylesheets/color_themes/original.scss
@@ -1,5 +1,7 @@
+@import "mixins";
+
+$main-color: #282828;
+
body > header {
- background: rgb(30,30,30);
- box-shadow: 0 1px 3px rgba(0,0,0,0.9),
- 0 25px 30px -25px rgba(255,255,255,0.4) inset;
+ @include header-gradient($main-color);
}
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 925b45410d3305444f7766d2419bd8aace211324..81adb2b122dd83f4fc3b4da1037d9b1c09ef8a93 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -917,7 +917,7 @@ form#update_profile_form {
.submit_block { margin-bottom: 20px; }
}
-select#user_language, #user_auto_follow_back_aspect_id, #aspect_ids_ {
+select#user_language, select#user_color_theme, #user_auto_follow_back_aspect_id, #aspect_ids_ {
padding: 3px;
}
diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml
index 390b843672ccc60cfdae2c8d5dfa02ad90fa4e18..2bdd60d035b28bd2cabc61156cf196fbb9d61ea8 100644
--- a/app/views/layouts/application.mobile.haml
+++ b/app/views/layouts/application.mobile.haml
@@ -46,6 +46,8 @@
- if rtl?
= stylesheet_link_tag :rtl, :media => 'all'
+ = stylesheet_link_tag current_color_theme, :media => "all"
+
= yield(:head)
= include_gon(:camel_case => true)
diff --git a/config/color_themes.yml b/config/color_themes.yml
index 5cb8d8c56c94fc9913f973784bc2371be866a2d5..d6365ae029d9731c9e77e8890c331200ad0a79f3 100644
--- a/config/color_themes.yml
+++ b/config/color_themes.yml
@@ -1,3 +1,5 @@
available:
- original: "Original dark"
- dark_green: "Dark green"
+ original: "Original Dark"
+ dark_green: "Dark Green"
+ magenta: "Magenta"
+ egyptian_blue: "Egyptian Blue"
diff --git a/spec/controllers/users_controller_spec.rb b/spec/controllers/users_controller_spec.rb
index 40006a3af7b1a41634be7a992918fd83eaf089ef..7e4a9d60bf6ea50c3710a72627ad53484f343770 100644
--- a/spec/controllers/users_controller_spec.rb
+++ b/spec/controllers/users_controller_spec.rb
@@ -152,6 +152,17 @@ describe UsersController, :type => :controller do
end
end
+ describe "color_theme" do
+ it "allow the user to change his color theme" do
+ old_color_theme = "original"
+ @user.color_theme = old_color_theme
+ @user.save
+ put(:update, :id => @user.id, :user => { :color_theme => "dark_green"})
+ @user.reload
+ expect(@user.color_theme).not_to eq(old_color_theme)
+ end
+ end
+
describe 'email' do
it 'disallow the user to change his new (unconfirmed) mail when it is the same as the old' do
@user.email = "my@newemail.com"
diff --git a/spec/helpers/users_helper_spec.rb b/spec/helpers/users_helper_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..69f2b0c5c055428b53ead67aef0af19a077f838a
--- /dev/null
+++ b/spec/helpers/users_helper_spec.rb
@@ -0,0 +1,41 @@
+require 'spec_helper'
+
+describe UsersHelper, :type => :helper do
+ include Devise::TestHelpers
+
+ describe "#current_color_theme" do
+ describe "if user is not signed in" do
+ before do
+ def user_signed_in?
+ false
+ end
+ end
+
+ it "returns the default color theme" do
+ expect(current_color_theme).to eq("color_themes/" + DEFAULT_COLOR_THEME)
+ end
+ end
+
+ describe "if user is signed in" do
+ before do
+ @user = User.new
+ def user_signed_in?
+ true
+ end
+ def current_user
+ @user
+ end
+ end
+
+ it "returns the default color theme if user has not selected any theme" do
+ expect(current_color_theme).to eq("color_themes/" + DEFAULT_COLOR_THEME)
+ end
+
+ it "returns the color theme selected by the user if there is a selected one" do
+ selected_theme = "test_theme"
+ @user.color_theme = selected_theme
+ expect(current_color_theme).to eq("color_themes/" + selected_theme)
+ end
+ end
+ end
+end
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index c447ec4e2a0f97e07a46b0600240d5c8996b8e3f..1cc67fe9f30a171dabc7a70dd23f6ab11a8a5232 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -364,6 +364,13 @@ describe User, :type => :model do
expect(user.language).to eq('de')
end
end
+
+ describe "of color_theme" do
+ it "requires availability" do
+ alice.color_theme = "some invalid theme"
+ expect(alice).not_to be_valid
+ end
+ end
end