Issue #4297: Updated color themes and testing

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);

app/assets/stylesheets/color_themes/dark_green.scss

@@ -1,6 +1,91 @@
-body > header {
+@import "mixins";
-  background: rgb(0,35,0);
+
-  box-shadow: 0 1px 3px rgba(0,0,0,0.9),
+$main-color: #00CC00;
-              0 25px 35px -30px rgba(255,255,255,0.4) inset;
+$main-color-light-dark: darken($main-color, 10%);
-  border-color: rgb(0,35,0);
+$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 }
 }

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 }
+}

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 }
+}

app/assets/stylesheets/color_themes/original.scss

@@ -1,5 +1,7 @@
+@import "mixins";
+
+$main-color: #282828;
+
 body > header {
-  background: rgb(30,30,30);
+  @include header-gradient($main-color);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.9),
-              0 25px 30px -25px rgba(255,255,255,0.4) inset;
 }

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;
 }
 

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)

config/color_themes.yml

@@ -1,3 +1,5 @@
 available:
-  original: "Original dark"
+  original: "Original Dark"
-  dark_green: "Dark green"
+  dark_green: "Dark Green"
+  magenta: "Magenta"
+  egyptian_blue: "Egyptian Blue"

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"

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

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