keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: themed all of the call ui

Browse Source
pull/2522/head
William Grant 3 years ago
parent f6ca690c88
commit 1d956535b8
10 changed files with 189 additions and 63 deletions
Show Stats Download Patch File Download Diff File

13
ts/components/SplitViewContainer.tsx
Unescape Escape View File

@ -7,7 +7,7 @@ type SplitViewProps = {
disableTop: boolean;
};
const SlyledSplitView = styled.div`
const StyledSplitView = styled.div`
height: 100%;
display: flex;
flex-direction: column;
@ -17,15 +17,15 @@ const Divider = styled.div`
width: 100%;
cursor: row-resize;
height: 5px;
background-color: var(--background-primary-color);
margin-top: 2px;
background-color: var(--in-call-container-background-color);
padding-top: 2px;
`;
const DividerHandle = styled.div`
width: 10%;
height: 5px;
cursor: row-resize;
background-color: var(--text-primary-color);
background-color: var(--text-secondary-color);
flex-shrink: 0;
position: relative;
left: 50%;
@ -36,6 +36,7 @@ const StyledTop = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 1px solid var(--border-color);
`;
const TopSplitViewPanel = ({
@ -125,7 +126,7 @@ export const SplitViewContainer: React.FunctionComponent<SplitViewProps> = ({
});
return (
<SlyledSplitView ref={splitPaneRef}>
<StyledSplitView ref={splitPaneRef}>
{!disableTop && (
<TopSplitViewPanel topHeight={topHeight} setTopHeight={setTopHeight}>
{top}
@ -135,6 +136,6 @@ export const SplitViewContainer: React.FunctionComponent<SplitViewProps> = ({
</TopSplitViewPanel>
)}
{bottom}
</SlyledSplitView>
</StyledSplitView>
);
};

97
ts/components/calling/CallButtons.tsx
Unescape Escape View File

@ -58,11 +58,11 @@ const audioOutputTriggerId = 'audio-output-menu-trigger-id';
export const VideoInputButton = ({
currentConnectedCameras,
localStreamVideoIsMuted,
hideArrowIcon = false,
isFullScreen = false,
}: {
currentConnectedCameras: Array<InputItem>;
localStreamVideoIsMuted: boolean;
hideArrowIcon?: boolean;
isFullScreen?: boolean;
}) => {
return (
<>
@ -75,7 +75,7 @@ export const VideoInputButton = ({
onArrowClick={e => {
showVideoInputMenu(currentConnectedCameras, e);
}}
hidePopoverArrow={hideArrowIcon}
isFullScreen={isFullScreen}
/>
<VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />
@ -127,11 +127,11 @@ const showAudioInputMenu = (
export const AudioInputButton = ({
currentConnectedAudioInputs,
isAudioMuted,
hideArrowIcon = false,
isFullScreen = false,
}: {
currentConnectedAudioInputs: Array<InputItem>;
isAudioMuted: boolean;
hideArrowIcon?: boolean;
isFullScreen?: boolean;
}) => {
return (
<>
@ -144,7 +144,7 @@ export const AudioInputButton = ({
onArrowClick={e => {
showAudioInputMenu(currentConnectedAudioInputs, e);
}}
hidePopoverArrow={hideArrowIcon}
isFullScreen={isFullScreen}
/>
<AudioInputMenu triggerId={audioTriggerId} audioInputsList={currentConnectedAudioInputs} />
@ -196,11 +196,11 @@ const showAudioOutputMenu = (
export const AudioOutputButton = ({
currentConnectedAudioOutputs,
isAudioOutputMuted,
hideArrowIcon = false,
isFullScreen = false,
}: {
currentConnectedAudioOutputs: Array<InputItem>;
isAudioOutputMuted: boolean;
hideArrowIcon?: boolean;
isFullScreen?: boolean;
}) => {
return (
<>
@ -213,7 +213,7 @@ export const AudioOutputButton = ({
onArrowClick={e => {
showAudioOutputMenu(currentConnectedAudioOutputs, e);
}}
hidePopoverArrow={hideArrowIcon}
isFullScreen={isFullScreen}
/>
<AudioOutputMenu
@ -224,6 +224,19 @@ export const AudioOutputButton = ({
);
};
const StyledCallActionButton = styled.div<{ isFullScreen: boolean }>`
.session-icon-button {
background-color: var(--call-buttons-action-background-color);
border-radius: 50%;
transition-duration: var(--default-duration);
${props => props.isFullScreen && 'opacity: 0.4;'}
&:hover {
background-color: var(--call-buttons-action-background-hover-color);
${props => props.isFullScreen && 'opacity: 1;'}
}
}
`;
const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
const dispatch = useDispatch();
@ -236,20 +249,21 @@ const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) =>
};
return (
<SessionIconButton
iconSize={60}
iconPadding="20px"
iconType="fullscreen"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={showInFullScreen}
iconColor="var(--black-color)"
margin="10px"
/>
<StyledCallActionButton isFullScreen={isFullScreen}>
<SessionIconButton
iconSize={60}
iconPadding="20px"
iconType="fullscreen"
borderRadius="50%"
onClick={showInFullScreen}
iconColor="var(--call-buttons-action-icon-color)"
margin="10px"
/>
</StyledCallActionButton>
);
};
export const HangUpButton = () => {
export const HangUpButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey);
const handleEndCall = async () => {
@ -260,16 +274,17 @@ export const HangUpButton = () => {
};
return (
<SessionIconButton
iconSize={60}
iconPadding="20px"
iconType="hangup"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={handleEndCall}
iconColor="var(--red-color)"
margin="10px"
/>
<StyledCallActionButton isFullScreen={isFullScreen}>
<SessionIconButton
iconSize={60}
iconPadding="20px"
iconType="hangup"
iconColor="var(--danger-color)"
borderRadius="50%"
onClick={handleEndCall}
margin="10px"
/>
</StyledCallActionButton>
);
};
@ -324,7 +339,7 @@ const handleSpeakerToggle = async (
}
};
const StyledCallWindowControls = styled.div<{ makeVisible: boolean }>`
const StyledCallWindowControls = styled.div<{ isFullScreen: boolean; makeVisible: boolean }>`
position: absolute;
bottom: 0px;
@ -340,9 +355,17 @@ const StyledCallWindowControls = styled.div<{ makeVisible: boolean }>`
transition: all 0.25s ease-in-out;
display: flex;
justify-content: center;
opacity: ${props => (props.makeVisible ? 1 : 0)};
${props =>
props.isFullScreen &&
`
opacity: 0.4;
&:hover {
opacity: 1;
}
`}
`;
export const CallWindowControls = ({
@ -384,25 +407,25 @@ export const CallWindowControls = ({
};
}, [isFullScreen]);
return (
<StyledCallWindowControls makeVisible={makeVisible}>
<StyledCallWindowControls isFullScreen={isFullScreen} makeVisible={makeVisible}>
{!remoteStreamVideoIsMuted && <ShowInFullScreenButton isFullScreen={isFullScreen} />}
<VideoInputButton
currentConnectedCameras={currentConnectedCameras}
localStreamVideoIsMuted={localStreamVideoIsMuted}
hideArrowIcon={isFullScreen}
isFullScreen={isFullScreen}
/>
<AudioInputButton
currentConnectedAudioInputs={currentConnectedAudioInputs}
isAudioMuted={isAudioMuted}
hideArrowIcon={isFullScreen}
isFullScreen={isFullScreen}
/>
<AudioOutputButton
currentConnectedAudioOutputs={currentConnectedAudioOutputs}
isAudioOutputMuted={isAudioOutputMuted}
hideArrowIcon={isFullScreen}
isFullScreen={isFullScreen}
/>
<HangUpButton />
<HangUpButton isFullScreen={isFullScreen} />
</StyledCallWindowControls>
);
};

3
ts/components/calling/DraggableCallContainer.tsx
Unescape Escape View File

@ -15,13 +15,14 @@ import { SectionType } from '../../state/ducks/section';
export const DraggableCallWindow = styled.div`
position: absolute;
z-index: 9;
box-shadow: 0px 0px 10px 0px var(--black-color);
box-shadow: var(--modal-drop-shadow);
max-height: 300px;
width: 12vw;
display: flex;
flex-direction: column;
background-color: var(--modal-background-content-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
`;
export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

6
ts/components/calling/InConversationCallContainer.tsx
Unescape Escape View File

@ -34,7 +34,7 @@ const InConvoCallWindow = styled.div`
padding: 1rem;
display: flex;
background-color: hsl(0, 0%, 15.7%);
background-color: var(--in-call-container-background-color);
flex-shrink: 1;
min-height: 80px;
@ -68,8 +68,8 @@ const StyledCenteredLabel = styled.div`
transform: translateX(-50%);
height: min-content;
white-space: nowrap;
color: var(--white-color);
text-shadow: 0px 0px 8px var(--white-color);
color: var(--in-call-container-text-color);
text-shadow: var(--in-call-container-text-shadow);
z-index: 5;
`;

56
ts/components/icon/DropDownAndToggleButton.tsx
Unescape Escape View File

@ -7,19 +7,38 @@ type SProps = {
onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
onMainButtonClick: (e: React.MouseEvent<HTMLDivElement>) => void;
isMuted?: boolean;
hidePopoverArrow?: boolean;
isFullScreen?: boolean;
iconType: 'microphone' | 'camera' | 'volume';
};
const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'var(--white-color)')};
color: ${props => (props.isMuted ? 'var(--white-color)' : 'var(--black-color)')};
const StyledRoundedButton = styled.div<{ isFullScreen: boolean; isMuted: boolean }>`
border-radius: 50%;
cursor: pointer;
transition-duration: var(--default-duration);
background-color: ${props =>
props.isMuted
? 'var(--call-buttons-background-disabled-color)'
: props.isFullScreen
? 'var(--call-buttons-action-background-color)'
: 'var(--call-buttons-background-color)'};
color: ${props =>
props.isMuted
? 'var(--call-buttons-icon-disabled-color)'
: props.isFullScreen
? 'var(--call-buttons-action-icon-color)'
: 'var(--call-buttons-icon-color)'};
transition-duration: 0.25s;
${props => props.isFullScreen && 'opacity: 0.4;'}
&:hover {
opacity: 1;
background-color: ${props =>
props.isFullScreen
? 'var(--call-buttons-action-background-hover-color)'
: 'var(--call-buttons-background-hover-color)'};
color: ${props =>
props.isFullScreen
? 'var(--call-buttons-action-icon-color)'
: 'var(--call-buttons-icon-color)'};
${props => props.isFullScreen && 'opacity: 1;'}
}
`;
@ -27,11 +46,6 @@ const StyledContainer = styled(StyledRoundedButton)`
width: 60px;
height: 60px;
margin: 10px;
opacity: 0.4;
&:hover {
opacity: 1;
}
`;
const StyledMainIcon = styled.div`
@ -44,7 +58,13 @@ const StyledArrowIcon = styled(StyledRoundedButton)`
position: relative;
top: -35%;
right: -65%;
box-shadow: 0 0 4px 0 #b4b4b4;
background-color: var(--call-buttons-background-color);
color: var(--call-buttons-dropdown-color);
box-shadow: var(--call-buttons-dropdown-shadow);
&:hover {
background-color: var(--call-buttons-background-hover-color);
}
`;
const CameraIcon = (
@ -66,7 +86,7 @@ const MicrophoneIcon = (
);
export const DropDownAndToggleButton = (props: SProps) => {
const { iconType, hidePopoverArrow, onArrowClick, onMainButtonClick, isMuted } = props;
const { iconType, isFullScreen = false, onArrowClick, onMainButtonClick, isMuted } = props;
const arrowClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
onArrowClick(e);
@ -81,10 +101,14 @@ export const DropDownAndToggleButton = (props: SProps) => {
iconType === 'microphone' ? MicrophoneIcon : iconType === 'camera' ? CameraIcon : SpeakerIcon;
return (
<StyledContainer isMuted={isMuted || false}>
<StyledContainer
className="session-call-button"
isFullScreen={isFullScreen}
isMuted={isMuted || false}
>
<StyledMainIcon onClick={mainButtonClickHandler}>{iconToRender}</StyledMainIcon>
{!hidePopoverArrow && (
<StyledArrowIcon isMuted={false} onClick={arrowClickHandler}>
{!isFullScreen && (
<StyledArrowIcon isFullScreen={isFullScreen} isMuted={false} onClick={arrowClickHandler}>
<svg viewBox="-200 -200 640 640" fill="currentColor">
<path d="M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z" />
</svg>

15
ts/themes/classicDark.ts
Unescape Escape View File

@ -139,6 +139,21 @@ const classicDark: ThemeColorVariables = {
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
'--input-border-color': 'var(--border-color)',
'--in-call-container-background-color': 'var(--background-primary-color)',
'--in-call-container-text-color': 'var(--white-color)',
'--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
'--call-buttons-background-color': THEMES.CLASSIC_DARK.COLOR3,
'--call-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,
'--call-buttons-background-disabled-color': THEMES.CLASSIC_DARK.COLOR2,
'--call-buttons-action-background-color': 'var(--white-color)',
'--call-buttons-action-background-hover-color': `rgba(${hexColorToRGB(COLORS.WHITE)}, 0.87)`,
'--call-buttons-action-icon-color': 'var(--black-color)',
'--call-buttons-icon-color': 'var(--text-primary-color)',
'--call-buttons-icon-disabled-color': 'var(--text-primary-color)',
'--call-buttons-dropdown-color': 'var(--text-primary-color)',
'--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
};
export default classicDark;

15
ts/themes/classicLight.ts
Unescape Escape View File

@ -139,6 +139,21 @@ const classicLight: ThemeColorVariables = {
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
'--input-border-color': 'var(--border-color)',
'--in-call-container-background-color': 'var(--background-primary-color)',
'--in-call-container-text-color': 'var(--white-color)',
'--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
'--call-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR3,
'--call-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
'--call-buttons-background-disabled-color': THEMES.CLASSIC_LIGHT.COLOR5,
'--call-buttons-action-background-color': THEMES.CLASSIC_LIGHT.COLOR4,
'--call-buttons-action-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3,
'--call-buttons-action-icon-color': 'var(--black-color)',
'--call-buttons-icon-color': 'var(--text-primary-color)',
'--call-buttons-icon-disabled-color': 'var(--disabled-color)',
'--call-buttons-dropdown-color': 'var(--text-primary-color)',
'--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
};
export default classicLight;

15
ts/themes/oceanDark.ts
Unescape Escape View File

@ -139,6 +139,21 @@ const oceanDark: ThemeColorVariables = {
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
'--input-border-color': 'var(--border-color)',
'--in-call-container-background-color': 'var(--background-primary-color)',
'--in-call-container-text-color': 'var(--white-color)',
'--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
'--call-buttons-background-color': THEMES.OCEAN_DARK.COLOR4,
'--call-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
'--call-buttons-background-disabled-color': THEMES.OCEAN_DARK.COLOR3,
'--call-buttons-action-background-color': 'var(--white-color)',
'--call-buttons-action-background-hover-color': `rgba(${hexColorToRGB(COLORS.WHITE)}, 0.87)`,
'--call-buttons-action-icon-color': 'var(--black-color)',
'--call-buttons-icon-color': THEMES.OCEAN_DARK.COLOR7!,
'--call-buttons-icon-disabled-color': THEMES.OCEAN_DARK.COLOR7!,
'--call-buttons-dropdown-color': 'var(--text-primary-color)',
'--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
};
export default oceanDark;

15
ts/themes/oceanLight.ts
Unescape Escape View File

@ -139,6 +139,21 @@ const oceanLight: ThemeColorVariables = {
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
'--input-border-color': 'var(--border-color)',
'--in-call-container-background-color': 'var(--background-primary-color)',
'--in-call-container-text-color': 'var(--white-color)',
'--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
'--call-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR4,
'--call-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
'--call-buttons-background-disabled-color': THEMES.OCEAN_LIGHT.COLOR5,
'--call-buttons-action-background-color': THEMES.OCEAN_LIGHT.COLOR4,
'--call-buttons-action-background-hover-color': THEMES.OCEAN_LIGHT.COLOR5,
'--call-buttons-action-icon-color': 'var(--black-color)',
'--call-buttons-icon-color': 'var(--text-primary-color)',
'--call-buttons-icon-disabled-color': 'var(--disabled-color)',
'--call-buttons-dropdown-color': 'var(--text-primary-color)',
'--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
};
export default oceanLight;

17
ts/themes/variableColors.tsx
Unescape Escape View File

@ -172,6 +172,23 @@ export type ThemeColorVariables = {
'--input-text-placeholder-color': string;
'--input-text-color': string;
'--input-border-color': string;
/* In Call Container */
'--in-call-container-background-color': string;
'--in-call-container-text-color': string;
'--in-call-container-text-shadow': string;
/* Call Buttons */
'--call-buttons-background-color': string;
'--call-buttons-background-hover-color': string;
'--call-buttons-background-disabled-color': string;
'--call-buttons-action-background-color': string;
'--call-buttons-action-background-hover-color': string;
'--call-buttons-action-icon-color': string;
'--call-buttons-icon-color': string;
'--call-buttons-icon-disabled-color': string;
'--call-buttons-dropdown-color': string;
'--call-buttons-dropdown-shadow': string;
};
export function loadThemeColors(variables: ThemeColorVariables) {

Write Preview
Loading…
Cancel
Save