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

remove right buttons on Message. use right click instead

Browse Source
pull/1377/head
Audric Ackermann 5 years ago
parent 3f4be17393
commit 37dd7b87cc
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
4 changed files with 2 additions and 241 deletions
Show Stats Download Patch File Download Diff File

16
js/views/identicon_svg_view.js
Unescape Escape View File

@ -13,7 +13,6 @@
templateName: 'identicon-svg',
initialize(options) {
this.render_attributes = options;
this.render_attributes.color = COLORS[this.render_attributes.color];
},
getSVGUrl() {
const html = this.render().$el.html();
@ -40,19 +39,4 @@
});
},
});
const COLORS = {
red: '#cc163d',
deep_orange: '#c73800',
brown: '#746c53',
pink: '#a23474',
purple: '#862caf',
indigo: '#5951c8',
blue: '#336ba3',
teal: '#067589',
green: '#3b7845',
light_green: '#1c8260',
blue_grey: '#895d66',
grey: '#6b6b78',
};
})();

111
stylesheets/_modules.scss
Unescape Escape View File

@ -76,94 +76,10 @@
margin-inline-start: 32px;
}
.module-message__buttons {
position: absolute;
top: 0;
bottom: 0;
display: inline-flex;
flex-direction: row;
align-items: center;
opacity: 0;
}
.module-message:hover .module-message__buttons {
.module-message:hover {
opacity: 1;
}
.module-message__buttons--incoming {
left: 100%;
}
.module-message__buttons--outgoing {
right: 100%;
}
.module-message__buttons__upload {
height: 24px;
width: 24px;
transform: rotate(180deg);
display: inline-block;
cursor: pointer;
@include color-svg('../images/download.svg', $color-light-45);
&:hover {
@include color-svg('../images/download.svg', $color-gray-90);
}
}
.module-message__buttons__download {
min-height: 24px;
min-width: 24px;
display: inline-block;
cursor: pointer;
@include color-svg('../images/download.svg', $color-light-45);
&:hover {
@include color-svg('../images/download.svg', $color-gray-90);
}
}
.module-message__buttons__download--incoming {
margin-inline-start: 12px;
}
.module-message__buttons__download--outgoing {
margin-inline-end: 12px;
}
.module-message__buttons__reply {
min-height: 24px;
min-width: 24px;
display: inline-block;
cursor: pointer;
@include color-svg('../images/reply.svg', $color-light-45);
&:hover {
@include color-svg('../images/reply.svg', $color-gray-90);
}
}
.module-message__buttons__reply--incoming {
margin-inline-start: 12px;
}
.module-message__buttons__reply--outgoing {
margin-inline-end: 12px;
}
.module-message__buttons__menu {
height: 24px;
width: 24px;
display: inline-block;
cursor: pointer;
@include color-svg('../images/ellipsis.svg', $color-light-45);
&:hover {
@include color-svg('../images/ellipsis.svg', $color-gray-90);
}
}
.module-message__buttons__menu--incoming {
margin-inline-start: 12px;
}
.module_message__buttons__menu--outgoing {
margin-inline-end: 12px;
}
.module-message__error-container {
width: 28px;
position: relative;
@ -2822,6 +2738,7 @@
border: 1px solid $color-dark-05;
opacity: 0;
user-select: none;
transition: opacity $session-transition-duration;
}
.react-contextmenu--visible {
@ -2890,14 +2807,6 @@
// All media query widths have 300px added to account for the left pane
// And have been tweaked for smoother transitions
// To hide in small breakpoints
.module-message__buttons__download {
display: none;
}
.module-message__buttons__reply {
display: none;
}
// To limit messages with things forcing them wider, like long attachment names
.module-message__container {
max-width: 300px;
@ -2926,14 +2835,6 @@
margin-inline-start: auto;
}
// To hide in small breakpoints
.module-message__buttons__download {
display: inline-block;
}
.module-message__buttons__reply {
display: inline-block;
}
// To hide in larger breakpoints
.module-message__context__download {
display: none;
@ -2965,14 +2866,6 @@
margin-inline-start: auto;
}
// To hide in small breakpoints
.module-message__buttons__download {
display: inline-block;
}
.module-message__buttons__reply {
display: inline-block;
}
// To hide in larger breakpoints
.module-message__context__download {
display: none;

21
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -295,27 +295,6 @@
// Module: Message
.module-message__buttons__download {
@include color-svg('../images/download.svg', $color-light-45);
&:hover {
@include color-svg('../images/download.svg', $color-dark-05);
}
}
.module-message__buttons__reply {
@include color-svg('../images/reply.svg', $color-light-45);
&:hover {
@include color-svg('../images/reply.svg', $color-dark-05);
}
}
.module-message__buttons__menu {
@include color-svg('../images/ellipsis.svg', $color-light-45);
&:hover {
@include color-svg('../images/ellipsis.svg', $color-dark-05);
}
}
.module-message__error {
@include color-svg('../images/error.svg', $session-color-danger);
}

95
ts/components/conversation/Message.tsx
Unescape Escape View File

@ -769,89 +769,6 @@ export class Message extends React.PureComponent<Props, State> {
}
}
public renderMenu(isCorrectSide: boolean, triggerId: string) {
const {
attachments,
direction,
disableMenu,
isKickedFromGroup,
onDownload,
onReply,
} = this.props;
if (!isCorrectSide || disableMenu || isKickedFromGroup) {
return null;
}
const fileName =
attachments && attachments[0] ? attachments[0].fileName : null;
const isDangerous = isFileDangerous(fileName || '');
const multipleAttachments = attachments && attachments.length > 1;
const firstAttachment = attachments && attachments[0];
const downloadButton =
!multipleAttachments && firstAttachment && !firstAttachment.pending ? (
<div
onClick={(e: any) => {
if (onDownload) {
onDownload(isDangerous);
}
e.stopPropagation();
}}
role="button"
className={classNames(
'module-message__buttons__download',
`module-message__buttons__download--${direction}`
)}
/>
) : null;
const replyButton = (
<div
onClick={(e: any) => {
if (onReply) {
onReply();
}
e.stopPropagation();
}}
role="button"
className={classNames(
'module-message__buttons__reply',
`module-message__buttons__download--${direction}`
)}
/>
);
const menuButton = (
<ContextMenuTrigger id={triggerId} ref={this.captureMenuTriggerBound}>
<div
role="button"
onClick={this.showMenuBound}
className={classNames(
'module-message__buttons__menu',
`module-message__buttons__download--${direction}`
)}
/>
</ContextMenuTrigger>
);
const first = direction === 'incoming' ? downloadButton : menuButton;
const last = direction === 'incoming' ? menuButton : downloadButton;
return (
<div
className={classNames(
'module-message__buttons',
`module-message__buttons--${direction}`
)}
>
{first}
{replyButton}
{last}
</div>
);
}
public renderContextMenu(triggerId: string) {
const {
attachments,
@ -1058,12 +975,7 @@ export class Message extends React.PureComponent<Props, State> {
} = this.props;
const { expired, expiring } = this.state;
// This id is what connects our triple-dot click with our associated pop-up menu.
// It needs to be unique.
// The Date.now() is a workaround to be sure a single triggerID with this id exists
const triggerId = id
? String(`message-${id}-${Date.now()}`)
: String(`message-${authorPhoneNumber}-${timestamp}`);
const rightClickTriggerId = id
? String(`message-ctx-${id}-${Date.now()}`)
: String(`message-ctx-${authorPhoneNumber}-${timestamp}`);
@ -1111,9 +1023,6 @@ export class Message extends React.PureComponent<Props, State> {
)}
>
{this.renderError(isIncoming)}
{isRss || isKickedFromGroup
? null
: this.renderMenu(!isIncoming, triggerId)}
<div
className={classNames(
'module-message__container',
@ -1148,10 +1057,6 @@ export class Message extends React.PureComponent<Props, State> {
{this.renderMetadata()}
</div>
{this.renderError(!isIncoming)}
{isRss || multiSelectMode
? null
: this.renderMenu(isIncoming, triggerId)}
{enableContextMenu ? this.renderContextMenu(triggerId) : null}
{enableContextMenu
? this.renderContextMenu(rightClickTriggerId)
: null}

Write Preview
Loading…
Cancel
Save