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 6 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" "message": "Editing Profile"
}, },
"editProfileModalTitle": { "editProfileModalTitle": {
"message": "Edit Profile", "message": "Edit Profile",
"description": "Title for the Edit Profile modal" "description": "Title for the Edit Profile modal"
}, },
"profileName": { "profileName": {
"message": "Profile Name" "message": "Profile Name"
}, },

2
background.html
Unescape Escape View File

@ -60,7 +60,6 @@
</div> </div>
</div> </div>
<div class='conversation-stack'> <div class='conversation-stack'>
<div id='settings-container'></div>
<div class='conversation placeholder'> <div class='conversation placeholder'>
<div class='conversation-header'></div> <div class='conversation-header'></div>
<div class='container'> <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/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/scroll_down_button_view.js'></script>
<script type='text/javascript' src='js/views/toast_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_toast_view.js'></script>
<script type='text/javascript' src='js/views/session_toggle_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> <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, {}); appView.openConversation(groupId, {});
}; };
// $(document).ready(() => {
// window.settingsView = new Whisper.SessionSettingsView({
$(document).ready(() => { // el: $('#settings-container'),
window.settingsView = new Whisper.SessionSettingsView({ // });
el: $('#settings-container'), // window.settingsView.render();
}); // });
window.settingsView.render();
});
window.generateID = () => window.generateID = () =>
Math.random() Math.random()

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

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

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

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

12
stylesheets/_session.scss
Unescape Escape View File

@ -529,7 +529,8 @@ label {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
&__icons, &__close { &__icons,
&__close {
width: 60px; width: 60px;
} }
&__icons { &__icons {
@ -567,7 +568,6 @@ label {
margin-left: $session-margin-sm; margin-left: $session-margin-sm;
} }
} }
} }
.session-toggle { .session-toggle {
@ -680,16 +680,8 @@ label {
} }
} }
.edit-profile-dialog .image-upload-section { .edit-profile-dialog .image-upload-section {
position: absolute; position: absolute;
margin-top: 50px; margin-top: 50px;
margin-left: 75px; margin-left: 75px;
} }
#settings-container {
width: 100%;
height: 100%;
background-color: blue;
}

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

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

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

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

@ -2,10 +2,13 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Avatar } from './Avatar'; import { Avatar } from './Avatar';
import { SessionModal } from './session/SessionModal';
import { SessionButton, SessionButtonColor } from './session/SessionButton'; 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 { declare global {
interface Window { interface Window {
@ -100,7 +103,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
</div> </div>
</div> </div>
<div className="spacer md"></div> <div className="spacer md" />
<input <input
type="text" type="text"
@ -115,7 +118,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
<div className="message">{i18n('editProfileDisplayNameWarning')}</div> <div className="message">{i18n('editProfileDisplayNameWarning')}</div>
<span className={errorMessageClasses}>{this.state.errorMessage}</span> <span className={errorMessageClasses}>{this.state.errorMessage}</span>
<div className="spacer-lg"></div> <div className="spacer-lg" />
<div className="session-modal__button-group"> <div className="session-modal__button-group">
<SessionButton <SessionButton

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

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

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

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

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

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
interface Props { interface Props {
i18n: any; i18n: any;
} }
@ -13,16 +12,6 @@ export class SessionSettings extends React.Component<Props> {
public render() { public render() {
const i18n = this.props.i18n; const i18n = this.props.i18n;
return ( return <div />;
<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>
);
} }
} }

Write Preview
Loading…
Cancel
Save