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

settings optimisations

Browse Source
pull/726/head
Vincent 5 years ago
parent 6b577915a0
commit c26097554f
11 changed files with 3548 additions and 2402 deletions
Show Stats Download Patch File Download Diff File

5
js/background.js
Unescape Escape View File

@ -921,7 +921,10 @@
window.Events.setLinkPreviewSetting(newValue);
};
window.toggleMediaPermissions = () => {};
window.toggleMediaPermissions = async () => {
const mediaPermissions = await window.getMediaPermissions();
window.setMediaPermissions(!mediaPermissions);
};
window.sendGroupInvitations = (serverInfo, pubkeys) => {
pubkeys.forEach(async pubkey => {

35
js/views/beta_release_disclaimer_view.js
Unescape Escape View File

@ -9,36 +9,13 @@
Whisper.BetaReleaseDisclaimer = Whisper.View.extend({
className: 'loki-dialog beta-disclaimer-dialog modal',
templateName: 'beta-disclaimer-dialog',
initialize(options = {}) {
this.okText = options.okText || i18n('ok');
this.render();
this.$('.betaDisclaimerView').show();
this.$('.beta-disclaimer-dialog').bind('keyup', event =>
this.onKeyup(event)
);
},
events: {
'click .ok': 'close',
},
render_attributes() {
return {
ok: this.okText,
};
},
close() {
window.storage.put('betaReleaseDisclaimerAccepted', true);
this.remove();
initialize() {
},
onKeyup(event) {
switch (event.key) {
case 'Enter':
case 'Escape':
case 'Esc':
this.close();
break;
default:
break;
}
render() {
},
});
})();

44
js/views/beta_release_disclaimer_view_old.js
Unescape Escape View File

@ -0,0 +1,44 @@
/* global Whisper, i18n, window */
// eslint-disable-next-line func-names
(function() {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.BetaReleaseDisclaimer = Whisper.View.extend({
className: 'loki-dialog beta-disclaimer-dialog modal',
templateName: 'beta-disclaimer-dialog',
initialize(options = {}) {
this.okText = options.okText || i18n('ok');
this.render();
this.$('.betaDisclaimerView').show();
this.$('.beta-disclaimer-dialog').bind('keyup', event =>
this.onKeyup(event)
);
},
events: {
'click .ok': 'close',
},
render_attributes() {
return {
ok: this.okText,
};
},
close() {
window.storage.put('betaReleaseDisclaimerAccepted', true);
this.remove();
},
onKeyup(event) {
switch (event.key) {
case 'Enter':
case 'Escape':
case 'Esc':
this.close();
break;
default:
break;
}
},
});
})();

2
package.json
Unescape Escape View File

@ -56,6 +56,7 @@
"@journeyapps/sqlcipher": "https://github.com/scottnonnenberg-signal/node-sqlcipher.git#2e28733b61640556b0272a3bfc78b0357daf71e6",
"@sindresorhus/is": "0.8.0",
"@types/dompurify": "^2.0.0",
"@types/rc-slider": "^8.6.5",
"backbone": "1.3.3",
"blob-util": "1.3.0",
"blueimp-canvas-to-blob": "3.14.0",
@ -101,6 +102,7 @@
"pify": "3.0.0",
"protobufjs": "6.8.6",
"proxy-agent": "3.0.3",
"rc-slider": "^8.7.1",
"react": "16.8.3",
"react-contextmenu": "2.11.0",
"react-dom": "16.8.3",

15
preload.js
Unescape Escape View File

@ -127,6 +127,7 @@ window.onUnblockNumber = number => ipc.send('on-unblock-number', number);
ipc.on('mediaPermissionsChanged', () => {
Whisper.events.trigger('mediaPermissionsChanged');
W;
});
ipc.on('on-unblock-number', (event, number) => {
@ -189,6 +190,17 @@ window.getSettingValue = (settingID, comparisonValue = null) => {
// Comparison value allows you to pull boolean values from any type.
// Eg. window.getSettingValue('theme', 'light')
// returns 'false' when the value is 'dark'.
if (settingID === 'media-permissions') {
let permissionValue;
// eslint-disable-next-line more/no-then
window.getMediaPermissions().then(value => {
permissionValue = value;
});
return permissionValue;
}
const settingVal = window.storage.get(settingID);
return comparisonValue ? !!settingVal === comparisonValue : settingVal;
};
@ -226,6 +238,9 @@ installSetter('link-preview-setting', 'setLinkPreviewSetting');
installGetter('spell-check', 'getSpellCheck');
installSetter('spell-check', 'setSpellCheck');
installGetter('media-permissions', 'getMediaPermissions');
installGetter('media-permissions', 'setMediaPermissions');
window.getMediaPermissions = () =>
new Promise((resolve, reject) => {
ipc.once('get-success-media-permissions', (_event, error, value) => {

268
stylesheets/_session-slider.scss
Unescape Escape View File

@ -0,0 +1,268 @@
.slider {
&-wrapper {
display: flex;
align-items: center;
margin: 20px 10px;
}
&-info {
display: block;
margin-left: 20px;
text-align: center;
p {
white-space: nowrap;
}
}
}
.rc-slider {
position: relative;
height: 14px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
-ms-touch-action: none;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: $session-shade-6;
height: 8px;
border-radius: 6px;
margin: 0px 0px 0px -1px;
}
.rc-slider-handle {
transition: $session-transition-duration;
position: absolute;
width: 6px;
height: 25px;
cursor: pointer;
cursor: -webkit-grab;
margin-top: -9.5px;
margin-left: -2.3px;
cursor: grab;
border-radius: 4px;
/* border: solid 2px rgba(0, 247, 130, 0.8); */
background-color: rgba(0, 247, 130, 1);
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.rc-slider-handle:focus {
border-color: $session-color-green;
box-shadow: 0 0 0 5px rgba($session-color-white, 0.2);
outline: none;
}
.rc-slider-handle-click-focused:focus {
border-color: rgba($session-color-white, 0.2);
box-shadow: unset;
}
.rc-slider-handle:hover {
border-color: $session-color-green;
}
.rc-slider-handle:active {
border-color: $session-color-green;
box-shadow: 0 0 5px rgba($session-color-white, 0.2);
cursor: -webkit-grabbing;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
top: -4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
margin-left: -4px;
width: 3px;
height: 6px;
background-color: $session-shade-6;
cursor: pointer;
border-radius: 2px;
vertical-align: middle;
}
.rc-slider-dot:first-child {
margin-left: -2px;
}
.rc-slider-dot:last-child {
margin-right: -2px;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-left: 0;
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
box-shadow: none;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
margin-left: -5px;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
left: 2px;
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}

2
stylesheets/manifest.scss
Unescape Escape View File

@ -30,5 +30,7 @@
@import 'session_left_pane';
@import 'session_theme_dark_left_pane';
@import 'session-slider';
// Installer
@import 'options';

55
ts/components/session/LeftPaneSettingSection.tsx
Unescape Escape View File

@ -63,32 +63,36 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
return (
<>
{categories.map(item => (
<div
key={item.id}
className={classNames(
'left-pane-setting-category-list-item',
item.id === this.state.settingCategory ? 'active' : ''
{!categories.map(item => (
<>
{!item.hidden && (
<div
key={item.id}
className={classNames(
'left-pane-setting-category-list-item',
item.id === this.state.settingCategory ? 'active' : ''
)}
role="link"
onClick={(): void => this.setCategory(item.id)}
>
<div>
<strong>{item.title}</strong>
<br />
<span className="text-subtle">{item.description}</span>
</div>
<div>
{item.id === this.state.settingCategory && (
<SessionIcon
iconSize={SessionIconSize.Medium}
iconType={SessionIconType.Chevron}
iconRotation={270}
/>
)}
</div>
</div>
)}
role="link"
onClick={(): void => this.setCategory(item.id)}
>
<div>
<strong>{item.title}</strong>
<br />
<span className="text-subtle">{item.description}</span>
</div>
<div>
{item.id === this.state.settingCategory && (
<SessionIcon
iconSize={SessionIconSize.Medium}
iconType={SessionIconType.Chevron}
iconRotation={270}
/>
)}
</div>
</div>
</>
))}
</>
);
@ -181,6 +185,7 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
id: SessionSettingCategory.Permissions,
title: window.i18n('permissionSettingsTitle'),
description: window.i18n('permissionSettingsDescription'),
hidden: true,
},
{
id: SessionSettingCategory.Notifications,

41
ts/components/session/settings/SessionSettingListItem.tsx
Unescape Escape View File

@ -1,10 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import Slider from 'rc-slider';
import { SessionToggle } from '../SessionToggle';
import { SessionButton } from '../SessionButton';
import { SessionSettingType } from './SessionSettings';
import { SessionRadioGroup } from '../SessionRadioGroup';
interface Props {
@ -14,17 +15,24 @@ interface Props {
value: any;
options?: Array<any>;
onClick?: any;
onSliderChange?: any;
content: any;
}
export class SessionSettingListItem extends React.Component<Props> {
interface State {
sliderValue: number | null;
}
export class SessionSettingListItem extends React.Component<Props, State> {
public static defaultProps = {
inline: true,
};
public constructor(props: Props) {
super(props);
this.state = {};
this.state = {
sliderValue: null,
};
this.handleClick = this.handleClick.bind(this);
}
@ -37,6 +45,9 @@ export class SessionSettingListItem extends React.Component<Props> {
SessionSettingType.Slider,
].includes(type);
const currentSliderValue =
type === SessionSettingType.Slider && (this.state.sliderValue || value);
return (
<div className={classNames('session-settings-item', inline && 'inline')}>
<div className="session-settings-item__info">
@ -75,6 +86,22 @@ export class SessionSettingListItem extends React.Component<Props> {
onClick={this.handleClick}
/>
)}
{type === SessionSettingType.Slider && (
<div className="slider-wrapper">
<Slider
dots
step={6}
min={12}
max={96}
defaultValue={value}
onAfterChange={value => this.handleSlider(value)}
/>
<div className="slider-info">
<p>{`${currentSliderValue} Hours`}</p>
</div>
</div>
)}
</div>
</div>
);
@ -83,4 +110,12 @@ export class SessionSettingListItem extends React.Component<Props> {
private handleClick() {
this.props.onClick && this.props.onClick();
}
private handleSlider(value: any) {
this.props.onSliderChange && this.props.onSliderChange(value);
this.setState({
sliderValue: value,
});
}
}

23
ts/components/session/settings/SessionSettings.tsx
Unescape Escape View File

@ -19,8 +19,6 @@ export enum SessionSettingType {
Slider = 'slider',
}
//const { Settings } = window.Signal.Types;
export interface SettingsViewProps {
category: SessionSettingCategory;
}
@ -113,7 +111,6 @@ export class SettingsView extends React.Component<SettingsViewProps> {
},
},
},
{
id: 'media-permissions',
title: window.i18n('mediaPermissionsTitle'),
@ -124,19 +121,34 @@ export class SettingsView extends React.Component<SettingsViewProps> {
setFn: window.toggleMediaPermissions,
content: {},
},
{
id: 'message-ttl',
title: window.i18n('messageTTL'),
description: window.i18n('messageTTLSettingDescription'),
hidden: false,
type: SessionSettingType.Slider,
category: SessionSettingCategory.Privacy,
setFn: undefined,
content: {},
},
];
return (
<>
{localSettings.map(setting => {
const { category } = this.props;
const renderSettings = setting.category === category;
const shouldRenderSettings = setting.category === category;
const description = setting.description || '';
const comparisonValue = setting.comparisonValue || null;
const sliderFn =
setting.type === SessionSettingType.Slider
? (value: any) => window.setSettingValue(setting.id, value)
: () => null;
return (
<div key={setting.id}>
{renderSettings &&
{shouldRenderSettings &&
!setting.hidden && (
<SessionSettingListItem
title={setting.title}
@ -146,6 +158,7 @@ export class SettingsView extends React.Component<SettingsViewProps> {
onClick={() => {
this.updateSetting(setting);
}}
onSliderChange={sliderFn}
content={setting.content || undefined}
/>
)}

5460
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save