Fixes #2619 - KB header and footer link-color not changeable
This commit is contained in:
parent
d7b0c639c4
commit
2bba743dc3
15 changed files with 177 additions and 45 deletions
|
@ -27,11 +27,13 @@ class App.KnowledgeBasePublicMenuManager extends App.Controller
|
||||||
{
|
{
|
||||||
headline: 'Header menu',
|
headline: 'Header menu',
|
||||||
identifier: 'header',
|
identifier: 'header',
|
||||||
color: kb.color_header
|
color: kb.color_header,
|
||||||
|
color_link: kb.color_header_link
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
headline: 'Footer menu',
|
headline: 'Footer menu',
|
||||||
identifier: 'footer'
|
identifier: 'footer',
|
||||||
|
color_link: 'hsl(207,12%,50%)'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
class App.KnowledgeBase extends App.Model
|
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 Spine.Model.Ajax
|
||||||
@extend App.KnowledgeBaseActions
|
@extend App.KnowledgeBaseActions
|
||||||
@url: @apiPath + '/knowledge_bases'
|
@url: @apiPath + '/knowledge_bases'
|
||||||
|
@ -148,6 +148,17 @@ class App.KnowledgeBase extends App.Model
|
||||||
display: false
|
display: false
|
||||||
horizontal: true
|
horizontal: true
|
||||||
shown: 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
|
# Layout picker is disabled in V1
|
||||||
#}, {
|
#}, {
|
||||||
# name: 'homepage_layout'
|
# name: 'homepage_layout'
|
||||||
|
|
|
@ -26,11 +26,12 @@ class App.KnowledgeBaseNewModal extends App.ControllerModal
|
||||||
App.UiElement[attribute.tag].prepareParams?(attribute, dom, params)
|
App.UiElement[attribute.tag].prepareParams?(attribute, dom, params)
|
||||||
|
|
||||||
applyDefaults: (params) ->
|
applyDefaults: (params) ->
|
||||||
params['iconset'] = 'FontAwesome'
|
params['iconset'] = 'FontAwesome'
|
||||||
params['color_highlight'] = '#38ae6a'
|
params['color_highlight'] = '#38ae6a'
|
||||||
params['color_header'] = '#f9fafb'
|
params['color_header'] = '#f9fafb'
|
||||||
params['homepage_layout'] = 'grid'
|
params['color_header_link'] = 'hsl(206,8%,50%)'
|
||||||
params['category_layout'] = 'grid'
|
params['homepage_layout'] = 'grid'
|
||||||
|
params['category_layout'] = 'grid'
|
||||||
|
|
||||||
onSubmit: (e) ->
|
onSubmit: (e) ->
|
||||||
params = @formParams(@el)
|
params = @formParams(@el)
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<div class="kb-menu-preview">
|
<div class="kb-menu-preview">
|
||||||
<div class="label"><%= kb_locale.systemLocale().name %></div>
|
<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) %>
|
<% menu_items = App.KnowledgeBaseMenuItem.using_kb_locale_location(kb_locale, location.identifier) %>
|
||||||
|
|
||||||
<% if menu_items.length == 0: %>
|
<% if menu_items.length == 0: %>
|
||||||
|
|
|
@ -2661,7 +2661,7 @@ input.has-error {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: hsl(206,8%,50%);
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|
|
@ -27,8 +27,9 @@ class KnowledgeBase < ApplicationModel
|
||||||
validates :category_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
|
validates :category_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
|
||||||
validates :homepage_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
|
validates :homepage_layout, inclusion: { in: KnowledgeBase::LAYOUTS }
|
||||||
|
|
||||||
validates :color_highlight, presence: true, color: true
|
validates :color_highlight, presence: true, color: true
|
||||||
validates :color_header, 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 }
|
validates :iconset, inclusion: { in: KnowledgeBase::ICONSETS }
|
||||||
|
|
||||||
|
|
|
@ -28,4 +28,8 @@
|
||||||
.header {
|
.header {
|
||||||
background-color: <%= knowledge_base.color_header %>;
|
background-color: <%= knowledge_base.color_header %>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header .menu-item {
|
||||||
|
color: <%= knowledge_base.color_header_link %>;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -8,8 +8,9 @@ class InitializeKnowledgeBase < ActiveRecord::Migration[5.0]
|
||||||
create_table :knowledge_bases do |t|
|
create_table :knowledge_bases do |t|
|
||||||
t.string :iconset, limit: 30, null: false
|
t.string :iconset, limit: 30, null: false
|
||||||
|
|
||||||
t.string :color_highlight, limit: 25, null: false
|
t.string :color_highlight, limit: 25, null: false
|
||||||
t.string :color_header, 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 :homepage_layout, null: false
|
||||||
t.string :category_layout, null: false
|
t.string :category_layout, null: false
|
||||||
|
|
11
db/migrate/20210923172256_issue_2619_kb_header_link_color.rb
Normal file
11
db/migrate/20210923172256_issue_2619_kb_header_link_color.rb
Normal 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
|
|
@ -8,6 +8,7 @@ FactoryBot.define do
|
||||||
iconset { 'FontAwesome' }
|
iconset { 'FontAwesome' }
|
||||||
color_highlight { '#AAA' }
|
color_highlight { '#AAA' }
|
||||||
color_header { '#EEE' }
|
color_header { '#EEE' }
|
||||||
|
color_header_link { '#FFF000' }
|
||||||
homepage_layout { 'grid' }
|
homepage_layout { 'grid' }
|
||||||
category_layout { 'list' }
|
category_layout { 'list' }
|
||||||
|
|
||||||
|
|
|
@ -56,9 +56,9 @@ RSpec.describe KnowledgeBase, type: :model do
|
||||||
let(:allowed_values) { ['#aaa', '#ff0000', 'rgb(0,100,100)', 'hsl(0,100%,50%)'] }
|
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'] }
|
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) }
|
%i[color_header color_header_link color_highlight].each do |attr|
|
||||||
it { is_expected.to allow_values(*allowed_values).for(:color_highlight) }
|
it { is_expected.to allow_values(*allowed_values).for(attr) }
|
||||||
it { is_expected.not_to allow_values(*not_allowed_values).for(:color_header) }
|
it { is_expected.not_to allow_values(*not_allowed_values).for(attr) }
|
||||||
it { is_expected.not_to allow_values(*not_allowed_values).for(:color_highlight) }
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -7,3 +7,26 @@ RSpec::Matchers.define :exist_in_database do
|
||||||
actual.class.exists?(actual.id)
|
actual.class.exists?(actual.id)
|
||||||
end
|
end
|
||||||
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
|
||||||
|
|
|
@ -7,20 +7,44 @@ RSpec.describe 'Admin Panel > Knowledge Base > Public Menu', type: :system do
|
||||||
include_context 'basic Knowledge Base'
|
include_context 'basic Knowledge Base'
|
||||||
include_context 'Knowledge Base menu items'
|
include_context 'Knowledge Base menu items'
|
||||||
|
|
||||||
before do
|
|
||||||
visit '/#manage/knowledge_base'
|
|
||||||
find('a', text: 'Public Menu').click
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'lists menu items' do
|
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('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', 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', 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 }
|
it { expect(find_locale('Header menu', primary_locale).text).to include menu_item_2.title }
|
||||||
end
|
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
|
context 'edit menu items' do
|
||||||
before do
|
before do
|
||||||
|
visit '/#manage/knowledge_base'
|
||||||
|
find('a', text: 'Public Menu').click
|
||||||
find_location('Header menu').find('a', text: 'Edit').click
|
find_location('Header menu').find('a', text: 'Edit').click
|
||||||
|
|
||||||
modal_ready
|
modal_ready
|
||||||
|
|
30
spec/system/admin/knowledge_base/theme_spec.rb
Normal file
30
spec/system/admin/knowledge_base/theme_spec.rb
Normal 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
|
|
@ -6,35 +6,58 @@ RSpec.describe 'Public Knowledge Base menu items', type: :system, authenticated_
|
||||||
include_context 'basic Knowledge Base'
|
include_context 'basic Knowledge Base'
|
||||||
include_context 'Knowledge Base menu items'
|
include_context 'Knowledge Base menu items'
|
||||||
|
|
||||||
before do
|
context 'menu items visibility' do
|
||||||
published_answer
|
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
|
end
|
||||||
|
|
||||||
it 'shows header public link' do
|
context 'menu items color' do
|
||||||
expect(page).to have_css('header .menu-item', text: menu_item_1.title)
|
before do
|
||||||
end
|
knowledge_base.update! color_header_link: color
|
||||||
|
visit help_no_locale_path
|
||||||
|
end
|
||||||
|
|
||||||
it 'shows another header public link' do
|
let(:color) { 'rgb(255, 0, 255)' }
|
||||||
expect(page).to have_css('header .menu-item', text: menu_item_2.title)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "doesn't show footer link in header" do
|
it 'applies color for header preview' do
|
||||||
expect(page).to have_no_css('header .menu-item', text: menu_item_3.title)
|
elem = all('.menu-item')[0]
|
||||||
end
|
|
||||||
|
|
||||||
it 'shows footer public link' do
|
expect(elem).to have_computed_style :color, color
|
||||||
expect(page).to have_css('footer .menu-item', text: menu_item_3.title)
|
end
|
||||||
end
|
|
||||||
|
|
||||||
it "doesn't show footer link of another locale" do
|
it 'does not apply color for footer preview' do
|
||||||
expect(page).to have_no_css('footer .menu-item', text: menu_item_4.title)
|
elem = all('.menu-item')[2]
|
||||||
end
|
|
||||||
|
|
||||||
it 'shows public links in given order' do
|
expect(elem).not_to have_computed_style :color, color
|
||||||
index_1 = page.body.index menu_item_1.title
|
end
|
||||||
index_2 = page.body.index menu_item_2.title
|
|
||||||
expect(index_1).to be < index_2
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue