Version: Next

Стили

Настройка внешнего вида элементов на экране осуществляется через настройку соответствующего этому элементу стиля.

Класс стиля	Описание
Базовые элементы интерфейса
`NavigationBarStyle`	Стиль навигационной панели в чате
`ChatLoadingStyle`	Общий стиль экрана загрузки чата
`ChatPlaceholderStyle`	Стиль пустого состояния чата (например, нет сообщений)
`ChatPlaceholderErrorStyle`	Стиль отображения ошибки (например, не удалось загрузить чат)
`LoadingIndicatorStyle`	Стиль индикатора загрузки (в сообщениях, действиях)
`ChatInputStyle`	Стиль панели ввода сообщений в чате
`ChatInputTextStyle`	Стиль контейнера ввода текста
`ChatInputVoiceStyle`	Стиль элемента записи голосовых сообщений
`ChatInputQuoteStyle`	Стиль элемента отображения цитаты над полем ввода
`SearchBarStyle`	Стиль поисковой строки в панели навигации
`ToastAlertStyle`	Стиль всплывающих уведомлений (toast)
`ScrollToMessageButtonStyle`	Кнопка прокрутки к новым сообщениям
`PhotoPickerStyle`	Стиль выбора фото (галерея/камера)
`ProgressViewStyle`	Стиль индикатора прогресса (загрузка файлов и т.п.)
`FileViewerStyle`	Стиль отображения файлов (PDF, документы)
`ButtonStyle`	Базовый стиль кнопки в чате
`TextButtonStyle`	Текстовая кнопка (без фона)
`IconButtonStyle`	Кнопка с иконкой
`AudioPlayerStyle`	Стиль аудиоплеера (в чате или отдельно)

Стили сообщений
`ChatMessagesStyles`	Контейнер стилей для всех типов пользовательских сообщений
`ChatMessageStyle`	Базовый стиль сообщения в чате
`TextChatMessageStyle`	Стиль текстового сообщения
`FileChatMessageStyle`	Стиль сообщения с файлом
`SearchChatMessageStyle`	Стиль выделения при поиске в сообщениях
`ImageChatMessageStyle`	Стиль изображения в сообщении
`AudioChatMessageStyle`	Стиль аудиосообщения
`SurveyChatMessageStyle`	Стиль опроса/голосования в сообщении
`ScheduleChatMessageStyle`	Стиль сообщения с расписанием/напоминанием
`OperatorJoinedChatMessageStyle`	Стиль сообщения о подключении оператора
`QuickReplyStyle`	Стиль быстрых ответов
`QuoteStyle`	Стиль отображения цитирования сообщений
`OpenGraphViewStyle`	Стиль отображения OpenGraph в текстовых сообщениях

У каждого компонента есть общие базовые параметры, описанные в ChatMessageStyle например:

    /// Округление углов у элемента (если применимо к элементу, иначе игнорируется)
    public var cornerRadius: CGFloat
    /// Цвет фона элемента
    public var backgroundColor: UIColor
    /// Цвет элемента (если применимо к элементу, иначе игнорируется)
    public var tintColor: UIColor

Так и уникальные для каждого компонента. Полный список можно посмотреть в документации по API

Стиль можно создать с помощью базового конструктора:

	let outcomeMessages = ChatMessagesStyles(components: components)
	outcomeMessages.textMessageStyle.textStyle.color = .black
    outcomeMessages.showAvatar = showOutcomeAvatar
	outcomeMessages.bubbleErrorColor = .red

или с помощью билдера с замыканием для настройки параметров:

	let outcomeMessages = ChatMessagesStyles.build(with: components) { messagesStyle in
		messagesStyle.textMessageStyle.textStyle.color = .black
		messagesStyle.showAvatar = showOutcomeAvatar
		messagesStyle.bubbleErrorColor = .red
	}

Настройка уже существующего стиля осуществляется через свойства:

    // Получение настроек экрана поиска
    let searchFlow = theme.flows.searchFlow
    searchFlow.navigationBarStyle.hidden = false
    searchFlow.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .white
    searchFlow.searchMessageStyle.matchTextStyle.color = .red
    searchFlow.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .white)

или с помощью метода apply, с настройкой через замыкание:

    // Применение настроек для экрана поиска
    theme.flows.searchFlow.apply {
        $0.navigationBarStyle = NavigationBarStyle.build(with: components, configure: {
            $0.hidden = false
            $0.backButtonColor = .red
        })
        $0.searchMessageStyle.apply {
            $0.matchTextStyle = .init(font: UIFont.systemFont(ofSize: 20), color: .systemGreen)
            $0.nextImage = ChatImage(system: "chevron.forward", tintColor: .systemGreen)
        }
        $0.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .red
        $0.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .red)
    }

note

В текущей версии есть ограничение на настройку компонентов (переиспользуемых из ChatComponents) через apply. Их настройка в одном из флоу через apply, может приводить к их глобальному изменению в теме. В этом случае рекомендуется точечно создавать новый компонент и настраивать его в нужном месте флоу.

note

В этой версии дизайн система применялась к текущему чату, могли быть учтены не все параметры. В случае обнаружения проблем с настройкой, обратитесь в поддержку.