From 37dd7b87cc92a13bf5b52665caaa11cc0565efa0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 7 Oct 2020 16:09:01 +1100 Subject: [PATCH] remove right buttons on Message. use right click instead --- js/views/identicon_svg_view.js | 16 ---- stylesheets/_modules.scss | 111 +------------------------ stylesheets/_theme_dark.scss | 21 ----- ts/components/conversation/Message.tsx | 95 --------------------- 4 files changed, 2 insertions(+), 241 deletions(-) diff --git a/js/views/identicon_svg_view.js b/js/views/identicon_svg_view.js index 996a57605..0acf9c83b 100644 --- a/js/views/identicon_svg_view.js +++ b/js/views/identicon_svg_view.js @@ -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', - }; })(); diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c595ca77b..de3f210a0 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -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; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index baef39f70..58b27ee7e 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -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); } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 73143a2b0..f6bf8c93e 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -769,89 +769,6 @@ export class Message extends React.PureComponent { } } - 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 ? ( -
{ - if (onDownload) { - onDownload(isDangerous); - } - e.stopPropagation(); - }} - role="button" - className={classNames( - 'module-message__buttons__download', - `module-message__buttons__download--${direction}` - )} - /> - ) : null; - - const replyButton = ( -
{ - if (onReply) { - onReply(); - } - e.stopPropagation(); - }} - role="button" - className={classNames( - 'module-message__buttons__reply', - `module-message__buttons__download--${direction}` - )} - /> - ); - - const menuButton = ( - -
- - ); - - const first = direction === 'incoming' ? downloadButton : menuButton; - const last = direction === 'incoming' ? menuButton : downloadButton; - - return ( -
- {first} - {replyButton} - {last} -
- ); - } - public renderContextMenu(triggerId: string) { const { attachments, @@ -1058,12 +975,7 @@ export class Message extends React.PureComponent { } = 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 { )} > {this.renderError(isIncoming)} - {isRss || isKickedFromGroup - ? null - : this.renderMenu(!isIncoming, triggerId)}
{ {this.renderMetadata()}
{this.renderError(!isIncoming)} - {isRss || multiSelectMode - ? null - : this.renderMenu(isIncoming, triggerId)} - {enableContextMenu ? this.renderContextMenu(triggerId) : null} {enableContextMenu ? this.renderContextMenu(rightClickTriggerId) : null}