mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Appview transforms are fixed and in place
This commit is contained in:
parent
00f75ee9be
commit
9f075125db
|
@ -83,6 +83,7 @@ $session-margin-md: 15px;
|
|||
$session-margin-lg: 20px;
|
||||
|
||||
$session-search-input-height: 34px;
|
||||
$main-view-header-height: 85px;
|
||||
|
||||
div.spacer-sm {
|
||||
height: $session-margin-sm;
|
||||
|
@ -924,13 +925,34 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.session-settings {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
&-list {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: $session-shade-6;
|
||||
height: $main-view-header-height;
|
||||
line-height: $main-view-header-height;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
|
||||
.session-icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: $session-margin-lg;
|
||||
align-items: center;
|
||||
height: $main-view-header-height;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
font-size: 15px;
|
||||
color: $session-color-white;
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
|
||||
import { SessionSettingCategory } from './session/LeftPaneSettingSection';
|
||||
import { SessionButtonColor } from './session/SessionButton';
|
||||
import { SessionIconButton, SessionIconType, SessionIconSize } from './session/icon';
|
||||
|
||||
// Grab initial values from database on startup
|
||||
const localSettings = [
|
||||
|
@ -77,8 +78,75 @@ const localSettings = [
|
|||
];
|
||||
|
||||
export class MainViewController {
|
||||
|
||||
public static renderMessageView() {
|
||||
const element = (
|
||||
ReactDOM.render(
|
||||
<MessageView/>,
|
||||
document.getElementById('main-view')
|
||||
);
|
||||
}
|
||||
|
||||
public static renderSettingsView(category: SessionSettingCategory) {
|
||||
ReactDOM.render(
|
||||
<SettingsView category={category}/>,
|
||||
document.getElementById('main-view')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
interface SettingsViewProps {
|
||||
category: SessionSettingCategory
|
||||
}
|
||||
|
||||
export class SettingsView extends React.Component<SettingsViewProps>{
|
||||
public settingsViewRef: React.RefObject<HTMLDivElement>;
|
||||
|
||||
public constructor(props: any) {
|
||||
super(props);
|
||||
this.settingsViewRef = React.createRef();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { category } = this.props;
|
||||
|
||||
return (
|
||||
<div className="session-settings">
|
||||
<SettingsHeader category={category}/>
|
||||
<div
|
||||
ref = {this.settingsViewRef}
|
||||
className="session-settings-list"
|
||||
>
|
||||
|
||||
|
||||
{localSettings.map(setting => {
|
||||
return (
|
||||
<div key={setting.id}>
|
||||
{setting.category === category && (
|
||||
<SessionSettingListItem
|
||||
title={setting.title}
|
||||
description={setting.description}
|
||||
type={setting.type}
|
||||
value={setting.value}
|
||||
onClick={() => {
|
||||
SettingsManager.updateSetting(setting);
|
||||
}}
|
||||
buttonText={setting.buttonText || undefined}
|
||||
buttonColor={setting.buttonColor || undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class MessageView extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="conversation-stack">
|
||||
<div className="conversation placeholder">
|
||||
<div className="conversation-header" />
|
||||
|
@ -94,39 +162,35 @@ export class MainViewController {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(element, document.getElementById('main-view'));
|
||||
}
|
||||
|
||||
public static renderSettingsView(category: SessionSettingCategory) {
|
||||
const element = (
|
||||
<div className="session-settings-list">
|
||||
{localSettings.map(setting => {
|
||||
return (
|
||||
<div key={setting.id}>
|
||||
{setting.category === category && (
|
||||
<SessionSettingListItem
|
||||
title={setting.title}
|
||||
description={setting.description}
|
||||
type={setting.type}
|
||||
value={setting.value}
|
||||
onClick={() => {
|
||||
SettingsManager.updateSetting(setting);
|
||||
}}
|
||||
buttonText={setting.buttonText || undefined}
|
||||
buttonColor={setting.buttonColor || undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(element, document.getElementById('main-view'));
|
||||
}
|
||||
}
|
||||
|
||||
export class SettingsHeader extends React.Component<SettingsViewProps>{
|
||||
public constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public focusSearch(){
|
||||
$('.left-pane-setting-section .session-search-input input').focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
const category = String(this.props.category)
|
||||
|
||||
return (
|
||||
<div className="session-settings-header">
|
||||
{category[0].toUpperCase() + category.substr(1)} Settings
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.Search}
|
||||
iconSize={SessionIconSize.Large}
|
||||
onClick={this.focusSearch}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class SettingsManager {
|
||||
public static updateSetting({ id, type, value }) {
|
||||
if (type === SessionSettingType.Toggle) {
|
||||
|
|
|
@ -15,6 +15,7 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
|
|||
import { SessionSearchInput } from './SessionSearchInput';
|
||||
|
||||
export enum SessionSettingCategory {
|
||||
General = 'general',
|
||||
Account = 'account',
|
||||
Privacy = 'privacy',
|
||||
Notifications = 'notifications',
|
||||
|
@ -33,7 +34,7 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
settingCategory: SessionSettingCategory.Account,
|
||||
settingCategory: SessionSettingCategory.General,
|
||||
searchQuery: '',
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue