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

Major rework of context menus

Browse Source
pull/710/head
Vincent 6 years ago
parent d0d5012e07
commit 9afb8b4d5e
13 changed files with 255 additions and 242 deletions
Show Stats Download Patch File Download Diff File

6
js/background.js
Unescape Escape View File

@ -802,8 +802,10 @@
appView.openConversation(groupId, {});
};
window.generateID = () => Math.random().toString(36).substring(3);
window.generateID = () =>
Math.random()
.toString(36)
.substring(3);
window.toasts = new Map();
window.pushToast = options => {

4
js/modules/signal.js
Unescape Escape View File

@ -53,7 +53,9 @@ const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog');
const { SessionToast } = require('../../ts/components/session/SessionToast');
const { SessionToggle } = require('../../ts/components/session/SessionToggle');
const { SessionModal } = require('../../ts/components/session/SessionModal');
const { SessionDropdown } = require('../../ts/components/session/SessionDropdown');
const {
SessionDropdown,
} = require('../../ts/components/session/SessionDropdown');
const {
SessionRegistrationView,
} = require('../../ts/components/session/SessionRegistrationView');

12
js/views/session_dropdown_view.js
Unescape Escape View File

@ -25,14 +25,8 @@
this.$el.append(this.dropdownView.el);
},
openDropdown() {
},
closeDropdown() {
},
openDropdown() {},
closeDropdown() {},
});
})();
})();

54
stylesheets/_session.scss
Unescape Escape View File

@ -60,7 +60,7 @@ $session-opaque-dark-3: rgba(0, 0, 0, 0.5);
$session-color-white: #fff;
$session-color-dark-grey: #353535;
$session-color-black: #000;
$session-color-danger: #FF453A;
$session-color-danger: #ff453a;
$session-color-primary: $session-shade-13;
$session-color-secondary: $session-shade-16;
@ -561,37 +561,36 @@ label {
}
}
.react-contextmenu {
padding: 0px;
margin: 0px;
// .react-contextmenu {
// padding: 0px;
// margin: 0px;
// border: none !important;
// border-radius: 0px;
// }
// .react-contextmenu-item {
// display: flex;
// align-items: center;
border: none !important;
border-radius: 0px;
}
// height: 25px;
// padding: 0px 10px;
.react-contextmenu-item {
display: flex;
align-items: center;
// background-color: #1B1B1B;
height: 25px;
padding: 0px 10px;
// color: $session-color-white;
// font-family: 'Wasa';
// font-size: 12px;
// line-height: $session-icon-size-sm;
// font-weight: 700;
background-color: #1b1b1b;
// &--active, &--selected{
// background-color: $session-shade-7 !important;
// }
// }
color: $session-color-white;
font-family: 'Wasa';
font-size: 12px;
line-height: $session-icon-size-sm;
font-weight: 700;
&--active,
&--selected {
background-color: $session-shade-7 !important;
}
}
.session-dropdown{
.session-dropdown {
position: absolute;
top: 50px;
left: 50px;
@ -608,7 +607,7 @@ label {
height: 25px;
padding-right: 7px;
background-color: #1B1B1B;
background-color: #1b1b1b;
color: $session-color-white;
font-family: 'Wasa';
@ -626,7 +625,8 @@ label {
margin-left: 6px;
}
&.active, &:hover{
&.active,
&:hover {
background-color: $session-shade-7;
}

2
stylesheets/_session_theme_dark.scss
Unescape Escape View File

@ -53,6 +53,4 @@
margin-left: 5px;
}
}
}

102
ts/components/ConversationListItem.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
@ -12,9 +13,6 @@ import { TypingAnimation } from './conversation/TypingAnimation';
import { Colors, LocalizerType } from '../types/Util';
import { SessionDropdown } from './session/SessionDropdown';
import { SessionDropDownItemType } from './session/SessionDropdownItem';
export type PropsData = {
id: string;
phoneNumber: string;
@ -191,78 +189,36 @@ export class ConversationListItem extends React.PureComponent<Props> {
const blockTitle = isBlocked ? i18n('unblockUser') : i18n('blockUser');
const blockHandler = isBlocked ? onUnblockContact : onBlockContact;
const items = [
{
content: blockTitle,
display: true,//!isPublic && !isMe,
onClick: blockHandler
},
{
content: i18n('changeNickname'),
display: true,//!isPublic && !isMe,
onClick: onChangeNickname,
},
{
content: i18n('clearNickname'),
display: true,//!isPublic && !isMe && hasNickname,
onClick: onClearNickname,
},
{
content: i18n('copyPublicKey'),
display: true,//!isPublic,
onClick: onCopyPublicKey,
},
{
content: i18n('deleteMessages'),
onClick: onDeleteMessages,
},
{
content: i18n('deleteContact'),
display: true,//!isMe && isClosable && !isPublic,
onClick: onDeleteContact,
},
{
content: i18n('deletePublicChannel'),
display: true,//!isMe && isClosable && !isPublic,
type: SessionDropDownItemType.Default,
onClick: onDeleteContact,
},
];
return (
<SessionDropdown items={items}/>
<ContextMenu id={triggerId}>
{!isPublic && !isMe ? (
<MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
) : null}
{!isPublic && !isMe ? (
<MenuItem onClick={onChangeNickname}>
{i18n('changeNickname')}
</MenuItem>
) : null}
{!isPublic && !isMe && hasNickname ? (
<MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
) : null}
{!isPublic ? (
<MenuItem onClick={onCopyPublicKey}>{i18n('copyPublicKey')}</MenuItem>
) : null}
<MenuItem onClick={onDeleteMessages}>{i18n('deleteMessages')}</MenuItem>
{!isMe && isClosable ? (
!isPublic ? (
<MenuItem onClick={onDeleteContact}>
{i18n('deleteContact')}
</MenuItem>
) : (
<MenuItem onClick={onDeleteContact}>
{i18n('deletePublicChannel')}
</MenuItem>
)
) : null}
</ContextMenu>
);
// <ContextMenu id={triggerId}>
// {!isPublic && !isMe ? (
// <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
// ) : null}
// {!isPublic && !isMe ? (
// <MenuItem onClick={onChangeNickname}>
// {i18n('changeNickname')}
// </MenuItem>
// ) : null}
// {!isPublic && !isMe && hasNickname ? (
// <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
// ) : null}
// {!isPublic ? (
// <MenuItem onClick={onCopyPublicKey}>{i18n('copyPublicKey')}</MenuItem>
// ) : null}
// <MenuItem onClick={onDeleteMessages}>{i18n('deleteMessages')}</MenuItem>
// {!isMe && isClosable ? (
// !isPublic ? (
// <MenuItem onClick={onDeleteContact}>
// {i18n('deleteContact')}
// </MenuItem>
// ) : (
// <MenuItem onClick={onDeleteContact}>
// {i18n('deletePublicChannel')}
// </MenuItem>
// )
// ) : null}
// </ContextMenu>
//);
}
public renderMessage() {

16
ts/components/UserDetailsDialog.tsx
Unescape Escape View File

@ -37,37 +37,37 @@ export class UserDetailsDialog extends React.Component<Props> {
const items = [
{
content: "sdgsdfg",
display: true,//!isPublic && !isMe,
content: 'sdgsdfg',
display: true, //!isPublic && !isMe,
},
{
content: i18n('changeNickname'),
display: true,//!isPublic && !isMe,
display: true, //!isPublic && !isMe,
},
{
content: i18n('clearNickname'),
display: true,//!isPublic && !isMe && hasNickname,
display: true, //!isPublic && !isMe && hasNickname,
},
{
content: i18n('copyPublicKey'),
display: false,//!isPublic,
display: false, //!isPublic,
},
{
content: i18n('deleteMessages'),
},
{
content: i18n('deleteContact'),
display: true,//!isMe && isClosable && !isPublic,
display: true, //!isMe && isClosable && !isPublic,
},
{
content: i18n('deletePublicChannel'),
display: true,//!isMe && isClosable && !isPublic,
display: true, //!isMe && isClosable && !isPublic,
},
];
return (
<div className="content">
<SessionDropdown items={items}/>
<SessionDropdown items={items} />
<div className="avatar-center">
<div className="avatar-center-inner">{this.renderAvatar()}</div>

6
ts/components/conversation/ConversationHeader.tsx
Unescape Escape View File

@ -22,6 +22,8 @@ import {
SessionButtonType,
} from '../session/SessionButton';
import { SessionDropdownTrigger } from '../session/SessionDropdownTrigger';
interface TimerOption {
name: string;
value: number;
@ -245,12 +247,12 @@ export class ConversationHeader extends React.Component<Props> {
}
return (
<ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
<SessionDropdownTrigger>
<SessionIconButton
iconType={SessionIconType.Ellipses}
iconSize={SessionIconSize.Large}
/>
</ContextMenuTrigger>
</SessionDropdownTrigger>
);
}

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

@ -2,36 +2,66 @@ import React from 'react';
import classNames from 'classnames';
import { SessionIconType } from './icon/';
import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
import {
SessionDropdownItem,
SessionDropDownItemType,
} from './SessionDropdownItem';
// THIS IS A FUTURE-PROOFING ELEMENT TO REPLACE ELECTRON CONTEXTMENUS IN PRELOAD.JS
interface State {
x: number;
y: number;
isVisible: boolean;
}
interface Props {
id?: string,
id?: string;
onClick?: any;
relativeTo: string | Array<number>;
items: Array<{
content: string,
id?: string,
icon?: SessionIconType | null,
type?: SessionDropDownItemType,
active?: boolean,
onClick?: any,
display?: boolean,
}>,
}
export class SessionDropdown extends React.PureComponent<Props> {
content: string;
id?: string;
icon?: SessionIconType | null;
type?: SessionDropDownItemType;
active?: boolean;
onClick?: any;
display?: boolean;
}>;
}
export class SessionDropdown extends React.Component<Props, State> {
constructor(props: any) {
super(props);
this.state = {
x: 0,
y: 0,
isVisible: false,
};
}
public show() {
this.setState({
isVisible: true,
});
}
public hide() {
this.setState({
isVisible: false,
});
}
public render() {
const { items } = this.props;
const { isVisible } = this.state;
return (
<div className={classNames('session-dropdown')}>
<ul>
{items.map((item: any) => {
{isVisible
? items.map((item: any) => {
return item.display ? (
<SessionDropdownItem
id={item.id}
@ -41,13 +71,11 @@ export class SessionDropdown extends React.PureComponent<Props> {
active={item.active}
onClick={item.onClick}
/>
) : null
}
)}
) : null;
})
: null}
</ul>
</div>
);
}
}

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

@ -1,23 +1,21 @@
import React from 'react';
import classNames from 'classnames';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
import { generateID } from './tools/ComponentTools';
export enum SessionDropDownItemType {
Default = 'default',
Danger = 'danger',
}
interface Props {
id: string,
content: string,
type: SessionDropDownItemType,
icon: SessionIconType | null,
active: boolean,
onClick: any,
id: string;
content: string;
type: SessionDropDownItemType;
icon: SessionIconType | null;
active: boolean;
onClick: any;
}
export class SessionDropdownItem extends React.PureComponent<Props> {
@ -41,28 +39,23 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
<li
id={id}
className={classNames(active ? 'active' : '', type || '')}
role="button"
onClick={this.clickHandler}
>
{ icon ? <SessionIcon
iconType = { icon }
iconSize = { SessionIconSize.Small }
/>
: ''
}
<div className="item-content">
{content}
</div>
{icon ? (
<SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
) : (
''
)}
<div className="item-content">{content}</div>
</li>
);
}
private clickHandler(e: any){
private clickHandler(e: any) {
if (this.props.onClick) {
e.stopPropagation();
this.props.onClick();
}
}
}
}

37
ts/components/session/SessionDropdownTrigger.tsx
Unescape Escape View File

@ -0,0 +1,37 @@
import React from 'react';
interface Props {
//mouseButton: Number;
posX: number;
posY: number;
}
export class SessionDropdownTrigger extends React.Component<Props> {
public static defaultProps = {
//mouseButton: 2, // 0 is left click, 2 is right click
posX: 0,
posY: 0,
};
constructor(props: any) {
super(props);
}
public handleDropdownClick = (event: any) => {
event.preventDefault();
event.stopPropagation();
let x = event.clientX || (event.touches && event.touches[0].pageX);
let y = event.clientY || (event.touches && event.touches[0].pageY);
if (this.props.posX) {
x -= this.props.posX;
}
if (this.props.posY) {
y -= this.props.posY;
}
};
public render() {
return <div role="button" onClick={this.handleDropdownClick} />;
}
}

7
ts/components/session/tools/ComponentTools.tsx
Unescape Escape View File

@ -1,7 +1,8 @@
// This is a collection of tools which can be ued to simplify the esign and rendering process of your components.
export function generateID(){
export function generateID() {
// Generates a unique ID for your component
return Math.random().toString(36).substring(3);
}
const buffer = new Uint32Array(10);
return window.crypto.getRandomValues(buffer)[0].toString();
}

Write Preview
Loading…
Cancel
Save