From 02cc1c418dc3ea0475ac61bf77d4e7a7bdf92636 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 3 May 2020 17:28:41 +0200 Subject: [PATCH] WIP: Initial implementation of CSS variable based theming --- app/helpers/theme_helper.rb | 62 +++++++++++++++++++++++++++++++++++++ app/models/theme.rb | 20 ------------ app/views/layouts/base.haml | 7 +---- 3 files changed, 63 insertions(+), 26 deletions(-) diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 1202588c..d75d2cb4 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -51,4 +51,66 @@ module ThemeHelper return klass.new(context).render end + + def render_theme + theme_attribute_map = { + 'primary_color' => 'primary', + 'primary_text' => 'primary-text', + 'danger_color' => 'danger', + 'danger_text' => 'danger-text', + 'warning_color' => 'warning', + 'warning_text' => 'warning-text', + 'info_color' => 'info', + 'info_text' => 'info-text', + 'success_color' => 'success', + 'success_text' => 'success-text', + 'panel_color' => 'card-bg', + 'background_color' => 'background', + 'background_text' => 'body-text', + 'input_color' => 'input-bg', + 'input_text' => 'input-text' + } + + theme = get_active_theme + + if theme + + body = ":root {\n" + theme.attributes.each do |k, v| + if theme_attribute_map[k] + if k.include? "text" + hex = get_hex_color_from_theme_value(v) + body += "\t--#{theme_attribute_map[k]}: #{get_decimal_triplet_from_hex(hex)};\n" + else + body += "\t--#{theme_attribute_map[k]}: ##{get_hex_color_from_theme_value(v)};\n" + end + end + end + + body += "}" + + content_tag(:style, body) + end + end + + def get_active_theme + if current_user&.theme + current_user.theme + elsif @user&.theme + if user_signed_in? + @user.theme unless !current_user&.show_foreign_themes? + else + @user.theme + end + end + end + + def get_hex_color_from_theme_value(value) + ('0000000' + value.to_s(16))[-6, 6] + end + + def get_decimal_triplet_from_hex(value) + hexes = value.split(/(.{2})/).reject { |c| c.empty? } + hexes.map(&:hex).join(", ") + end end diff --git a/app/models/theme.rb b/app/models/theme.rb index 74700a54..32479e2a 100644 --- a/app/models/theme.rb +++ b/app/models/theme.rb @@ -17,26 +17,6 @@ class Theme < ApplicationRecord 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, s3_headers: { - 'Content-Type' => 'text/css' - }, fog_file: { - content_type: 'text/css' - } - validates_attachment_content_type :css, content_type: /^text\// - - before_save do - 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/css' - style.original_filename = 'theme.css' - - self.css = style - end - def theme_color ('#' + ('0000000' + primary_color.to_s(16))[-6, 6]) end diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml index 87f68301..2c6d0181 100644 --- a/app/views/layouts/base.haml +++ b/app/views/layouts/base.haml @@ -12,17 +12,12 @@ %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 not current_user.theme.nil? and (@user.nil? || @user.theme.nil?) - %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' => "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? = javascript_include_tag 'moderation', 'data-turbolinks-track' => true = csrf_meta_tags + = render_theme %body#version1 - if user_signed_in? = render 'navigation/main'