Как внедрить форму настроек внешнего вида сайта

Что хочется

Чтобы пользователь (администратор системы) мог сам настраивать внешний вид отдельных элементов.

По умолчанию исходим из того, что человек не владеет CSS для изменения дизайна (эта возможность и раньше была в системе у editor).

Необходимо реализовать интерфейс, который позволит изменять внешний вид системы. Например, такой:

Как это сделать

Мы задействуем особенность формирования CSS стилей платформы. Пользовательский файл берется из настройки globalCSS. Мы можем добавить к ней настройку autoGlogalCSS и генерировать CSS для данной настройки исходя из файлы настроек дизайна.

Таким образом, форма будет сохранять настройки интерфейса, а также генерировать CSS для указанных пользователем настроек дизайна.

Реализация системы настроек дизайна сайта

Создаем таблицу для хранения настроек

CREATE TABLE [dbo].[as_designSettings](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[code] [nvarchar](64) NULL,
	[value] [nvarchar](128) NULL,
 CONSTRAINT [PK_as_designSettings] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Создаем специальные процедуры/функции для хранения, выдачи настроек, а также форму designSettings.

Функция получения настройки дизайна:

CREATE OR ALTER FUNCTION [dbo].as_design_getSetting
(
	@code nvarchar(128),
	@value nvarchar(max)
)
RETURNS nvarchar(max) as
BEGIN
	declare @s nvarchar(max) = isnull((select value from as_designSettings where code= @code), @value)
	
	return @s
END

Процедура сохранения отдельной настройки дизайна:

CREATE OR ALTER   PROCEDURE [dbo].[as_design_saveSetting]
	@code nvarchar(64),
	@value nvarchar(128) 
AS
BEGIN
	declare @id int =(select top 1 id from as_designSettings where code=@code)
	if(@id is null)
		insert into as_designSettings(code, value) values(@code, @value)
	else 
		update as_designSettings set value = @value where id = @id
END

Форма GetItem:

CREATE PROCEDURE [dbo].[fm_designSettings_getItem]
    @itemID int,	
	@username nvarchar(256)
AS
BEGIN
	-- SELECT 1
    select 
    	dbo.as_design_getSetting('breadcrumbShadow', '') breadcrumbShadow,
		dbo.as_design_getSetting('menuIconSize', '') menuIconSize,
		dbo.as_design_getSetting('topBackground', '') topBackground,
		dbo.as_design_getSetting('background', '') background,
       	dbo.as_design_getSetting('menuBackground', '') menuBackground,
		dbo.as_design_getSetting('fontSize', '') fontSize,
        dbo.as_design_getSetting('hideScrollTopButton', '') hideScrollTopButton,
        dbo.as_design_getSetting('round', '') round,         
		dbo.as_design_getSetting('breadcrumbBackground', '') breadcrumbBackground,        
		dbo.as_design_getSetting('colorLink', '') colorLink          
        
    -- SELECT 2 
    select 'h3' headerTag
END

Форма SaveItem (процедура сохраняет настройки и вызывает генерацию CSS для настроек):

CREATE PROCEDURE [dbo].[fm_designSettings_saveItem]
   @username nvarchar(256), 
   @itemID int,
   @parameters ExtendedDictionaryParameter READONLY	   
AS
BEGIN	
	declare @breadcrumbShadow nvarchar(max)= (select Value2 from @parameters where [key]='breadcrumbShadow')
	declare @menuIconSize nvarchar(max)= (select Value2 from @parameters where [key]='menuIconSize')
	declare @topBackground nvarchar(max)= (select Value2 from @parameters where [key]='topBackground')
	declare @background nvarchar(max)= (select Value2 from @parameters where [key]='background')
	declare @menuBackground nvarchar(max)= (select Value2 from @parameters where [key]='menuBackground')
	declare @fontSize nvarchar(max)= (select Value2 from @parameters where [key]='fontSize')
	declare @hideScrollTopButton nvarchar(max)= (select Value2 from @parameters where [key]='hideScrollTopButton')
	declare @round nvarchar(max)= (select Value2 from @parameters where [key]='round')
	declare @breadcrumbBackground nvarchar(max)= (select Value2 from @parameters where [key]='breadcrumbBackground')
	declare @colorLink nvarchar(max)= (select Value2 from @parameters where [key]='colorLink')
    
    exec as_design_saveSetting @code= 'breadcrumbShadow', @value= @breadcrumbShadow
    exec as_design_saveSetting @code= 'menuIconSize', @value= @menuIconSize
    exec as_design_saveSetting @code= 'topBackground', @value= @topBackground
    exec as_design_saveSetting @code= 'background', @value= @background
    exec as_design_saveSetting @code= 'menuBackground', @value= @menuBackground
    exec as_design_saveSetting @code= 'fontSize', @value= @fontSize
    exec as_design_saveSetting @code= 'hideScrollTopButton', @value= @hideScrollTopButton
    exec as_design_saveSetting @code= 'round', @value= @round
    exec as_design_saveSetting @code= 'breadcrumbBackground', @value= @breadcrumbBackground
    exec as_design_saveSetting @code= 'colorLink', @value= @colorLink
    
    exec as_design_processSettings     	
	-- SELECT 1 
	select 1 Result, 'OK' Msg, '' SuccessUrl, 0 HideFormAfterSubmit, '' RefreshContainer, 1 EnableSaveAlert
END

Колонки формы:

Процедура генерации CSS на основе настроек: https://pastebin.com/kAzbbHaM

И последнее - добавляем сгенерированный CSS к статичной настройке. Переходим в админке в Компоненты/Подгружаемые файлы (/rsfiletypes).

Редактируем процедуру для globalCSS:

CREATE PROCEDURE [dbo].[rs_globalCSS_getFile]
	@urlParameters DictionaryParameter READONLY,
	@username nvarchar(32),
	@langID int = 0
AS
BEGIN
	declare @s nvarchar(128)
	select @s = Value  from @urlParameters where [Key] = 'itemID'
	
	declare @globalCSS nvarchar(max) = isnull(dbo.as_setting('globalCSS', ''), '')
    declare @autoGlobalCSS nvarchar(max) = isnull(dbo.as_setting('autoGlobalCSS', ''), '') 
	
	select top 1 1 Result, '' Msg, @globalCSS + char(10) + char(13) + @autoGlobalCSS Text, 'text/css' MimeType 
END

Форму настройки дизайна можно добавить в GetLayout в SELECT 2 для вывода у роли editor:

-- SELECT 2 GetLayout
select 'form' type,'Настройка дизайна' Title, 'designSettings' Code,
    '' itemID,'fas fa-cogs' Icon, 'OK' btnText, 1 bigModal,1 slideout,
    -140 Ord, 1 FloatPanel, 'info' background

Примечание:

в реализованной форме есть параметр Скругления углов - он влияет не напрямую на CSS, а на спецклассы для body, поэтому его обработка идет в GetLayout:

....
declare @round nvarchar(32) =  dbo.as_design_getSetting('round', '')
declare @roundClass nvarchar(32) = iif(@round='round', 'as-round', iif(@round='unround', 'as-unround', ''))
	
-- SELECT 1
select .... 
  @roundClass bodyClass,
  ....

Дополнительные материалы

Страница-источник на сайте falconspace.ru