nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Issue #4297: Updated color themes and testing

Browse source
This commit is contained in:
dimana 2015-05-26 15:10:20 +03:00 committed by efstrian
parent 57d766346c
commit 31d760867c
11 changed files with 346 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/_mixins.scss
View file

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

95
app/assets/stylesheets/color_themes/dark_green.scss
View file

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

91
app/assets/stylesheets/color_themes/egyptian_blue.scss Normal file
View file

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

91
app/assets/stylesheets/color_themes/magenta.scss Normal file
View file

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

8
app/assets/stylesheets/color_themes/original.scss
View file

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

2
app/assets/stylesheets/mobile/mobile.scss
View file

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

2
app/views/layouts/application.mobile.haml
View file

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

6
config/color_themes.yml
View file

@ -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"

11
spec/controllers/users_controller_spec.rb
View file

@ -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"

41
spec/helpers/users_helper_spec.rb Normal file
View file

@ -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

7
spec/models/user_spec.rb
View file

@ -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