Fixes #2619 - KB header and footer link-color not changeable

This commit is contained in:
Mantas 2021-09-27 15:28:53 +03:00 committed by Thorsten Eckel
parent 68adb3974e
commit 1404f7b2fc
15 changed files with 177 additions and 45 deletions

View file

@ -27,11 +27,13 @@ class App.KnowledgeBasePublicMenuManager extends App.Controller
{
headline: 'Header menu',
identifier: 'header',
color: kb.color_header
color: kb.color_header,
color_link: kb.color_header_link
},
{
headline: 'Footer menu',
identifier: 'footer'
identifier: 'footer',
color_link: 'hsl(207,12%,50%)'
}
]

View file

@ -1,5 +1,5 @@
class App.KnowledgeBase extends App.Model
@configure 'KnowledgeBase', 'iconset', 'color_highlight', 'color_header', 'translation_ids', 'locale_ids', 'homepage_layout', 'category_layout', 'custom_address'
@configure 'KnowledgeBase', 'iconset', 'color_highlight', 'color_header', 'color_header_link', 'translation_ids', 'locale_ids', 'homepage_layout', 'category_layout', 'custom_address'
@extend Spine.Model.Ajax
@extend App.KnowledgeBaseActions
@url: @apiPath + '/knowledge_bases'
@ -148,6 +148,17 @@ class App.KnowledgeBase extends App.Model
display: false
horizontal: true
shown: true
}, {
name: 'color_header_link'
display: 'Header Link Color'
tag: 'color'
style: 'block'
null: false
screen:
admin_style_color_header_link:
display: false
horizontal: true
shown: true
# Layout picker is disabled in V1
#}, {
# name: 'homepage_layout'

View file

@ -26,11 +26,12 @@ class App.KnowledgeBaseNewModal extends App.ControllerModal
App.UiElement[attribute.tag].prepareParams?(attribute, dom, params)
applyDefaults: (params) ->
params['iconset'] = 'FontAwesome'
params['color_highlight'] = '#38ae6a'
params['color_header'] = '#f9fafb'
params['homepage_layout'] = 'grid'
params['category_layout'] = 'grid'
params['iconset'] = 'FontAwesome'
params['color_highlight'] = '#38ae6a'
params['color_header'] = '#f9fafb'
params['color_header_link'] = 'hsl(206,8%,50%)'
params['homepage_layout'] = 'grid'
params['category_layout'] = 'grid'
onSubmit: (e) ->
params = @formParams(@el)

View file

@ -14,7 +14,7 @@
<div class="kb-menu-preview">
<div class="label"><%= kb_locale.systemLocale().name %></div>
<div class="kb-menu-preview-container kb-menu-preview-container--<%= location.identifier %>" style="background-color: <%= location.color %>">
<div class="kb-menu-preview-container kb-menu-preview-container--<%= location.identifier %>" style="background-color: <%= location.color %>; color: <%= location.color_link %>;">
<% menu_items = App.KnowledgeBaseMenuItem.using_kb_locale_location(kb_locale, location.identifier) %>
<% if menu_items.length == 0: %>

View file

@ -2661,7 +2661,7 @@ input.has-error {
}
a {
color: hsl(206,8%,50%);
color: inherit;
}
.label {

View file

@ -27,8 +27,9 @@ class KnowledgeBase < ApplicationModel
validates :category_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
validates :homepage_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
validates :color_highlight, presence: true, color: true
validates :color_header, presence: true, color: true
validates :color_highlight, presence: true, color: true
validates :color_header, presence: true, color: true
validates :color_header_link, presence: true, color: true
validates :iconset, inclusion: { in: KnowledgeBase::ICONSETS }

View file

@ -28,4 +28,8 @@
.header {
background-color: <%= knowledge_base.color_header %>;
}
.header .menu-item {
color: <%= knowledge_base.color_header_link %>;
}
</style>

View file

@ -8,8 +8,9 @@ class InitializeKnowledgeBase < ActiveRecord::Migration[5.0]
create_table :knowledge_bases do |t|
t.string :iconset, limit: 30, null: false
t.string :color_highlight, limit: 25, null: false
t.string :color_header, limit: 25, null: false
t.string :color_highlight, limit: 25, null: false
t.string :color_header, limit: 25, null: false
t.string :color_header_link, limit: 25, null: false
t.string :homepage_layout, null: false
t.string :category_layout, null: false

View file

@ -0,0 +1,11 @@
# Copyright (C) 2012-2021 Zammad Foundation, http://zammad-foundation.org/
class Issue2619KbHeaderLinkColor < ActiveRecord::Migration[6.0]
def up
return if !Setting.exists?(name: 'system_init_done')
add_column :knowledge_bases, :color_header_link, :string, limit: 25, null: false, default: 'hsl(206,8%,50%)'
change_column_default :knowledge_bases, :color_header_link, nil
KnowledgeBasis.reset_column_information
end
end

View file

@ -8,6 +8,7 @@ FactoryBot.define do
iconset { 'FontAwesome' }
color_highlight { '#AAA' }
color_header { '#EEE' }
color_header_link { '#FFF000' }
homepage_layout { 'grid' }
category_layout { 'list' }

View file

@ -56,9 +56,9 @@ RSpec.describe KnowledgeBase, type: :model do
let(:allowed_values) { ['#aaa', '#ff0000', 'rgb(0,100,100)', 'hsl(0,100%,50%)'] }
let(:not_allowed_values) { ['aaa', '#aa', '#ff000', 'rgb(0,100,100', 'def(0,100%,0.5)', 'test'] }
it { is_expected.to allow_values(*allowed_values).for(:color_header) }
it { is_expected.to allow_values(*allowed_values).for(:color_highlight) }
it { is_expected.not_to allow_values(*not_allowed_values).for(:color_header) }
it { is_expected.not_to allow_values(*not_allowed_values).for(:color_highlight) }
%i[color_header color_header_link color_highlight].each do |attr|
it { is_expected.to allow_values(*allowed_values).for(attr) }
it { is_expected.not_to allow_values(*not_allowed_values).for(attr) }
end
end
end

View file

@ -7,3 +7,26 @@ RSpec::Matchers.define :exist_in_database do
actual.class.exists?(actual.id)
end
end
RSpec::Matchers.define :have_computed_style do
match do
actual_value == expected_value
end
failure_message do
"Expected element to have CSS property #{expected_key} with value #{expected_value}. But it was #{actual_value}."
end
def expected_key
expected[0]
end
def expected_value
expected[1]
end
def actual_value
actual.evaluate_script "getComputedStyle(this).#{expected_key}"
end
end

View file

@ -7,20 +7,44 @@ RSpec.describe 'Admin Panel > Knowledge Base > Public Menu', type: :system do
include_context 'basic Knowledge Base'
include_context 'Knowledge Base menu items'
before do
visit '/#manage/knowledge_base'
find('a', text: 'Public Menu').click
end
context 'lists menu items' do
before do
visit '/#manage/knowledge_base'
find('a', text: 'Public Menu').click
end
it { expect(find_locale('Footer menu', alternative_locale).text).to include menu_item_4.title }
it { expect(find_locale('Header menu', primary_locale).text).to include menu_item_1.title }
it { expect(find_locale('Header menu', alternative_locale).text).not_to include menu_item_2.title }
it { expect(find_locale('Header menu', primary_locale).text).to include menu_item_2.title }
end
context 'menu items color' do
before do
knowledge_base.update! color_header_link: color
visit '/#manage/knowledge_base'
find('a', text: 'Public Menu').click
end
let(:color) { 'rgb(255, 0, 255)' }
it 'applies color for header preview' do
elem = all('.kb-menu-preview a')[0]
expect(elem).to have_computed_style :color, color
end
it 'does not apply color for footer preview' do
elem = all('.kb-menu-preview a')[3]
expect(elem).not_to have_computed_style :color, color
end
end
context 'edit menu items' do
before do
visit '/#manage/knowledge_base'
find('a', text: 'Public Menu').click
find_location('Header menu').find('a', text: 'Edit').click
modal_ready

View file

@ -0,0 +1,30 @@
# Copyright (C) 2012-2021 Zammad Foundation, http://zammad-foundation.org/
require 'rails_helper'
# https://github.com/zammad/zammad/issues/266
RSpec.describe 'Admin Panel > Knowledge Base > Theme', type: :system do
include_context 'basic Knowledge Base'
context 'header link color' do
before do
knowledge_base
visit '/#manage/knowledge_base'
end
it 'shows color' do
elem = find('#color_header_link input')
expect(elem.value).to eq knowledge_base.color_header_link
end
it 'saves new color' do
find('#color_header_link input').fill_in with: '#ccc'
find('#color_header_link button').click
await_empty_ajax_queue
expect(knowledge_base.reload.color_header_link).to eq '#ccc'
end
end
end

View file

@ -6,35 +6,58 @@ RSpec.describe 'Public Knowledge Base menu items', type: :system, authenticated_
include_context 'basic Knowledge Base'
include_context 'Knowledge Base menu items'
before do
published_answer
context 'menu items visibility' do
before do
published_answer
visit help_no_locale_path
visit help_no_locale_path
end
it 'shows header public link' do
expect(page).to have_css('header .menu-item', text: menu_item_1.title)
end
it 'shows another header public link' do
expect(page).to have_css('header .menu-item', text: menu_item_2.title)
end
it "doesn't show footer link in header" do
expect(page).to have_no_css('header .menu-item', text: menu_item_3.title)
end
it 'shows footer public link' do
expect(page).to have_css('footer .menu-item', text: menu_item_3.title)
end
it "doesn't show footer link of another locale" do
expect(page).to have_no_css('footer .menu-item', text: menu_item_4.title)
end
it 'shows public links in given order' do
index_1 = page.body.index menu_item_1.title
index_2 = page.body.index menu_item_2.title
expect(index_1).to be < index_2
end
end
it 'shows header public link' do
expect(page).to have_css('header .menu-item', text: menu_item_1.title)
end
context 'menu items color' do
before do
knowledge_base.update! color_header_link: color
visit help_no_locale_path
end
it 'shows another header public link' do
expect(page).to have_css('header .menu-item', text: menu_item_2.title)
end
let(:color) { 'rgb(255, 0, 255)' }
it "doesn't show footer link in header" do
expect(page).to have_no_css('header .menu-item', text: menu_item_3.title)
end
it 'applies color for header preview' do
elem = all('.menu-item')[0]
it 'shows footer public link' do
expect(page).to have_css('footer .menu-item', text: menu_item_3.title)
end
expect(elem).to have_computed_style :color, color
end
it "doesn't show footer link of another locale" do
expect(page).to have_no_css('footer .menu-item', text: menu_item_4.title)
end
it 'does not apply color for footer preview' do
elem = all('.menu-item')[2]
it 'shows public links in given order' do
index_1 = page.body.index menu_item_1.title
index_2 = page.body.index menu_item_2.title
expect(index_1).to be < index_2
expect(elem).not_to have_computed_style :color, color
end
end
end