zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

use custom colors

Browse Source
This commit is contained in:
MathieuG-P
2022-07-22 18:16:48 +02:00
parent f173b57b8d
commit 13dbf88473
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/bsm-button.component.tsx
+9 -3
View File
@@ -3,12 +3,18 @@ import OutsideClickHandler from 'react-outside-click-handler';
import React from "react";
import { BsmImage } from "./bsm-image.component";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { ConfigurationService } from "renderer/services/configuration.service";
import { DefaultConfigKey } from "renderer/config/default-configuration.config";
type BsmButtonType = "primary"|"success"|"cancel"|"error";
export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, disabled?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void, typeColor?:BsmButtonType}) {
const configService = ConfigurationService.getInstance();
const t = useTranslation();
const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
return (
<OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
@@ -17,9 +23,9 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
{ icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
{text && (type === "submit" ? <button className="w-full h-full">{t(text)}</button> : <span>{t(text)}</span>)}
{ withBar && (
<div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
<div className="absolute top-0 left-0 h-full w-full bg-inherit brightness-50"/>
<div className={`absolute top-0 left-0 h-full w-full bg-inherit -translate-x-full group-hover:translate-x-0 transition-transform shadow-center shadow-red-500 ${active && "translate-x-0"}`}/>
<div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>
<div className="absolute top-0 left-0 h-full w-full bg-current brightness-50"/>
<div className={`absolute top-0 left-0 h-full w-full bg-inherit -translate-x-full group-hover:translate-x-0 transition-transform shadow-center shadow-current ${active && "translate-x-0"}`}/>
</div>
)}
</div>
src/renderer/components/shared/tab-nav-bar.component.tsx
+10 -4
View File
@@ -1,12 +1,18 @@
import { useEffect, useRef, useState } from "react";
import { DefaultConfigKey } from "renderer/config/default-configuration.config";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { ConfigurationService } from "renderer/services/configuration.service";
export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
const configService = ConfigurationService.getInstance();
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const tabsWrapper = useRef(null);
const [tabsWidth, setTabsWidth] = useState(0);
const t = useTranslation();
const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
const selectYear = (tab: string) => {
const newIndex = props.tabsText.indexOf(tab);
@@ -21,10 +27,10 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
return (
<div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
<div className="absolute w-full h-1 bottom-0">
<span className="absolute h-full w-full bg-red-500 brightness-50"></span>
<span className="absolute h-full block bg-red-500 transition-transform duration-300 shadow-lg shadow-red-500" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
<span className="fixed h-1 block shadow-center bg-transparent shadow-red-500 transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
<div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>
<span className="absolute h-full w-full bg-current brightness-50" />
<span className="absolute h-full block bg-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}/>
<span className="fixed h-1 block shadow-center bg-transparent shadow-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
</div>
<div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
{ props.tabsText.map((y, index) =>