From 71caf3cce5d6a6265408e1359c6ef9f5055c69e3 Mon Sep 17 00:00:00 2001 From: Yuki Date: Thu, 27 Aug 2015 05:26:07 +0530 Subject: [PATCH] Several changes to theming, solving a bunch of bugs --- Rakefile | 17 +++ app/assets/javascripts/settings.coffee | 6 +- app/controllers/user_controller.rb | 15 +- app/helpers/theme_helper.rb | 8 +- app/models/theme.rb | 6 + app/views/layouts/application.html.haml | 6 +- app/views/user/edit_theme.html.haml | 15 +- app/views/user/theme.css.scss.erb | 141 +++++++++++++++--- config/routes.rb | 1 + ...26224857_add_input_and_outline_to_theme.rb | 7 + 10 files changed, 189 insertions(+), 33 deletions(-) create mode 100644 db/migrate/20150826224857_add_input_and_outline_to_theme.rb diff --git a/Rakefile b/Rakefile index 0131015f..ab8c526d 100644 --- a/Rakefile +++ b/Rakefile @@ -6,6 +6,23 @@ require File.expand_path('../config/application', __FILE__) Rails.application.load_tasks namespace :justask do + desc "Regenerate themes" + task themes: :environment do + format = '%t (%c/%C) [%b>%i] %e' + + all = Theme.all + + progress = ProgressBar.create title: 'Processing themes', format: format, starting_at: 0, total: all.count + + all.each do |theme| + theme.touch + theme.save! + progress.increment + end + + puts "regenerated #{all.count} themes" + end + desc "Upload to AWS" task paperclaws: :environment do if APP_CONFIG["fog"]["credentials"].nil? or APP_CONFIG["fog"]["credentials"]["provider"] != "AWS" diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee index d7ed181b..6b00cf65 100644 --- a/app/assets/javascripts/settings.coffee +++ b/app/assets/javascripts/settings.coffee @@ -121,9 +121,9 @@ previewTheme = -> 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] + rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1], + dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676], + lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989] } $(document).on 'submit', '#update_theme', (event) -> diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index 92a3b601..39d971a0 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -1,7 +1,7 @@ class UserController < ApplicationController include ThemeHelper - before_filter :authenticate_user!, only: %w(edit update edit_privacy update_privacy edit_theme update_theme preview_theme data) + before_filter :authenticate_user!, only: %w(edit update edit_privacy update_privacy edit_theme update_theme preview_theme delete_theme data) def show @user = User.where('LOWER(screen_name) = ?', params[:username].downcase).first! @@ -97,6 +97,11 @@ class UserController < ApplicationController def edit_theme end + def delete_theme + current_user.theme.destroy! + redirect_to edit_user_profile_path + end + # NOTE: Yes, I am storing and transmitting values as 3 byte numbers because false sense of security. def preview_theme attrib = params.permit([ @@ -108,7 +113,9 @@ class UserController < ApplicationController :default_color, :default_text, :panel_color, :panel_text, :link_color, :background_color, - :background_text, :background_muted + :background_text, :background_muted, + :input_color, :input_text, + :outline_color ]) attrib.each do |k ,v| @@ -128,7 +135,9 @@ class UserController < ApplicationController :default_color, :default_text, :panel_color, :panel_text, :link_color, :background_color, - :background_text, :background_muted + :background_text, :background_muted, + :input_color, :input_text, + :outline_color ]) if current_user.theme.nil? diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 019c13d1..ea9ba8c5 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -3,7 +3,8 @@ module ThemeHelper klass = Class.new do def initialize(hash = {}) if hash.is_a? ActiveRecord::Base - x = [:primary_color, :primary_text, + x = [ + :primary_color, :primary_text, :danger_color, :danger_text, :success_color, :success_text, :warning_color, :warning_text, @@ -11,7 +12,10 @@ module ThemeHelper :default_color, :default_text, :panel_color, :panel_text, :link_color, :background_color, - :background_text, :background_muted] + :background_text, :background_muted, + :input_color, :input_text, + :outline_color + ] x.each do |v| next if hash[v].nil? diff --git a/app/models/theme.rb b/app/models/theme.rb index 0995f32a..5e6ddbc4 100644 --- a/app/models/theme.rb +++ b/app/models/theme.rb @@ -12,6 +12,8 @@ class Theme < ActiveRecord::Base :panel_color, :panel_text, :link_color, :background_color, :background_text, :background_muted, + :input_color, :input_text, + :outline_color, greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF, allow_nil: true, only_integer: true @@ -34,4 +36,8 @@ class Theme < ActiveRecord::Base self.css = style end + + def theme_color + ('#' + ('0000000' + primary_color.to_s(16))[-6, 6]) + end end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 394d08b3..21d50a58 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -13,9 +13,11 @@ = javascript_include_tag 'i18n', 'data-turbolinks-track' => true = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true - if user_signed_in? and not current_user.theme.nil? - %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => "true"} + %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"} + %meta{name: 'theme-color', content: current_user.theme.theme_color} - if (not @user.nil?) and (not @user.theme.nil?) and (if user_signed_in? then current_user.show_foreign_themes? else true end) - %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => "true"} + %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"} + %meta{name: 'theme-color', content: @user.theme.theme_color} = javascript_include_tag 'application', 'data-turbolinks-track' => true - if user_signed_in? - if current_user.mod? diff --git a/app/views/user/edit_theme.html.haml b/app/views/user/edit_theme.html.haml index d22fa9d5..58d5b4d3 100644 --- a/app/views/user/edit_theme.html.haml +++ b/app/views/user/edit_theme.html.haml @@ -55,5 +55,18 @@ = f.text_field :background_text, class: 'color', data: {default: 0x222222} .col-md-6 = f.text_field :background_muted, class: 'color', data: {default: 0xBBBBBB} + .row + .col-md-6 + = f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF} + .col-md-6 + = f.text_field :input_text, class: 'color', data: {default: 0x000000} + .row + .col-md-6 + = f.text_field :outline_color, class: 'color', data: {default: 0x5E35B1} + .col-md-6 - = f.submit t('views.actions.save'), class: 'btn btn-primary' + .pull-left + = f.submit t('views.actions.save'), class: 'btn btn-primary' + + .pull-right + =button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger" diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 0ff59d6b..ad87bed8 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -48,10 +48,17 @@ $panel_text: <%= @panel_text || "#151515" %>; // AUXILIARY COLOR $link_color: <%= @link_color || "#5E35B1" %>; + $background_color: <%= @background_color || "#ffffff" %>; $background_text: <%= @background_text || "#222222" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; +$input_color: <%= @input_color || "#ffffff" %>; +$input_border: darken(adjust-hue($input_color, -10), 5%); +$input_text: <%= @input_text || "#000000" %>; + +$outline_color: <%= @outline_color || "#5E35B1" %>; + body#version1 { a, { &, &:hover, &:active { @@ -59,6 +66,16 @@ body#version1 { } } + :not(.sweet-alert) { + h1, h2, h3, h4, h5, h6 { + color: $background_text; + } + } + + &, * { + outline-color: $outline_color; + } + hr, .locales #locales-panel ul { border-color: $link_color; } @@ -70,8 +87,37 @@ body#version1 { nav.navbar { + .active, li:hover { + background: transparent; + } + + .navbar-toggle { + &, &:hover, &:active { + border-color: $primary_border; + background-color: $primary_color; + + .icon-bar { + background-color: mix($primary_color, $primary_text, 70%); + } + } + + &:hover { + background-color: mix($primary_color, $primary_text, 90%); + } + } + + .navbar-collapse { + border-color: $primary_border; + } + // Nav Dropdown + .dropdown.open .dropdown-toggle .badge { + color: $primary_text; + background-color: $primary_color; + border-color: $primary_border; + } + &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; @@ -120,8 +166,13 @@ body#version1 { // Notifications .media, #notifications .list-group-item { - color: $panel_text; - background: $panel_color; + color: $panel_text; + background: $panel_color; + border-color: $panel_border; + } + + #notifications .list-group-item:hover { + border-color: $panel_border !important; } .media { @@ -163,7 +214,7 @@ body#version1 { } a, a:hover, a:active { - color: $panel_text; + color: $link_color; } .answerbox--question-user, .answerbox--question-text, .answerbox--answer-user, .answerbox--answer-text { @@ -174,6 +225,12 @@ body#version1 { } } + input, textarea { + background-color: $input_color; + border-color: $input_border; + color: $input_text; + } + select { background-color: $panel_color; border-color: $panel_border; @@ -273,6 +330,16 @@ body#version1 { } } + .btn-link { + color: $primary_text !important; + } + + .panel-primary > .panel-heading { + background-color: mix($primary_color, $primary_text, 90%) !important; + border-color: mix($primary_color, $primary_text, 85%) !important; + color: mix($primary_text, $primary_color, 90%) !important; + } + .btn-primary:hover { background-color: mix($primary_color, $primary_text, 90%) !important; } @@ -289,6 +356,12 @@ body#version1 { } } + .panel-danger > .panel-heading { + background-color: mix($danger_color, $danger_text, 90%) !important; + border-color: mix($danger_color, $danger_text, 85%) !important; + color: mix($danger_text, $danger_color, 90%) !important; + } + .btn-danger:hover { background-color: mix($danger_color, $danger_text, 90%) !important; } @@ -305,6 +378,12 @@ body#version1 { } } + .panel-success > .panel-heading { + background-color: mix($success_color, $success_text, 90%); + border-color: mix($success_color, $success_text, 85%) !important; + color: mix($success_text, $success_color, 90%) !important; + } + .btn-success:hover { background-color: mix($success_color, $success_text, 90%) !important; } @@ -321,6 +400,12 @@ body#version1 { } } + .panel-warning > .panel-heading { + background-color: mix($warning_color, $warning_text, 90%) !important; + border-color: mix($warning_color, $warning_text, 85%) !important; + color: mix($warning_text, $warning_color, 90%) !important; + } + .btn-warning:hover { background-color: mix($warning_color, $warning_text, 90%) !important; } @@ -337,6 +422,12 @@ body#version1 { } } + .panel-info > .panel-heading { + background-color: mix($info_color, $info_text, 90%) !important; + border-color: mix($info_color, $info_text, 85%) !important; + color: mix($info_text, $info_color, 90%) !important; + } + .btn-info:hover { background-color: mix($info_color, $info_text, 90%) !important; } @@ -353,6 +444,12 @@ body#version1 { } } + .panel-default > .panel-heading { + background-color: mix($default_color, $default_text, 90%) !important; + border-color: mix($default_color, $default_text, 85%) !important; + color: mix($default_text, $default_color, 90%) !important; + } + .btn-default:hover { background-color: mix($default_color, $default_text, 90%) !important; } @@ -370,24 +467,24 @@ body#version1 { // Entry subtext .entry-subtext { - color: darken($primary_color, 10%); - } -} - -/* 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; + color: mix($primary_color, $panel_text, 80%); + } + + /* 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/routes.rb b/config/routes.rb index af0f1c34..dddbafde 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -58,6 +58,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 + match '/settings/theme/delete', to: 'user#delete_theme', via: 'delete', as: :delete_user_theme # resources :services, only: [:index, :destroy] match '/settings/services', to: 'services#index', via: 'get', as: :services diff --git a/db/migrate/20150826224857_add_input_and_outline_to_theme.rb b/db/migrate/20150826224857_add_input_and_outline_to_theme.rb new file mode 100644 index 00000000..e7e3cb8c --- /dev/null +++ b/db/migrate/20150826224857_add_input_and_outline_to_theme.rb @@ -0,0 +1,7 @@ +class AddInputAndOutlineToTheme < ActiveRecord::Migration + def change + add_column :themes, :input_color, :integer, default: 0xFFFFFF, null: false + add_column :themes, :input_text, :integer, default: 0x000000, null: false + add_column :themes, :outline_color, :integer, default: 0x5E35B1, null: false + end +end