Skip to content

B
BoxDialer
Commit c1a30e7c authored by Muhammadali's avatar Muhammadali
Browse files
Options

update-

parent a81f71b7
Hide whitespace changes
Inline Side-by-side
Showing with 4025 additions and 76 deletions
prod/index.html 0 → 100644
View file @ c1a30e7c
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<script defer src="main.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="boxdialerwidjet"></div>
</body>
</html>
prod/main.js 0 → 100644
View file @ c1a30e7c
This source diff could not be displayed because it is too large. You can view the blob instead.
prod/src_static_locale_ru_json.js 0 → 100644
View file @ c1a30e7c
"use strict";
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(self["webpackChunkboxdialer"] = self["webpackChunkboxdialer"] || []).push([["src_static_locale_ru_json"],{
/***/ "./src/static/locale/ru.json":
/*!***********************************!*\
!*** ./src/static/locale/ru.json ***!
\***********************************/
/***/ ((module) => {
eval("module.exports = JSON.parse('{\"APP_APPNAME\":\"AloVoice Dialer Ru\",\"FREE\":\"Приём входящих\",\"TOTOP\":\"У руководства\",\"OUTCALLS\":\"На исходящих\",\"HOME\":\"DND пауза\",\"TADBIR\":\"Другая причина\",\"CALL\":\"Позвонить\",\"STATUS\":\"Статус\"}');\n\n//# sourceURL=webpack://boxdialer/./src/static/locale/ru.json?");
/***/ })
}]);
\ No newline at end of file
src/components/BxMiniWidjetUi/index.jsx
View file @ c1a30e7c
...@@ -4,6 +4,7 @@ import React from 'react'; ...@@ -4,6 +4,7 @@ import React from 'react';
import BxMiniWidjetUiStyle, { DialPadIcon } from './style'; import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi'; import TimerUi from '../TimerUi';
import { Text, useTranslator } from '@eo-locale/react'; import { Text, useTranslator } from '@eo-locale/react';
import {useColorConfig} from "../../storage/globalColorConfig"
// import {useConfig} from "../../storage" // import {useConfig} from "../../storage"
const BxMiniWidjetUi = ({ const BxMiniWidjetUi = ({
widjetState, widjetState,
...@@ -15,6 +16,7 @@ const BxMiniWidjetUi = ({ ...@@ -15,6 +16,7 @@ const BxMiniWidjetUi = ({
position, position,
}) => { }) => {
const translator = useTranslator(); const translator = useTranslator();
const useColorConfigStore = useColorConfig((store) => store)
// const {state, setState} = useConfig((state) => state) // const {state, setState} = useConfig((state) => state)
const colorTypeFunc = ({ widjetState, reason }) => { const colorTypeFunc = ({ widjetState, reason }) => {
switch (`${widjetState}_${reason}`) { switch (`${widjetState}_${reason}`) {
...@@ -36,12 +38,14 @@ const BxMiniWidjetUi = ({ ...@@ -36,12 +38,14 @@ const BxMiniWidjetUi = ({
break; break;
} }
}; };
// useColorConfigStore.state.sizePixel
return ( return (
<BxMiniWidjetUiStyle <BxMiniWidjetUiStyle
// status={widjetState || ''} // status={widjetState || ''}
status={colorTypeFunc({ reason, widjetState })} status={colorTypeFunc({ reason, widjetState })}
onClick={onClick} onClick={onClick}
sizePixel={useColorConfigStore.state.sizePixel}
position={position}> position={position}>
<div className='left'> <div className='left'>
<p className='title'>{phoneNumber}</p> <p className='title'>{phoneNumber}</p>
...@@ -58,7 +62,9 @@ const BxMiniWidjetUi = ({ ...@@ -58,7 +62,9 @@ const BxMiniWidjetUi = ({
<div className='bottom'> <div className='bottom'>
<BxMiniWidjetUiStyle.StatusLine <BxMiniWidjetUiStyle.StatusLine
status={colorTypeFunc({ reason, widjetState }) || ''}> status={colorTypeFunc({ reason, widjetState }) || ''}>
<p className='verison'>v {widjetVersion}</p> {
typeof useColorConfigStore.state.showVersion === 'undefined' ? <p className='verison'>v {widjetVersion}</p> : useColorConfigStore.state.showVersion && <p className='verison'>v {widjetVersion}</p>
}
</BxMiniWidjetUiStyle.StatusLine> </BxMiniWidjetUiStyle.StatusLine>
</div> </div>
</BxMiniWidjetUiStyle> </BxMiniWidjetUiStyle>
......
src/components/BxMiniWidjetUi/style.js
View file @ c1a30e7c
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad'; import CallIcon from '@mui/icons-material/Dialpad';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import {sizePixelPixelSizeFunc} from "../../lib/sizeContext"
const colorTypeFunc = (type) => { const colorTypeFunc = (type) => {
switch (type) { switch (type) {
...@@ -60,7 +61,7 @@ const BxMiniWidjetUiStyle = styled.div` ...@@ -60,7 +61,7 @@ const BxMiniWidjetUiStyle = styled.div`
.right { .right {
} }
.title { .title {
font-size: 20px; ${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 20) }
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -81,7 +82,7 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div` ...@@ -81,7 +82,7 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div`
border-radius: 10px; border-radius: 10px;
padding: 0 1px; padding: 0 1px;
margin: 0 5px; margin: 0 5px;
font-size: 12px; ${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 12) }
${({ reason }) => ${({ reason }) =>
reason == 'free' reason == 'free'
......
src/components/CallHistoryInputDropdown/index.jsx
View file @ c1a30e7c
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Block, { Input, ModalDropDown } from './style.js'; import Block, { Input, ModalDropDown } from './style.js';
import {useColorConfig} from "../../storage/globalColorConfig"
const CallHistoryInputDropdown = ({ const CallHistoryInputDropdown = ({
inputValue, inputValue,
...@@ -12,7 +13,7 @@ const CallHistoryInputDropdown = ({ ...@@ -12,7 +13,7 @@ const CallHistoryInputDropdown = ({
}) => { }) => {
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
var elem = document.getElementById('data'); var elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const selectFuncInset = (e) => { const selectFuncInset = (e) => {
selectFunc(e); selectFunc(e);
setModal(false); setModal(false);
...@@ -59,7 +60,7 @@ const CallHistoryInputDropdown = ({ ...@@ -59,7 +60,7 @@ const CallHistoryInputDropdown = ({
</Input> </Input>
{Boolean(call_history.length) && ( {Boolean(call_history.length) && (
<> <>
<ModalDropDown visiblevalue={modal}> <ModalDropDown visiblevalue={modal} switchAnim={useColorConfigStore.state.switchAnim} >
<ModalDropDown.Inset id='data'> <ModalDropDown.Inset id='data'>
{call_history.reverse().map((value, index) => ( {call_history.reverse().map((value, index) => (
<ModalDropDown.Item <ModalDropDown.Item
...@@ -74,11 +75,6 @@ const CallHistoryInputDropdown = ({ ...@@ -74,11 +75,6 @@ const CallHistoryInputDropdown = ({
))} ))}
</ModalDropDown.Inset> </ModalDropDown.Inset>
</ModalDropDown> </ModalDropDown>
{/* <ModalDropDown.FullWindow
id='full-size'
visiblevalue={modal}
onClick={() => setModal(!modal)}
/> */}
</> </>
)} )}
</Block> </Block>
......
src/components/CallHistoryInputDropdown/style.js
View file @ c1a30e7c
...@@ -81,11 +81,11 @@ const ModalDropDown = styled.div` ...@@ -81,11 +81,11 @@ const ModalDropDown = styled.div`
background-color: #c9d5d9; background-color: #c9d5d9;
border-radius: 20px; border-radius: 20px;
padding: 15px; padding: 15px;
transition: 0.1s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
z-index: 15; z-index: 15;
bottom: 60px; bottom: 60px;
left: 50%; left: 50%;
${({ visiblevalue }) => ${({ visiblevalue }) =>
visiblevalue visiblevalue
? { ? {
......
src/components/MiniTable/style.js
View file @ c1a30e7c
...@@ -9,8 +9,13 @@ const TableBlock = styled.div` ...@@ -9,8 +9,13 @@ const TableBlock = styled.div`
` `
TableBlock.Row = styled.div` TableBlock.Row = styled.div`
width: 100%; width: 100%;
border-bottom: 1px solid #333; //border-bottom: 1px solid #333;
background-color: #d2d2d2a8;
box-sizing: border-box;
display: flex; display: flex;
border-radius: 10px;
padding: 5px;
flex-direction: column; flex-direction: column;
gap: ${({gap})=> gap ? gap : '3px'}; gap: ${({gap})=> gap ? gap : '3px'};
.child{ .child{
...@@ -25,7 +30,7 @@ TableBlock.RowInset = styled.div` ...@@ -25,7 +30,7 @@ TableBlock.RowInset = styled.div`
}} }}
.title { .title {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 14px;
font-weight: initial; font-weight: initial;
margin: 0; margin: 0;
padding: 0; padding: 0;
......
src/components/ModalNumpad/index.jsx
View file @ c1a30e7c
...@@ -3,9 +3,10 @@ ...@@ -3,9 +3,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Block, { NumberButton } from './style'; import Block, { NumberButton } from './style';
import numbers from '../../lib/numbers'; import numbers from '../../lib/numbers';
import {useColorConfig} from "../../storage/globalColorConfig"
const ModalNumpad = ({ hidden }) => { const ModalNumpad = ({ hidden }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store)
const [dtmfValue, setDtmfValue] = useState(''); const [dtmfValue, setDtmfValue] = useState('');
const selectNumberType = (value) => { const selectNumberType = (value) => {
boxDialer.sipSendDTMF(value); boxDialer.sipSendDTMF(value);
...@@ -18,7 +19,7 @@ const ModalNumpad = ({ hidden }) => { ...@@ -18,7 +19,7 @@ const ModalNumpad = ({ hidden }) => {
}; };
// 11 // 11
return ( return (
<Block visiblevalue={hidden}> <Block visiblevalue={hidden} switchAnim={useColorConfigStore.state.switchAnim}>
<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea> <Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
{numbers?.map((mapItem) => ( {numbers?.map((mapItem) => (
<NumberButton <NumberButton
......
src/components/ModalNumpad/style.js
View file @ c1a30e7c
...@@ -10,7 +10,7 @@ const Block = styled.div` ...@@ -10,7 +10,7 @@ const Block = styled.div`
bottom: 50px; bottom: 50px;
border-radius: 10px; border-radius: 10px;
left: 50%; left: 50%;
transition: 0.3s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px; grid-gap: 8px;
......
src/components/ModalPhoneNumpad/index.jsx
View file @ c1a30e7c
...@@ -11,6 +11,7 @@ import CallHistoryInputDropdown from '../CallHistoryInputDropdown'; ...@@ -11,6 +11,7 @@ import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey'; import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
import {Text, useTranslator} from '@eo-locale/react'; import {Text, useTranslator} from '@eo-locale/react';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import {useColorConfig} from "../../storage/globalColorConfig"
const ModalPhoneNumpad = ({ const ModalPhoneNumpad = ({
phoneModal, phoneModal,
...@@ -27,6 +28,7 @@ const ModalPhoneNumpad = ({ ...@@ -27,6 +28,7 @@ const ModalPhoneNumpad = ({
}) => { }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store)
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [call_history, setCall_history] = useState([]); const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0); const [numberSelectHistory, setNumberSelectHistory] = useState(0);
...@@ -183,21 +185,12 @@ const ModalPhoneNumpad = ({ ...@@ -183,21 +185,12 @@ const ModalPhoneNumpad = ({
if (exNum) setExNum(false); if (exNum) setExNum(false);
}); });
return (<ModalPhoneNumpadStyle return (<ModalPhoneNumpadStyle
switchAnim={useColorConfigStore.state?.switchAnim}
position={position} position={position}
hiddenValue={!phoneModal} hiddenValue={!phoneModal}
variant={variant} variant={variant}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
<SettingsIcon className={'settingIcon'} onClick={() => setSettingHidden(!settingHidden)}/> <SettingsIcon className={'settingIcon'} onClick={() => setSettingHidden(!settingHidden)}/>
{/* <div
style={{
background: 'red',
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100vh',
zIndex: '99999999',
}}></div> */}
<ModalPhoneNumpadStyle.InputArea> <ModalPhoneNumpadStyle.InputArea>
<CallHistoryInputDropdown <CallHistoryInputDropdown
call_history={call_history} call_history={call_history}
...@@ -212,6 +205,8 @@ const ModalPhoneNumpad = ({ ...@@ -212,6 +205,8 @@ const ModalPhoneNumpad = ({
</ModalPhoneNumpadStyle.InputArea> </ModalPhoneNumpadStyle.InputArea>
<ModalPhoneNumpadStyle.ButtonArea> <ModalPhoneNumpadStyle.ButtonArea>
{numbers?.map((mapItem) => (<NumberButton {numbers?.map((mapItem) => (<NumberButton
switchAnim={useColorConfigStore.state?.switchAnim}
sizeContext={useColorConfigStore.state.sizePixel}
onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])} onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])}
onMouseUp={() => boxDialer.stop()} onMouseUp={() => boxDialer.stop()}
onMouseOut={() => boxDialer.stop()} onMouseOut={() => boxDialer.stop()}
...@@ -240,8 +235,8 @@ const ModalPhoneNumpad = ({ ...@@ -240,8 +235,8 @@ const ModalPhoneNumpad = ({
<div className='icon'></div> <div className='icon'></div>
</div> </div>
</NumberButton.CallButton> </NumberButton.CallButton>
<NumberButton.CallButtonModal visiblevalue={exNum}> <NumberButton.CallButtonModal switchAnim={useColorConfigStore.state?.switchAnim} visiblevalue={exNum}>
<NumberButton.CallButtonModalInset> <NumberButton.CallButtonModalInset switchAnim={useColorConfigStore.state?.switchAnim}>
{extnums?.map(({number, title}, index) => (<p {extnums?.map(({number, title}, index) => (<p
key={index} key={index}
className='num_item' className='num_item'
......
src/components/ModalPhoneNumpad/style.js
View file @ c1a30e7c
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import {sizePixelPixelSizeFunc} from "../../lib/sizeContext"
const ModalPhoneNumpadStyle = styled.div` const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0 0 20px #00000047; box-shadow: 0 0 20px #00000047;
...@@ -14,7 +15,8 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -14,7 +15,8 @@ const ModalPhoneNumpadStyle = styled.div`
width: 230px; width: 230px;
position: fixed; position: fixed;
bottom: 120px; bottom: 120px;
transition: 0.2s !important; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' };
${({switchAnim})=> console.log('switchAnim: ', switchAnim)}
z-index: 9999; z-index: 9999;
${({ hiddenValue, position, variant }) => ${({ hiddenValue, position, variant }) =>
hiddenValue hiddenValue
...@@ -101,7 +103,7 @@ const NumberButton = styled.div` ...@@ -101,7 +103,7 @@ const NumberButton = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 22px; ${({sizeContext})=> sizePixelPixelSizeFunc(sizeContext, 22)}
cursor: pointer; cursor: pointer;
height: 33px; height: 33px;
position: relative; position: relative;
...@@ -111,7 +113,8 @@ const NumberButton = styled.div` ...@@ -111,7 +113,8 @@ const NumberButton = styled.div`
? 'orange' ? 'orange'
: status === 'connected' && '#a0c13d' : status === 'connected' && '#a0c13d'
: '#0000007d'}; : '#0000007d'};
transition: 0.3s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
.callIcon { .callIcon {
color: #0000007d; color: #0000007d;
} }
...@@ -166,10 +169,7 @@ NumberButton.CallButton = styled.div` ...@@ -166,10 +169,7 @@ NumberButton.CallButton = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
.icon { .icon {
/* margin: 0 auto;
padding: 0;
color: #000;
transition: 0.2s; */
margin: 0 auto; margin: 0 auto;
border: 4px solid transparent; border: 4px solid transparent;
width: 8px; width: 8px;
...@@ -210,7 +210,8 @@ NumberButton.CallButtonModal = styled.div` ...@@ -210,7 +210,8 @@ NumberButton.CallButtonModal = styled.div`
padding: 3px 3px 15px 3px; padding: 3px 3px 15px 3px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
transition: 0.1s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0); clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
${({ visiblevalue }) => ${({ visiblevalue }) =>
visiblevalue visiblevalue
...@@ -235,8 +236,7 @@ NumberButton.CallButtonModalInset = styled.div` ...@@ -235,8 +236,7 @@ NumberButton.CallButtonModalInset = styled.div`
.num_item { .num_item {
text-wrap: nowrap; text-wrap: nowrap;
color: #000; color: #000;
transition: 0.2s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' };
/* padding: 7px 4px; */
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
margin: 2px 0; margin: 2px 0;
......
src/components/setting/index.jsx
View file @ c1a30e7c
...@@ -4,25 +4,27 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; ...@@ -4,25 +4,27 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormatPaintIcon from '@mui/icons-material/FormatPaint'; import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build'; import BuildIcon from '@mui/icons-material/Build';
import FixComponent from "../settingComponents/fixComponent" import FixComponent from "../settingComponents/fixComponent"
import StyleComponent from "../settingComponents/styleComponent"
import {useColorConfig} from "../../storage/globalColorConfig"
const SettingComponent = ({ const SettingComponent = ({
settingHidden, variant, position settingHidden, variant, position
}) => { }) => {
const [settingPage, setSettingPage] = useState(0) const [settingPage, setSettingPage] = useState(0)
var elem = document.getElementById('data'); const elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const allData = [ const allData = [
{ {
id: 0, id: 2,
title: 'Test-2', title: 'Test-1',
icon: <BuildIcon className={'leftIcons'} />, icon: <FormatPaintIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock> content: <SettingMainStyle.RightSelectInfoOneBlock><StyleComponent /></SettingMainStyle.RightSelectInfoOneBlock>
}, },
{ {
id: 1, id: 1,
title: 'Test-1', title: 'Test-2',
icon: <FormatPaintIcon className={'leftIcons'} />, icon: <BuildIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>Style BoxDialer</SettingMainStyle.RightSelectInfoOneBlock> content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
} }
] ]
...@@ -33,8 +35,9 @@ const SettingComponent = ({ ...@@ -33,8 +35,9 @@ const SettingComponent = ({
console.log('elem: ', elem) console.log('elem: ', elem)
useEffect(() => { useEffect(() => {
console.log('settingPage: ', settingPage)
if(elem){ if(elem){
elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'}) elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage, behavior: typeof useColorConfigStore.state.switchAnim !== 'undefined' ? useColorConfigStore.state.switchAnim ? 'smooth' : 'auto' : 'smooth'})
} }
}, [settingPage]); }, [settingPage]);
...@@ -46,7 +49,7 @@ const SettingComponent = ({ ...@@ -46,7 +49,7 @@ const SettingComponent = ({
> >
<SettingMainStyle.LeftMenu> <SettingMainStyle.LeftMenu>
{ {
allData.map(({id, title, icon})=> <div id={id} className={`menuItem ${settingPage === id && 'active'}`} onClick={()=> changeSettingPageCountFunc(id)}> allData.map(({id, title, icon}, index)=> <div id={id} className={`menuItem ${settingPage === index && 'active'}`} onClick={()=> changeSettingPageCountFunc(index)}>
{icon} {icon}
<div className={'backgroundFilter'}></div> <div className={'backgroundFilter'}></div>
</div>) </div>)
......
src/components/settingComponents/fixComponent/index.jsx
View file @ c1a30e7c
...@@ -28,34 +28,36 @@ const FixComponent = () => { ...@@ -28,34 +28,36 @@ const FixComponent = () => {
]; ];
const tableData = [{ const tableData = [
id: '1', {
title: 'Auto answer', id: '1',
type: 'row', title: 'Auto answer',
child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}> type: 'row',
<Slider child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
aria-label="Restricted values" <Slider
defaultValue={40} aria-label="Restricted values"
step={null} defaultValue={40}
value={useColorConfigStore.state.autoAnswerSecond} step={null}
marks={marks} value={useColorConfigStore.state.autoAnswerSecond || true}
onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})} marks={marks}
/> onChange={(e) => useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
</div>, />
inputTag: <Switch </div>,
size={'small'} inputTag: <Switch
checked={useColorConfigStore.state.autoAnswer} size={'small'}
onChange={(e) => { checked={useColorConfigStore.state.autoAnswer}
return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked}) onChange={(e) => {
}} return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
}}
/>, />,
}] }
]
return (<Block> return (<Block>
{/*<p>Text</p>*/} {/*<p>Text</p>*/}
{/*<Switch size={'small'} defaultChecked />*/} {/*<Switch size={'small'} defaultChecked />*/}
<MiniTable data={tableData}/> <MiniTable data={tableData}/>
</Block>) </Block>)
} }
export default FixComponent export default FixComponent
src/components/settingComponents/fixComponent/style.js
View file @ c1a30e7c
import styled from 'styled-components' import styled from 'styled-components'
const Block = styled.div` const Block = styled.div`
margin: 5px;
` `
export default Block export default Block
src/components/settingComponents/styleComponent/index.jsx 0 → 100644
View file @ c1a30e7c
import React from 'react'
import StyleBlock from "./style"
import MiniTable from "../../MiniTable"
import Checkbox from '@mui/material/Checkbox';
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from "@mui/material/Slider"
const StyleComponent = () => {
const useColorConfigStore = useColorConfig((store) => store)
const marks = [{
value: 0, label: <span style={{fontSize: 12}}>none</span>,
}, {
value: 25, label: <span style={{fontSize: 12}}>+2px</span>,
}, {
value: 50, label: <span style={{fontSize: 12}}>+3px</span>,
}, {
value: 75, label: <span style={{fontSize: 12}}>+4px</span>,
}, {
value: 100, label: <span style={{fontSize: 12}}>+5px</span>,
}];
const tableData = [{
id: '1', title: 'Show version', type: 'row', inputTag: <Checkbox
defaultChecked={typeof useColorConfigStore.state.showVersion === 'undefined' ? true : useColorConfigStore.state.showVersion}
onChange={(e) => useColorConfigStore.setColor({name: 'showVersion', value: e.target.checked})}/>
}, {
id: '2',
title: 'Transparent of Boxdialer',
type: 'column',
child: <div style={{padding: '0 20px 0 15px'}}><Slider
aria-label="Restricted values"
defaultValue={50}
step={null}
value={typeof useColorConfigStore.state.sizePixel === 'undefined' ? true : useColorConfigStore.state.sizePixel}
marks={marks}
onChange={(e) => useColorConfigStore.setColor({name: 'sizePixel', value: e.target.value})}
/></div>
}, {
id: '1', title: 'Switch On/Off anm.', type: 'row', inputTag: <Checkbox
defaultChecked={typeof useColorConfigStore.state.switchAnim === 'undefined' ? true : useColorConfigStore.state.switchAnim}
onChange={(e) => useColorConfigStore.setColor({name: 'switchAnim', value: e.target.checked})}/>
},]
return (<StyleBlock>
<MiniTable data={tableData} gap={'10px'}/>
</StyleBlock>)
}
export default StyleComponent
src/components/settingComponents/styleComponent/style.js 0 → 100644
View file @ c1a30e7c
import styled from 'styled-components'
const StyleBlock = styled.div`
`
export default StyleBlock
src/lib/sizeContext.js 0 → 100644
View file @ c1a30e7c
export const sizePixelPixelSizeFunc = (value, defaultValue) => {
// switch (value) {
// case 33: return {fontSize: defaultValue + 1}
// case 66: return {fontSize: defaultValue + 2}
// case 100: return {fontSize: defaultValue + 3}
// default: return {fontSize: defaultValue}
// }
switch (value) {
case 25: return {fontSize: defaultValue + 2}
case 50: return {fontSize: defaultValue + 3}
case 75: return {fontSize: defaultValue + 4}
case 100: return {fontSize: defaultValue + 5}
default: return {fontSize: defaultValue}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023