Commit 71744290 authored by Muhammadali's avatar Muhammadali

update-

parent e82c43ee
...@@ -12,7 +12,10 @@ const DropDown = ({ reasons, reason, selectFunc }) => { ...@@ -12,7 +12,10 @@ const DropDown = ({ reasons, reason, selectFunc }) => {
className='nocopy'> className='nocopy'>
<DropDownStyle.Text> <DropDownStyle.Text>
{/* <Text id={reason.toUpperCase()} /> */} {/* <Text id={reason.toUpperCase()} /> */}
{translator.translate(reason.toUpperCase())} <span>{translator.translate('STATUS')}: </span>
<span className='status'>
{translator.translate(reason.toUpperCase())}
</span>
</DropDownStyle.Text> </DropDownStyle.Text>
<DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}> <DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}>
{reasons.map((value, index) => ( {reasons.map((value, index) => (
......
...@@ -3,11 +3,12 @@ ...@@ -3,11 +3,12 @@
import styled from 'styled-components'; import styled from 'styled-components';
const DropDownStyle = styled.div` const DropDownStyle = styled.div`
grid-column: 1/4;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
position: relative; position: relative;
`; `;
DropDownStyle.Text = styled.div` DropDownStyle.Text = styled.div`
...@@ -15,6 +16,9 @@ DropDownStyle.Text = styled.div` ...@@ -15,6 +16,9 @@ DropDownStyle.Text = styled.div`
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
.status {
color: orange;
}
`; `;
DropDownStyle.Window = styled.div` DropDownStyle.Window = styled.div`
display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')}; display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')};
...@@ -29,7 +33,7 @@ DropDownStyle.DropDown = styled.div` ...@@ -29,7 +33,7 @@ DropDownStyle.DropDown = styled.div`
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
bottom: 40px; bottom: 25px;
left: 50%; left: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
...@@ -9,6 +9,7 @@ import DropDown from '../DropDown'; ...@@ -9,6 +9,7 @@ import DropDown from '../DropDown';
import { CommentsDisabledOutlined } from '@mui/icons-material'; import { CommentsDisabledOutlined } from '@mui/icons-material';
import CallHistoryInputDropdown from '../CallHistoryInputDropdown'; 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';
const ModalPhoneNumpad = ({ const ModalPhoneNumpad = ({
phoneModal, phoneModal,
modalState, modalState,
...@@ -26,7 +27,7 @@ const ModalPhoneNumpad = ({ ...@@ -26,7 +27,7 @@ const ModalPhoneNumpad = ({
const [call_history, setCall_history] = useState([]); const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0); const [numberSelectHistory, setNumberSelectHistory] = useState(0);
const [exNum, setExNum] = useState(); const [exNum, setExNum] = useState();
const translator = useTranslator();
useEffect(() => { useEffect(() => {
let currentCalls = localStorage.getItem('callhistory') let currentCalls = localStorage.getItem('callhistory')
? JSON.parse(localStorage.getItem('callhistory')) ? JSON.parse(localStorage.getItem('callhistory'))
...@@ -255,20 +256,14 @@ const ModalPhoneNumpad = ({ ...@@ -255,20 +256,14 @@ const ModalPhoneNumpad = ({
))} ))}
{!modalState.bool ? ( {!modalState.bool ? (
<> <>
<NumberButton className='nocopy'>
<DropDown
selectFunc={onSetDnd}
reasons={reasons}
reason={reason}
/>
</NumberButton>
<NumberButton <NumberButton
style={{ gridColumn: '2/4' }} style={{ gridColumn: '1/4' }}
status={dynamicValue} status={dynamicValue}
type={'call_button'}> type={'call_button'}>
<NumberButton.CallButton exNum={exNum}> <NumberButton.CallButton exNum={exNum}>
<div className='left' onClick={() => callButton()}> <div className='left' onClick={() => callButton()}>
<CallIcon className='callIcon' /> <CallIcon className='callIcon' />
<p className='call_text'>{translator.translate('CALL')}</p>
</div> </div>
<div className='right' onClick={() => setExNum(!exNum)}> <div className='right' onClick={() => setExNum(!exNum)}>
<KeyboardControlKeyIcon className='icon' /> <KeyboardControlKeyIcon className='icon' />
...@@ -298,6 +293,7 @@ const ModalPhoneNumpad = ({ ...@@ -298,6 +293,7 @@ const ModalPhoneNumpad = ({
<div style={{ height: '33px' }}></div> <div style={{ height: '33px' }}></div>
</> </>
)} )}
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
</ModalPhoneNumpadStyle.ButtonArea> </ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle> </ModalPhoneNumpadStyle>
); );
......
...@@ -105,7 +105,9 @@ const NumberButton = styled.div` ...@@ -105,7 +105,9 @@ const NumberButton = styled.div`
: status === 'connected' && '#a0c13d' : status === 'connected' && '#a0c13d'
: '#0000007d'}; : '#0000007d'};
transition: 0.3s; transition: 0.3s;
.callIcon {
color: #0000007d;
}
:hover { :hover {
.callIcon { .callIcon {
animation: tilt-shaking 0.5s; animation: tilt-shaking 0.5s;
...@@ -133,30 +135,42 @@ NumberButton.CallButton = styled.div` ...@@ -133,30 +135,42 @@ NumberButton.CallButton = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: repeat(1fr, 4); grid-template-columns: repeat(1fr, 3);
position: relative; position: relative;
.left { .left {
grid-column: 1/4; grid-column: 1/3;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px;
}
.call_text {
color: #0000007d;
padding: 0;
margin: 0;
font-size: 16px;
} }
.right { .right {
grid-column: 4/5; grid-column: 3/4;
border-top-right-radius: 20px; border-top-right-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
background-color: #d9d9d9;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
.icon { .icon {
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
color: #000; color: #000;
transition: 0.2s; transition: 0.2s;
transform: ${({ exNum }) => (exNum ? 'rotate(177deg)' : 'rotate(0deg)')}; transform: ${({ exNum }) => (exNum ? 'rotate(177deg)' : 'rotate(0deg)')};
} }
::before {
content: '';
background: #0000007d;
width: 1px;
height: 70%;
}
} }
`; `;
NumberButton.CallButtonModal = styled.div` NumberButton.CallButtonModal = styled.div`
...@@ -170,6 +184,7 @@ NumberButton.CallButtonModal = styled.div` ...@@ -170,6 +184,7 @@ NumberButton.CallButtonModal = styled.div`
border-radius: 10px; border-radius: 10px;
padding: 3px; padding: 3px;
transition: 0.1s; transition: 0.1s;
${({ visiblevalue }) => ${({ visiblevalue }) =>
visiblevalue visiblevalue
? { ? {
......
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