Co-authored-by: crazywoola <427733928@qq.com>pull/5635/head
Diego Romero-Lovo
2 years ago
committed by
GitHub
parent
8fa6cb5e03
commit
4c0a31d38b
@ -0,0 +1,22 @@
|
|||||||
|
"""merge branches
|
||||||
|
|
||||||
|
Revision ID: 63f9175e515b
|
||||||
|
Revises: 2a3aebbbf4bb, b69ca54b9208
|
||||||
|
Create Date: 2024-06-26 09:46:36.573505
|
||||||
|
|
||||||
|
"""
|
||||||
|
import models as models
|
||||||
|
|
||||||
|
# revision identifiers, used by Alembic.
|
||||||
|
revision = '63f9175e515b'
|
||||||
|
down_revision = ('2a3aebbbf4bb', 'b69ca54b9208')
|
||||||
|
branch_labels = None
|
||||||
|
depends_on = None
|
||||||
|
|
||||||
|
|
||||||
|
def upgrade():
|
||||||
|
pass
|
||||||
|
|
||||||
|
|
||||||
|
def downgrade():
|
||||||
|
pass
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
"""add chatbot color theme
|
||||||
|
|
||||||
|
Revision ID: b69ca54b9208
|
||||||
|
Revises: 4ff534e1eb11
|
||||||
|
Create Date: 2024-06-25 01:14:21.523873
|
||||||
|
|
||||||
|
"""
|
||||||
|
import sqlalchemy as sa
|
||||||
|
from alembic import op
|
||||||
|
|
||||||
|
import models as models
|
||||||
|
|
||||||
|
# revision identifiers, used by Alembic.
|
||||||
|
revision = 'b69ca54b9208'
|
||||||
|
down_revision = '4ff534e1eb11'
|
||||||
|
branch_labels = None
|
||||||
|
depends_on = None
|
||||||
|
|
||||||
|
|
||||||
|
def upgrade():
|
||||||
|
# ### commands auto generated by Alembic - please adjust! ###
|
||||||
|
with op.batch_alter_table('sites', schema=None) as batch_op:
|
||||||
|
batch_op.add_column(sa.Column('chat_color_theme', sa.String(length=255), nullable=True))
|
||||||
|
batch_op.add_column(sa.Column('chat_color_theme_inverted', sa.Boolean(), server_default=sa.text('false'), nullable=False))
|
||||||
|
|
||||||
|
# ### end Alembic commands ###
|
||||||
|
|
||||||
|
|
||||||
|
def downgrade():
|
||||||
|
# ### commands auto generated by Alembic - please adjust! ###
|
||||||
|
with op.batch_alter_table('sites', schema=None) as batch_op:
|
||||||
|
batch_op.drop_column('chat_color_theme_inverted')
|
||||||
|
batch_op.drop_column('chat_color_theme')
|
||||||
|
|
||||||
|
# ### end Alembic commands ###
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import { createContext, useContext } from 'use-context-selector'
|
||||||
|
import { hexToRGBA } from './utils'
|
||||||
|
|
||||||
|
export class Theme {
|
||||||
|
public chatColorTheme: string | null
|
||||||
|
public chatColorThemeInverted: boolean
|
||||||
|
|
||||||
|
public primaryColor = '#1C64F2'
|
||||||
|
public backgroundHeaderColorStyle = 'backgroundImage: linear-gradient(to right, #2563eb, #0ea5e9)'
|
||||||
|
public headerBorderBottomStyle = ''
|
||||||
|
public colorFontOnHeaderStyle = 'color: white'
|
||||||
|
public colorPathOnHeader = 'white'
|
||||||
|
public backgroundButtonDefaultColorStyle = 'backgroundColor: #1C64F2'
|
||||||
|
public roundedBackgroundColorStyle = 'backgroundColor: rgb(245 248 255)'
|
||||||
|
public chatBubbleColorStyle = 'backgroundColor: rgb(225 239 254)'
|
||||||
|
public chatBubbleColor = 'rgb(225 239 254)'
|
||||||
|
|
||||||
|
constructor(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
|
||||||
|
this.chatColorTheme = chatColorTheme
|
||||||
|
this.chatColorThemeInverted = chatColorThemeInverted
|
||||||
|
this.configCustomColor()
|
||||||
|
this.configInvertedColor()
|
||||||
|
}
|
||||||
|
|
||||||
|
private configCustomColor() {
|
||||||
|
if (this.chatColorTheme !== null && this.chatColorTheme !== '') {
|
||||||
|
this.primaryColor = this.chatColorTheme ?? '#1C64F2'
|
||||||
|
this.backgroundHeaderColorStyle = `backgroundColor: ${this.primaryColor}`
|
||||||
|
this.backgroundButtonDefaultColorStyle = `backgroundColor: ${this.primaryColor}`
|
||||||
|
this.roundedBackgroundColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.05)}`
|
||||||
|
this.chatBubbleColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.15)}`
|
||||||
|
this.chatBubbleColor = `${hexToRGBA(this.primaryColor, 0.15)}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private configInvertedColor() {
|
||||||
|
if (this.chatColorThemeInverted) {
|
||||||
|
this.backgroundHeaderColorStyle = 'backgroundColor: #ffffff'
|
||||||
|
this.colorFontOnHeaderStyle = `color: ${this.primaryColor}`
|
||||||
|
this.headerBorderBottomStyle = 'borderBottom: 1px solid #ccc'
|
||||||
|
this.colorPathOnHeader = this.primaryColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ThemeBuilder {
|
||||||
|
private _theme?: Theme
|
||||||
|
private buildChecker = false
|
||||||
|
|
||||||
|
public get theme() {
|
||||||
|
if (this._theme === undefined)
|
||||||
|
throw new Error('The theme should be built first and then accessed')
|
||||||
|
else
|
||||||
|
return this._theme
|
||||||
|
}
|
||||||
|
|
||||||
|
public buildTheme(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
|
||||||
|
if (!this.buildChecker) {
|
||||||
|
this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
|
||||||
|
this.buildChecker = true
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (this.theme?.chatColorTheme !== chatColorTheme || this.theme?.chatColorThemeInverted !== chatColorThemeInverted) {
|
||||||
|
this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
|
||||||
|
this.buildChecker = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ThemeContext = createContext<ThemeBuilder>(new ThemeBuilder())
|
||||||
|
export const useThemeContext = () => useContext(ThemeContext)
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
export function hexToRGBA(hex: string, opacity: number): string {
|
||||||
|
hex = hex.replace('#', '')
|
||||||
|
|
||||||
|
const r = parseInt(hex.slice(0, 2), 16)
|
||||||
|
const g = parseInt(hex.slice(2, 4), 16)
|
||||||
|
const b = parseInt(hex.slice(4, 6), 16)
|
||||||
|
|
||||||
|
// Returning an RGB color object
|
||||||
|
return `rgba(${r},${g},${b},${opacity.toString()})`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Since strings cannot be directly assigned to the 'style' attribute in JSX,
|
||||||
|
* this method transforms the string into an object representation of the styles.
|
||||||
|
*/
|
||||||
|
export function CssTransform(cssString: string): object {
|
||||||
|
if (cssString.length === 0)
|
||||||
|
return {}
|
||||||
|
|
||||||
|
const style: object = {}
|
||||||
|
const propertyValuePairs = cssString.split(';')
|
||||||
|
for (const pair of propertyValuePairs) {
|
||||||
|
if (pair.trim().length > 0) {
|
||||||
|
const [property, value] = pair.split(':')
|
||||||
|
Object.assign(style, { [property.trim()]: value.trim() })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue