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

Merge pull request #845 from vincentbavitz/clearnet

Browse Source 
Disappearing messages in Channel Settings panel & SessionDropdown
pull/842/head
Vince 5 years ago committed by GitHub
parent d4c73a3383 30ccb81d3d
commit 4fb178c092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 162 additions and 90 deletions
Show Stats Download Patch File Download Diff File

2
_locales/en/messages.json
Unescape Escape View File

@ -1708,7 +1708,7 @@
} }
}, },
"timerOption_0_seconds": { "timerOption_0_seconds": {
"message": "off", "message": "Off",
"description": "description":
"Label for option to turn off message expiration in the timer menu" "Label for option to turn off message expiration in the timer menu"
}, },

4
js/views/conversation_view.js
Unescape Escape View File

@ -19,8 +19,6 @@
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
const { getAbsoluteAttachmentPath } = window.Signal.Migrations; const { getAbsoluteAttachmentPath } = window.Signal.Migrations;
const MAX_MESSAGE_BODY_LENGTH = 64 * 1024;
Whisper.OriginalNotFoundToast = Whisper.ToastView.extend({ Whisper.OriginalNotFoundToast = Whisper.ToastView.extend({
render_attributes() { render_attributes() {
return { toastMessage: i18n('originalMessageNotFound') }; return { toastMessage: i18n('originalMessageNotFound') };
@ -1885,7 +1883,7 @@
toastOptions.title = i18n('youLeftTheGroup'); toastOptions.title = i18n('youLeftTheGroup');
toastOptions.id = '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.title = i18n('messageBodyTooLong');
toastOptions.id = 'messageBodyTooLong'; toastOptions.id = 'messageBodyTooLong';
} }

1
preload.js
Unescape Escape View File

@ -67,6 +67,7 @@ window.CONSTANTS = {
MAX_GROUP_NAME_LENGTH: 64, MAX_GROUP_NAME_LENGTH: 64,
DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'), DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
MAX_CONNECTION_DURATION: 5000, MAX_CONNECTION_DURATION: 5000,
MAX_MESSAGE_BODY_LENGTH: 64 * 1024,
// Limited due to the proof-of-work requirement // Limited due to the proof-of-work requirement
SMALL_GROUP_SIZE_LIMIT: 10, SMALL_GROUP_SIZE_LIMIT: 10,
}; };

2
stylesheets/_modules.scss
Unescape Escape View File

@ -1234,7 +1234,7 @@
text-align: center; text-align: center;
} }
.module-group-notification__change { .module-group-notification__change, .module-timer-notification__message {
background-color: #212121; background-color: #212121;
width: 90%; width: 90%;
max-width: 700px; max-width: 700px;

98
stylesheets/_session.scss
Unescape Escape View File

@ -878,48 +878,83 @@ label {
} }
.session-dropdown { .session-dropdown {
position: absolute; position: relative;
top: 50px; width: 100%;
left: 50px;
display: inline-block; &__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; display: block;
position: absolute;
top: 50px;
left: 0px;
right: 0px;
list-style: none; list-style: none;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
max-height: 450px;
overflow-y: auto;
}
li { &__item {
cursor: pointer; 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; &:first-child {
padding-right: 7px; border-top: $session-separator-element-border;
background-color: $session-shade-4; }
&:last-child {
border-bottom: $session-separator-element-border;
}
color: $session-color-white; &:hover {
font-family: 'Wasa'; @include session-dark-background-hover;
font-size: $session-font-xs; }
line-height: $session-icon-size-sm;
font-weight: 700;
display: flex; .session-icon {
align-items: center; margin-left: 6px;
}
.item-content {
margin-left: 6px;
}
.session-icon { &.active,
margin-left: 6px; &:hover {
} background-color: $session-shade-7;
.item-content { }
margin-left: 6px;
}
&.active, &.danger {
&:hover { color: $session-color-danger;
background-color: $session-shade-7; }
} }
&.danger { &:hover {
color: $session-color-danger; .session-icon {
} opacity: 1;
} }
} }
} }
@ -1492,7 +1527,8 @@ input {
width: 40px; width: 40px;
border-radius: 50%; border-radius: 50%;
opacity: 1; 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 { svg path {
transition: $session-transition-duration; transition: $session-transition-duration;

30
ts/components/session/SessionChannelSettings.tsx
Unescape Escape View File

@ -6,6 +6,7 @@ import {
SessionButtonColor, SessionButtonColor,
SessionButtonType, SessionButtonType,
} from './SessionButton'; } from './SessionButton';
import { SessionDropdown } from './SessionDropdown';
import { MediaGallery } from '../conversation/media-gallery/MediaGallery'; import { MediaGallery } from '../conversation/media-gallery/MediaGallery';
import _ from 'lodash'; import _ from 'lodash';
import { TimerOption } from '../conversation/ConversationHeader'; import { TimerOption } from '../conversation/ConversationHeader';
@ -200,13 +201,29 @@ export class SessionChannelSettings extends React.Component<Props, any> {
} }
public render() { public render() {
const { memberCount, name, onLeaveGroup, isPublic } = this.props; const {
memberCount,
name,
timerOptions,
onLeaveGroup,
isPublic,
} = this.props;
const { documents, media, onItemClick } = this.state; const { documents, media, onItemClick } = this.state;
const showMemberCount = !!(memberCount && memberCount > 0); const showMemberCount = !!(memberCount && memberCount > 0);
const hasDisappearingMessages = !isPublic;
const leaveGroupString = isPublic const leaveGroupString = isPublic
? window.i18n('leaveOpenGroup') ? window.i18n('leaveOpenGroup')
: window.i18n('leaveClosedGroup'); : window.i18n('leaveClosedGroup');
const disappearingMessagesOptions = timerOptions.map(option => {
return {
content: option.name,
onClick: () => {
this.props.onSetDisappearingMessages(option.value);
},
};
});
return ( return (
<div className="group-settings"> <div className="group-settings">
{this.renderHeader()} {this.renderHeader()}
@ -228,9 +245,14 @@ export class SessionChannelSettings extends React.Component<Props, any> {
<div className="group-settings-item"> <div className="group-settings-item">
{window.i18n('notifications')} {window.i18n('notifications')}
</div> </div>
<div className="group-settings-item">
{window.i18n('disappearingMessages')} {hasDisappearingMessages && (
</div> <SessionDropdown
label={window.i18n('disappearingMessages')}
options={disappearingMessagesOptions}
/>
)}
<MediaGallery <MediaGallery
documents={documents} documents={documents}
media={media} media={media}

2
ts/components/session/SessionClosableOverlay.tsx
Unescape Escape View File

@ -277,7 +277,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
private handleUnselectMember(member: ContactType) { private handleUnselectMember(member: ContactType) {
this.setState({ this.setState({
selectedMembers: this.state.selectedMembers.filter(selectedMember => { selectedMembers: this.state.selectedMembers.filter(selectedMember => {
return selectedMember !== member; return selectedMember.id !== member.id;
}), }),
}); });
} }

100
ts/components/session/SessionDropdown.tsx
Unescape Escape View File

@ -1,81 +1,95 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { SessionIconType } from './icon/'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
import { import {
SessionDropdownItem, SessionDropdownItem,
SessionDropDownItemType, SessionDropDownItemType,
} from './SessionDropdownItem'; } 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 { interface State {
x: number; expanded: boolean;
y: number;
isVisible: boolean;
} }
interface Props { interface Props {
id?: string; label: string;
onClick?: any; onClick?: any;
relativeTo: string | Array<number>; expanded?: boolean;
items: Array<{ options: Array<{
content: string; content: string;
id?: string; id?: string;
icon?: SessionIconType | null; icon?: SessionIconType | null;
type?: SessionDropDownItemType; type?: SessionDropDownItemType;
active?: boolean; active?: boolean;
onClick?: any; onClick?: any;
display?: boolean;
}>; }>;
} }
export class SessionDropdown extends React.Component<Props, State> { export class SessionDropdown extends React.Component<Props, State> {
public static defaultProps = {
expanded: false,
};
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.state = { this.state = {
x: 0, expanded: !!this.props.expanded,
y: 0,
isVisible: false,
}; };
}
public show() {
this.setState({
isVisible: true,
});
}
public hide() { this.toggleDropdown = this.toggleDropdown.bind(this);
this.setState({
isVisible: false,
});
} }
public render() { public render() {
const { items } = this.props; const { label, options } = this.props;
const { isVisible } = this.state; const { expanded } = this.state;
const chevronOrientation = expanded ? 180 : 0;
return ( return (
<div className={classNames('session-dropdown')}> <div className="session-dropdown">
<ul> <div
{isVisible className="session-dropdown__label"
? items.map((item: any) => { onClick={this.toggleDropdown}
return item.display ? ( role="button"
<SessionDropdownItem >
id={item.id} {label}
content={item.content} <SessionIcon
icon={item.icon} iconType={SessionIconType.Chevron}
type={item.type} iconSize={SessionIconSize.Small}
active={item.active} iconRotation={chevronOrientation}
onClick={item.onClick} />
/> </div>
) : null;
}) {expanded && (
: null} <div className="session-dropdown__list-container">
</ul> {options.map((item: any) => {
return (
<SessionDropdownItem
key={item.content}
content={item.content}
icon={item.icon}
type={item.type}
active={item.active}
onClick={() => {
this.handleItemClick(item.onClick);
}}
/>
);
})}
</div>
)}
</div> </div>
); );
} }
public toggleDropdown() {
this.setState({
expanded: !this.state.expanded,
});
}
public handleItemClick(itemOnClickFn: any) {
this.setState({ expanded: false }, itemOnClickFn());
}
} }

13
ts/components/session/SessionDropdownItem.tsx
Unescape Escape View File

@ -9,7 +9,6 @@ export enum SessionDropDownItemType {
} }
interface Props { interface Props {
id: string;
content: string; content: string;
type: SessionDropDownItemType; type: SessionDropDownItemType;
icon: SessionIconType | null; icon: SessionIconType | null;
@ -32,12 +31,14 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
public render() { public render() {
const { content, type, icon, active } = this.props; const { content, type, icon, active } = this.props;
const id = this.props.id || window.generateID();
return ( return (
<li <div
id={id} className={classNames(
className={classNames(active ? 'active' : '', type || '')} 'session-dropdown__item',
active ? 'active' : '',
type || ''
)}
role="button" role="button"
onClick={this.clickHandler} onClick={this.clickHandler}
> >
@ -47,7 +48,7 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
'' ''
)} )}
<div className="item-content">{content}</div> <div className="item-content">{content}</div>
</li> </div>
); );
} }

Write Preview
Loading…
Cancel
Save