From 2101abb9111180a2f364d59fb6e2697cb7abdb04 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 12 Feb 2020 13:53:18 +1100
Subject: [PATCH 1/3] Modal blurs and stylistic simplifications
---
background.html | 70 -------------------
js/background.js | 4 +-
js/views/app_view.js | 17 +++--
js/views/session_confirm_view.js | 4 +-
js/views/session_toast_view.js | 2 +-
preload.js | 4 +-
stylesheets/_mentions.scss | 4 +-
stylesheets/_session.scss | 16 ++++-
stylesheets/_session_group_panel.scss | 2 +-
.../conversation/CreateGroupDialog.tsx | 4 +-
.../conversation/InviteFriendsDialog.tsx | 57 +++++++++------
.../conversation/UpdateGroupDialog.tsx | 11 +--
.../session/SessionChannelSettings.tsx | 25 +++++--
ts/global.d.ts | 1 +
14 files changed, 93 insertions(+), 128 deletions(-)
diff --git a/background.html b/background.html
index 35f38a92b..b1ba2769d 100644
--- a/background.html
+++ b/background.html
@@ -41,7 +41,6 @@
<script type='text/x-tmpl-mustache' id='two-column'>
<div id='session-toast-container'></div>
- <div id='session-confirm-container'></div>
<div class='gutter'>
<div class='network-status-container'></div>
<div class='left-pane-placeholder'></div>
@@ -156,75 +155,6 @@
</div>
</div>
</script>
- <script type='text/x-tmpl-mustache' id='password-change-dialog'>
- <div class="content">
- {{ #title }}
- <h4>{{ title }}</h4>
- {{ /title }}
- <input type='password' id='old-password' placeholder='Old password' autofocus>
- <input type='password' id='new-password' placeholder='New password' autofocus>
- <input type='password' id='new-password-confirmation' placeholder='Type in your new password again' autofocus>
- <div class='error'></div>
- <div class='buttons'>
- <button class='cancel' tabindex='2'>{{ cancel }}</button>
- <button class='ok' tabindex='1'>{{ ok }}</button>
- </div>
- </div>
- </script>
- <script type='text/x-tmpl-mustache' id='nickname-dialog'>
- <div class="content">
- {{ #title }}
- <h4>{{ title }}</h4>
- {{ /title }}
- <input type='text' name='name' class='name' placeholder='Type a name' autofocus maxlength='25'>
- {{ #message }}
- <div class='message'>{{ message }}</div>
- {{ /message }}
- <div class='buttons'>
- <button class='cancel' tabindex='2'>{{ cancel }}</button>
- <button class='ok' tabindex='1'>{{ ok }}</button>
- </div>
- </div>
- </script>
-
- <script type='text/x-tmpl-mustache' id='device-pairing-words-dialog'>
- <div class="content">
- <h4>{{ title }}</h4>
- <p>{{ secretWords }}</p>
- <button id='close'>{{ closeText }}</button>
- </div>
- </script>
-
- <script type='text/x-tmpl-mustache' id='connecting-to-server-template'>
- <div class="content">
- {{ #title }}
- <h4>{{ title }}</h4>
- {{ /title }}
- <div class='buttons'>
- <button class='cancel' tabindex='2'>{{ cancel }}</button>
- </div>
- </div>
- </script>
- <script type='text/x-tmpl-mustache' id='add-server-template'>
- <div class="content">
- {{ #title }}
- <h4>{{ title }}</h4>
- {{ /title }}
- <input type='text' id='server-url' placeholder='Server Url' autofocus>
- <div class='error'></div>
- <div class='buttons'>
- <button class='cancel' tabindex='2'>{{ cancel }}</button>
- <button class='ok' tabindex='1'>{{ ok }}</button>
- </div>
- </div>
- </script>
- <script type='text/x-tmpl-mustache' id='qr-code-template'>
- <div class="content">
- <div id="qr">
- </div>
- <button class='ok' tabindex='1'>{{ ok }}</button>
- </div>
- </script>
<script type='text/x-tmpl-mustache' id='identicon-svg'>
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
<circle cx='50' cy='50' r='40' fill='{{ color }}' />
diff --git a/js/background.js b/js/background.js
index 123dca978..2522db37e 100644
--- a/js/background.js
+++ b/js/background.js
@@ -802,7 +802,7 @@
window.confirmationDialog = params => {
const confirmDialog = new Whisper.SessionConfirmView({
- el: $('#session-confirm-container'),
+ el: $('body'),
title: params.title,
message: params.message,
messageSub: params.messageSub || undefined,
@@ -969,7 +969,7 @@
window.toasts.set(
toastID,
new Whisper.SessionToastView({
- el: $('#session-toast-container'),
+ el: $('body'),
})
);
diff --git a/js/views/app_view.js b/js/views/app_view.js
index 7fbf40b8a..ee5f45126 100644
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -181,11 +181,11 @@
},
showEditProfileDialog(options) {
const dialog = new Whisper.EditProfileDialogView(options);
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showUserDetailsDialog(options) {
const dialog = new Whisper.UserDetailsDialogView(options);
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showNicknameDialog({ pubKey, title, message, nickname, onOk, onCancel }) {
const _title = title || `Change nickname for ${pubKey}`;
@@ -196,16 +196,16 @@
resolve: onOk,
reject: onCancel,
});
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
dialog.focusInput();
},
showPasswordDialog(options) {
const dialog = new Whisper.PasswordDialogView(options);
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showSeedDialog() {
const dialog = new Whisper.SeedDialogView();
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showQRDialog(string) {
const dialog = new Whisper.QRDialogView({
@@ -215,12 +215,11 @@
},
showDevicePairingDialog(options) {
const dialog = new Whisper.DevicePairingDialogView(options);
-
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showDevicePairingWordsDialog() {
const dialog = new Whisper.DevicePairingWordsDialogView();
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showCreateGroup() {
// TODO: make it impossible to open 2 dialogs as once
@@ -231,7 +230,7 @@
},
showUpdateGroupDialog(groupConvo) {
const dialog = new Whisper.UpdateGroupDialogView(groupConvo);
- this.el.append(dialog.el);
+ this.el.prepend(dialog.el);
},
showSessionRestoreConfirmation(options) {
const dialog = new Whisper.ConfirmSessionResetView(options);
diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js
index 42084513a..ce03a8ed2 100644
--- a/js/views/session_confirm_view.js
+++ b/js/views/session_confirm_view.js
@@ -28,12 +28,12 @@
this.$('.session-confirm-wrapper').remove();
this.confirmView = new Whisper.ReactWrapperView({
- className: 'session-confirm-wrapper',
+ className: 'loki-dialog modal session-confirm-wrapper',
Component: window.Signal.Components.SessionConfirm,
props: this.props,
});
- this.$el.append(this.confirmView.el);
+ this.$el.prepend(this.confirmView.el);
},
ok() {
diff --git a/js/views/session_toast_view.js b/js/views/session_toast_view.js
index bbcb8b67d..9fcc77a79 100644
--- a/js/views/session_toast_view.js
+++ b/js/views/session_toast_view.js
@@ -25,7 +25,7 @@
props: this.props,
});
- this.$el.append(this.toastView.el);
+ this.$el.prepend(this.toastView.el);
},
update(options) {
diff --git a/preload.js b/preload.js
index 8fb3936d1..a26d1a7a0 100644
--- a/preload.js
+++ b/preload.js
@@ -67,6 +67,8 @@ window.CONSTANTS = {
MAX_GROUP_NAME_LENGTH: 64,
DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
MAX_CONNECTION_DURATION: 5000,
+ // Limited due to the proof-of-work requirement
+ SMALL_GROUP_SIZE_LIMIT: 10,
};
window.versionInfo = {
@@ -492,8 +494,6 @@ window.shortenPubkey = pubkey => `(...${pubkey.substring(pubkey.length - 6)})`;
window.pubkeyPattern = /@[a-fA-F0-9]{64,66}\b/g;
-// Limited due to the proof-of-work requirement
-window.SMALL_GROUP_SIZE_LIMIT = 10;
// TODO: activate SealedSender once it is ready on all platforms
window.lokiFeatureFlags = {
diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 0f8ae10b2..104164dea 100644
--- a/stylesheets/_mentions.scss
+++ b/stylesheets/_mentions.scss
@@ -94,8 +94,10 @@
.friend-selection-list {
max-height: 240px;
- overflow-y: scroll;
+ overflow-y: auto;
margin: 4px;
+ border-top: 1px solid #2f2f2f;
+ border-bottom: 1px solid #2f2f2f;
.check-mark {
float: right;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 5781ced1e..ff5cfd62a 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -115,6 +115,7 @@ $main-view-header-height: 85px;
$session-left-pane-width: 300px;
$session-left-pane-sections-container-width: 80px;
+
div.spacer-sm {
height: $session-margin-sm;
}
@@ -134,6 +135,13 @@ div.spacer-lg {
color: rgba($color, 0.6);
}
+
+// Blur for modals
+.loki-dialog ~ .index.inbox{
+ filter: blur(1px);
+ transition: filter 0.1s;
+}
+
.text-subtle {
opacity: 0.6;
}
@@ -597,7 +605,7 @@ label {
cursor: pointer;
}
-#session-toast-container {
+.session-toast-wrapper {
position: fixed;
right: $session-margin-lg;
bottom: $session-margin-lg;
@@ -1761,3 +1769,9 @@ input {
opacity: 0.8;
}
}
+
+
+.invite-friends-container {
+ height: $session-icon-size-lg;
+ width: $session-icon-size-lg;
+}
\ No newline at end of file
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 9cf26d536..4393fed6f 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -19,7 +19,7 @@
margin: auto;
}
- .session-icon-button {
+ .session-icon-button, .invite-friends-container {
margin: 0 $session-margin-md;
}
}
diff --git a/ts/components/conversation/CreateGroupDialog.tsx b/ts/components/conversation/CreateGroupDialog.tsx
index 1daf947db..57ce634c9 100644
--- a/ts/components/conversation/CreateGroupDialog.tsx
+++ b/ts/components/conversation/CreateGroupDialog.tsx
@@ -197,10 +197,10 @@ export class CreateGroupDialog extends React.Component<Props, State> {
if (
updatedFriends.filter(d => d.checkmarked).length >
- window.SMALL_GROUP_SIZE_LIMIT - 1
+ window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT - 1
) {
const msg = `${this.props.i18n('maxGroupMembersError')} ${
- window.SMALL_GROUP_SIZE_LIMIT
+ window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
}`;
this.onShowError(msg);
diff --git a/ts/components/conversation/InviteFriendsDialog.tsx b/ts/components/conversation/InviteFriendsDialog.tsx
index a581e8454..a94fcaa4c 100644
--- a/ts/components/conversation/InviteFriendsDialog.tsx
+++ b/ts/components/conversation/InviteFriendsDialog.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Contact, MemberList } from './MemberList';
import { SessionModal } from '../session/SessionModal';
import { SessionButton } from '../session/SessionButton';
+import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
interface Props {
friendList: Array<any>;
@@ -11,14 +11,8 @@ interface Props {
onClose: any;
}
-declare global {
- interface Window {
- i18n: any;
- }
-}
-
interface State {
- friendList: Array<Contact>;
+ friendList: Array<ContactType>;
}
export class InviteFriendsDialog extends React.Component<Props, State> {
@@ -59,6 +53,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
}
public render() {
+
const titleText = `${window.i18n('addingFriends')} ${this.props.chatName}`;
const cancelText = window.i18n('cancel');
const okText = window.i18n('ok');
@@ -74,12 +69,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
<div className="spacer-lg" />
<div className="friend-selection-list">
- <MemberList
- members={this.state.friendList}
- selected={{}}
- i18n={window.i18n}
- onMemberClicked={this.onMemberClicked}
- />
+ {this.renderMemberList()}
</div>
{hasFriends ? null : (
<>
@@ -115,6 +105,23 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
this.closeDialog();
}
+ private renderMemberList() {
+ const members = this.state.friendList;
+
+ return members.map((member: ContactType) => (
+ <SessionMemberListItem
+ member={member}
+ isSelected={false}
+ onSelect={(selectedMember: ContactType) => {
+ this.onMemberClicked(selectedMember);
+ }}
+ onUnselect={(selectedMember: ContactType) => {
+ this.onMemberClicked(selectedMember);
+ }}
+ />
+ ));
+ }
+
private onKeyUp(event: any) {
switch (event.key) {
case 'Enter':
@@ -128,15 +135,9 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
}
}
- private closeDialog() {
- window.removeEventListener('keyup', this.onKeyUp);
-
- this.props.onClose();
- }
-
- private onMemberClicked(selected: any) {
+ private onMemberClicked(clickedMember: ContactType) {
const updatedFriends = this.state.friendList.map(member => {
- if (member.id === selected.id) {
+ if (member.id === clickedMember.id) {
return { ...member, checkmarked: !member.checkmarked };
} else {
return member;
@@ -150,4 +151,16 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
};
});
}
+
+ private closeDialog() {
+ window.removeEventListener('keyup', this.onKeyUp);
+
+ console.log(this.props.onClose);
+ console.log(this.props.onClose);
+ console.log(this.props.onClose);
+ console.log(this.props.onClose);
+
+ this.props.onClose();
+ }
+
}
diff --git a/ts/components/conversation/UpdateGroupDialog.tsx b/ts/components/conversation/UpdateGroupDialog.tsx
index 105ac33b3..c11cf3384 100644
--- a/ts/components/conversation/UpdateGroupDialog.tsx
+++ b/ts/components/conversation/UpdateGroupDialog.tsx
@@ -4,13 +4,6 @@ import { Contact, MemberList } from './MemberList';
import { SessionModal } from './../session/SessionModal';
-declare global {
- interface Window {
- SMALL_GROUP_SIZE_LIMIT: number;
- Lodash: any;
- }
-}
-
interface Props {
titleText: string;
groupName: string;
@@ -229,9 +222,9 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
const newMemberCount = this.getMemberCount(updatedFriends);
- if (newMemberCount > window.SMALL_GROUP_SIZE_LIMIT) {
+ if (newMemberCount > window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT) {
const msg = `${this.props.i18n('maxGroupMembersError')} ${
- window.SMALL_GROUP_SIZE_LIMIT
+ window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
}`;
this.onShowError(msg);
diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx
index 8a5155b40..05dc37c54 100644
--- a/ts/components/session/SessionChannelSettings.tsx
+++ b/ts/components/session/SessionChannelSettings.tsx
@@ -50,7 +50,10 @@ export class SessionChannelSettings extends React.Component<Props, any> {
}
public componentDidUpdate() {
- this.getMediaGalleryProps()
+ const mediaScanInterval = 1000;
+
+ setTimeout(() => {
+ this.getMediaGalleryProps()
.then(({ documents, media, onItemClick }) => {
this.setState({
documents,
@@ -59,6 +62,8 @@ export class SessionChannelSettings extends React.Component<Props, any> {
});
})
.ignore();
+ }, mediaScanInterval);
+
}
public async getMediaGalleryProps() {
@@ -244,6 +249,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
private renderHeader() {
const { id, onGoBack, onInviteFriends, avatarPath } = this.props;
+ const shouldShowInviteFriends = !this.props.isPublic;
return (
<div className="group-settings-header">
@@ -259,11 +265,18 @@ export class SessionChannelSettings extends React.Component<Props, any> {
conversationType="group"
size={80}
/>
- <SessionIconButton
- iconType={SessionIconType.AddUser}
- iconSize={SessionIconSize.Medium}
- onClick={onInviteFriends}
- />
+
+ <div className="invite-friends-container">
+ {shouldShowInviteFriends && (
+ <SessionIconButton
+ iconType={SessionIconType.AddUser}
+ iconSize={SessionIconSize.Medium}
+ onClick={onInviteFriends}
+ />
+ )}
+ </div>
+
+
</div>
);
}
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 882a32e3f..6de051bd7 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -3,6 +3,7 @@ interface Window {
versionInfo: any;
Events: any;
+ Lodash: any;
deleteAllData: any;
clearLocalData: any;
getAccountManager: any;
From cf0b9e45fae77e82cb35129243b40332ecd2b374 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 12 Feb 2020 14:29:07 +1100
Subject: [PATCH 2/3] Emoji spacing & message highlight formatting
---
js/modules/loki_app_dot_net_api.js | 4 ++-
preload.js | 1 -
stylesheets/_session.scss | 27 ++++++++++++-------
stylesheets/_session_group_panel.scss | 3 ++-
stylesheets/_session_left_pane.scss | 4 +--
.../conversation/InviteFriendsDialog.tsx | 17 ++++--------
.../session/LeftPaneSettingSection.tsx | 7 -----
.../session/SessionChannelSettings.tsx | 21 +++++++--------
8 files changed, 38 insertions(+), 46 deletions(-)
diff --git a/js/modules/loki_app_dot_net_api.js b/js/modules/loki_app_dot_net_api.js
index 293d6a522..c9664abef 100644
--- a/js/modules/loki_app_dot_net_api.js
+++ b/js/modules/loki_app_dot_net_api.js
@@ -614,7 +614,9 @@ class LokiAppDotNetServerAPI {
`serverRequest ${mode} error`,
e.code,
e.message,
- `json: ${txtResponse}`, 'attempting connection to', url
+ `json: ${txtResponse}`,
+ 'attempting connection to',
+ url
);
} else {
log.info(
diff --git a/preload.js b/preload.js
index a26d1a7a0..da4eb218f 100644
--- a/preload.js
+++ b/preload.js
@@ -494,7 +494,6 @@ window.shortenPubkey = pubkey => `(...${pubkey.substring(pubkey.length - 6)})`;
window.pubkeyPattern = /@[a-fA-F0-9]{64,66}\b/g;
-
// TODO: activate SealedSender once it is ready on all platforms
window.lokiFeatureFlags = {
multiDeviceUnpairing: true,
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index ff5cfd62a..891c2f24d 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -115,7 +115,6 @@ $main-view-header-height: 85px;
$session-left-pane-width: 300px;
$session-left-pane-sections-container-width: 80px;
-
div.spacer-sm {
height: $session-margin-sm;
}
@@ -135,9 +134,8 @@ div.spacer-lg {
color: rgba($color, 0.6);
}
-
// Blur for modals
-.loki-dialog ~ .index.inbox{
+.loki-dialog ~ .index.inbox {
filter: blur(1px);
transition: filter 0.1s;
}
@@ -232,7 +230,7 @@ $session_message-container-border-radius: 5px;
pointer-events: none;
}
.overlay {
- display: block !important;
+ display: flex !important;
z-index: 1;
}
@@ -580,12 +578,15 @@ label {
.message-selection-overlay {
display: none;
position: absolute;
- right: $session-margin-sm;
- left: $session-margin-md;
+ left: 0px;
+ right: 0px;
+ margin: 0px $session-margin-sm;
+ align-items: center;
+ justify-content: space-between;
+ height: 48px;
.close-button {
float: left;
- margin: 17px 0px 0px 0px;
}
}
.message-selection-overlay div[role='button'] {
@@ -594,7 +595,6 @@ label {
.message-selection-overlay .button-group {
float: right;
- margin-top: 13.5px;
}
.hidden {
@@ -1293,7 +1293,15 @@ label {
.module-message {
font-family: 'SF Pro Text';
border-radius: 5px;
+
+ &__text--incoming {
+ /* Add padding to large emojis in chat */
+ img.emoji.jumbo {
+ margin: $session-margin-sm 0px;
+ }
+ }
}
+
}
.bottom-bar {
@@ -1770,8 +1778,7 @@ input {
}
}
-
.invite-friends-container {
height: $session-icon-size-lg;
width: $session-icon-size-lg;
-}
\ No newline at end of file
+}
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 4393fed6f..f9d179803 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -19,7 +19,8 @@
margin: auto;
}
- .session-icon-button, .invite-friends-container {
+ .session-icon-button,
+ .invite-friends-container {
margin: 0 $session-margin-md;
}
}
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 8024524e2..a35a8c41d 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -550,11 +550,11 @@ $session-compose-margin: 20px;
}
&.active {
- background-color: $session-shade-9;
+ background-color: $session-shade-7;
}
&:hover {
- background-color: $session-shade-7;
+ background-color: $session-shade-5;
}
&__buttons {
diff --git a/ts/components/conversation/InviteFriendsDialog.tsx b/ts/components/conversation/InviteFriendsDialog.tsx
index a94fcaa4c..c601f62aa 100644
--- a/ts/components/conversation/InviteFriendsDialog.tsx
+++ b/ts/components/conversation/InviteFriendsDialog.tsx
@@ -2,7 +2,10 @@ import React from 'react';
import { SessionModal } from '../session/SessionModal';
import { SessionButton } from '../session/SessionButton';
-import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
+import {
+ ContactType,
+ SessionMemberListItem,
+} from '../session/SessionMemberListItem';
interface Props {
friendList: Array<any>;
@@ -53,7 +56,6 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
}
public render() {
-
const titleText = `${window.i18n('addingFriends')} ${this.props.chatName}`;
const cancelText = window.i18n('cancel');
const okText = window.i18n('ok');
@@ -68,9 +70,7 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
>
<div className="spacer-lg" />
- <div className="friend-selection-list">
- {this.renderMemberList()}
- </div>
+ <div className="friend-selection-list">{this.renderMemberList()}</div>
{hasFriends ? null : (
<>
<div className="spacer-lg" />
@@ -154,13 +154,6 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
private closeDialog() {
window.removeEventListener('keyup', this.onKeyUp);
-
- console.log(this.props.onClose);
- console.log(this.props.onClose);
- console.log(this.props.onClose);
- console.log(this.props.onClose);
-
this.props.onClose();
}
-
}
diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx
index e1cabaccc..b540e9afd 100644
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/ts/components/session/LeftPaneSettingSection.tsx
@@ -76,8 +76,6 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
>
<div>
<strong>{item.title}</strong>
- <br />
- <span className="text-subtle">{item.description}</span>
</div>
<div>
@@ -181,31 +179,26 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
{
id: SessionSettingCategory.Appearance,
title: window.i18n('appearanceSettingsTitle'),
- description: window.i18n('appearanceSettingsDescription'),
hidden: false,
},
{
id: SessionSettingCategory.Privacy,
title: window.i18n('privacySettingsTitle'),
- description: window.i18n('privacySettingsDescription'),
hidden: false,
},
{
id: SessionSettingCategory.Permissions,
title: window.i18n('permissionSettingsTitle'),
- description: window.i18n('permissionSettingsDescription'),
hidden: true,
},
{
id: SessionSettingCategory.Notifications,
title: window.i18n('notificationSettingsTitle'),
- description: window.i18n('notificationSettingsDescription'),
hidden: false,
},
{
id: SessionSettingCategory.Devices,
title: window.i18n('devicesSettingsTitle'),
- description: window.i18n('devicesSettingsDescription'),
},
];
}
diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx
index 05dc37c54..54a62097b 100644
--- a/ts/components/session/SessionChannelSettings.tsx
+++ b/ts/components/session/SessionChannelSettings.tsx
@@ -54,16 +54,15 @@ export class SessionChannelSettings extends React.Component<Props, any> {
setTimeout(() => {
this.getMediaGalleryProps()
- .then(({ documents, media, onItemClick }) => {
- this.setState({
- documents,
- media,
- onItemClick,
- });
- })
- .ignore();
+ .then(({ documents, media, onItemClick }) => {
+ this.setState({
+ documents,
+ media,
+ onItemClick,
+ });
+ })
+ .ignore();
}, mediaScanInterval);
-
}
public async getMediaGalleryProps() {
@@ -265,7 +264,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
conversationType="group"
size={80}
/>
-
+
<div className="invite-friends-container">
{shouldShowInviteFriends && (
<SessionIconButton
@@ -275,8 +274,6 @@ export class SessionChannelSettings extends React.Component<Props, any> {
/>
)}
</div>
-
-
</div>
);
}
From 24839b3bf9b0061738d89d3a362966108b0d518d Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 12 Feb 2020 15:03:20 +1100
Subject: [PATCH 3/3] Contacts styling
---
stylesheets/_session.scss | 2 +-
stylesheets/_session_left_pane.scss | 15 ++++++++++++---
2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 891c2f24d..32a79c44d 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -111,7 +111,7 @@ $session-font-h3: 20px;
$session-font-h4: 16px;
$session-search-input-height: 34px;
-$main-view-header-height: 85px;
+$main-view-header-height: 63px;
$session-left-pane-width: 300px;
$session-left-pane-sections-container-width: 80px;
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index a35a8c41d..1497c4238 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -135,7 +135,7 @@ $session-compose-margin: 20px;
}
.module-left-pane {
- border-right: none !important;
+ border-right: 1px solid rgba($session-color-white, 0.1) !important;
width: $session-left-pane-width;
position: relative;
height: -webkit-fill-available;
@@ -213,6 +213,8 @@ $session-compose-margin: 20px;
&__list {
height: -webkit-fill-available;
+ border-top: 1px solid rgba(255,255,255,0.05);
+
&-popup {
width: -webkit-fill-available;
height: -webkit-fill-available;
@@ -485,6 +487,8 @@ $session-compose-margin: 20px;
flex-grow: 1;
.module-conversation-list-item {
+ background-color: $session-shade-4;
+
&--has-friend-request {
&:first-child {
border-top: none !important;
@@ -496,6 +500,11 @@ $session-compose-margin: 20px;
.module-conversation__user__profile-name {
font-size: 13px !important;
}
+
+ }
+
+ &__header__date, &__message {
+ display: none;
}
&__buttons {
@@ -550,11 +559,11 @@ $session-compose-margin: 20px;
}
&.active {
- background-color: $session-shade-7;
+ background-color: $session-shade-5;
}
&:hover {
- background-color: $session-shade-5;
+ background-color: $session-shade-6;
}
&__buttons {