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

feat: made more progress with left pane and left more comments

This commit is contained in:
William Grant 2022-09-12 16:36:30 +10:00
parent 2cb7e72f68
commit 9ee89fd099
20 changed files with 134 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
stylesheets/_modules.scss
View File

@ -894,7 +894,7 @@
.module-typing-animation__dot {
border-radius: 50%;
background-color: var(--color-gray-color);
background-color: var(--text-secondary-color);
height: 6px;
width: 6px;
@ -903,7 +903,7 @@
.module-typing-animation__dot--light {
border-radius: 50%;
background-color: var(--color-white-color);
background-color: var(--background-primary-color);
height: 6px;
width: 6px;

11
stylesheets/_theme_dark.scss
View File

@ -361,11 +361,12 @@
// Module: Message Search Result
.module-message-search-result {
&:hover {
background-color: var(--color-dark-gray-color);
}
}
// TODO Theming remove
// .module-message-search-result {
// &:hover {
// background-color: var(--color-dark-gray-color);
// }
// }
.module-message__link-preview__icon-container__circle-background {
background-color: var(--color-light-gray-color);

1
ts/components/SessionContextMenuContainer.tsx
View File

@ -7,6 +7,7 @@ export const SessionContextMenuContainer = styled.div.attrs({
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
/* TODO Theming Update */
box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2),
0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important;
background-color: var(--color-received-message-background);

3
ts/components/SessionSearchInput.tsx
View File

@ -8,6 +8,7 @@ import { getOverlayMode } from '../state/selectors/section';
import { cleanSearchTerm } from '../util/cleanSearchTerm';
import { SessionIconButton } from './icon';
// TODO Theming possibly update to use Search Bar Component Colors
const StyledSearchInput = styled.div`
height: var(--search-input-height);
width: 100%;
@ -30,7 +31,7 @@ const StyledInput = styled.input`
font-family: var(--font-default);
text-overflow: ellipsis;
background: none;
color: var(--color-text);
color: var(--conversation-tab-text-color);
&:focus {
outline: none !important;

2
ts/components/basic/MessageBodyHighlight.tsx
View File

@ -15,7 +15,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key, isGroup }) => (
const SnippetHighlight = styled.span`
font-weight: bold;
color: var(--color-text);
color: var(--text-primary-color);
`;
const renderEmoji = ({

15
ts/components/button/MenuButton.tsx
View File

@ -13,7 +13,7 @@ const StyledMenuButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-color);
background: var(--menu-button-background-color);
border-radius: 2px;
width: 51px;
@ -23,10 +23,16 @@ const StyledMenuButton = styled.button`
transition: var(--default-duration);
:hover {
background: var(--hover-bg-color);
background: var(--menu-button-background-hover-color);
}
`;
const StyledMenuInput = styled.input`
opacity: 0;
width: 0;
height: 0;
`;
/**
* This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation.
* It has two state: selected or not and so we use an checkbox input to keep the state in sync.
@ -43,6 +49,7 @@ export const MenuButton = () => {
return (
<StyledMenuButton
data-testid="new-conversation-button"
// TODO Theming Maybe move to StyleMenuInput
style={
{
'--bg-color': 'var(--color-accent-button)',
@ -50,12 +57,12 @@ export const MenuButton = () => {
'--fg-color': 'white',
} as CSSProperties
}
onClick={onClickFn}
>
<StyledMenuInput type="checkbox" checked={isToggled} onClick={onClickFn} />
<SessionIcon
iconSize="small"
iconType="plusFat"
iconColor="var(--fg-color)"
iconColor="var(--menu-button-icon-color)"
iconRotation={isToggled ? 45 : 0}
aria-label={window.i18n('chooseAnAction')}
/>

4
ts/components/conversation/AddMentions.tsx
View File

@ -19,8 +19,8 @@ const StyledMentionAnother = styled.span`
`;
const StyledMentionedUs = styled(StyledMentionAnother)`
background-color: var(--color-text-accent);
color: black;
background-color: var(--primary-color);
color: var(--text-primary-color);
border-radius: 5px;
`;

2
ts/components/conversation/Timestamp.tsx
View File

@ -14,12 +14,12 @@ type Props = {
const UPDATE_FREQUENCY = 60 * 1000;
const TimestampContainerNotListItem = styled.div`
color: var(--text-secondary-color);
font-size: var(--font-size-xs);
line-height: 16px;
letter-spacing: 0.3px;
text-transform: uppercase;
user-select: none;
color: var(--color-text-subtle);
`;
const TimestampContainerListItem = styled(TimestampContainerNotListItem)`

2
ts/components/conversation/TypingAnimation.tsx
View File

@ -14,7 +14,7 @@ const StyledTypingContainer = styled.div`
const StyledTypingDot = styled.div<{ index: number }>`
border-radius: 50%;
background-color: var(--color-text-subtle); // TODO Theming update
background-color: var(--text-secondary-color);
height: 6px;
width: 6px;

9
ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx
View File

@ -12,8 +12,9 @@ const MessageStatusSendingContainer = styled.div`
cursor: pointer;
`;
const iconColor = 'var(--text-primary-color)';
const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sending">
<SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize="tiny" />
@ -22,8 +23,6 @@ const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
};
const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sent">
<SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize="tiny" />
@ -32,8 +31,6 @@ const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
};
const MessageStatusRead = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="read">
<SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize="tiny" />
@ -53,7 +50,7 @@ const MessageStatusError = ({ dataTestId }: { dataTestId?: string }) => {
onClick={showDebugLog}
title={window.i18n('sendFailed')}
>
<SessionIcon iconColor={'var(--color-destructive'} iconType="error" iconSize="tiny" />
<SessionIcon iconColor={'var(--danger-color'} iconType="error" iconSize="tiny" />
</MessageStatusSendingContainer>
);
};

136
ts/components/leftpane/LeftPaneSectionHeader.tsx
View File

@ -14,41 +14,54 @@ import { MenuButton } from '../button/MenuButton';
const SectionTitle = styled.h1`
padding: 0 var(--margins-sm);
flex-grow: 1;
color: var(--color-text);
color: var(--text-primary-color);
`;
export const LeftPaneSectionHeader = () => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
const focusedSection = useSelector(getFocusedSection);
const overlayMode = useSelector(getOverlayMode);
const StyledProgressBarContainer = styled.div`
width: 100%;
height: 5px;
flex-direction: row;
background: var(--border-color);
`;
let label: string | undefined;
const StyledProgressBarInner = styled.div`
background: var(--primary-color);
width: 90%;
transition: width 0.5s ease-in;
height: 100%;
`;
const isMessageSection = focusedSection === SectionType.Message;
const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests';
export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: var(--font-size-md);
font-weight: bold;
margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
switch (focusedSection) {
case SectionType.Settings:
label = window.i18n('settingsHeader');
break;
case SectionType.Message:
label = isMessageRequestOverlay
? window.i18n('messageRequests')
: window.i18n('messagesHeader');
break;
default:
span {
color: var(--primary-color);
}
`;
export const StyledLeftPaneBanner = styled.div`
background: var(--background-primary-color);
display: flex;
flex-direction: column;
border-bottom: var(--border-color);
`;
const StyledBannerInner = styled.div`
p {
margin: 0;
}
return (
<Flex flexDirection="column">
<div className="module-left-pane__header">
<SectionTitle>{label}</SectionTitle>
{isMessageSection && <MenuButton />}
</div>
{showRecoveryPhrasePrompt && <LeftPaneBanner />}
</Flex>
);
};
.left-pane-banner___phrase {
margin-top: var(--margins-md);
}
.session-button {
margin-top: var(--margins-sm);
}
`;
const BannerInner = () => {
const dispatch = useDispatch();
@ -94,48 +107,35 @@ export const LeftPaneBanner = () => {
);
};
const StyledProgressBarContainer = styled.div`
width: 100%;
height: 5px;
flex-direction: row;
background: var(--color-session-border);
`;
export const LeftPaneSectionHeader = () => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
const focusedSection = useSelector(getFocusedSection);
const overlayMode = useSelector(getOverlayMode);
const StyledProgressBarInner = styled.div`
background: var(--color-accent);
width: 90%;
transition: width 0.5s ease-in;
height: 100%;
`;
let label: string | undefined;
export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: var(--font-size-md);
font-weight: bold;
margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
const isMessageSection = focusedSection === SectionType.Message;
const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests';
span {
color: var(--color-text-accent);
}
`;
export const StyledLeftPaneBanner = styled.div`
background: var(--color-recovery-phrase-banner-background);
display: flex;
flex-direction: column;
border-bottom: var(--session-border);
`;
const StyledBannerInner = styled.div`
p {
margin: 0;
switch (focusedSection) {
case SectionType.Settings:
label = window.i18n('settingsHeader');
break;
case SectionType.Message:
label = isMessageRequestOverlay
? window.i18n('messageRequests')
: window.i18n('messagesHeader');
break;
default:
}
.left-pane-banner___phrase {
margin-top: var(--margins-md);
}
.session-button {
margin-top: var(--margins-sm);
}
`;
return (
<Flex flexDirection="column">
<div className="module-left-pane__header">
<SectionTitle>{label}</SectionTitle>
{isMessageSection && <MenuButton />}
</div>
{showRecoveryPhrasePrompt && <LeftPaneBanner />}
</Flex>
);
};

17
ts/components/leftpane/MessageRequestsBanner.tsx
View File

@ -17,20 +17,20 @@ const StyledMessageRequestBanner = styled.div`
padding: 8px 12px; // adjusting for unread border always being active
align-items: center;
cursor: pointer;
background: var(--color-request-banner-background);
/* TODO Theming - Discuss with Connnor */
background: var(--conversation-tab-background-color);
transition: var(--default-duration);
&:hover {
background: var(--color-clickable-hovered);
background: var(--conversation-tab-background-hover-color);
}
`;
const StyledMessageRequestBannerHeader = styled.span`
font-weight: bold;
font-size: var(--font-size-md);
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
padding-left: var(--margins-xs);
margin-inline-start: 12px;
line-height: 18px;
@ -47,7 +47,8 @@ const StyledCircleIcon = styled.div`
const StyledUnreadCounter = styled.div`
font-weight: bold;
border-radius: var(--margins-sm);
background-color: var(--color-request-banner-unread-background);
background-color: var(--conversation-tab-bubble-background-color);
color: var(--conversation-tab-bubble-text-color);
margin-left: 10px;
min-width: 20px;
height: 20px;
@ -66,7 +67,8 @@ const StyledGridContainer = styled.div`
align-items: center;
border-radius: 50%;
justify-content: center;
background-color: var(--color-request-banner-icon-background);
/* TODO Theming - Is this right? */
background-color: var(--text-secondary-color);
`;
export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: SessionIconSize }) => {
@ -78,7 +80,8 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
<SessionIcon
iconType={iconType}
iconSize={iconSize}
iconColor="var(--color-request-banner-icon)"
// TODO Theming - Is this right?
iconColor="var(--background-primary-color)"
/>
</StyledGridContainer>
</StyledCircleIcon>

2
ts/components/leftpane/conversation-list-item/ConversationListItem.tsx
View File

@ -64,7 +64,7 @@ const AvatarItem = () => {
}
return (
<div className="module-conversation-list-item__avatar-container">
<div>
<Avatar
size={AvatarSize.S}
pubkey={conversationId}

7
ts/components/leftpane/conversation-list-item/HeaderItem.tsx
View File

@ -94,9 +94,8 @@ const ListItemIcons = () => {
};
const MentionAtSymbol = styled.span`
background-color: var(--color-accent);
color: black;
background-color: var(--primary-color);
color: var(--conversation-tab-text-color);
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
@ -114,10 +113,10 @@ const MentionAtSymbol = styled.span`
height: 16px;
min-width: 16px;
border-radius: 8px;
/* transition: filter 0.25s linear; */
cursor: pointer;
:hover {
/* TODO Theming, should this be changed? */
filter: grayscale(0.7);
}
`;

1
ts/components/menu/ConversationListItemContextMenu.tsx
View File

@ -29,6 +29,7 @@ export type PropsContextConversationItem = {
const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
const { triggerId } = props;
// TODO Theming - Waiting on Session Components for correct colors
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>

1
ts/components/menu/MessageRequestBannerContextMenu.tsx
View File

@ -13,6 +13,7 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) =>
const { triggerId } = props;
return (
// TODO Theming - Waiting on Session Components for correct colors
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
<HideBannerMenuItem />

10
ts/components/search/MessageSearchResults.tsx
View File

@ -21,7 +21,7 @@ const StyledConversationTitleResults = styled.div`
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-text);
color: var(--conversation-tab-text-color);
`;
const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)`
@ -30,7 +30,7 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)
line-height: 14px;
overflow-x: hidden;
font-weight: 700;
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
`;
const StyledSearchResulsts = styled.div`
@ -46,7 +46,7 @@ const StyledSearchResulsts = styled.div`
cursor: pointer;
&:hover {
background-color: var(--color-clickable-hovered);
background-color: var(--conversation-tab-background-hover-color);
}
`;
@ -143,7 +143,7 @@ const ResultBody = styled.div`
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
max-height: 3.6em;
@ -167,7 +167,7 @@ const StyledTimestampContaimer = styled.div`
text-transform: uppercase;
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
`;
export const MessageSearchResult = (props: MessageResultProps) => {

4
ts/components/search/SearchResults.tsx
View File

@ -18,7 +18,7 @@ const StyledSeparatorSection = styled.div`
margin-inline-start: 16px;
color: var(--color-text);
color: var(--text-secondary-color);
font-size: var(--font-size-sm);
font-weight: 400;
@ -28,7 +28,7 @@ const StyledSeparatorSection = styled.div`
const SearchResultsContainer = styled.div`
overflow-y: auto;
max-height: 100%;
color: var(--color-text);
color: var(--text-secondary-color);
flex-grow: 1;
width: -webkit-fill-available;
`;

1
ts/state/ducks/theme.tsx
View File

@ -1,5 +1,6 @@
export const APPLY_THEME = 'APPLY_THEME';
// TODO Theming - should be classic-light and classic-dark
export type ThemeStateType = 'light' | 'dark' | 'ocean-light' | 'ocean-dark';
export const applyTheme = (theme: ThemeStateType) => {

23
ts/themes/SessionTheme.tsx
View File

@ -466,6 +466,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming this should be overridable */
--primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
--danger-color: ${COLORS.DANGER.LIGHT};
--transparent-color: ${COLORS.TRANSPARENT};
/* Backgrounds */
--background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@ -488,13 +489,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
/* Message Bubbles */
--message-bubbles-outgoing-background-color: var(--primary-color);
--message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--message-bubbles-outgoing-text-color: var(--text-primary-color);
--message-bubbles-incoming-text-color: var(--text-primary-color);
--message-bubbles-sent-background-color: var(--primary-color);
--message-bubbles-received-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--message-bubbles-sent-text-color: var(--text-primary-color);
--message-bubbles-received-text-color: var(--text-primary-color);
/* Menu Button */
--menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0};
--menu-button-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
/* TODO Theming Make a icon fill varible that uses the background color? */
--menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@ -519,7 +521,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--button-solid-text-hover-color: var(--text-primary-color);
/* Outline */
--button-outline-background-color: ${COLORS.TRANSPARENT};
--button-outline-background-color: var(--transparent-color);
--button-outline-background-hover-color: rgba(${hexColorToRGB(
THEMES.CLASSIC_LIGHT.COLOR0
)}, 0.1);
@ -531,14 +533,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--button-outline-disabled-color: var(--text-secondary-color);
/* Icons */
--button-icon-background-color: ${COLORS.TRANSPARENT};
--button-icon-background-color: var(--transparent-color);
--button-icon-stroke-color: var(--text-secondary-color);
--button-icon-stroke-hover-color: var(--text-primary-color);
--button-icon-stroke-selected-color: var(--text-primary-color);
/* TODO Theming Consolidate with code */
/* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items etc. */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -547,7 +549,6 @@ export const SessionGlobalStyles = createGlobalStyle`
--conversation-tab-text-selected-color: var(--text-primary-color);
--conversation-tab-text-unread-color: var(--text-primary-color);
--conversation-tab-text-secondary-color: var(--text-secondary-color);
--conversation-tab-text-selected-color: var(--text-primary-color);
--conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--conversation-tab-bubble-text-color: var(--text-primary-color);
/* TODO Theming account for overriding */
@ -572,10 +573,10 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Toggle Switch */
--toggle-switch-ball-color: ;
/* TODO Theming think this should be white instead of transparent */
--toggle-switch-off-background-color: ${COLORS.TRANSPARENT};
--toggle-switch-off-background-color: var(--transparent-color);
--toggle-switch-off-border-color: var(--border-color);
--toggle-switch-on-background-color: var(--primary-color);
--toggle-switch-on-border-color: ${COLORS.TRANSPARENT};
--toggle-switch-on-border-color: var(--transparent-color);
/* TODO Theming Think this is part of the Convesations Tab */
/* Unread Messages Alert */
@ -586,7 +587,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Color Mode Button */
--button-color-mode-stroke-color: var(--text-secondary-color);
--button-color-mode-hover-color: var(--text-primary-color);
--button-color-mode-fill-color: ${COLORS.TRANSPARENT};
--button-color-mode-fill-color: var(--transparent-color);
/* Path Button */
--button-path-default-color: ${COLORS.PATH.DEFAULT};