Commit 935769dd authored by Muhammadali's avatar Muhammadali

update version

parent 8f82117d
...@@ -13,6 +13,8 @@ const BxMiniWidjetUi = ({ ...@@ -13,6 +13,8 @@ const BxMiniWidjetUi = ({
onClick, onClick,
position, position,
}) => { }) => {
console.log(reason, 'reason');
return ( return (
<BxMiniWidjetUiStyle <BxMiniWidjetUiStyle
status={widjetState} status={widjetState}
...@@ -21,7 +23,7 @@ const BxMiniWidjetUi = ({ ...@@ -21,7 +23,7 @@ const BxMiniWidjetUi = ({
<div className='left'> <div className='left'>
<p className='title'>{phoneNumber}</p> <p className='title'>{phoneNumber}</p>
<p> <p>
<span className='status'>{widjetState}</span> <span className='status'>{reason}</span>
<TimerUi reason={reason} time={leftTime} /> <TimerUi reason={reason} time={leftTime} />
</p> </p>
</div> </div>
......
...@@ -30,7 +30,7 @@ const BxMiniWidjetUiStyle = styled.div` ...@@ -30,7 +30,7 @@ const BxMiniWidjetUiStyle = styled.div`
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
${({ position }) => boxDialerWidjetPosition[position].block} ${({ position }) => boxDialerWidjetPosition.bxmini[position].block}
.left { .left {
display: flex; display: flex;
...@@ -53,14 +53,7 @@ const BxMiniWidjetUiStyle = styled.div` ...@@ -53,14 +53,7 @@ const BxMiniWidjetUiStyle = styled.div`
padding: 0 3px; padding: 0 3px;
margin: 0 5px; margin: 0 5px;
font-size: 12px; font-size: 12px;
background-color: ${({ status }) => color: #ffffffab;
status === 'pending'
? 'orange'
: status === 'connected'
? '#a0c13d'
: '#ccc'};
color: ${({ status }) =>
status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
} }
`; `;
BxMiniWidjetUiStyle.StatusLine = styled.div` BxMiniWidjetUiStyle.StatusLine = styled.div`
......
...@@ -21,7 +21,7 @@ const DefaultWidjetStyle = styled.div` ...@@ -21,7 +21,7 @@ const DefaultWidjetStyle = styled.div`
z-index: 999; z-index: 999;
position: fixed; position: fixed;
${({ position }) => boxDialerWidjetPosition[position].block} ${({ position }) => boxDialerWidjetPosition.defaultWidjet[position].block}
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 1fr 30px; grid-template-columns: 1fr 30px;
......
...@@ -15,6 +15,7 @@ const ModalPhoneNumpad = ({ ...@@ -15,6 +15,7 @@ const ModalPhoneNumpad = ({
onSetDnd, onSetDnd,
dynamicValue, dynamicValue,
position, position,
variant,
}) => { }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
...@@ -124,6 +125,7 @@ const ModalPhoneNumpad = ({ ...@@ -124,6 +125,7 @@ const ModalPhoneNumpad = ({
<ModalPhoneNumpadStyle <ModalPhoneNumpadStyle
position={position} position={position}
hidden={!phoneModal} hidden={!phoneModal}
variant={variant}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
<ModalPhoneNumpadStyle.InputArea> <ModalPhoneNumpadStyle.InputArea>
<Input disabled type='text' value={inputValue} /> <Input disabled type='text' value={inputValue} />
......
...@@ -10,10 +10,10 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -10,10 +10,10 @@ const ModalPhoneNumpadStyle = styled.div`
bottom: 120px; bottom: 120px;
transition: 0.2s; transition: 0.2s;
z-index: 999; z-index: 999;
${({ hidden, position }) => ${({ hidden, position, variant }) =>
hidden hidden
? boxDialerWidjetPosition[position].numpad.hidden ? boxDialerWidjetPosition[variant][position].numpad.hidden
: boxDialerWidjetPosition[position].numpad.seen} : boxDialerWidjetPosition[variant][position].numpad.seen}
background-color: #c9d5d9; background-color: #c9d5d9;
border-radius: 20px; border-radius: 20px;
......
/** @format */ /** @format */
export const boxDialerWidjetPosition = { export const boxDialerWidjetPosition = {
bottomLeft: { defaultWidjet: {
block: { bottomLeft: {
bottom: '30px', block: {
left: '50px', bottom: '30px',
left: '50px',
},
numpad: {
hidden: {
left: '-300px',
},
seen: {
left: '25px',
},
},
}, },
numpad: { bottomCenter: {
hidden: { block: {
left: '-300px', transform: 'translate(-50%, 0)',
bottom: '30px',
left: '50%',
}, },
seen: { numpad: {
left: '25px', hidden: {
bottom: '-300px',
left: '50%',
transform: 'translate(-50%, 0)',
},
seen: {
bottom: '120px',
left: '50%',
transform: 'translate(-50%, 0)',
},
},
},
bottomRight: {
block: {
bottom: '30px',
left: 'auto',
right: '50px',
},
numpad: {
hidden: {
left: 'auto',
right: '-300px',
},
seen: {
left: 'auto',
right: '25px',
},
}, },
}, },
}, },
bottomCenter: {
block: { // BX mini UI
transform: 'translate(-50%, 0)', bxmini: {
bottom: '30px', bottomLeft: {
left: '50%', block: {
bottom: '30px',
left: '50px',
},
numpad: {
hidden: {
left: '-300px',
},
seen: {
left: '25px',
},
},
}, },
numpad: { bottomCenter: {
hidden: { block: {
bottom: '-300px',
left: '50%',
transform: 'translate(-50%, 0)', transform: 'translate(-50%, 0)',
}, bottom: '30px',
seen: {
bottom: '120px',
left: '50%', left: '50%',
transform: 'translate(-50%, 0)', },
numpad: {
hidden: {
bottom: '-300px',
left: '50%',
transform: 'translate(-50%, 0)',
},
seen: {
bottom: '120px',
left: '50%',
transform: 'translate(-50%, 0)',
},
}, },
}, },
}, bottomRight: {
bottomRight: { block: {
block: { bottom: '0',
bottom: '30px',
left: 'auto',
right: '50px',
},
numpad: {
hidden: {
left: 'auto', left: 'auto',
right: '-300px', right: '0',
}, },
seen: { numpad: {
left: 'auto', hidden: {
right: '25px', left: 'auto',
right: '-300px',
},
seen: {
left: 'auto',
right: '25px',
},
}, },
}, },
}, },
......
...@@ -99,6 +99,7 @@ const Root = ({ data, onSetDnd }) => { ...@@ -99,6 +99,7 @@ const Root = ({ data, onSetDnd }) => {
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
dynamicValue={dynamicValue} dynamicValue={dynamicValue}
onSetDnd={onSetDnd} onSetDnd={onSetDnd}
variant={data.variant}
position={data.position || 'bottomLeft'} position={data.position || 'bottomLeft'}
/> />
......
...@@ -9,7 +9,9 @@ module.exports = { ...@@ -9,7 +9,9 @@ module.exports = {
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
}, },
// devServer: {
// port: 80,
// },
module: { module: {
rules: [ rules: [
{ {
......
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