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

Messages display temporary fix and panel optimisations

Browse Source
pull/717/head
Vincent 5 years ago
parent dd421d58f1
commit d20d62e8c6
8 changed files with 634 additions and 22 deletions
Show Stats Download Patch File Download Diff File

11
js/background.js
Unescape Escape View File

@ -880,16 +880,15 @@
};
window.toggleTheme = () => {
const theme = window.Events.getThemeSetting();
const updatedTheme = (theme === 'dark') ? 'light' : 'dark';
const updatedTheme = theme === 'dark' ? 'light' : 'dark';
$(document.body)
.removeClass('dark-theme')
.removeClass('light-theme')
.addClass(`${updatedTheme}-theme`);
.removeClass('dark-theme')
.removeClass('light-theme')
.addClass(`${updatedTheme}-theme`);
window.Events.setThemeSetting(updatedTheme);
}
};
window.sendGroupInvitations = (serverInfo, pubkeys) => {
pubkeys.forEach(async pubkey => {

2
js/views/app_view.js
Unescape Escape View File

@ -44,7 +44,7 @@
openView(view) {
this.el.innerHTML = '';
this.el.append(view.el);
this.delegateEvents();
this.delegateEvents();
},
openDebugLog() {
this.closeDebugLog();

26
js/views/inbox_view.js
Unescape Escape View File

@ -1,4 +1,6 @@
/* global
/*
global
$
ConversationController,
extension,
ConversationController
@ -20,7 +22,19 @@
className: 'conversation-stack',
open(conversation) {
const id = `conversation-${conversation.cid}`;
if (id !== this.el.firstChild.id) {
const container = $('#main-view .conversation-stack');
const conversationOpened = container.children()[0].id === id
// To limit the size of the DOM for speed
const maxNumConversations = 5;
const numConversations = container.children().not('.conversation.placeholder').length;
const shouldRemoveConversation = numConversations > maxNumConversations;
if (shouldRemoveConversation){
container.children()[numConversations - 1].remove();
}
if (! conversationOpened) {
this.$el
.first()
.find('video, audio')
@ -33,15 +47,19 @@
model: conversation,
window: this.model.window,
});
view.view.resetScrollPosition();
// eslint-disable-next-line prefer-destructuring
$el = view.$el;
}
$el.prependTo(this.el);
container.prepend($el);
}
conversation.trigger('opened');
},
close(conversation) {
const $el = this.$(`#conversation-${conversation.cid}`);
const $el = $(`#conversation-${conversation.cid}`);
if ($el && $el.length > 0) {
$el.remove();
}

8
stylesheets/_session.scss
Unescape Escape View File

@ -51,7 +51,7 @@ $session-shade-13: #474646;
$session-shade-14: #535865;
$session-shade-15: #5b6c72;
$session-shade-16: #979797;
$session-shade-17: #180a0a;
$session-shade-17: #a0a0a0;
$session-shade-18: #141414;
$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
@ -711,7 +711,7 @@ label {
@include text-highlight($session-color-green);
color: black;
font-family: monospace;
font-style: normal;
font-size: 11px;
@ -782,7 +782,7 @@ label {
height: 25px;
padding: 0px 10px;
background-color: #1b1b1b;
background-color: $session-shade-4;
color: $session-color-white;
font-family: 'Wasa';
@ -818,7 +818,7 @@ label {
height: 25px;
padding-right: 7px;
background-color: #1b1b1b;
background-color: $session-shade-4;
color: $session-color-white;
font-family: 'Wasa';

558
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -0,0 +1,558 @@
$session-compose-margin: 20px;
.module-conversation-list-item {
@at-root .light-theme #{&} {
@include session-dark-background-lighter;
&:hover {
@include session-dark-background-hover;
}
}
@at-root .dark-theme #{&} {
@include session-dark-background-lighter;
&:hover {
@include session-dark-background-hover;
}
}
}
.gutter {
width: 380px !important;
background: none !important;
padding-right: 5px !important;
}
.module-conversation {
&-list-item {
&--has-unread {
border-left: 4px solid $session-color-green !important;
}
&__unread-count {
@at-root .light-theme #{&} {
color: $session-color-black !important;
background-color: $session-color-white !important;
}
@at-root .dark-theme #{&} {
color: $session-color-white !important;
background-color: $session-shade-10 !important;
}
position: static !important;
font-weight: 700 !important;
box-shadow: none !important;
margin: 0 !important;
}
&__header__date,
&__header__date--has-unread {
flex-grow: 1 !important;
text-align: end !important;
}
&__message__text {
color: $session-shade-17;
&--has-unread {
@at-root .light-theme #{&} {
color: $session-shade-4 !important;
}
@at-root .dark-theme #{&} {
color: $session-color-white !important;
}
}
}
&__header__name {
flex-grow: 0 !important;
padding-right: 5px !important;
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-shade-17;
}
}
&__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
}
}
}
&__user__profile {
&-number,
&-name {
@at-root .light-theme #{&} {
color: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-shade-17;
}
font-size: 15px;
}
}
}
.module-conversation-list-item--is-selected {
background-color: $color-dark-70;
.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
}
}
}
.inbox {
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
@include session-dark-background;
}
}
.module-left-pane {
border-right: none !important;
width: 300px;
height: -webkit-fill-available;
@at-root .light-theme #{&} {
background: $session-color-white !important;
}
@at-root .dark-theme #{&} {
background: $session-shade-4 !important;
}
&-session {
display: flex;
}
&__sections-container {
height: -webkit-fill-available;
width: 80px;
display: inline-flex;
flex-direction: column;
.module-avatar,
.session-icon-button {
margin: 30px auto 30px auto;
&:last-child {
margin: auto auto 30px auto;
}
}
}
&__header {
display: flex;
flex-direction: row;
padding: 28px 7px 28px 0px;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-3;
}
.session-button {
margin-left: auto;
}
}
&__title {
cursor: pointer;
padding-right: $session-margin-sm;
padding-left: $session-margin-sm;
}
&__list {
height: -webkit-fill-available;
}
&-compose {
@at-root .light-theme #{&} {
background: $session-color-white;
}
@at-root .dark-theme #{&} {
@include session-dark-background-lighter;
}
display: flex;
flex-direction: column;
align-items: center;
height: -webkit-fill-available;
.session-icon .exit {
padding: 13px;
}
h3,
h2 {
text-align: center;
}
h3 {
padding-top: 22px;
}
h4 {
text-transform: uppercase;
}
&-border-container {
width: -webkit-fill-available;
position: relative;
margin-bottom: 50px;
.green {
position: absolute;
color: $session-color-green;
background-color: $session-color-green;
height: 6px;
width: 130px;
left: 50%;
margin-left: -65px;
top: 50%;
margin-top: 6px;
border: none;
}
.white {
position: absolute;
color: none;
height: 1px;
width: -webkit-fill-available;
opacity: 0.3;
}
}
.exit {
margin-top: 10px;
margin-left: 13px;
align-self: flex-start;
}
.session-search-input {
margin: 10px $session-compose-margin 0 $session-compose-margin;
width: -webkit-fill-available;
}
.module-search-results {
width: -webkit-fill-available;
}
.session-description-long {
font-size: 14px;
margin: 0px 20px;
}
.session-id-editable {
margin: 0px 20px;
width: -webkit-fill-available;
flex-shrink: 0;
user-select: all;
}
.session-button {
width: fit-content;
margin-top: auto;
margin-bottom: 16px;
flex-shrink: 0;
}
}
}
.user-search-dropdown {
width: 100%;
flex-grow: 1;
overflow-y: scroll;
}
.session-search-input {
height: $session-search-input-height;
width: 100%;
margin-right: 1px;
margin-bottom: 10px;
display: inline-flex;
@at-root .light-theme #{&} {
color: $session-color-black;
background: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
background: $session-shade-4;
}
.session-icon-button {
margin: auto 10px;
}
input {
width: inherit;
height: inherit;
border: none;
flex-grow: 1;
&:focus {
outline: none !important;
}
@at-root .light-theme #{&} {
color: $session-color-black;
background: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
background: $session-shade-4;
}
}
}
.session-logo {
&-128 {
@include session-filter-color-green();
width: 128px;
height: 128px;
}
&-text {
font-size: 70px;
font-weight: bold;
margin: 0px;
font-family: $session-font-family;
@at-root .light-theme #{&} {
color: $session-color-black;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
}
}
}
.app-loading-screen {
@include session-dark-background;
}
@mixin bottom-buttons() {
display: flex;
flex-direction: row;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-2;
}
.session-button.square-outline.square.green,
.session-button.square-outline.square.white,
.session-button.square-outline.square.danger {
flex-grow: 1;
height: 50px;
line-height: 50px;
@at-root .light-theme #{&} {
border: 1px solid $session-shade-15;
}
@at-root .dark-theme #{&} {
border: 1px solid $session-shade-7;
}
}
}
.contacts-dropdown {
width: -webkit-fill-available;
&-row {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 20px;
margin: 0px $session-compose-margin;
@at-root .light-theme #{&} {
background: $session-shade-15;
color: $session-color-black;
}
@at-root .dark-theme #{&} {
background: $session-shade-4;
color: $session-color-light-grey;
}
&-selected,
&:hover {
font-weight: bold;
@at-root .light-theme #{&} {
color: $session-color-black;
background: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-white;
background: $session-shade-8;
}
}
}
}
.contact-notification-count-bubble {
background: $session-color-danger;
line-height: 30px;
width: 30px;
height: 30px;
font-size: 14px;
margin-left: auto;
text-align: center;
border-radius: 50%;
font-weight: bold;
@at-root .light-theme #{&} {
color: $session-color-white;
}
@at-root .dark-theme #{&} {
color: $session-color-black;
}
}
.left-pane-contact {
&-section,
&-content {
display: flex;
flex-direction: column;
.module-conversation-list-item {
&--has-friend-request {
border: 1px solid $session-shade-8 !important;
.module-conversation__user__profile-number,
.module-conversation__user__profile-name {
font-size: 13px !important;
}
}
&__buttons {
display: flex;
.session-button {
font-size: 11px;
padding: 6px;
height: auto;
margin: 0px;
line-height: 14px;
}
}
}
}
&-bottom-buttons {
@include bottom-buttons();
}
}
.left-pane-setting {
&-bottom-buttons {
@include bottom-buttons();
}
&-content,
&-section {
display: flex;
flex-direction: column;
}
&-category-list-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 74px;
line-height: 1.4;
padding: 0px 12px;
cursor: pointer;
transition: $session-transition-duration !important;
& > div {
display: block;
}
&.active {
background-color: $session-shade-9;
}
&:hover {
background-color: $session-shade-7;
}
&__buttons {
display: flex;
.session-button {
font-size: 11px;
padding: 6px;
height: auto;
margin: 0px;
line-height: 14px;
}
}
}
&-input-group {
display: inline-flex;
}
&-input-button .session-button.square {
display: flex;
justify-content: center;
align-items: center;
height: $session-search-input-height;
width: $session-search-input-height;
padding: 0px;
margin: 0px;
svg {
transition: $session-transition-duration;
}
&:hover {
svg {
fill: $session-color-green;
}
}
}
}
.panel-text-divider {
width: 100%;
text-align: center;
border-bottom: 1px solid $session-color-dark-grey;
line-height: 0.1em;
margin: 50px 0 50px;
span {
padding: 5px 10px;
border-radius: 50px;
background-color: $session-shade-18;
color: $session-color-light-grey;
border: 1px solid $session-color-dark-grey;
}
}

39
stylesheets/_session_theme_dark.scss → stylesheets/_session_theme.scss
Unescape Escape View File

@ -5,7 +5,13 @@
}
.module-conversation-header {
border-bottom: none;
background-color: $session-shade-4;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-4;
}
}
.module-message {
@ -13,15 +19,32 @@
&__metadata__badge,
&__metadata__date--incoming,
&__metadata__date--outgoing {
@include session-color-subtle($session-color-white);
@at-root .light-theme #{&} {
@include session-color-subtle($session-color-black);
}
@at-root .dark-theme #{&} {
@include session-color-subtle($session-color-white);
}
}
&__container--incoming {
background-color: $session-shade-11;
@at-root .light-theme #{&} {
@include session-color-subtle($session-color-white);
}
@at-root .dark-theme #{&} {
background-color: $session-shade-11;
}
}
&__container--outgoing {
background-color: $session-shade-5;
@at-root .light-theme #{&} {
background-color: $session-color-white;
}
@at-root .dark-theme #{&} {
background-color: $session-shade-11;
}
}
&__container {
@ -32,8 +55,14 @@
.message {
&-highlighted {
background-color: $session-shade-5;
border-radius: 0;
@at-root .light-theme #{&} {
background-color: $session-shade-5;
}
@at-root .dark-theme #{&} {
background-color: $session-color-white;
}
}
&-selected {

7
stylesheets/_session_theme_dark_left_pane.scss
Unescape Escape View File

@ -3,6 +3,7 @@ $session-compose-margin: 20px;
.dark-theme {
.module-conversation-list-item {
@include session-dark-background-lighter;
transition: $session-transition-duration;
&:hover {
@include session-dark-background-hover;
}
@ -92,9 +93,13 @@ $session-compose-margin: 20px;
.module-avatar,
.session-icon-button {
cursor: pointer;
margin: 30px auto 30px auto;
&:last-child {
margin: auto auto 30px auto;
/* Hide theme icon until light theme is ready */
display: none;
}
}
}
@ -203,6 +208,7 @@ $session-compose-margin: 20px;
flex-shrink: 0;
}
}
}
.user-search-dropdown {
@ -432,3 +438,4 @@ $session-compose-margin: 20px;
border: 1px solid $session-color-dark-grey;
}
}

5
stylesheets/manifest.scss
Unescape Escape View File

@ -22,11 +22,12 @@
@import 'ios';
@import 'theme_dark';
// New CSS
// Session
@import 'modules';
@import 'session';
@import 'session_signin';
@import 'session_theme_dark';
@import 'session_theme';
@import 'session_left_pane';
@import 'session_theme_dark_left_pane';
// Installer

Write Preview
Loading…
Cancel
Save