From 54b051a7e77c9d376019758739bf95173ee38533 Mon Sep 17 00:00:00 2001 From: Yuki Date: Fri, 24 Jul 2015 22:42:14 +0530 Subject: [PATCH 01/13] Temp. layout for testing --- app/controllers/user_controller.rb | 4 + app/views/layouts/application.html.haml | 24 +++--- app/views/moderation/_userbox.html.haml | 4 +- app/views/shared/_sidebar.html.haml | 4 +- app/views/shared/_userbox.html.haml | 4 +- app/views/user/theme.css.erb | 95 +++++++++++++++++++++ config/routes.rb | 1 + db/20150724154106_create_themes_table.rb | 6 ++ db/schema.rb | 101 +++++------------------ 9 files changed, 148 insertions(+), 95 deletions(-) create mode 100644 app/views/user/theme.css.erb create mode 100644 db/20150724154106_create_themes_table.rb diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 5e660905..98b602eb 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -91,4 +91,8 @@ class UserController < ApplicationController def data end + + def theme + render 'user/theme', formats: [:css], handlers: [:scss, :erb] + end end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index bb116be0..b113baf7 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -19,22 +19,24 @@ - if user_signed_in? - if current_user.mod? = javascript_include_tag 'moderation', 'data-turbolinks-track' => true + %link{rel: 'stylesheet', href: '/yuki/theme.css', media: :all, 'data-turbolinks-track' => true} = csrf_meta_tags - %body + %body#version1 = render 'layouts/header' = yield = render 'shared/locales' - if Rails.env.development? - %hr - .container - %p - Current branch: - %code= `git rev-parse --abbrev-ref HEAD` - (commit - = succeed ')' do - = `git rev-parse --short HEAD`.strip - %p.text-danger Debug params: - = debug params + #debug + %hr + .container + %p + Current branch: + %code= `git rev-parse --abbrev-ref HEAD` + (commit + = succeed ')' do + = `git rev-parse --short HEAD`.strip + %p.text-danger Debug params: + = debug params - if Rails.env.production? %noscript %p diff --git a/app/views/moderation/_userbox.html.haml b/app/views/moderation/_userbox.html.haml index 2ef0d465..b9cc793d 100644 --- a/app/views/moderation/_userbox.html.haml +++ b/app/views/moderation/_userbox.html.haml @@ -1,5 +1,7 @@ +- header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end .panel.panel-default - %img.userbox--header{src: user.profile_header.url(:mobile)} + %div{class: header_class} + %img.userbox--header{src: user.profile_header.url(:mobile)} .panel-body %img.userbox--avatar{src: user.profile_picture.url(:small)} %p.userbox--username diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml index 16d06cd0..7809a2fc 100644 --- a/app/views/shared/_sidebar.html.haml +++ b/app/views/shared/_sidebar.html.haml @@ -1,5 +1,7 @@ +- header_class = if current_user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end .panel.panel-default.hidden-xs - %img.userbox--header{src: current_user.profile_header.url(:mobile)} + %div{class: header_class} + %img.userbox--header{src: current_user.profile_header.url(:mobile)} .panel-body %img.userbox--avatar{src: current_user.profile_picture.url(:small)} %p.userbox--username diff --git a/app/views/shared/_userbox.html.haml b/app/views/shared/_userbox.html.haml index 56f171b8..c8826f90 100644 --- a/app/views/shared/_userbox.html.haml +++ b/app/views/shared/_userbox.html.haml @@ -1,6 +1,8 @@ - type ||= @type || :nil +- header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end .panel.panel-default - %img.userbox--header{src: user.profile_header.url(:mobile)} + %div{class: header_class} + %img.userbox--header{src: user.profile_header.url(:mobile)} .panel-body %img.userbox--avatar{src: user.profile_picture.url(:small)} %p.userbox--username diff --git a/app/views/user/theme.css.erb b/app/views/user/theme.css.erb new file mode 100644 index 00000000..e625308c --- /dev/null +++ b/app/views/user/theme.css.erb @@ -0,0 +1,95 @@ +<% @primary_color ||= "#222" %> +<% @primary_border ||= "#151515" %> +<% @primary_text ||= "#eee" %> +<% @primary_link ||= "#666" %> +<% @primary_hover ||= "#222" %> +<% @secondary_color ||= "#333" %> +<% @secondary_border ||= "#111" %> +<% @secondary_text ||= "#eee" %> +<% @secondary_link ||= "#fff" %> +<% @background_color ||= "#555" %> +body#version1 { + background-color: <%= @background_color %>; +} + +body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu { + background-color: <%= @primary_color %>; + border-color: <%= @primary_border %>; +} + +body#version1 nav.navbar * { + color: <%= @primary_text %>; +} + +body#version1 .nav > li:not(.profile--image-dropdown):before { + background-color: <%= @primary_text %>; +} + +body#version1 a, body#version1 .dropdown-menu a { + color: <%= @primary_link %>; +} + +body#version1 .dropdown-menu .list-group-item-warning { + background-color: <%= @primary_border %>; +} + +body#version1 .dropdown-menu > li > a:hover, +body#version1 .dropdown-menu > li > a:focus, +body#version1 .list-group > a:hover, +body#version1 .list-group > a:focus, +body#version1 .list-group > a.active { + background-color: <%= @primary_border %>; + border-color: <%= @primary_border %>; + color: <%= @primary_text %>; +} + +body#version1 .btn { + color: <%= @primary_text %>; +} + +body#version1 .panel { + border-color: <%= @primary_border %>; + background-color: <%= @secondary_color %>; + color: <%= @primary_text %>; + box-shadow: none; +} + +body#version1 .list-group > a { + background-color: <%= @secondary_color %>; + border-color: <%= @secondary_border %>; +} + +body#version1 .locales, body .locales a { + color: <%= @primary_text %> !important; +} + +body#version1 .text-muted { + color: <%= @secondary_text %>; +} + +body#version1 .text-muted a { + color: <%= @secondary_link %>; +} + +body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: <%= @primary_border %>; +} + +body#version1 .userbox--no-header, body#version1 .panel-body { + position: relative; +} + +body#version1 #profile--header.profile--no-header img, body#version1 .userbox--no-header img { + opacity: 0; +} + +body#version1 #debug { + background: white; + color: black; +} diff --git a/config/routes.rb b/config/routes.rb index eef8a30f..068a2c28 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -113,6 +113,7 @@ Rails.application.routes.draw do match '/:username(/p/:page)', to: 'user#show', via: 'get', as: :show_user_profile, defaults: {page: 1} match '/:username/a/:id', to: 'answer#show', via: 'get', as: :show_user_answer match '/:username/q/:id', to: 'question#show', via: 'get', as: :show_user_question + match '/:username/theme.css', to: 'user#theme', via: 'get', as: :show_user_theme match '/:username/followers(/p/:page)', to: 'user#followers', via: 'get', as: :show_user_followers, defaults: {page: 1} match '/:username/friends(/p/:page)', to: 'user#friends', via: 'get', as: :show_user_friends, defaults: {page: 1} match '/:username/groups(/p/:page)', to: 'user#groups', via: 'get', as: :show_user_groups, defaults: {page: 1} diff --git a/db/20150724154106_create_themes_table.rb b/db/20150724154106_create_themes_table.rb new file mode 100644 index 00000000..64ac0fd1 --- /dev/null +++ b/db/20150724154106_create_themes_table.rb @@ -0,0 +1,6 @@ +class CreateThemesTable < ActiveRecord::Migration + def change + create_table :themes do |t| + end + end +end diff --git a/db/schema.rb b/db/schema.rb index 627cde56..13998567 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -19,12 +19,11 @@ ActiveRecord::Schema.define(version: 20150721154255) do create_table "answers", force: :cascade do |t| t.text "content" t.integer "question_id" - t.integer "comment_count", default: 0, null: false + t.integer "comment_count", default: 0, null: false t.integer "user_id" t.datetime "created_at" t.datetime "updated_at" - t.integer "smile_count", default: 0, null: false - t.boolean "nsfw", default: false + t.integer "smile_count", default: 0, null: false end add_index "answers", ["user_id", "created_at"], name: "index_answers_on_user_id_and_created_at", using: :btree @@ -114,60 +113,6 @@ ActiveRecord::Schema.define(version: 20150721154255) do t.datetime "updated_at" end - create_table "oauth_access_grants", force: :cascade do |t| - t.integer "resource_owner_id", null: false - t.integer "application_id", null: false - t.string "token", null: false - t.integer "expires_in", null: false - t.text "redirect_uri", null: false - t.datetime "created_at", null: false - t.datetime "revoked_at" - t.string "scopes" - end - - add_index "oauth_access_grants", ["token"], name: "index_oauth_access_grants_on_token", unique: true, using: :btree - - create_table "oauth_access_tokens", force: :cascade do |t| - t.integer "resource_owner_id" - t.integer "application_id" - t.string "token", null: false - t.string "refresh_token" - t.integer "expires_in" - t.datetime "revoked_at" - t.datetime "created_at", null: false - t.string "scopes" - end - - add_index "oauth_access_tokens", ["refresh_token"], name: "index_oauth_access_tokens_on_refresh_token", unique: true, using: :btree - add_index "oauth_access_tokens", ["resource_owner_id"], name: "index_oauth_access_tokens_on_resource_owner_id", using: :btree - add_index "oauth_access_tokens", ["token"], name: "index_oauth_access_tokens_on_token", unique: true, using: :btree - - create_table "oauth_applications", force: :cascade do |t| - t.string "name", null: false - t.string "uid", null: false - t.string "secret", null: false - t.text "redirect_uri", null: false - t.string "scopes", default: "", null: false - t.datetime "created_at" - t.datetime "updated_at" - t.integer "owner_id" - t.string "owner_type" - t.string "description" - t.string "icon_file_name" - t.string "icon_content_type" - t.integer "icon_file_size" - t.datetime "icon_updated_at" - t.integer "crop_x" - t.integer "crop_y" - t.integer "crop_w" - t.integer "crop_h" - t.boolean "icon_processing" - end - - add_index "oauth_applications", ["name"], name: "index_oauth_applications_on_name", unique: true, using: :btree - add_index "oauth_applications", ["owner_id", "owner_type"], name: "index_oauth_applications_on_owner_id_and_owner_type", using: :btree - add_index "oauth_applications", ["uid"], name: "index_oauth_applications_on_uid", unique: true, using: :btree - create_table "questions", force: :cascade do |t| t.string "content" t.boolean "author_is_anonymous" @@ -176,8 +121,7 @@ ActiveRecord::Schema.define(version: 20150721154255) do t.integer "user_id" t.datetime "created_at" t.datetime "updated_at" - t.integer "answer_count", default: 0, null: false - t.boolean "nsfw", default: false + t.integer "answer_count", default: 0, null: false end add_index "questions", ["user_id", "created_at"], name: "index_questions_on_user_id_and_created_at", using: :btree @@ -234,12 +178,12 @@ ActiveRecord::Schema.define(version: 20150721154255) do end create_table "users", force: :cascade do |t| - t.string "email", default: "", null: false - t.string "encrypted_password", default: "", null: false + t.string "email", default: "", null: false + t.string "encrypted_password", default: "", null: false t.string "reset_password_token" t.datetime "reset_password_sent_at" t.datetime "remember_created_at" - t.integer "sign_in_count", default: 0, null: false + t.integer "sign_in_count", default: 0, null: false t.datetime "current_sign_in_at" t.datetime "last_sign_in_at" t.string "current_sign_in_ip" @@ -247,19 +191,19 @@ ActiveRecord::Schema.define(version: 20150721154255) do t.datetime "created_at" t.datetime "updated_at" t.string "screen_name" - t.integer "friend_count", default: 0, null: false - t.integer "follower_count", default: 0, null: false - t.integer "asked_count", default: 0, null: false - t.integer "answered_count", default: 0, null: false - t.integer "commented_count", default: 0, null: false + t.integer "friend_count", default: 0, null: false + t.integer "follower_count", default: 0, null: false + t.integer "asked_count", default: 0, null: false + t.integer "answered_count", default: 0, null: false + t.integer "commented_count", default: 0, null: false t.string "display_name" - t.integer "smiled_count", default: 0, null: false - t.boolean "admin", default: false, null: false - t.string "motivation_header", default: "", null: false - t.string "website", default: "", null: false - t.string "location", default: "", null: false - t.text "bio", default: "", null: false - t.boolean "moderator", default: false, null: false + t.integer "smiled_count", default: 0, null: false + t.boolean "admin", default: false, null: false + t.string "motivation_header", default: "", null: false + t.string "website", default: "", null: false + t.string "location", default: "", null: false + t.text "bio", default: "", null: false + t.boolean "moderator", default: false, null: false t.string "profile_picture_file_name" t.string "profile_picture_content_type" t.integer "profile_picture_file_size" @@ -276,13 +220,10 @@ ActiveRecord::Schema.define(version: 20150721154255) do t.boolean "privacy_show_in_search", default: true t.boolean "permanently_banned", default: false t.boolean "blogger", default: false - t.boolean "nsfw", default: false - t.boolean "show_nsfw", default: false - t.boolean "privacy_allow_nsfw_questions", default: true t.boolean "contributor", default: false t.string "ban_reason" t.datetime "banned_until" - t.integer "comment_smiled_count", default: 0, null: false + t.integer "comment_smiled_count", default: 0, null: false t.string "profile_header_file_name" t.string "profile_header_content_type" t.integer "profile_header_file_size" @@ -292,10 +233,8 @@ ActiveRecord::Schema.define(version: 20150721154255) do t.integer "crop_h_y" t.integer "crop_h_w" t.integer "crop_h_h" - t.string "socket_key", default: "" - t.datetime "socket_key_expiry", default: '0001-01-01 00:00:00' t.string "locale", default: "en" - t.boolean "translator" + t.boolean "translator", default: false t.string "confirmation_token" t.datetime "confirmed_at" t.datetime "confirmation_sent_at" From 12b2ec8a3b0abab43ffff719c53e1687feefa238 Mon Sep 17 00:00:00 2001 From: Yuki Date: Fri, 24 Jul 2015 22:44:16 +0530 Subject: [PATCH 02/13] Turbolinks stop removing the god damn spreadsheet you twat --- app/views/layouts/application.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index b113baf7..7580d04f 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -15,11 +15,11 @@ %title= yield(:title) = javascript_include_tag 'i18n', 'data-turbolinks-track' => true = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true + %link{rel: 'stylesheet', href: '/yuki/theme.css', media: :all, 'data-turbolinks-track' => true} = javascript_include_tag 'application', 'data-turbolinks-track' => true - if user_signed_in? - if current_user.mod? = javascript_include_tag 'moderation', 'data-turbolinks-track' => true - %link{rel: 'stylesheet', href: '/yuki/theme.css', media: :all, 'data-turbolinks-track' => true} = csrf_meta_tags %body#version1 = render 'layouts/header' From 3444fcc93e117a5f8eb214cb4c30431367ec1a12 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 29 Jul 2015 20:38:07 +0530 Subject: [PATCH 03/13] rework some theme code, particlefield now adapts color --- Gemfile | 1 + Gemfile.lock | 3 + .../javascripts/application.js.erb.coffee | 10 +++- app/assets/javascripts/util.coffee | 21 +++++++ app/views/user/theme.css.erb | 60 ++----------------- 5 files changed, 37 insertions(+), 58 deletions(-) create mode 100644 app/assets/javascripts/util.coffee diff --git a/Gemfile b/Gemfile index 737571bc..0cd4b934 100644 --- a/Gemfile +++ b/Gemfile @@ -39,6 +39,7 @@ gem 'fog' gem 'fog-aws' gem 'momentjs-rails', '>= 2.9.0' gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14' +gem 'tiny-color-rails' gem 'twemoji-rails' diff --git a/Gemfile.lock b/Gemfile.lock index c9ffaa3d..23e26eb8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -435,6 +435,8 @@ GEM tilt (1.4.1) timers (4.0.1) hitimes + tiny-color-rails (0.0.2) + railties (>= 3.0) tumblr_client (0.8.5) faraday (~> 0.9.0) faraday_middleware (~> 0.9.0) @@ -545,6 +547,7 @@ DEPENDENCIES spring (~> 1.3.5) sweetalert-rails thin + tiny-color-rails tumblr_client turbolinks twemoji-rails diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee index d74d372f..79549378 100644 --- a/app/assets/javascripts/application.js.erb.coffee +++ b/app/assets/javascripts/application.js.erb.coffee @@ -14,6 +14,7 @@ #= require js.cookie #= require i18n #= require i18n/translations +#= require tinycolor-min # local requires to be seen by everyone: #= require_tree ./answerbox #= require_tree ./questionbox @@ -28,6 +29,7 @@ #= require user #= require report #= require locale-box +#= require util # not required: # _tree ./moderation @@ -62,9 +64,13 @@ _ready = -> sweetAlertInitialize() if document.getElementById('particles')? + jumbo = $ '.j2-jumbo' + bodyColorOrig = jumbo.css 'background-color' + bodyColor = doppler 0.25, bodyColorOrig + console.log bodyColor, bodyColorOrig particleground document.getElementById('particles'), - dotColor: '#5e35b1' - lineColor: '#5e35b1' + dotColor: bodyColor + lineColor: bodyColor if twemoji? twemoji.parse document.body, diff --git a/app/assets/javascripts/util.coffee b/app/assets/javascripts/util.coffee new file mode 100644 index 00000000..50cd1ecc --- /dev/null +++ b/app/assets/javascripts/util.coffee @@ -0,0 +1,21 @@ +window.doppler = (percentage, value, relative = false) -> + while percentage >= 1 + percentage /= 10 + tc_color = tinycolor(value).toRgb() + color = [tc_color.r, tc_color.g, tc_color.b] + if relative + for _c, i in color + x = (255 - color[i]) * percentage + if x == 0 + x = color[i] * percentage + color[i] -= x + else + color[i] += x + else + adj = 255 * percentage + for _c, i in color + if color[i] + adj > 255 + color[i] -= adj + else + color[i] += adj + '#' + color.map((x) -> Math.floor(Math.max(0, Math.min(255, x))).toString(16)).join '' diff --git a/app/views/user/theme.css.erb b/app/views/user/theme.css.erb index e625308c..99addb09 100644 --- a/app/views/user/theme.css.erb +++ b/app/views/user/theme.css.erb @@ -1,18 +1,12 @@ -<% @primary_color ||= "#222" %> -<% @primary_border ||= "#151515" %> -<% @primary_text ||= "#eee" %> -<% @primary_link ||= "#666" %> -<% @primary_hover ||= "#222" %> -<% @secondary_color ||= "#333" %> -<% @secondary_border ||= "#111" %> -<% @secondary_text ||= "#eee" %> -<% @secondary_link ||= "#fff" %> +<% @primary_color ||= "#222" %> +<% @primary_border ||= "#151515" %> +<% @primary_text ||= "#eee" %> <% @background_color ||= "#555" %> body#version1 { background-color: <%= @background_color %>; } -body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu { +body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu, body#version1 .j2-jumbo { background-color: <%= @primary_color %>; border-color: <%= @primary_border %>; } @@ -25,52 +19,6 @@ body#version1 .nav > li:not(.profile--image-dropdown):before { background-color: <%= @primary_text %>; } -body#version1 a, body#version1 .dropdown-menu a { - color: <%= @primary_link %>; -} - -body#version1 .dropdown-menu .list-group-item-warning { - background-color: <%= @primary_border %>; -} - -body#version1 .dropdown-menu > li > a:hover, -body#version1 .dropdown-menu > li > a:focus, -body#version1 .list-group > a:hover, -body#version1 .list-group > a:focus, -body#version1 .list-group > a.active { - background-color: <%= @primary_border %>; - border-color: <%= @primary_border %>; - color: <%= @primary_text %>; -} - -body#version1 .btn { - color: <%= @primary_text %>; -} - -body#version1 .panel { - border-color: <%= @primary_border %>; - background-color: <%= @secondary_color %>; - color: <%= @primary_text %>; - box-shadow: none; -} - -body#version1 .list-group > a { - background-color: <%= @secondary_color %>; - border-color: <%= @secondary_border %>; -} - -body#version1 .locales, body .locales a { - color: <%= @primary_text %> !important; -} - -body#version1 .text-muted { - color: <%= @secondary_text %>; -} - -body#version1 .text-muted a { - color: <%= @secondary_link %>; -} - body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before { content: ""; position: absolute; From aec452cbd1414de60112c52d2e064e23595614b3 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 29 Jul 2015 22:01:34 +0530 Subject: [PATCH 04/13] CSS -> SCSS --- app/controllers/user_controller.rb | 10 ++- app/views/user/theme.css.erb | 43 ------------ app/views/user/theme.css.scss.erb | 106 +++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 44 deletions(-) delete mode 100644 app/views/user/theme.css.erb create mode 100644 app/views/user/theme.css.scss.erb diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 98b602eb..9523ef6a 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -92,7 +92,15 @@ class UserController < ApplicationController def data end + SCSS_STYLE = if Rails.env == 'production' + :compressed + else + :compact + end.freeze + def theme - render 'user/theme', formats: [:css], handlers: [:scss, :erb] + txt = render_to_string 'user/theme.css.scss', formats: [:erb] + sass = Sass::Engine.new txt, style: SCSS_STYLE, cache: false, load_paths: [], syntax: :scss + render body: sass.render.to_s, content_type: 'text/css' end end diff --git a/app/views/user/theme.css.erb b/app/views/user/theme.css.erb deleted file mode 100644 index 99addb09..00000000 --- a/app/views/user/theme.css.erb +++ /dev/null @@ -1,43 +0,0 @@ -<% @primary_color ||= "#222" %> -<% @primary_border ||= "#151515" %> -<% @primary_text ||= "#eee" %> -<% @background_color ||= "#555" %> -body#version1 { - background-color: <%= @background_color %>; -} - -body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu, body#version1 .j2-jumbo { - background-color: <%= @primary_color %>; - border-color: <%= @primary_border %>; -} - -body#version1 nav.navbar * { - color: <%= @primary_text %>; -} - -body#version1 .nav > li:not(.profile--image-dropdown):before { - background-color: <%= @primary_text %>; -} - -body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: <%= @primary_border %>; -} - -body#version1 .userbox--no-header, body#version1 .panel-body { - position: relative; -} - -body#version1 #profile--header.profile--no-header img, body#version1 .userbox--no-header img { - opacity: 0; -} - -body#version1 #debug { - background: white; - color: black; -} diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb new file mode 100644 index 00000000..25446286 --- /dev/null +++ b/app/views/user/theme.css.scss.erb @@ -0,0 +1,106 @@ +// PRIMARY COLOR +$primary_color: <%= @primary_color || "#222222" %>; +$primary_border: <%= @primary_border || "#151515" %>; +$primary_text: <%= @primary_text || "#eeeeee" %>; + +// DANGER COLOR +$danger_color: <%= @danger_color || "#222222" %>; +$danger_border: <%= @danger_border || "#151515" %>; +$danger_text: <%= @danger_text || "#eeeeee" %>; + +// SUCCESS COLOR +$success_color: <%= @success_color || "#222222" %>; +$success_border: <%= @success_border || "#151515" %>; +$success_text: <%= @success_text || "#eeeeee" %>; + +// WARNING COLOR +$warning_color: <%= @warning_color || "#222222" %>; +$warning_border: <%= @warning_border || "#151515" %>; +$warning_text: <%= @warning_text || "#eeeeee" %>; + +// INFO COLOR +$info_color: <%= @info_color || "#222222" %>; +$info_border: <%= @info_border || "#151515" %>; +$info_text: <%= @info_text || "#eeeeee" %>; + +// COLOR COLOR (DEFAULT) +$color_color: <%= @color_color || "#222222" %>; +$color_border: <%= @color_border || "#151515" %>; +$color_text: <%= @color_text || "#eeeeee" %>; + + +// AUXILIARY COLOR +$link_color: <%= @link_color || "#111111" %>; +$background_color: <%= @background_color || "#555555" %>; +$background_text: <%= @background_text || "#eeeeee" %>; +$background_muted: <%= @background_muted || "#bbbbbb" %>; + +body#version1 { + .links a { + &, :hover, :active { + color: $link_color; + } + } + + background-color: $background_color; + color: $background_text; + + nav.navbar { + &, .dropdown-menu { + background-color: $primary_color; + border-color: $primary_border; + } + + a { + &, :hover, :active { + color: $primary_text; + } + } + + > li:not(.profile--image-dropdown):before { + background-color: $primary_border; + } + } + + .j2-jumbo { + background-color: $primary_color; + border-color: $primary_border; + } + + #profile--header.profile--no-header:before, .userbox--no-header:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: $primary_border; + + img { + opacity: 0; + } + } + + .userbox--no-header, .panel-body { + position: relative; + } + + .btn-primary { + background-color: $primary_color; + border-color: $primary_border; + color: $primary_text; + + &:hover { + background-color: $primary_border; + } + } + + .text-muted { + color: $background_muted; + } + + #debug { + background: white; + color: black; + } +} From 47344a5774ec225a906451674903cbae7c258b55 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 29 Jul 2015 22:24:33 +0530 Subject: [PATCH 05/13] ThemeHelper.render_theme_with_context --- app/controllers/user_controller.rb | 12 +++--------- app/helpers/theme_helper.rb | 31 ++++++++++++++++++++++++++++++ app/views/user/theme.css.scss.erb | 3 +++ 3 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 app/helpers/theme_helper.rb diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 9523ef6a..546404a3 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -1,4 +1,6 @@ class UserController < ApplicationController + include ThemeHelper + before_filter :authenticate_user!, only: %w(edit update edit_privacy update_privacy data) def show @@ -92,15 +94,7 @@ class UserController < ApplicationController def data end - SCSS_STYLE = if Rails.env == 'production' - :compressed - else - :compact - end.freeze - def theme - txt = render_to_string 'user/theme.css.scss', formats: [:erb] - sass = Sass::Engine.new txt, style: SCSS_STYLE, cache: false, load_paths: [], syntax: :scss - render body: sass.render.to_s, content_type: 'text/css' + render body: render_theme_with_context, content_type: 'text/css' end end diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb new file mode 100644 index 00000000..a5f447c0 --- /dev/null +++ b/app/helpers/theme_helper.rb @@ -0,0 +1,31 @@ +module ThemeHelper + def render_theme_with_context(context = {}) + klass = Class.new do + def initialize(hash = {}) + if hash.is_a? ActiveRecord::Base + hash = hash.serializable_hash + end + + if hash.is_a? Hash + hash.each do |k, v| + self.instance_variable_set "@#{k}", v + end + end + end + + def render + style = if Rails.env == 'production' + :compressed + else + :compact + end.freeze + + erb = ERB.new File.read Rails.root.join 'app/views/user/theme.css.scss.erb' + sass = Sass::Engine.new erb.result(binding), style: style, cache: false, load_paths: [], syntax: :scss + return sass.render.to_s + end + end + + return klass.new(context).render + end +end diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 25446286..71cdd738 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,3 +1,5 @@ +// TODO: Use canonical colours rather than this test midnight scheme. + // PRIMARY COLOR $primary_color: <%= @primary_color || "#222222" %>; $primary_border: <%= @primary_border || "#151515" %>; @@ -28,6 +30,7 @@ $color_color: <%= @color_color || "#222222" %>; $color_border: <%= @color_border || "#151515" %>; $color_text: <%= @color_text || "#eeeeee" %>; +// PANEL COLORS // AUXILIARY COLOR $link_color: <%= @link_color || "#111111" %>; From 5f8dc8a24fcf9deb680743aeac1c950928cca0e3 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 29 Jul 2015 22:29:52 +0530 Subject: [PATCH 06/13] Cache CSS if in production --- app/helpers/theme_helper.rb | 8 +++++++- config/initializers/10_config.rb | 3 +++ config/initializers/13_theme.rb | 4 ++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 config/initializers/13_theme.rb diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index a5f447c0..558b2601 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -20,7 +20,13 @@ module ThemeHelper :compact end.freeze - erb = ERB.new File.read Rails.root.join 'app/views/user/theme.css.scss.erb' + css = if __THEME_CSS_CACHE.nil? + File.read Rails.root.join 'app/views/user/theme.css.scss.erb' + else + __THEME_CSS_CACHE + end + + erb = ERB.new css sass = Sass::Engine.new erb.result(binding), style: style, cache: false, load_paths: [], syntax: :scss return sass.render.to_s end diff --git a/config/initializers/10_config.rb b/config/initializers/10_config.rb index 609c6afb..56c21756 100644 --- a/config/initializers/10_config.rb +++ b/config/initializers/10_config.rb @@ -1,2 +1,5 @@ +# Auxiliary config APP_CONFIG = YAML.load_file(Rails.root.join('config', 'justask.yml')) + +# Update rails config for mail Rails.application.config.action_mailer.default_url_options = { host: APP_CONFIG['hostname'] } diff --git a/config/initializers/13_theme.rb b/config/initializers/13_theme.rb new file mode 100644 index 00000000..7fac1687 --- /dev/null +++ b/config/initializers/13_theme.rb @@ -0,0 +1,4 @@ +# Cache theme CSS if in production +__THEME_CSS_CACHE = if Rails.env == 'production' + File.read Rails.root.join 'app/views/user/theme.css.scss.erb' +end.freeze From e7e28efcab65309b399dfb48c0523de8120a3826 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 01:24:56 +0530 Subject: [PATCH 07/13] Theme Progress Link color Notification dropdown text fix Dropdown select color Panels Modals Buttons, Labels and Alerts nprogress fix and rename __THEME_CSS_CACHE to __THEME_CSS_CACHE_V1 --- app/helpers/theme_helper.rb | 4 +- app/views/user/theme.css.scss.erb | 139 ++++++++++++++++++++++++++++-- config/initializers/13_theme.rb | 4 +- 3 files changed, 137 insertions(+), 10 deletions(-) diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 558b2601..6e75e3ca 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -20,10 +20,10 @@ module ThemeHelper :compact end.freeze - css = if __THEME_CSS_CACHE.nil? + css = if $__THEME_CSS_CACHE_V1.nil? File.read Rails.root.join 'app/views/user/theme.css.scss.erb' else - __THEME_CSS_CACHE + $__THEME_CSS_CACHE_V1 end erb = ERB.new css diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 71cdd738..be7298e5 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,5 +1,15 @@ // TODO: Use canonical colours rather than this test midnight scheme. +// TODO: "new" notifications +// TODO: notification page +// TODO: tabs +// TODO: pill lists + +// LEGEND +// TYPE_COLOR: BACKGROUND COLOR +// TYPE_BORDER: BORDER COLOR +// TYPE_TEXT: TEXT COLOR + // PRIMARY COLOR $primary_color: <%= @primary_color || "#222222" %>; $primary_border: <%= @primary_border || "#151515" %>; @@ -25,10 +35,10 @@ $info_color: <%= @info_color || "#222222" %>; $info_border: <%= @info_border || "#151515" %>; $info_text: <%= @info_text || "#eeeeee" %>; -// COLOR COLOR (DEFAULT) -$color_color: <%= @color_color || "#222222" %>; -$color_border: <%= @color_border || "#151515" %>; -$color_text: <%= @color_text || "#eeeeee" %>; +// DEFAULT COLOR +$default_color: <%= @default_color || "#222222" %>; +$default_border: <%= @default_border || "#151515" %>; +$default_text: <%= @default_text || "#eeeeee" %>; // PANEL COLORS @@ -39,12 +49,16 @@ $background_text: <%= @background_text || "#eeeeee" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; body#version1 { - .links a { - &, :hover, :active { + a, { + &, &:hover, &:active { color: $link_color; } } + hr, .locales #locales-panel ul { + border-color: $link_color; + } + background-color: $background_color; color: $background_text; @@ -52,10 +66,31 @@ body#version1 { &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; + color: $primary_color; + + .media { + color: $primary_text; + } + + > li.divider { + background-color: $primary_border; + } + + > li { + > a:hover { + background-color: mix($primary_color, $primary_text, 90%); + } + + a { + &, &:hover, &:active { + color: $primary_text; + } + } + } } a { - &, :hover, :active { + &, &:hover, &:active { color: $primary_text; } } @@ -70,6 +105,10 @@ body#version1 { border-color: $primary_border; } + .media { + color: $default_text; + } + #profile--header.profile--no-header:before, .userbox--no-header:before { content: ""; position: absolute; @@ -88,6 +127,57 @@ body#version1 { position: relative; } + .panel, .modal-dialog { + border-color: $default_border; + + .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content { + &, *:not(input), a, a:hover, a:active { + color: $default_text; + } + + select { + background-color: $default_color; + border-color: $default_border; + } + + .input-group-addon { + background: $default_color; + border: $default_color; + } + } + + &, .panel-heading, .panel-footer, .modal-header, .modal-footer { + background-color: mix($default_color, $default_text, 90%); + border-color: mix($default_color, $default_text, 85%); + } + + .panel-body, .modal-body, .modal-content { + background-color: $default_color; + } + } + + .dropdown-menu { + background-color: $default_color; + border-color: $default_border; + color: $default_text; + + > li.divider { + background-color: $default_border; + } + + > li { + > a:hover { + background-color: mix($default_color, $default_text, 90%); + } + + a { + &, &:hover, &:active { + color: $default_text; + } + } + } + } + .btn-primary { background-color: $primary_color; border-color: $primary_border; @@ -102,8 +192,43 @@ body#version1 { color: $background_muted; } + // ERB magic because i'm lazy. +<% +for color in %W(primary danger success warning info default) +%> + .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %> { + color: $<%= color %>_text; + background-color: $<%= color %>_color; + border-color: $<%= color %>_border; + } + + .btn-<%= color %>:hover { + background-color: mix($<%= color %>_color, $<%= color %>_text, 90%); + } +<% +end +%> + #debug { background: white; color: black; } } + +/* nprogress */ +$nprogress-color: lighten($primary_color, 25%); + +#nprogress { + .bar { + background: $nprogress-color; + } + + .peg { + box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color; + } + + .spinner-icon { + border-top-color: $nprogress-color; + border-left-color: $nprogress-color; + } +} diff --git a/config/initializers/13_theme.rb b/config/initializers/13_theme.rb index 7fac1687..9e2af5d4 100644 --- a/config/initializers/13_theme.rb +++ b/config/initializers/13_theme.rb @@ -1,4 +1,6 @@ # Cache theme CSS if in production -__THEME_CSS_CACHE = if Rails.env == 'production' +$__THEME_CSS_CACHE_V1 = if Rails.env == 'production' File.read Rails.root.join 'app/views/user/theme.css.scss.erb' +else + nil end.freeze From 0bfbbbc856a38017fb45f88c6475bde8afe89e35 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 10:19:25 +0530 Subject: [PATCH 08/13] Theme Progress New notifications notifications page tabs pills/lists badges panel badges --- app/views/user/theme.css.scss.erb | 133 +++++++++++++++++++++--------- 1 file changed, 93 insertions(+), 40 deletions(-) diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index be7298e5..b4f1c35e 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,48 +1,49 @@ // TODO: Use canonical colours rather than this test midnight scheme. -// TODO: "new" notifications -// TODO: notification page -// TODO: tabs -// TODO: pill lists - // LEGEND + // TYPE_COLOR: BACKGROUND COLOR // TYPE_BORDER: BORDER COLOR // TYPE_TEXT: TEXT COLOR // PRIMARY COLOR + $primary_color: <%= @primary_color || "#222222" %>; $primary_border: <%= @primary_border || "#151515" %>; $primary_text: <%= @primary_text || "#eeeeee" %>; // DANGER COLOR + $danger_color: <%= @danger_color || "#222222" %>; $danger_border: <%= @danger_border || "#151515" %>; $danger_text: <%= @danger_text || "#eeeeee" %>; // SUCCESS COLOR + $success_color: <%= @success_color || "#222222" %>; $success_border: <%= @success_border || "#151515" %>; $success_text: <%= @success_text || "#eeeeee" %>; // WARNING COLOR + $warning_color: <%= @warning_color || "#222222" %>; $warning_border: <%= @warning_border || "#151515" %>; $warning_text: <%= @warning_text || "#eeeeee" %>; // INFO COLOR + $info_color: <%= @info_color || "#222222" %>; $info_border: <%= @info_border || "#151515" %>; $info_text: <%= @info_text || "#eeeeee" %>; // DEFAULT COLOR + $default_color: <%= @default_color || "#222222" %>; $default_border: <%= @default_border || "#151515" %>; $default_text: <%= @default_text || "#eeeeee" %>; -// PANEL COLORS - // AUXILIARY COLOR + $link_color: <%= @link_color || "#111111" %>; $background_color: <%= @background_color || "#555555" %>; $background_text: <%= @background_text || "#eeeeee" %>; @@ -62,7 +63,12 @@ body#version1 { background-color: $background_color; color: $background_text; + // Navigation + nav.navbar { + + // Nav Dropdown + &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; @@ -89,26 +95,33 @@ body#version1 { } } + // Nav Links + a { &, &:hover, &:active { color: $primary_text; } } - > li:not(.profile--image-dropdown):before { - background-color: $primary_border; + li:not(.profile--image-dropdown):before { + background-color: $primary_text; } } + // Notifications + + .media, #notifications .list-group-item { + color: $default_text; + background: $default_color; + } + + // Headers + .j2-jumbo { background-color: $primary_color; border-color: $primary_border; } - .media { - color: $default_text; - } - #profile--header.profile--no-header:before, .userbox--no-header:before { content: ""; position: absolute; @@ -127,23 +140,27 @@ body#version1 { position: relative; } + // Panels, and modals + .panel, .modal-dialog { border-color: $default_border; .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content { - &, *:not(input), a, a:hover, a:active { - color: $default_text; - } + color: $default_text; + } - select { - background-color: $default_color; - border-color: $default_border; - } + *:not(input), a, a:hover, a:active { + color: $default_text; + } - .input-group-addon { - background: $default_color; - border: $default_color; - } + select { + background-color: $default_color; + border-color: $default_border; + } + + .input-group-addon { + background: $default_color; + border: $default_color; } &, .panel-heading, .panel-footer, .modal-header, .modal-footer { @@ -156,6 +173,8 @@ body#version1 { } } + // Non-navigation dropdowns + .dropdown-menu { background-color: $default_color; border-color: $default_border; @@ -178,37 +197,71 @@ body#version1 { } } - .btn-primary { - background-color: $primary_color; - border-color: $primary_border; - color: $primary_text; - - &:hover { - background-color: $primary_border; - } - } - .text-muted { color: $background_muted; } - // ERB magic because i'm lazy. + // Tabs + .nav-tabs { + border-color: transparent; + margin-top: -1px; + + li.active a, li:active a, li:hover a { + background: mix($default_color, $default_text, 90%); + color: mix($default_text, $default_color, 90%); + } + } + + // Lists + + .list-group .list-group-item { + background-color: $default_color; + color: $default_text; + border-color: $default_border; + + .badge { + background-color: $default_text; + border-color: $default_border; + color: $default_color; + } + + .active, &:hover { + background-color: $primary_color; + color: $primary_text; + border-color: $primary_border; + + .badge { + background-color: $primary_text; + border-color: $primary_border; + color: $primary_color; + } + } + } + + // ERB magic for generics because i'm lazy. <% for color in %W(primary danger success warning info default) %> - .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %> { - color: $<%= color %>_text; - background-color: $<%= color %>_color; - border-color: $<%= color %>_border; + .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %>, .panel-badge-<%= color %>, .badge-<%= color %>, .list-group-item-<%= color %> { + color: $<%= color %>_text !important; + background-color: $<%= color %>_color !important; + border-color: $<%= color %>_border !important; + + .badge { + color: $<%= color %>_color !important; + background-color: $<%= color %>_text !important; + border-color: $<%= color %>_border !important; + } } .btn-<%= color %>:hover { - background-color: mix($<%= color %>_color, $<%= color %>_text, 90%); + background-color: mix($<%= color %>_color, $<%= color %>_text, 90%) !important; } <% end %> + // Reset debug #debug { background: white; color: black; From e42f81193b96944bedbfc7c73dae45e981952073 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 10:48:01 +0530 Subject: [PATCH 09/13] Finalize theme file --- app/views/user/theme.css.scss.erb | 129 +++++++++++++++++------------- 1 file changed, 75 insertions(+), 54 deletions(-) diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index b4f1c35e..9c9b94aa 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,5 +1,3 @@ -// TODO: Use canonical colours rather than this test midnight scheme. - // LEGEND // TYPE_COLOR: BACKGROUND COLOR @@ -8,45 +6,50 @@ // PRIMARY COLOR -$primary_color: <%= @primary_color || "#222222" %>; -$primary_border: <%= @primary_border || "#151515" %>; -$primary_text: <%= @primary_text || "#eeeeee" %>; +$primary_color: <%= @primary_color || "#5e35b1" %>; +$primary_border: <%= @primary_border || "darken(adjust-hue(#5e35b1, -10), 5%)" %>; +$primary_text: <%= @primary_text || "white" %>; // DANGER COLOR - -$danger_color: <%= @danger_color || "#222222" %>; -$danger_border: <%= @danger_border || "#151515" %>; -$danger_text: <%= @danger_text || "#eeeeee" %>; +$danger_color: <%= @danger_color || "#FF0039" %>; +$danger_border: <%= @danger_border || "darken(adjust-hue(#FF0039, -10), 5%)" %>; +$danger_text: <%= @danger_text || "white" %>; // SUCCESS COLOR -$success_color: <%= @success_color || "#222222" %>; -$success_border: <%= @success_border || "#151515" %>; -$success_text: <%= @success_text || "#eeeeee" %>; +$success_color: <%= @success_color || "#3FB618" %>; +$success_border: <%= @success_border || "darken(adjust-hue(#3FB618, -10), 5%)" %>; +$success_text: <%= @success_text || "white" %>; // WARNING COLOR -$warning_color: <%= @warning_color || "#222222" %>; -$warning_border: <%= @warning_border || "#151515" %>; -$warning_text: <%= @warning_text || "#eeeeee" %>; +$warning_color: <%= @warning_color || "#FF7518" %>; +$warning_border: <%= @warning_border || "darken(adjust-hue(#FF7518, -10), 5%)" %>; +$warning_text: <%= @warning_text || "white" %>; // INFO COLOR -$info_color: <%= @info_color || "#222222" %>; -$info_border: <%= @info_border || "#151515" %>; -$info_text: <%= @info_text || "#eeeeee" %>; +$info_color: <%= @info_color || "#9954BB" %>; +$info_border: <%= @info_border || "darken(adjust-hue(#9954BB, -10), 5%)" %>; +$info_text: <%= @info_text || "white" %>; // DEFAULT COLOR $default_color: <%= @default_color || "#222222" %>; -$default_border: <%= @default_border || "#151515" %>; +$default_border: <%= @default_border || "darken(adjust-hue(#222222, -10), 5%)" %>; $default_text: <%= @default_text || "#eeeeee" %>; +// PANEL COLOR + +$panel_color: <%= @panel_color || "#F9F9F9" %>; +$panel_border: <%= @panel_border || "darken(adjust-hue(#F9F9F9, -10), 5%)" %>; +$panel_text: <%= @panel_text || "#151515" %>; + // AUXILIARY COLOR -$link_color: <%= @link_color || "#111111" %>; -$background_color: <%= @background_color || "#555555" %>; -$background_text: <%= @background_text || "#eeeeee" %>; +$link_color: <%= @link_color || "#5e35b1" %>; +$background_color: <%= @background_color || "#ffffff" %>; +$background_text: <%= @background_text || "#222222" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; body#version1 { @@ -72,9 +75,10 @@ body#version1 { &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; - color: $primary_color; + border-top: none; + color: $primary_text; - .media { + .media, .dropdown-header { color: $primary_text; } @@ -84,7 +88,7 @@ body#version1 { > li { > a:hover { - background-color: mix($primary_color, $primary_text, 90%); + background-color: mix($primary_color, $primary_text, 80%); } a { @@ -111,8 +115,12 @@ body#version1 { // Notifications .media, #notifications .list-group-item { - color: $default_text; - background: $default_color; + color: $panel_text; + background: $panel_color; + } + + .media { + background: transparent; } // Headers @@ -129,7 +137,7 @@ body#version1 { left: 0; right: 0; bottom: 0; - background: $primary_border; + background: $primary_color; img { opacity: 0; @@ -143,55 +151,63 @@ body#version1 { // Panels, and modals .panel, .modal-dialog { - border-color: $default_border; + border-color: $panel_border; .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content { - color: $default_text; + color: $panel_text; } - *:not(input), a, a:hover, a:active { - color: $default_text; + a, a:hover, a:active { + color: $panel_text; + } + + .answerbox--question-user, .answerbox--question-text, .answerbox--answer-user, .answerbox--answer-text { + color: $panel_text; + + &.text-muted { + color: mix($panel_text, $background_muted, 70%); + } } select { - background-color: $default_color; - border-color: $default_border; + background-color: $panel_color; + border-color: $panel_border; } .input-group-addon { - background: $default_color; - border: $default_color; + background: $panel_color; + border: $panel_color; } &, .panel-heading, .panel-footer, .modal-header, .modal-footer { - background-color: mix($default_color, $default_text, 90%); - border-color: mix($default_color, $default_text, 85%); + background-color: mix($panel_color, $panel_text, 90%); + border-color: mix($panel_color, $panel_text, 85%); } .panel-body, .modal-body, .modal-content { - background-color: $default_color; + background-color: $panel_color; } } // Non-navigation dropdowns .dropdown-menu { - background-color: $default_color; - border-color: $default_border; - color: $default_text; + background-color: $panel_color; + border-color: $panel_border; + color: $panel_text; > li.divider { - background-color: $default_border; + background-color: $panel_border; } > li { > a:hover { - background-color: mix($default_color, $default_text, 90%); + background-color: mix($panel_color, $panel_text, 90%); } a { &, &:hover, &:active { - color: $default_text; + color: $panel_text; } } } @@ -207,25 +223,25 @@ body#version1 { margin-top: -1px; li.active a, li:active a, li:hover a { - background: mix($default_color, $default_text, 90%); - color: mix($default_text, $default_color, 90%); + background: mix($panel_color, $panel_text, 90%); + color: mix($panel_text, $panel_color, 90%); } } // Lists .list-group .list-group-item { - background-color: $default_color; - color: $default_text; - border-color: $default_border; + background-color: $panel_color; + color: $panel_text; + border-color: $panel_border; .badge { - background-color: $default_text; - border-color: $default_border; - color: $default_color; + background-color: $panel_text; + border-color: $panel_border; + color: $panel_color; } - .active, &:hover { + &.active, &:hover { background-color: $primary_color; color: $primary_text; border-color: $primary_border; @@ -265,6 +281,11 @@ end #debug { background: white; color: black; + + hr { + background-color: inherit; + border-color: inherit; + } } } From 1912fc37666f79cbe983ee421bb6021bed014bc0 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 13:56:36 +0530 Subject: [PATCH 10/13] Model goop also made the theme selection logic for user profiles and current user, and the saving logic --- app/controllers/user_controller.rb | 33 ++++++++++++++++-- app/helpers/theme_helper.rb | 21 +++++++++--- app/models/theme.rb | 30 ++++++++++++++++ app/models/user.rb | 2 ++ app/views/layouts/application.html.haml | 6 +++- app/views/user/theme.css.scss.erb | 17 ++++----- config/routes.rb | 4 ++- db/migrate/20150825073030_create_themes.rb | 40 ++++++++++++++++++++++ 8 files changed, 137 insertions(+), 16 deletions(-) create mode 100644 app/models/theme.rb create mode 100644 db/migrate/20150825073030_create_themes.rb diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 546404a3..7af373b1 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -94,7 +94,36 @@ class UserController < ApplicationController def data end - def theme - render body: render_theme_with_context, content_type: 'text/css' + def edit_theme + end + + def update_theme + update_attributes = params.require(:theme).permit([ + :primary_color, :primary_text, + :danger_color, :danger_text, + :success_color, :success_text, + :warning_color, :warning_text, + :info_color, :info_text, + :default_color, :default_text, + :panel_color, :panel_text, + :link_color, :background_color, + :background_text, :background_muted + ]) + + if current_user.theme.nil? + current_user.theme = Theme.new update_attributes + current_user.theme.user_id = current_user.id + + if current_user.theme.save + flash[:success] = t('flash.user.update_theme.success') + else + flash[:error] = t('flash.user.update_theme.error') + end + elsif current_user.theme.update_attributes(user_attributes) + flash[:success] = t('flash.user.update_theme.success') + else + flash[:error] = t('flash.user.update_theme.error') + end + redirect_to edit_user_theme_path end end diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 6e75e3ca..dcaa0576 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -3,12 +3,25 @@ module ThemeHelper klass = Class.new do def initialize(hash = {}) if hash.is_a? ActiveRecord::Base - hash = hash.serializable_hash - end + x = [:primary_color, :primary_text, + :danger_color, :danger_text, + :success_color, :success_text, + :warning_color, :warning_text, + :info_color, :info_text, + :default_color, :default_text, + :panel_color, :panel_text, + :link_color, :background_color, + :background_text, :background_muted] - if hash.is_a? Hash + x.each do |v| + next if hash[v].nil? + self.instance_variable_set "@#{v}", hash[v].to_s(16)[-6, 6] + end + elsif hash.is_a? Hash hash.each do |k, v| - self.instance_variable_set "@#{k}", v + next unless v.is_a? Fixnum + + self.instance_variable_set "@#{k}", v.to_s(16)[-6, 6] end end end diff --git a/app/models/theme.rb b/app/models/theme.rb new file mode 100644 index 00000000..4a05d480 --- /dev/null +++ b/app/models/theme.rb @@ -0,0 +1,30 @@ +class Theme < ActiveRecord::Base + include ThemeHelper + + belongs_to :user + + validates_numericality_of :primary_color, :primary_text, + :danger_color, :danger_text, + :success_color, :success_text, + :warning_color, :warning_text, + :info_color, :info_text, + :default_color, :default_text, + :panel_color, :panel_text, + :link_color, :background_color, + :background_text, :background_muted, + greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF, + allow_nil: true, only_integer: true + + before_save do + style = StringIO.new(render_theme_with_context(self).render) + + style.class.class_eval { + attr_accessor :original_filename, :content_type + } + + style.content_type = 'text/stylesheet' + style.original_filename = 'theme.css' + + self.css = style + end +end diff --git a/app/models/user.rb b/app/models/user.rb index 1872ece9..507821ea 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -31,6 +31,8 @@ class User < ActiveRecord::Base has_many :subscriptions, dependent: :destroy + has_one :theme, dependent: :destroy + SCREEN_NAME_REGEX = /\A[a-zA-Z0-9_]{1,16}\z/ WEBSITE_REGEX = /https?:\/\/([A-Za-z.\-]+)\/?(?:.*)/i diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 68376f4a..c2bd4ed5 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -12,7 +12,11 @@ %title= yield(:title) = javascript_include_tag 'i18n', 'data-turbolinks-track' => true = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true - %link{rel: 'stylesheet', href: '/yuki/theme.css', media: :all, 'data-turbolinks-track' => true} + - if user_signed_in? and current_user.theme.present? + %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => true} + - elsif @user.present? and @user.theme.present? + %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => true} + - else = javascript_include_tag 'application', 'data-turbolinks-track' => true - if user_signed_in? - if current_user.mod? diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 9c9b94aa..6ec29334 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -7,47 +7,47 @@ // PRIMARY COLOR $primary_color: <%= @primary_color || "#5e35b1" %>; -$primary_border: <%= @primary_border || "darken(adjust-hue(#5e35b1, -10), 5%)" %>; +$primary_border: darken(adjust-hue($primary_color, -10), 5%); $primary_text: <%= @primary_text || "white" %>; // DANGER COLOR $danger_color: <%= @danger_color || "#FF0039" %>; -$danger_border: <%= @danger_border || "darken(adjust-hue(#FF0039, -10), 5%)" %>; +$danger_border: darken(adjust-hue($danger_color, -10), 5%); $danger_text: <%= @danger_text || "white" %>; // SUCCESS COLOR $success_color: <%= @success_color || "#3FB618" %>; -$success_border: <%= @success_border || "darken(adjust-hue(#3FB618, -10), 5%)" %>; +$success_border: darken(adjust-hue($success_color, -10), 5%); $success_text: <%= @success_text || "white" %>; // WARNING COLOR $warning_color: <%= @warning_color || "#FF7518" %>; -$warning_border: <%= @warning_border || "darken(adjust-hue(#FF7518, -10), 5%)" %>; +$warning_border: darken(adjust-hue($warning_color, -10), 5%); $warning_text: <%= @warning_text || "white" %>; // INFO COLOR $info_color: <%= @info_color || "#9954BB" %>; -$info_border: <%= @info_border || "darken(adjust-hue(#9954BB, -10), 5%)" %>; +$info_border: darken(adjust-hue($info_color, -10), 5%); $info_text: <%= @info_text || "white" %>; // DEFAULT COLOR $default_color: <%= @default_color || "#222222" %>; -$default_border: <%= @default_border || "darken(adjust-hue(#222222, -10), 5%)" %>; +$default_border: darken(adjust-hue($default_color, -10), 5%); $default_text: <%= @default_text || "#eeeeee" %>; // PANEL COLOR $panel_color: <%= @panel_color || "#F9F9F9" %>; -$panel_border: <%= @panel_border || "darken(adjust-hue(#F9F9F9, -10), 5%)" %>; +$panel_border: darken(adjust-hue($panel_color, -10), 5%); $panel_text: <%= @panel_text || "#151515" %>; // AUXILIARY COLOR -$link_color: <%= @link_color || "#5e35b1" %>; +$link_color: <%= @link_color || "#5E35B1" %>; $background_color: <%= @background_color || "#ffffff" %>; $background_text: <%= @background_text || "#222222" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; @@ -76,6 +76,7 @@ body#version1 { background-color: $primary_color; border-color: $primary_border; border-top: none; + color: $primary_text; .media, .dropdown-header { diff --git a/config/routes.rb b/config/routes.rb index 068a2c28..3f9f2cad 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -54,6 +54,9 @@ Rails.application.routes.draw do match '/settings/profile', to: 'user#edit', via: 'get', as: :edit_user_profile match '/settings/profile', to: 'user#update', via: 'patch', as: :update_user_profile + match '/settings/theme', to: 'user#edit_theme', via: 'get', as: :edit_user_theme + match '/settings/theme', to: 'user#update_theme', via: 'patch', as: :update_user_theme + # resources :services, only: [:index, :destroy] match '/settings/services', to: 'services#index', via: 'get', as: :services match '/settings/services/:id', to: 'services#destroy', via: 'delete', as: :service @@ -113,7 +116,6 @@ Rails.application.routes.draw do match '/:username(/p/:page)', to: 'user#show', via: 'get', as: :show_user_profile, defaults: {page: 1} match '/:username/a/:id', to: 'answer#show', via: 'get', as: :show_user_answer match '/:username/q/:id', to: 'question#show', via: 'get', as: :show_user_question - match '/:username/theme.css', to: 'user#theme', via: 'get', as: :show_user_theme match '/:username/followers(/p/:page)', to: 'user#followers', via: 'get', as: :show_user_followers, defaults: {page: 1} match '/:username/friends(/p/:page)', to: 'user#friends', via: 'get', as: :show_user_friends, defaults: {page: 1} match '/:username/groups(/p/:page)', to: 'user#groups', via: 'get', as: :show_user_groups, defaults: {page: 1} diff --git a/db/migrate/20150825073030_create_themes.rb b/db/migrate/20150825073030_create_themes.rb new file mode 100644 index 00000000..dec69a9f --- /dev/null +++ b/db/migrate/20150825073030_create_themes.rb @@ -0,0 +1,40 @@ +class CreateThemes < ActiveRecord::Migration + def change + create_table :themes do |t| + t.integer :user_id, null: false + + t.integer :primary_color, limit: 4, default: 0x5E35B1 + t.integer :primary_text, limit: 4, default: 0xFFFFFF + + t.integer :danger_color, limit: 4, default: 0xFF0039 + t.integer :danger_text, limit: 4, default: 0xFFFFFF + + t.integer :success_color, limit: 4, default: 0x3FB618 + t.integer :success_text, limit: 4, default: 0xFFFFFF + + t.integer :warning_color, limit: 4, default: 0xFF7518 + t.integer :warning_text, limit: 4, default: 0xFFFFFF + + t.integer :info_color, limit: 4, default: 0x9954BB + t.integer :info_text, limit: 4, default: 0xFFFFFF + + t.integer :default_color, limit: 4, default: 0x222222 + t.integer :default_text, limit: 4, default: 0xEEEEEE + + t.integer :panel_color, limit: 4, default: 0xF9F9F9 + t.integer :panel_text, limit: 4, default: 0x151515 + + t.integer :link_color, limit: 4, default: 0x5E35B1 + + t.integer :background_color, limit: 4, default: 0xFFFFFF + t.integer :background_text, limit: 4, default: 0x222222 + t.integer :background_muted, limit: 4, default: 0xBBBBBB + + t.attachment :css + + t.timestamps null: false + end + + add_index :themes, [:user_id, :created_at] + end +end From 906692e78fa161663a82e0ccfd78b89ec9357c83 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 23:57:06 +0530 Subject: [PATCH 11/13] Theming is finished Previews, settings pane and presets! --- Gemfile | 1 + Gemfile.lock | 4 ++ .../javascripts/application.js.erb.coffee | 1 + app/assets/javascripts/settings.coffee | 54 +++++++++++++++++ app/assets/stylesheets/application.css.scss | 9 +++ app/controllers/user_controller.rb | 33 +++++++++-- app/helpers/theme_helper.rb | 4 +- app/models/theme.rb | 11 +++- app/views/layouts/application.html.haml | 6 +- app/views/user/_settings_tabs.html.haml | 3 +- app/views/user/edit.html.haml | 2 + app/views/user/edit_theme.html.haml | 59 +++++++++++++++++++ config/routes.rb | 1 + ...180139_add_show_foreign_themes_to_users.rb | 5 ++ 14 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 app/views/user/edit_theme.html.haml create mode 100644 db/migrate/20150825180139_add_show_foreign_themes_to_users.rb diff --git a/Gemfile b/Gemfile index 0cd4b934..a54ddcb1 100644 --- a/Gemfile +++ b/Gemfile @@ -40,6 +40,7 @@ gem 'fog-aws' gem 'momentjs-rails', '>= 2.9.0' gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14' gem 'tiny-color-rails' +gem 'jquery-minicolors-rails' gem 'twemoji-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 23e26eb8..57c816c4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -231,6 +231,9 @@ GEM jbuilder (2.2.13) activesupport (>= 3.0.0, < 5) multi_json (~> 1.2) + jquery-minicolors-rails (2.1.4.0) + jquery-rails + rails (>= 3.2.8) jquery-rails (4.0.3) rails-dom-testing (~> 1.0) railties (>= 4.2.0) @@ -513,6 +516,7 @@ DEPENDENCIES haml i18n-js jbuilder (~> 2.2.4) + jquery-minicolors-rails jquery-rails jquery-turbolinks letter_opener diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee index 79549378..fdf02bd8 100644 --- a/app/assets/javascripts/application.js.erb.coffee +++ b/app/assets/javascripts/application.js.erb.coffee @@ -15,6 +15,7 @@ #= require i18n #= require i18n/translations #= require tinycolor-min +#= require jquery.minicolors # local requires to be seen by everyone: #= require_tree ./answerbox #= require_tree ./questionbox diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee index 595511ba..d7ed181b 100644 --- a/app/assets/javascripts/settings.coffee +++ b/app/assets/javascripts/settings.coffee @@ -99,3 +99,57 @@ if window.URL? or window.webkitURL? ($ '#profile-header-crop-controls').slideDown() cropper.attr 'src', src + +# theming + +previewStyle = document.createElement 'style' +document.head.appendChild previewStyle + +previewTimeout = null + +previewTheme = -> + payload = {} + + $('#update_theme').find('.color').each -> + n = this.name.substr 6, this.name.length - 7 + payload[n] = parseInt this.value.substr(1, 6), 16 + + $.post '/settings/theme/preview.css', payload, (data) -> + previewStyle.innerHTML = data + , 'text' + + null + +themePresets = { + rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb], + dc: [0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x111111, 0x555555, 0xeeeeee, 0xbbbbbb], + lc: [0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xeeeeee, 0xaaaaaa, 0x111111, 0x444444] +} + +$(document).on 'submit', '#update_theme', (event) -> + $this = $ this + $this.find('.color').each -> + this.value = parseInt this.value.substr(1, 6), 16 + true + +$(document).ready -> + $('#update_theme .color').each -> + $this = $ this + this.value = '#' + ('000000' + parseInt(this.value).toString(16)).substr(-6, 6) + + $this.minicolors + control: 'hue' + defaultValue: this.value + letterCase: 'lowercase' + position: 'bottom left' + theme: 'bootstrap' + inline: false + change: -> + clearTimeout previewTimeout + previewTimeout = setTimeout(previewTheme, 1000) + true + +$(document).on 'click', 'a.theme_preset', (event) -> + preset = [].concat themePresets[this.dataset.preset] + $('#update_theme .color').each -> + $(this).minicolors 'value', '#' + ('000000' + parseInt(preset.shift()).toString(16)).substr(-6, 6) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 90fe114c..a1791eb8 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -3,6 +3,7 @@ *= require growl *= require jquery.guillotine *= require sweet-alert + *= require jquery.minicolors *= require flags *= require_self */ @@ -63,3 +64,11 @@ body { padding-top: $navbar-height; } $nprogress-color: lighten($navbar-inverse-bg, 25%); @import 'nprogress'; @import 'nprogress-bootstrap'; + +.minicolors-theme-bootstrap .minicolors-swatch { + top: 0; + left: 0; + width: 42px; + height: 42px; + border-radius: 0; +} diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 7af373b1..d2cfe93c 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -27,7 +27,7 @@ class UserController < ApplicationController def update user_attributes = params.require(:user).permit(:display_name, :profile_picture, :profile_header, :motivation_header, :website, - :location, :bio, :crop_x, :crop_y, :crop_w, :crop_h, :crop_h_x, :crop_h_y, :crop_h_w, :crop_h_h) + :location, :bio, :crop_x, :crop_y, :crop_w, :crop_h, :crop_h_x, :crop_h_y, :crop_h_w, :crop_h_h, :show_foreign_themes) if current_user.update_attributes(user_attributes) text = t('flash.user.update.text') text += t('flash.user.update.avatar') if user_attributes[:profile_picture] @@ -97,6 +97,27 @@ class UserController < ApplicationController def edit_theme end + # NOTE: Yes, I am storing and transmitting values as 3 byte numbers because false sense of security. + def preview_theme + attrib = params.permit([ + :primary_color, :primary_text, + :danger_color, :danger_text, + :success_color, :success_text, + :warning_color, :warning_text, + :info_color, :info_text, + :default_color, :default_text, + :panel_color, :panel_text, + :link_color, :background_color, + :background_text, :background_muted + ]) + + attrib.each do |k ,v| + attrib[k] = v.to_i + end + + render plain: render_theme_with_context(attrib) + end + def update_theme update_attributes = params.require(:theme).permit([ :primary_color, :primary_text, @@ -115,14 +136,14 @@ class UserController < ApplicationController current_user.theme.user_id = current_user.id if current_user.theme.save - flash[:success] = t('flash.user.update_theme.success') + flash[:success] = 'Theme saved.' else - flash[:error] = t('flash.user.update_theme.error') + flash[:error] = 'Theme saving failed.' end - elsif current_user.theme.update_attributes(user_attributes) - flash[:success] = t('flash.user.update_theme.success') + elsif current_user.theme.update_attributes(update_attributes) + flash[:success] = 'Theme saved.' else - flash[:error] = t('flash.user.update_theme.error') + flash[:error] = 'Theme saving failed.' end redirect_to edit_user_theme_path end diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index dcaa0576..019c13d1 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -15,13 +15,13 @@ module ThemeHelper x.each do |v| next if hash[v].nil? - self.instance_variable_set "@#{v}", hash[v].to_s(16)[-6, 6] + self.instance_variable_set "@#{v}", ('#' + ('0000000' + hash[v].to_s(16))[-6, 6]) end elsif hash.is_a? Hash hash.each do |k, v| next unless v.is_a? Fixnum - self.instance_variable_set "@#{k}", v.to_s(16)[-6, 6] + self.instance_variable_set "@#{k}", ('#' + ('0000000' + hash[k].to_s(16))[-6, 6]) end end end diff --git a/app/models/theme.rb b/app/models/theme.rb index 4a05d480..ffbaa745 100644 --- a/app/models/theme.rb +++ b/app/models/theme.rb @@ -15,14 +15,19 @@ class Theme < ActiveRecord::Base greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF, allow_nil: true, only_integer: true + has_attached_file :css, use_timestamp: false + validates_attachment_content_type :css, content_type: 'text/x-c' + before_save do - style = StringIO.new(render_theme_with_context(self).render) - + self.css = nil + + style = StringIO.new(render_theme_with_context(self)) + style.class.class_eval { attr_accessor :original_filename, :content_type } - style.content_type = 'text/stylesheet' + style.content_type = 'text/x-c' style.original_filename = 'theme.css' self.css = style diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index c2bd4ed5..161851fa 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -12,10 +12,10 @@ %title= yield(:title) = javascript_include_tag 'i18n', 'data-turbolinks-track' => true = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true - - if user_signed_in? and current_user.theme.present? - %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => true} - - elsif @user.present? and @user.theme.present? + - if @user.present? and @user.theme.present? and (user_signed_in? and current_user.show_foreign_themes?) %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => true} + - elsif user_signed_in? and current_user.theme.present? + %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => true} - else = javascript_include_tag 'application', 'data-turbolinks-track' => true - if user_signed_in? diff --git a/app/views/user/_settings_tabs.html.haml b/app/views/user/_settings_tabs.html.haml index 0f30d0fa..676dfa81 100644 --- a/app/views/user/_settings_tabs.html.haml +++ b/app/views/user/_settings_tabs.html.haml @@ -5,6 +5,7 @@ = list_group_item t('views.settings.tabs.profile'), edit_user_profile_path = list_group_item t('views.settings.tabs.privacy'), edit_user_privacy_path = list_group_item t('views.settings.tabs.sharing'), services_path + = list_group_item 'Theme', edit_user_theme_path = list_group_item "Your Data", user_data_path - + .hidden-xs= render "shared/links" diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml index d04ee81e..0120ecf6 100644 --- a/app/views/user/edit.html.haml +++ b/app/views/user/edit.html.haml @@ -51,6 +51,8 @@ = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio') + = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile' + - for attrib in %i(crop_x crop_y crop_w crop_h) = f.hidden_field attrib, id: attrib diff --git a/app/views/user/edit_theme.html.haml b/app/views/user/edit_theme.html.haml new file mode 100644 index 00000000..d22fa9d5 --- /dev/null +++ b/app/views/user/edit_theme.html.haml @@ -0,0 +1,59 @@ +- provide(:title, generate_title("Theme Settings")) +.container.j2-page + = render 'settings_tabs' + .col-md-9.col-xs-12.col-sm-9 + = render 'layouts/messages' + .panel.panel-default + .panel-body + %b Presets: + %a{href: '#', class: 'theme_preset', data: {preset: 'rs'}} Retrospring Purple, + %a{href: '#', class: 'theme_preset', data: {preset: 'dc'}} Dark Copycat, + %a{href: '#', class: 'theme_preset', data: {preset: 'lc'}} Light Copycat + = bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f| + .row + .col-md-6 + = f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1} + .col-md-6 + = f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039} + .col-md-6 + = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :success_color, class: 'color', data: {default: 0x3FB618} + .col-md-6 + = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518} + .col-md-6 + = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :info_color, class: 'color', data: {default: 0x9954BB} + .col-md-6 + = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :default_color, class: 'color', data: {default: 0x222222} + .col-md-6 + = f.text_field :default_text, class: 'color', data: {default: 0xEEEEEE} + .row + .col-md-6 + = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9} + .col-md-6 + = f.text_field :panel_text, class: 'color', data: {default: 0x151515} + .row + .col-md-6 + = f.text_field :link_color, class: 'color', data: {default: 0x5E35B1} + .col-md-6 + = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF} + .row + .col-md-6 + = f.text_field :background_text, class: 'color', data: {default: 0x222222} + .col-md-6 + = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB} + + = f.submit t('views.actions.save'), class: 'btn btn-primary' diff --git a/config/routes.rb b/config/routes.rb index 3f9f2cad..87be1877 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -56,6 +56,7 @@ Rails.application.routes.draw do match '/settings/theme', to: 'user#edit_theme', via: 'get', as: :edit_user_theme match '/settings/theme', to: 'user#update_theme', via: 'patch', as: :update_user_theme + match '/settings/theme/preview.css', to: 'user#preview_theme', via: 'post', as: :preview_user_theme # resources :services, only: [:index, :destroy] match '/settings/services', to: 'services#index', via: 'get', as: :services diff --git a/db/migrate/20150825180139_add_show_foreign_themes_to_users.rb b/db/migrate/20150825180139_add_show_foreign_themes_to_users.rb new file mode 100644 index 00000000..4b7abd69 --- /dev/null +++ b/db/migrate/20150825180139_add_show_foreign_themes_to_users.rb @@ -0,0 +1,5 @@ +class AddShowForeignThemesToUsers < ActiveRecord::Migration + def change + add_column :users, :show_foreign_themes, :boolean, default: true, null: false + end +end From 54167416f5aa04c769fc9ffe44b857fecb891858 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 26 Aug 2015 00:02:20 +0530 Subject: [PATCH 12/13] Fix ask all button color --- app/views/user/theme.css.scss.erb | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 6ec29334..91088e9f 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -100,6 +100,10 @@ body#version1 { } } + .navbar-nav > li > .btn > i { + color: $primary_text; + } + // Nav Links a { From 4b646b7e806711654c1a86c6de70b5ba248d3195 Mon Sep 17 00:00:00 2001 From: Yuki Date: Wed, 26 Aug 2015 00:07:55 +0530 Subject: [PATCH 13/13] Drop ERB loop --- app/views/user/theme.css.scss.erb | 107 +++++++++++++++++++++++++----- 1 file changed, 91 insertions(+), 16 deletions(-) diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 91088e9f..0c1a824a 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -259,28 +259,103 @@ body#version1 { } } - // ERB magic for generics because i'm lazy. -<% -for color in %W(primary danger success warning info default) -%> - .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %>, .panel-badge-<%= color %>, .badge-<%= color %>, .list-group-item-<%= color %> { - color: $<%= color %>_text !important; - background-color: $<%= color %>_color !important; - border-color: $<%= color %>_border !important; + // Buttons, Alerts, Labels, Panel Badges, Badges, List Items + + .btn-primary, .alert-primary, .label-primary, .panel-badge-primary, .badge-primary, .list-group-item-primary { + color: $primary_text !important; + background-color: $primary_color !important; + border-color: $primary_border !important; .badge { - color: $<%= color %>_color !important; - background-color: $<%= color %>_text !important; - border-color: $<%= color %>_border !important; + color: $primary_color !important; + background-color: $primary_text !important; + border-color: $primary_border !important; } } - .btn-<%= color %>:hover { - background-color: mix($<%= color %>_color, $<%= color %>_text, 90%) !important; + .btn-primary:hover { + background-color: mix($primary_color, $primary_text, 90%) !important; + } + + .btn-danger, .alert-danger, .label-danger, .panel-badge-danger, .badge-danger, .list-group-item-danger { + color: $danger_text !important; + background-color: $danger_color !important; + border-color: $danger_border !important; + + .badge { + color: $danger_color !important; + background-color: $danger_text !important; + border-color: $danger_border !important; + } + } + + .btn-danger:hover { + background-color: mix($danger_color, $danger_text, 90%) !important; + } + + .btn-success, .alert-success, .label-success, .panel-badge-success, .badge-success, .list-group-item-success { + color: $success_text !important; + background-color: $success_color !important; + border-color: $success_border !important; + + .badge { + color: $success_color !important; + background-color: $success_text !important; + border-color: $success_border !important; + } + } + + .btn-success:hover { + background-color: mix($success_color, $success_text, 90%) !important; + } + + .btn-warning, .alert-warning, .label-warning, .panel-badge-warning, .badge-warning, .list-group-item-warning { + color: $warning_text !important; + background-color: $warning_color !important; + border-color: $warning_border !important; + + .badge { + color: $warning_color !important; + background-color: $warning_text !important; + border-color: $warning_border !important; + } + } + + .btn-warning:hover { + background-color: mix($warning_color, $warning_text, 90%) !important; + } + + .btn-info, .alert-info, .label-info, .panel-badge-info, .badge-info, .list-group-item-info { + color: $info_text !important; + background-color: $info_color !important; + border-color: $info_border !important; + + .badge { + color: $info_color !important; + background-color: $info_text !important; + border-color: $info_border !important; + } + } + + .btn-info:hover { + background-color: mix($info_color, $info_text, 90%) !important; + } + + .btn-default, .alert-default, .label-default, .panel-badge-default, .badge-default, .list-group-item-default { + color: $default_text !important; + background-color: $default_color !important; + border-color: $default_border !important; + + .badge { + color: $default_color !important; + background-color: $default_text !important; + border-color: $default_border !important; + } + } + + .btn-default:hover { + background-color: mix($default_color, $default_text, 90%) !important; } -<% -end -%> // Reset debug #debug {