eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modificación de nuevo tema (colores)

This commit is contained in:
Mariela 2022-07-21 00:43:41 -06:00
parent 40c451bece
commit 752819f1c1
3 changed files with 7171 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7119
web-ui/web-react/public/assets/themes/khaki/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

2
web-ui/web-react/public/index.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
<link id="theme-link" rel="stylesheet" href="%PUBLIC_URL%/assets/themes/lara-light-indigo/theme.css"> <link id="theme-link" rel="stylesheet" href="%PUBLIC_URL%/assets/themes/khaki/theme.css">
</head> </head>
<body> <body>

92
web-ui/web-react/src/AppConfig.js
View File

@ -2,14 +2,14 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import { RadioButton } from 'primereact/radiobutton'; import { RadioButton } from 'primereact/radiobutton';
import { InputSwitch } from 'primereact/inputswitch'; import { InputSwitch } from 'primereact/inputswitch';
import classNames from 'classnames'; import classNames from 'classnames';
import {Button} from "primereact/button"; import { Button } from "primereact/button";
export const AppConfig = (props) => { export const AppConfig = (props) => {
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const [scale, setScale] = useState(14); const [scale, setScale] = useState(14);
const [scales] = useState([12,13,14,15,16]); const [scales] = useState([12, 13, 14, 15, 16]);
const [theme, setTheme] = useState('lara-light-indigo'); const [theme, setTheme] = useState('khaki');
const config = useRef(null); const config = useRef(null);
let outsideClickListener = useRef(null); let outsideClickListener = useRef(null);
@ -96,14 +96,14 @@ export const AppConfig = (props) => {
} }
}); });
} }
},[]) }, [])
useEffect(() => { useEffect(() => {
let themeElement = document.getElementById('theme-link'); let themeElement = document.getElementById('theme-link');
const themeHref = 'assets/themes/' + theme + '/theme.css'; const themeHref = 'assets/themes/' + theme + '/theme.css';
replaceLink(themeElement, themeHref); replaceLink(themeElement, themeHref);
},[theme,replaceLink]) }, [theme, replaceLink])
const isIE = () => { const isIE = () => {
return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent) return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent)
@ -119,7 +119,7 @@ export const AppConfig = (props) => {
<button className="layout-config-button p-link" id="layout-config-button" onClick={toggleConfigurator}> <button className="layout-config-button p-link" id="layout-config-button" onClick={toggleConfigurator}>
<i className="pi pi-cog"></i> <i className="pi pi-cog"></i>
</button> </button>
<Button className="p-button-danger layout-config-close p-button-rounded p-button-text" icon="pi pi-times" onClick={hideConfigurator}/> <Button className="p-button-danger layout-config-close p-button-rounded p-button-text" icon="pi pi-times" onClick={hideConfigurator} />
<div className="layout-config-content"> <div className="layout-config-content">
<h5 className="mt-0">Component Scale</h5> <h5 className="mt-0">Component Scale</h5>
@ -127,7 +127,7 @@ export const AppConfig = (props) => {
<Button icon="pi pi-minus" onClick={decrementScale} className="p-button-text" disabled={scale === scales[0]} /> <Button icon="pi pi-minus" onClick={decrementScale} className="p-button-text" disabled={scale === scales[0]} />
{ {
scales.map((item) => { scales.map((item) => {
return <i className={classNames('pi pi-circle-on', {'scale-active': item === scale})} key={item}/> return <i className={classNames('pi pi-circle-on', { 'scale-active': item === scale })} key={item} />
}) })
} }
<Button icon="pi pi-plus" onClick={incrementScale} className="p-button-text" disabled={scale === scales[scales.length - 1]} /> <Button icon="pi pi-plus" onClick={incrementScale} className="p-button-text" disabled={scale === scales[scales.length - 1]} />
@ -165,22 +165,22 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-blue', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-blue', 'light')}>
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue"/> <img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-purple', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-purple', 'light')}>
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple"/> <img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-blue', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-blue', 'dark')}>
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue"/> <img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-purple', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-purple', 'dark')}>
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple"/> <img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple" />
</button> </button>
</div> </div>
</div> </div>
@ -189,22 +189,27 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-indigo', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'md-light-indigo', 'light')}>
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo"/> <img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-indigo', 'light')}>
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-deeppurple', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'md-light-deeppurple', 'light')}>
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple"/> <img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-dark-indigo', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'md-dark-indigo', 'dark')}>
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo"/> <img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-dark-deeppurple', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'md-dark-deeppurple', 'dark')}>
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple"/> <img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple" />
</button> </button>
</div> </div>
</div> </div>
@ -213,22 +218,22 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-light-indigo', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'mdc-light-indigo', 'light')}>
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo"/> <img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-light-deeppurple', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'mdc-light-deeppurple', 'light')}>
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple"/> <img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-indigo', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-indigo', 'dark')}>
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo"/> <img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-deeppurple', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-deeppurple', 'dark')}>
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple"/> <img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple" />
</button> </button>
</div> </div>
</div> </div>
@ -237,7 +242,7 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'tailwind-light', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'tailwind-light', 'light')}>
<img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light"/> <img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light" />
</button> </button>
</div> </div>
</div> </div>
@ -246,51 +251,56 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'fluent-light', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'fluent-light', 'light')}>
<img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light"/> <img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light" />
</button> </button>
</div> </div>
</div> </div>
<h6>PrimeOne Design - 2022</h6> <h6>PrimeOne Design - 2022</h6>
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'khaki', 'light')}>
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Khaki" />
</button>
</div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-indigo', 'light')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-indigo', 'light')}>
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo"/> <img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-blue', 'light')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-blue', 'light')}>
<img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue"/> <img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-purple', 'light')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-purple', 'light')}>
<img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple"/> <img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-teal', 'light')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-teal', 'light')}>
<img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal"/> <img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-indigo', 'dark')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-indigo', 'dark')}>
<img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo"/> <img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-blue', 'dark')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-blue', 'dark')}>
<img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue"/> <img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-purple', 'dark')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-purple', 'dark')}>
<img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple"/> <img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-teal', 'dark')}> <button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-teal', 'dark')}>
<img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal"/> <img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button> </button>
</div> </div>
</div> </div>
@ -299,62 +309,62 @@ export const AppConfig = (props) => {
<div className="grid free-themes"> <div className="grid free-themes">
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-blue', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'saga-blue', 'light')}>
<img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue"/> <img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-green', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'saga-green', 'light')}>
<img src="assets/layout/images/themes/saga-green.png" alt="Saga Green"/> <img src="assets/layout/images/themes/saga-green.png" alt="Saga Green" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-orange', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'saga-orange', 'light')}>
<img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange"/> <img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-purple', 'light')}> <button className="p-link" onClick={e => changeTheme(e, 'saga-purple', 'light')}>
<img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple"/> <img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-blue', 'dim')}> <button className="p-link" onClick={e => changeTheme(e, 'vela-blue', 'dim')}>
<img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue"/> <img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-green', 'dim')}> <button className="p-link" onClick={e => changeTheme(e, 'vela-green', 'dim')}>
<img src="assets/layout/images/themes/vela-green.png" alt="Vela Green"/> <img src="assets/layout/images/themes/vela-green.png" alt="Vela Green" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-orange', 'dim')}> <button className="p-link" onClick={e => changeTheme(e, 'vela-orange', 'dim')}>
<img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange"/> <img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-purple', 'dim')}> <button className="p-link" onClick={e => changeTheme(e, 'vela-purple', 'dim')}>
<img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple"/> <img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-blue', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'arya-blue', 'dark')}>
<img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue"/> <img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-green', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'arya-green', 'dark')}>
<img src="assets/layout/images/themes/arya-green.png" alt="Arya Green"/> <img src="assets/layout/images/themes/arya-green.png" alt="Arya Green" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-orange', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'arya-orange', 'dark')}>
<img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange"/> <img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange" />
</button> </button>
</div> </div>
<div className="col-3 text-center"> <div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-purple', 'dark')}> <button className="p-link" onClick={e => changeTheme(e, 'arya-purple', 'dark')}>
<img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple"/> <img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple" />
</button> </button>
</div> </div>
</div> </div>