From 31d760867ce5dddecf74891262a2bd3245e8cad2 Mon Sep 17 00:00:00 2001
From: dimana <t8120006@dias.aueb.gr>
Date: Tue, 26 May 2015 15:10:20 +0300
Subject: [PATCH] Issue #4297: Updated color themes and testing

---
 app/assets/stylesheets/_mixins.scss           |  3 +
 .../stylesheets/color_themes/dark_green.scss  | 95 ++++++++++++++++++-
 .../color_themes/egyptian_blue.scss           | 91 ++++++++++++++++++
 .../stylesheets/color_themes/magenta.scss     | 91 ++++++++++++++++++
 .../stylesheets/color_themes/original.scss    |  8 +-
 app/assets/stylesheets/mobile/mobile.scss     |  2 +-
 app/views/layouts/application.mobile.haml     |  2 +
 config/color_themes.yml                       |  6 +-
 spec/controllers/users_controller_spec.rb     | 11 +++
 spec/helpers/users_helper_spec.rb             | 41 ++++++++
 spec/models/user_spec.rb                      |  7 ++
 11 files changed, 346 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/color_themes/egyptian_blue.scss
 create mode 100644 app/assets/stylesheets/color_themes/magenta.scss
 create mode 100644 spec/helpers/users_helper_spec.rb

diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index e0181f1ba9..61405c1769 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 2570d2aa7a..50382d6a8b 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 0000000000..21c6a7b93a
--- /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 0000000000..2892b70d03
--- /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 d20e293ebe..7fc1934eb6 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 925b45410d..81adb2b122 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 390b843672..2bdd60d035 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 5cb8d8c56c..d6365ae029 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 40006a3af7..7e4a9d60bf 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 0000000000..69f2b0c5c0
--- /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 c447ec4e2a..1cc67fe9f3 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
 
 
-- 
GitLab