diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 125279dc8..28d8c6db2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1708,7 +1708,7 @@ } }, "timerOption_0_seconds": { - "message": "off", + "message": "Off", "description": "Label for option to turn off message expiration in the timer menu" }, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 2e1fa720e..4db8212ef 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -19,8 +19,6 @@ window.Whisper = window.Whisper || {}; const { getAbsoluteAttachmentPath } = window.Signal.Migrations; - const MAX_MESSAGE_BODY_LENGTH = 64 * 1024; - Whisper.OriginalNotFoundToast = Whisper.ToastView.extend({ render_attributes() { return { toastMessage: i18n('originalMessageNotFound') }; @@ -1885,7 +1883,7 @@ toastOptions.title = i18n('youLeftTheGroup'); toastOptions.id = 'youLeftTheGroup'; } - if (message.length > MAX_MESSAGE_BODY_LENGTH) { + if (message.length > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) { toastOptions.title = i18n('messageBodyTooLong'); toastOptions.id = 'messageBodyTooLong'; } diff --git a/preload.js b/preload.js index da4eb218f..d701ff174 100644 --- a/preload.js +++ b/preload.js @@ -67,6 +67,7 @@ window.CONSTANTS = { MAX_GROUP_NAME_LENGTH: 64, DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'), MAX_CONNECTION_DURATION: 5000, + MAX_MESSAGE_BODY_LENGTH: 64 * 1024, // Limited due to the proof-of-work requirement SMALL_GROUP_SIZE_LIMIT: 10, }; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 9d207a946..493aac60a 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1234,7 +1234,7 @@ text-align: center; } -.module-group-notification__change { +.module-group-notification__change, .module-timer-notification__message { background-color: #212121; width: 90%; max-width: 700px; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 81a905ecc..5c3497ba8 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -878,48 +878,83 @@ label { } .session-dropdown { - position: absolute; - top: 50px; - left: 50px; - display: inline-block; + position: relative; + width: 100%; + + &__label { + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + padding: 0px $session-margin-md; + font-size: $session-font-sm; + color: $session-color-white; + background-color: $session-shade-1; - ul { + .session-icon { + opacity: 0.6; + } + } + + &__list-container { + z-index: 200; display: block; + position: absolute; + top: 50px; + left: 0px; + right: 0px; list-style: none; padding: 0px; margin: 0px; + max-height: 450px; + overflow-y: auto; + } - li { - cursor: pointer; + &__item { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + height: 35px; + padding: 0 $session-margin-md; + color: $session-color-white; + background-color: $session-shade-1; + font-size: 0.8rem; + width: -webkit-fill-available; + transition: $session-transition-duration; - height: 25px; - padding-right: 7px; - background-color: $session-shade-4; + &:first-child { + border-top: $session-separator-element-border; + } + &:last-child { + border-bottom: $session-separator-element-border; + } - color: $session-color-white; - font-family: 'Wasa'; - font-size: $session-font-xs; - line-height: $session-icon-size-sm; - font-weight: 700; + &:hover { + @include session-dark-background-hover; + } - display: flex; - align-items: center; + .session-icon { + margin-left: 6px; + } + .item-content { + margin-left: 6px; + } - .session-icon { - margin-left: 6px; - } - .item-content { - margin-left: 6px; - } + &.active, + &:hover { + background-color: $session-shade-7; + } - &.active, - &:hover { - background-color: $session-shade-7; - } + &.danger { + color: $session-color-danger; + } + } - &.danger { - color: $session-color-danger; - } + &:hover { + .session-icon { + opacity: 1; } } } @@ -1492,7 +1527,8 @@ input { width: 40px; border-radius: 50%; opacity: 1; - background-color: $session-shade-8; + background-color: $session-shade-2; + box-shadow: 0px 0px $session-font-sm 0px rgba($session-color-white, 0.1); svg path { transition: $session-transition-duration; diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx index 54a62097b..353becb2f 100644 --- a/ts/components/session/SessionChannelSettings.tsx +++ b/ts/components/session/SessionChannelSettings.tsx @@ -6,6 +6,7 @@ import { SessionButtonColor, SessionButtonType, } from './SessionButton'; +import { SessionDropdown } from './SessionDropdown'; import { MediaGallery } from '../conversation/media-gallery/MediaGallery'; import _ from 'lodash'; import { TimerOption } from '../conversation/ConversationHeader'; @@ -200,13 +201,29 @@ export class SessionChannelSettings extends React.Component { } public render() { - const { memberCount, name, onLeaveGroup, isPublic } = this.props; + const { + memberCount, + name, + timerOptions, + onLeaveGroup, + isPublic, + } = this.props; const { documents, media, onItemClick } = this.state; const showMemberCount = !!(memberCount && memberCount > 0); + const hasDisappearingMessages = !isPublic; const leaveGroupString = isPublic ? window.i18n('leaveOpenGroup') : window.i18n('leaveClosedGroup'); + const disappearingMessagesOptions = timerOptions.map(option => { + return { + content: option.name, + onClick: () => { + this.props.onSetDisappearingMessages(option.value); + }, + }; + }); + return (
{this.renderHeader()} @@ -228,9 +245,14 @@ export class SessionChannelSettings extends React.Component {
{window.i18n('notifications')}
-
- {window.i18n('disappearingMessages')} -
+ + {hasDisappearingMessages && ( + + )} + { private handleUnselectMember(member: ContactType) { this.setState({ selectedMembers: this.state.selectedMembers.filter(selectedMember => { - return selectedMember !== member; + return selectedMember.id !== member.id; }), }); } diff --git a/ts/components/session/SessionDropdown.tsx b/ts/components/session/SessionDropdown.tsx index 8bbad8310..b6b005e73 100644 --- a/ts/components/session/SessionDropdown.tsx +++ b/ts/components/session/SessionDropdown.tsx @@ -1,81 +1,95 @@ import React from 'react'; -import classNames from 'classnames'; -import { SessionIconType } from './icon/'; +import { SessionIcon, SessionIconSize, SessionIconType } from './icon/'; import { SessionDropdownItem, SessionDropDownItemType, } from './SessionDropdownItem'; -// THIS IS A FUTURE-PROOFING ELEMENT TO REPLACE ELECTRON CONTEXTMENUS IN PRELOAD.JS +// THIS IS DROPDOWN ACCORDIAN STYLE OPTIONS SELECTOR ELEMENT, NOT A CONTEXTMENU interface State { - x: number; - y: number; - isVisible: boolean; + expanded: boolean; } interface Props { - id?: string; + label: string; onClick?: any; - relativeTo: string | Array; - items: Array<{ + expanded?: boolean; + options: Array<{ content: string; id?: string; icon?: SessionIconType | null; type?: SessionDropDownItemType; active?: boolean; onClick?: any; - display?: boolean; }>; } export class SessionDropdown extends React.Component { + public static defaultProps = { + expanded: false, + }; + constructor(props: any) { super(props); this.state = { - x: 0, - y: 0, - isVisible: false, + expanded: !!this.props.expanded, }; - } - - public show() { - this.setState({ - isVisible: true, - }); - } - public hide() { - this.setState({ - isVisible: false, - }); + this.toggleDropdown = this.toggleDropdown.bind(this); } public render() { - const { items } = this.props; - const { isVisible } = this.state; + const { label, options } = this.props; + const { expanded } = this.state; + const chevronOrientation = expanded ? 180 : 0; return ( -
-
    - {isVisible - ? items.map((item: any) => { - return item.display ? ( - - ) : null; - }) - : null} -
+
+
+ {label} + +
+ + {expanded && ( +
+ {options.map((item: any) => { + return ( + { + this.handleItemClick(item.onClick); + }} + /> + ); + })} +
+ )}
); } + + public toggleDropdown() { + this.setState({ + expanded: !this.state.expanded, + }); + } + + public handleItemClick(itemOnClickFn: any) { + this.setState({ expanded: false }, itemOnClickFn()); + } } diff --git a/ts/components/session/SessionDropdownItem.tsx b/ts/components/session/SessionDropdownItem.tsx index 2ea9cde59..0a73678f5 100644 --- a/ts/components/session/SessionDropdownItem.tsx +++ b/ts/components/session/SessionDropdownItem.tsx @@ -9,7 +9,6 @@ export enum SessionDropDownItemType { } interface Props { - id: string; content: string; type: SessionDropDownItemType; icon: SessionIconType | null; @@ -32,12 +31,14 @@ export class SessionDropdownItem extends React.PureComponent { public render() { const { content, type, icon, active } = this.props; - const id = this.props.id || window.generateID(); return ( -
  • @@ -47,7 +48,7 @@ export class SessionDropdownItem extends React.PureComponent { '' )}
    {content}
    -
    • +
    ); }