WIP: User nicknames (#1618)
* WIP Adding change nickname dialog. * WIP adding nickname change dialog. * WIP nickname dialog. * WIP: Able to set conversation nicknames. Next step cleaning and adding to conversation list menu. * Fix message capitilisations. * Add change nickname to conversation list menu. * Enable clear nickname menu item. * Added messages for changing nicknames. * Clearing nicknames working from header and message list. * Adding modal styling to nickname modal. * Reorder nickname menu item positions. * Add group based conditional nickname menu options to conversation header menu. * minor tidying. * Remove unused error causing el option. * Formatting. * Linting fixes. * Made PR fixes * Prioritise displaying nicknames for inviting new closed group members and updating closed group members.pull/1622/head
Warrick
4 years ago
committed by
GitHub
parent
e41d182972
commit
cb307790f6
@ -0,0 +1,54 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionNicknameDialog = Whisper.View.extend({
|
||||
className: 'loki-dialog session-nickname-wrapper modal',
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
title: options.title,
|
||||
message: options.message,
|
||||
onClickOk: this.ok.bind(this),
|
||||
onClickClose: this.cancel.bind(this),
|
||||
convoId: options.convoId,
|
||||
placeholder: options.placeholder,
|
||||
};
|
||||
this.render();
|
||||
},
|
||||
registerEvents() {
|
||||
this.unregisterEvents();
|
||||
document.addEventListener('keyup', this.props.onClickClose, false);
|
||||
},
|
||||
|
||||
unregisterEvents() {
|
||||
document.removeEventListener('keyup', this.props.onClickClose, false);
|
||||
this.$('session-nickname-wrapper').remove();
|
||||
},
|
||||
render() {
|
||||
this.dialogView = new Whisper.ReactWrapperView({
|
||||
className: 'session-nickname-wrapper',
|
||||
Component: window.Signal.Components.SessionNicknameDialog,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.append(this.dialogView.el);
|
||||
return this;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
cancel() {
|
||||
this.remove();
|
||||
this.unregisterEvents();
|
||||
},
|
||||
ok() {
|
||||
this.remove();
|
||||
this.unregisterEvents();
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,80 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ConversationController } from '../../session/conversations/ConversationController';
|
||||
import { SessionModal } from './SessionModal';
|
||||
import { SessionButton, SessionButtonColor } from './SessionButton';
|
||||
import { DefaultTheme, withTheme } from 'styled-components';
|
||||
|
||||
type Props = {
|
||||
message: string;
|
||||
title: string;
|
||||
placeholder?: string;
|
||||
onOk?: any;
|
||||
onClose?: any;
|
||||
onClickOk: any;
|
||||
onClickClose: any;
|
||||
hideCancel: boolean;
|
||||
okTheme: SessionButtonColor;
|
||||
theme: DefaultTheme;
|
||||
convoId?: string;
|
||||
};
|
||||
|
||||
const SessionNicknameInner = (props: Props) => {
|
||||
const { title = '', message, onClickOk, onClickClose, convoId, placeholder } = props;
|
||||
const showHeader = true;
|
||||
const [nickname, setNickname] = useState('');
|
||||
|
||||
/**
|
||||
* Changes the state of nickname variable. If enter is pressed, saves the current
|
||||
* entered nickname value as the nickname.
|
||||
*/
|
||||
const onNicknameInput = async (event: any) => {
|
||||
if (event.key === 'Enter') {
|
||||
await saveNickname();
|
||||
}
|
||||
const currentNicknameEntered = event.target.value;
|
||||
setNickname(currentNicknameEntered);
|
||||
};
|
||||
|
||||
/**
|
||||
* Saves the currently entered nickname.
|
||||
*/
|
||||
const saveNickname = async () => {
|
||||
if (!convoId) {
|
||||
return;
|
||||
}
|
||||
const convo = ConversationController.getInstance().get(convoId);
|
||||
onClickOk(nickname);
|
||||
await convo.setNickname(nickname);
|
||||
};
|
||||
|
||||
return (
|
||||
<SessionModal
|
||||
title={title}
|
||||
onClose={onClickClose}
|
||||
showExitIcon={false}
|
||||
showHeader={showHeader}
|
||||
theme={props.theme}
|
||||
>
|
||||
{!showHeader && <div className="spacer-lg" />}
|
||||
|
||||
<div className="session-modal__centered">
|
||||
<span className="subtle">{message}</span>
|
||||
<div className="spacer-lg" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="nickname"
|
||||
id="nickname-modal-input"
|
||||
placeholder={placeholder}
|
||||
onKeyUp={onNicknameInput}
|
||||
/>
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton text={window.i18n('ok')} onClick={saveNickname} />
|
||||
<SessionButton text={window.i18n('cancel')} onClick={onClickClose} />
|
||||
</div>
|
||||
</SessionModal>
|
||||
);
|
||||
};
|
||||
|
||||
export const SessionNicknameDialog = withTheme(SessionNicknameInner);
|
||||
Loading…
Reference in New Issue