Several changes to theming, solving a bunch of bugs

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"

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],
+  rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
-  dc: [0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x222222, 0xeeeeee, 0x111111, 0x555555, 0xeeeeee, 0xbbbbbb],
+  dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
-  lc: [0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xdddddd, 0x111111, 0xeeeeee, 0xaaaaaa, 0x111111, 0x444444]
+  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) ->

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?

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?

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

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?

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"

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;
+    color:        $panel_text;
-    background: $panel_color;
+    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%);
+    color: mix($primary_color, $panel_text, 80%);
-  }
+  }
-}
+
-
+  /* nprogress */
-/* nprogress */
+  $nprogress-color: lighten($primary_color, 25%);
-$nprogress-color: lighten($primary_color, 25%);
+
-
+  #nprogress {
-#nprogress {
+    .bar {
-  .bar {
+      background: $nprogress-color;
-    background: $nprogress-color;
+    }
-  }
+
-
+    .peg {
-  .peg {
+      box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
-    box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
+    }
-  }
+
-
+    .spinner-icon {
-  .spinner-icon {
+      border-top-color:  $nprogress-color;
-    border-top-color:  $nprogress-color;
+      border-left-color: $nprogress-color;
-    border-left-color: $nprogress-color;
+    }
   }
 }

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

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