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

Updated React dialogs to SessionModals

Browse Source
pull/710/head
Vincent 5 years ago
parent 228e4ca81e
commit 2419272608
14 changed files with 120 additions and 134 deletions
Show Stats Download Patch File Download Diff File

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

@ -2260,13 +2260,11 @@
"message": "Editing Profile"
},
"editProfileModalTitle": {
"message": "Edit Profile",
"description": "Title for the Edit Profile modal"
},
"profileName": {
"message": "Profile Name"
},

2
background.html
Unescape Escape View File

@ -60,7 +60,6 @@
</div>
</div>
<div class='conversation-stack'>
<div id='settings-container'></div>
<div class='conversation placeholder'>
<div class='conversation-header'></div>
<div class='container'>
@ -701,7 +700,6 @@
<script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
<script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
<script type='text/javascript' src='js/views/toast_view.js'></script>
<script type='text/javascript' src='js/views/session_settings_view.js'></script>
<script type='text/javascript' src='js/views/session_toast_view.js'></script>
<script type='text/javascript' src='js/views/session_toggle_view.js'></script>
<script type='text/javascript' src='js/views/session_modal_view.js'></script>

16
js/background.js
Unescape Escape View File

@ -802,16 +802,12 @@
appView.openConversation(groupId, {});
};
$(document).ready(() => {
window.settingsView = new Whisper.SessionSettingsView({
el: $('#settings-container'),
});
window.settingsView.render();
});
// $(document).ready(() => {
// window.settingsView = new Whisper.SessionSettingsView({
// el: $('#settings-container'),
// });
// window.settingsView.render();
// });
window.generateID = () =>
Math.random()

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

@ -50,8 +50,9 @@ const {
} = require('../../ts/components/conversation/CreateGroupDialog');
const { EditProfileDialog } = require('../../ts/components/EditProfileDialog');
const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog');
const { DevicePairingDialog } = require('../../ts/components/DevicePairingDialog');
const { SessionSettings } = require('../../ts/components/session/SessionSettings');
const {
SessionSettings,
} = require('../../ts/components/session/SessionSettings');
const { SessionToast } = require('../../ts/components/session/SessionToast');
const { SessionToggle } = require('../../ts/components/session/SessionToggle');
const { SessionModal } = require('../../ts/components/session/SessionModal');
@ -250,7 +251,6 @@ exports.setup = (options = {}) => {
CreateGroupDialog,
EditProfileDialog,
UserDetailsDialog,
DevicePairingDialog,
SessionRegistrationView,
ConfirmDialog,
UpdateGroupDialog,

5
js/views/session_settings_view.js
Unescape Escape View File

@ -7,9 +7,7 @@
window.Whisper = window.Whisper || {};
Whisper.SessionSettingsView = Whisper.View.extend({
initialize(options) {
console.log(options);
initialize() {
this.render();
},
render() {
@ -28,4 +26,3 @@
},
});
})();

16
stylesheets/_session.scss
Unescape Escape View File

@ -529,7 +529,8 @@ label {
font-size: 15px;
font-weight: 700;
&__icons, &__close {
&__icons,
&__close {
width: 60px;
}
&__icons {
@ -551,7 +552,7 @@ label {
line-height: 16px;
font-size: 13px;
.message{
.message {
text-align: center;
}
}
@ -560,14 +561,13 @@ label {
display: flex;
justify-content: flex-end;
&__center{
&__center {
align-items: center;
}
.session-button {
margin-left: $session-margin-sm;
}
}
}
.session-toggle {
@ -680,16 +680,8 @@ label {
}
}
.edit-profile-dialog .image-upload-section {
position: absolute;
margin-top: 50px;
margin-left: 75px;
}
#settings-container {
width: 100%;
height: 100%;
background-color: blue;
}

18
ts/components/ConfirmDialog.tsx
Unescape Escape View File

@ -19,20 +19,24 @@ export class ConfirmDialog extends React.Component<Props> {
public render() {
return (
<SessionModal title={this.props.titleText} onClose={() => null} onOk={() => null}>
<div className="spacer-md"></div>
<SessionModal
title={this.props.titleText}
onClose={() => null}
onOk={() => null}
>
<div className="spacer-md" />
<p className="messageText">{this.props.messageText}</p>
<div className="spacer-md"></div>
<div className="spacer-md" />
<div className="session-modal__button-group">
<SessionButton
text = {this.props.okText}
onClick = {this.props.onConfirm}
text={this.props.okText}
onClick={this.props.onConfirm}
/>
<SessionButton
text = {this.props.cancelText}
onClick = {this.props.onClose}
text={this.props.cancelText}
onClick={this.props.onClose}
/>
</div>
</SessionModal>

0
ts/components/DevicePairingDialog.tsx
Unescape Escape View File

17
ts/components/EditProfileDialog.tsx
Unescape Escape View File

@ -2,10 +2,13 @@ import React from 'react';
import classNames from 'classnames';
import { Avatar } from './Avatar';
import { SessionModal } from './session/SessionModal';
import { SessionButton, SessionButtonColor } from './session/SessionButton';
import { SessionIconButton, SessionIconType, SessionIconSize } from './session/icon';
import {
SessionIconButton,
SessionIconSize,
SessionIconType,
} from './session/icon';
import { SessionModal } from './session/SessionModal';
declare global {
interface Window {
@ -87,8 +90,8 @@ export class EditProfileDialog extends React.Component<Props, State> {
/>
<SessionIconButton
iconType = {SessionIconType.Upload}
iconSize = {SessionIconSize.Large}
iconType={SessionIconType.Upload}
iconSize={SessionIconSize.Large}
onClick={() => {
const el = this.inputEl.current;
if (el) {
@ -100,7 +103,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
</div>
</div>
<div className="spacer md"></div>
<div className="spacer md" />
<input
type="text"
@ -115,7 +118,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
<div className="message">{i18n('editProfileDisplayNameWarning')}</div>
<span className={errorMessageClasses}>{this.state.errorMessage}</span>
<div className="spacer-lg"></div>
<div className="spacer-lg" />
<div className="session-modal__button-group">
<SessionButton

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

@ -2,7 +2,11 @@ import React from 'react';
import { Avatar } from './Avatar';
import { SessionModal } from './session/SessionModal';
import { SessionButton, SessionButtonType, SessionButtonColor } from './session/SessionButton';
import {
SessionButton,
SessionButtonColor,
SessionButtonType,
} from './session/SessionButton';
declare global {
interface Window {

7
ts/components/conversation/CreateGroupDialog.tsx
Unescape Escape View File

@ -2,6 +2,8 @@ import React from 'react';
import classNames from 'classnames';
import { Contact, MemberList } from './MemberList';
import { SessionModal } from './../session/SessionModal';
declare global {
interface Window {
Lodash: any;
@ -92,8 +94,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
);
return (
<div className="content">
<p className="titleText">{titleText}</p>
<SessionModal title={titleText} onClose={() => null} onOk={() => null}>
<p className={errorMessageClasses}>{this.state.errorMessage}</p>
<input
type="text"
@ -123,7 +124,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
{okText}
</button>
</div>
</div>
</SessionModal>
);
}

11
ts/components/conversation/UpdateGroupDialog.tsx
Unescape Escape View File

@ -2,6 +2,8 @@ import React from 'react';
import classNames from 'classnames';
import { Contact, MemberList } from './MemberList';
import { SessionModal } from './../session/SessionModal';
declare global {
interface Window {
SMALL_GROUP_SIZE_LIMIT: number;
@ -105,9 +107,11 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
);
return (
<div className="content">
<p className="titleText">{titleText}</p>
<SessionModal title={titleText} onClose={() => null} onOk={() => null}>
<div className="spacer-md" />
<p className={errorMessageClasses}>{errorMsg}</p>
<div className="spacer-md" />
<input
type="text"
id="group-name"
@ -121,6 +125,7 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
aria-required={true}
autoFocus={true}
/>
<div className="friend-selection-list">
<MemberList
members={this.state.friendList}
@ -140,7 +145,7 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
{okText}
</button>
</div>
</div>
</SessionModal>
);
}

17
ts/components/session/SessionModal.tsx
Unescape Escape View File

@ -19,7 +19,6 @@ interface State {
}
export class SessionModal extends React.PureComponent<Props, State> {
constructor(props: any) {
super(props);
this.state = {
@ -48,21 +47,21 @@ export class SessionModal extends React.PureComponent<Props, State> {
</div>
<div className="session-modal__header__title">{title}</div>
<div className="session-modal__header__icons">
{ headerIconButtons ? headerIconButtons.map((iconItem: any) => {
{headerIconButtons
? headerIconButtons.map((iconItem: any) => {
return (
<SessionIconButton
key={iconItem.type}
iconType={iconItem.type}
iconSize={SessionIconSize.Medium}
/>
)
}) : null
}
);
})
: null}
</div>
</div>
<div className="session-modal__body">
{this.props.children}
</div>
<div className="session-modal__body">{this.props.children}</div>
</div>
) : null;
}
@ -76,7 +75,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
this.props.onClose();
}
public onKeyUp(event: any){
public onKeyUp(event: any) {
switch (event.key) {
case 'Enter':
this.props.onOk();

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

@ -1,6 +1,5 @@
import React from 'react';
interface Props {
i18n: any;
}
@ -13,16 +12,6 @@ export class SessionSettings extends React.Component<Props> {
public render() {
const i18n = this.props.i18n;
return (
<div>
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
gakslfadsnkjnbtbnl Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum sapiente adipisci molestias iusto aut harum vel, voluptas illo laboriosam, doloremque alias, ducimus tenetur ad! Saepe inventore at quas nulla ab!
</div>
);
return <div />;
}
}

Write Preview
Loading…
Cancel
Save