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

feat: styled message bubbles, control messages and the session dropdown

Browse Source
pull/2521/head
William Grant 3 years ago
parent 1350623406
commit 3abd69a3ea
12 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File

8
stylesheets/_conversation.scss
Unescape Escape View File

@ -16,10 +16,10 @@
}
.group-invitation {
background: var(--color-received-message-background);
background-color: var(--message-bubbles-received-background-color);
&.invitation-outgoing {
background: var(--color-sent-message-background);
background-color: var(--message-bubbles-sent-background-color);
align-self: flex-end;
}
@ -62,12 +62,12 @@
.group-invitation {
.group-details {
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
}
}
.group-invitation.invitation-outgoing {
.group-details {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
}
}

16
stylesheets/_quote.scss
Unescape Escape View File

@ -11,7 +11,7 @@
border-left-style: solid;
&__primary__type-label {
border-color: var(--color-text);
border-color: var(--text-primary-color);
}
}
@ -19,7 +19,7 @@
.module-quote {
&--outgoing {
.module-quote__primary__author {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
font-weight: bold;
.module-contact-name {
@ -27,27 +27,27 @@
}
}
.module-quote__primary__text {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
a {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
}
}
}
&--incoming {
.module-quote__primary__author {
color: var(--color-received-message-text);
color: var(--message-bubbles-sent-text-color);
font-weight: bold;
.module-contact-name {
font-weight: bold;
}
}
.module-quote__primary__text {
color: var(--color-received-message-text);
color: var(--message-bubbles-sent-text-color);
a {
color: var(--color-received-message-text);
color: var(--message-bubbles-sent-text-color);
}
}
}
@ -295,7 +295,7 @@ $session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
}
}
.flash-green-once {
.flash-primary-once {
animation-name: remove-box-shadow;
animation-timing-function: linear;
animation-duration: 2s;

30
stylesheets/_session.scss
Unescape Escape View File

@ -372,13 +372,13 @@ label {
justify-content: space-between;
height: 50px;
padding: 0px var(--margins-md);
font-size: $session-font-sm;
font-size: var(--font-size-md);
color: var(--color-text);
background: var(--color-cell-background);
background-color: var(--right-panel-item-background-color);
color: var(--right-panel-item-text-color);
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
}
@ -403,22 +403,18 @@ label {
justify-content: center;
height: 35px;
padding: 0 var(--margins-md);
background: var(--color-cell-background);
color: var(--color-text);
background: var(--right-panel-item-background-color);
color: var(--right-panel-item-text-color);
font-size: 0.8rem;
width: -webkit-fill-available;
transition: var(--default-duration);
&:first-child {
border-top: var(--border-session);
border-top: var(--border-color);
}
&:last-child {
border-top: var(--border-session);
}
&:hover {
background: var(--color-clickable-hovered);
border-top: var(--border-color);
}
.session-icon {
@ -430,16 +426,16 @@ label {
&.active,
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
&.danger {
color: var(--color-destructive);
color: var(--danger-color);
}
}
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
}
@ -469,14 +465,14 @@ label {
display: flex;
justify-content: center;
background: var(--color-white-color);
background: var(--white-color);
padding: 0.5rem;
svg {
width: 135px;
height: 135px;
border-radius: 3px;
padding: var(--margins-xs);
background-color: var(--color-white-color);
background-color: var(--white-color);
}
}

27
stylesheets/_session_theme.scss
Unescape Escape View File

@ -33,15 +33,15 @@
&__container--incoming {
&--opaque {
background: var(--color-received-message-background);
background: var(--message-bubbles-received-background-color);
}
&--transparent {
background: none;
background: var(--transparent-color);
}
.module-message__text {
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
display: flex;
flex-direction: row;
align-items: center;
@ -52,26 +52,26 @@
a {
text-decoration: underline;
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
}
}
}
&__container--outgoing {
&--opaque {
background: var(--color-sent-message-background);
background: var(--message-bubbles-sent-background-color);
}
&--transparent {
background: none;
background: var(--transparent-color);
}
.module-message__text {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
a {
text-decoration: underline;
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
}
}
}
@ -90,20 +90,21 @@
@include fontAccentBold();
}
// TODO Theming - Confirm this works
h1 {
@include session-h-title;
color: var(--color-light-gray-color);
color: var(--text-secondary-color);
font-size: 25px;
margin: 0;
&.active {
color: var(--color-text);
color: var(--text-primary-color);
}
}
h2 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 22px;
text-align: center;
@ -111,7 +112,7 @@ h2 {
h3 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 18px;
padding-top: 22px;
@ -119,7 +120,7 @@ h3 {
h4 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 17px;
text-align: center;

2
ts/components/conversation/SessionMessagesListContainer.tsx
Unescape Escape View File

@ -173,7 +173,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
if (messageId !== undefined) {
this.timeoutResetQuotedScroll = global.setTimeout(() => {
window.inboxStore?.dispatch(quotedMessageToAnimate(undefined));
}, 2000); // should match .flash-green-once
}, 2000); // should match .flash-primary-once
}
}

64
ts/components/conversation/message/message-content/MessageContent.tsx
Unescape Escape View File

@ -88,6 +88,37 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
}
}
function getWidth(
props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
): number | undefined {
const { attachments, previews } = props;
if (attachments && attachments.length) {
const dimensions = getGridDimensions(attachments);
if (dimensions) {
return dimensions.width;
}
}
if (previews && previews.length) {
const first = previews[0];
if (!first || !first.image) {
return;
}
const { width } = first.image;
if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
const dimensions = getImageDimensionsInAttachment(first.image);
if (dimensions) {
return dimensions.width;
}
}
}
return;
}
const StyledMessageContent = styled.div`
border-radius: 18px;
`;
@ -187,7 +218,7 @@ export const MessageContent = (props: Props) => {
? `module-message__container--${direction}--transparent`
: `module-message__container--${direction}--opaque`,
flashGreen && 'flash-green-once'
flashGreen && 'flash-primary-once'
)}
style={{
width: isShowingImage ? width : undefined,
@ -229,34 +260,3 @@ export const MessageContent = (props: Props) => {
</StyledMessageContent>
);
};
function getWidth(
props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
): number | undefined {
const { attachments, previews } = props;
if (attachments && attachments.length) {
const dimensions = getGridDimensions(attachments);
if (dimensions) {
return dimensions.width;
}
}
if (previews && previews.length) {
const first = previews[0];
if (!first || !first.image) {
return;
}
const { width } = first.image;
if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
const dimensions = getImageDimensionsInAttachment(first.image);
if (dimensions) {
return dimensions.width;
}
}
}
return;
}

2
ts/components/conversation/message/message-item/DateBreak.tsx
Unescape Escape View File

@ -12,7 +12,7 @@ const DateBreakText = styled.div`
font-weight: bold;
text-align: center;
color: var(--color-text);
color: var(--text-primary-color);
`;
export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {

9
ts/components/conversation/message/message-item/GenericReadableMessage.tsx
Unescape Escape View File

@ -102,7 +102,7 @@ type Props = {
const highlightedMessageAnimation = keyframes`
1% {
background-color: #00f782;
background-color: var(--primary-color);
}
`;
@ -123,7 +123,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
${props =>
props.isRightClicked &&
`
background-color: var(--color-compose-view-button-background);
background-color: var(--conversation-tab-background-selected-color);
`}
${props =>
@ -132,7 +132,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
&.message-selected {
.module-message {
&__container {
box-shadow: var(--color-session-shadow);
box-shadow: var(--drop-shadow);
}
}
}
@ -229,8 +229,7 @@ export const GenericReadableMessage = (props: Props) => {
isRightClicked={isRightClicked}
className={classNames(
selected && 'message-selected',
isGroup && 'public-chat-message-wrapper',
isIncoming ? 'session-message-wrapper-incoming' : 'session-message-wrapper-outgoing'
isGroup && 'public-chat-message-wrapper'
)}
onContextMenu={handleContextMenu}
receivedAt={receivedAt}

2
ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ const style: StyleType = {
'missed-call': {
notificationTextKey: 'callMissed',
iconType: 'callMissed',
iconColor: 'var(--color-destructive)',
iconColor: 'var(--danger-color)',
},
'started-call': {
notificationTextKey: 'startedACall',

4
ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx
Unescape Escape View File

@ -4,8 +4,8 @@ import { SessionIcon, SessionIconType } from '../../../../icon';
const NotificationBubbleFlex = styled.div`
display: flex;
background: var(--color-fake-chat-bubble-background);
color: var(--color-text);
background: var(--message-bubbles-received-background-color);
color: var(--text-primary-color);
width: 90%;
max-width: 700px;
margin: 10px auto;

8
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -555,7 +555,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming Consolidate with code */
/* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items etc. */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -627,6 +627,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
/* Right Panel Items */
/* Also used for Session Dropdown */
--right-panel-item-background-color: var(--background-secondary-color);
--right-panel-item-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--right-panel-item-text-color: var(--text-primary-color);
@ -651,6 +652,11 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Also used for FileDropZone */
/* Same for all Themes */
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
/* Shadows */
/* Used across all themes */
--shadow-color: var(--black-color);
--drop-shadow: 0 0 4px 0 var(--shadow-color);
};
`;

4
ts/themes/switchTheme.tsx
Unescape Escape View File

@ -712,11 +712,11 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
document.documentElement.style.setProperty(
'--right-panel-item-background-color',
'var(--background-secondary-color)'
THEMES.CLASSIC_DARK.COLOR2
);
document.documentElement.style.setProperty(
'--right-panel-item-background-hover-color',
THEMES.CLASSIC_DARK.COLOR4
THEMES.CLASSIC_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--right-panel-item-text-color',

Write Preview
Loading…
Cancel
Save