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

Fixed orderin of toasts with Maps

Browse Source
pull/702/head
Vincent 6 years ago
parent 9cd27abf31
commit 08cc218364
8 changed files with 104 additions and 112 deletions
Show Stats Download Patch File Download Diff File

55
js/background.js
Unescape Escape View File

@ -802,7 +802,7 @@
appView.openConversation(groupId, {}); appView.openConversation(groupId, {});
}; };
window.toasts = {}; window.toasts = new Map();
window.pushToast = options => { window.pushToast = options => {
// Setting toasts with the same ID can be used to prevent identical // Setting toasts with the same ID can be used to prevent identical
// toasts from appearing at once (stacking). // toasts from appearing at once (stacking).
@ -810,45 +810,38 @@
const params = { const params = {
title: options.title, title: options.title,
description: options.description ? options.description : '', id:
type: options.type ? options.type : '', options.id ||
id: options.id ? options.id : '', Math.random()
.toString(36)
.substring(3),
description: options.description || '',
type: options.type || '',
}; };
// Give all toasts an ID. User may define. // Give all toasts an ID. User may define.
const toastID = options.id const toastID = params.id;
? options.id const toast = !!toastID && window.toasts.get(toastID);
: Math.random() if (toast) {
.toString(36) window.toasts.get(toastID).update(params);
.substring(3); } else {
let toastExists = false;
// eslint-disable-next-line no-restricted-syntax
for (const key in window.toasts) {
if (!!options.id && key === options.id) {
toastExists = true;
window.toasts[key].update(params);
break;
}
}
if (!toastExists) {
// Make new Toast // Make new Toast
window.toasts[toastID] = new Whisper.SessionToastView({ window.toasts.set(
el: window.$('#session-toast-container'), toastID,
}); new Whisper.SessionToastView({
el: $('#session-toast-container'),
})
);
window.toasts[toastID].render(); window.toasts.get(toastID).render();
window.toasts[toastID].update(params); window.toasts.get(toastID).update(params);
} }
// Remove some toasts if too many exist // Remove some toasts if too many exist
const maxToasts = 6; const maxToasts = 6;
const numToasts = window.toasts.length; while (window.toasts.size > maxToasts) {
const finalToastID = window.toasts.keys().next().value;
if (numToasts > maxToasts) { window.toasts.get(finalToastID).fadeToast();
const finalToastID = window.toasts.keys[window.toasts.length];
window.toasts[finalToastID].fadeToast();
} }
return toastID; return toastID;

7
js/models/conversations.js
Unescape Escape View File

@ -2648,8 +2648,11 @@
copyPublicKey() { copyPublicKey() {
clipboard.writeText(this.id); clipboard.writeText(this.id);
window.Whisper.events.trigger('showToast', {
message: i18n('copiedPublicKey'), window.pushToast({
title: i18n('copiedPublicKey'),
type: 'success',
id: 'copiedPublicKey',
}); });
}, },

26
js/models/messages.js
Unescape Escape View File

@ -1021,8 +1021,11 @@
} else { } else {
clipboard.writeText(this.OUR_NUMBER); clipboard.writeText(this.OUR_NUMBER);
} }
window.Whisper.events.trigger('showToast', {
message: i18n('copiedPublicKey'), window.pushToast({
title: i18n('copiedPublicKey'),
type: 'success',
id: 'copiedPublicKey',
}); });
}, },
@ -1037,12 +1040,16 @@
const success = await channelAPI.banUser(source); const success = await channelAPI.banUser(source);
if (success) { if (success) {
window.Whisper.events.trigger('showToast', { window.pushToast({
message: i18n('userBanned'), title: i18n('userBanned'),
type: 'success',
id: 'userBanned',
}); });
} else { } else {
window.Whisper.events.trigger('showToast', { window.pushToast({
message: i18n('userBanFailed'), title: i18n('userBanFailed'),
type: 'error',
id: 'userBanFailed',
}); });
} }
}, },
@ -1074,8 +1081,11 @@
copyText() { copyText() {
clipboard.writeText(this.get('body')); clipboard.writeText(this.get('body'));
window.Whisper.events.trigger('showToast', {
message: i18n('copiedMessage'), window.pushToast({
title: i18n('copiedMessage'),
type: 'success',
id: 'copiedMessage',
}); });
}, },

6
js/views/add_server_dialog_view.js
Unescape Escape View File

@ -53,8 +53,10 @@
this.showError(result.errorCode); this.showError(result.errorCode);
return; return;
} }
window.Whisper.events.trigger('showToast', { window.pushToast({
message: i18n('connectToServerSuccess'), title: i18n('connectToServerSuccess'),
type: 'success',
id: 'connectToServerSuccess',
}); });
this.close(); this.close();
}); });

21
js/views/session_toast_view.js
Unescape Escape View File

@ -1,4 +1,4 @@
/* global Whisper, $ */ /* global Whisper */
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
(function() { (function() {
@ -9,8 +9,8 @@
Whisper.SessionToastView = Whisper.View.extend({ Whisper.SessionToastView = Whisper.View.extend({
initialize(options) { initialize(options) {
this.props = { this.props = {
el: $('#session-toast-container'),
title: options.title, title: options.title,
id: options.id,
description: options.description, description: options.description,
fadeToast: this.fadeToast.bind(this), fadeToast: this.fadeToast.bind(this),
closeToast: this.closeToast.bind(this), closeToast: this.closeToast.bind(this),
@ -29,13 +29,14 @@
update(options) { update(options) {
this.props.title = options.title; this.props.title = options.title;
this.props.description = options.description ? options.description : ''; this.props.id = options.id;
this.props.type = options.type ? options.type : ''; this.props.description = options.description || '';
this.props.id = options.id ? options.id : ''; this.props.type = options.type || '';
this.toastView.update(this.props); this.toastView.update(this.props);
this.showToast(); this.showToast();
clearTimeout(this.timer); clearTimeout(this.timer);
this.timer = setTimeout(this.fadeToast.bind(this), 4000); this.timer = setTimeout(this.fadeToast.bind(this), 4000);
}, },
@ -45,22 +46,22 @@
}, },
fadeToast() { fadeToast() {
this.removeToast();
this.toastView.$el.fadeOut(500, () => { this.toastView.$el.fadeOut(500, () => {
this.removeToast(); this.toastView.remove();
}); });
}, },
closeToast() { closeToast() {
this.removeToast();
this.toastView.$el.fadeOut(125, () => { this.toastView.$el.fadeOut(125, () => {
this.removeToast(); this.toastView.remove();
}); });
}, },
removeToast() { removeToast() {
this.toastView.remove();
if (this.props.id) { if (this.props.id) {
delete window.toasts[this.props.id]; window.toasts.delete(this.props.id);
} }
}, },
}); });

77
stylesheets/_session.scss
Unescape Escape View File

@ -307,51 +307,50 @@ $session_message-container-border-radius: 5px;
padding-top: 5px; padding-top: 5px;
} }
.odule-message__container { .module-message__container {
border-radius: $session_message-container-border-radius; border-radius: $session_message-container-border-radius;
}
label {
user-select: none;
}
label { .module-message__attachment-container,
user-select: none; .module-image--curved-bottom-right,
} .module-image--curved-bottom-left {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $session_message-container-border-radius;
border-bottom-right-radius: $session_message-container-border-radius;
}
.module-message__attachment-container, .conversation-header .session-icon-button {
.module-image--curved-bottom-right, @include standard-icon-button();
.module-image--curved-bottom-left { }
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $session_message-container-border-radius;
border-bottom-right-radius: $session_message-container-border-radius;
}
.conversation-header .session-icon-button { .module-conversation-header,
@include standard-icon-button(); .message-selection-overlay {
} height: $session-conversation-header-height;
}
.module-conversation-header, .message-selection-overlay {
.message-selection-overlay { position: absolute;
height: $session-conversation-header-height; left: 15px;
} right: 15px;
display: none;
.message-selection-overlay { .close-button {
position: absolute; float: left;
left: 15px; margin-top: 17px;
right: 15px; margin-left: 7px;
display: none;
.close-button {
float: left;
margin-top: 17px;
margin-left: 7px;
}
}
.message-selection-overlay div[role='button'] {
display: inline-block;
} }
}
.message-selection-overlay div[role='button'] {
display: inline-block;
}
.message-selection-overlay .button-group { .message-selection-overlay .button-group {
float: right; float: right;
margin-top: 13.5px; margin-top: 13.5px;
}
} }
.hidden { .hidden {
@ -427,10 +426,6 @@ $session_message-container-border-radius: 5px;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
&:nth-child(n + 6) {
display: none;
}
.toast-icon, .toast-icon,
.toast-info { .toast-info {
display: flex; display: flex;

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

@ -317,12 +317,6 @@ export class ConversationHeader extends React.Component<Props> {
</div> </div>
<div className="button-group"> <div className="button-group">
<SessionButton
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Primary}
text={i18n('forwardMessage')}
/>
<SessionButton <SessionButton
buttonType={SessionButtonType.Default} buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Danger} buttonColor={SessionButtonColor.Danger}

18
ts/components/session/SessionToast.tsx
Unescape Escape View File

@ -17,18 +17,14 @@ export enum SessionToastType {
interface Props { interface Props {
title: string; title: string;
description?: string;
type?: SessionToastType;
id?: string; id?: string;
type?: SessionToastType;
description?: string;
fadeToast: any; fadeToast: any;
closeToast: any; closeToast: any;
} }
export class SessionToast extends React.PureComponent<Props> { export class SessionToast extends React.PureComponent<Props> {
public static defaultProps = {
id: '',
};
constructor(props: any) { constructor(props: any) {
super(props); super(props);
} }
@ -38,7 +34,9 @@ export class SessionToast extends React.PureComponent<Props> {
const toastType = type ? type : SessionToastType.Info; const toastType = type ? type : SessionToastType.Info;
const toastDesc = description ? description : ''; const toastDesc = description ? description : '';
const toastIconSize = toastDesc ? SessionIconSize.Large : SessionIconSize.Medium; const toastIconSize = toastDesc
? SessionIconSize.Large
: SessionIconSize.Medium;
let toastIcon; let toastIcon;
switch (type) { switch (type) {
@ -58,14 +56,10 @@ export class SessionToast extends React.PureComponent<Props> {
toastIcon = SessionIconType.Info; toastIcon = SessionIconType.Info;
} }
return ( return (
<div className={classNames('session-toast', toastType)}> <div className={classNames('session-toast', toastType)}>
<div className="toast-icon"> <div className="toast-icon">
<SessionIcon <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />
iconType={toastIcon}
iconSize={toastIconSize}
/>
</div> </div>
<div className="toast-info"> <div className="toast-info">
<div className="toast-info-container"> <div className="toast-info-container">

Write Preview
Loading…
Cancel
Save