Add user's avatar to the top left of the screen
This commit is contained in:
parent
8f3e3b7aaf
commit
a8e12d0771
8 changed files with 98 additions and 24 deletions
|
@ -51,9 +51,7 @@
|
||||||
<script type='text/x-tmpl-mustache' id='two-column'>
|
<script type='text/x-tmpl-mustache' id='two-column'>
|
||||||
<div class='gutter'>
|
<div class='gutter'>
|
||||||
<div class='network-status-container'></div>
|
<div class='network-status-container'></div>
|
||||||
<div class='title-bar active'>
|
<div class='main-header-placeholder'></div>
|
||||||
<div class='logo'>Signal</div>
|
|
||||||
</div>
|
|
||||||
<div class='tool-bar clearfix'>
|
<div class='tool-bar clearfix'>
|
||||||
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}' dir='auto'>
|
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}' dir='auto'>
|
||||||
<span class='search-icon'></span>
|
<span class='search-icon'></span>
|
||||||
|
|
|
@ -36,6 +36,7 @@ const { LightboxGallery } = require('../../ts/components/LightboxGallery');
|
||||||
const {
|
const {
|
||||||
MediaGallery,
|
MediaGallery,
|
||||||
} = require('../../ts/components/conversation/media-gallery/MediaGallery');
|
} = require('../../ts/components/conversation/media-gallery/MediaGallery');
|
||||||
|
const { MainHeader } = require('../../ts/components/MainHeader');
|
||||||
const { Message } = require('../../ts/components/conversation/Message');
|
const { Message } = require('../../ts/components/conversation/Message');
|
||||||
const { MessageBody } = require('../../ts/components/conversation/MessageBody');
|
const { MessageBody } = require('../../ts/components/conversation/MessageBody');
|
||||||
const {
|
const {
|
||||||
|
@ -178,6 +179,7 @@ exports.setup = (options = {}) => {
|
||||||
GroupNotification,
|
GroupNotification,
|
||||||
Lightbox,
|
Lightbox,
|
||||||
LightboxGallery,
|
LightboxGallery,
|
||||||
|
MainHeader,
|
||||||
MediaGallery,
|
MediaGallery,
|
||||||
Message,
|
Message,
|
||||||
MessageBody,
|
MessageBody,
|
||||||
|
|
|
@ -3,6 +3,8 @@
|
||||||
/* global getInboxCollection: false */
|
/* global getInboxCollection: false */
|
||||||
/* global i18n: false */
|
/* global i18n: false */
|
||||||
/* global Whisper: false */
|
/* global Whisper: false */
|
||||||
|
/* global textsecure: false */
|
||||||
|
/* global Signal: false */
|
||||||
|
|
||||||
// eslint-disable-next-line func-names
|
// eslint-disable-next-line func-names
|
||||||
(function() {
|
(function() {
|
||||||
|
@ -93,6 +95,17 @@
|
||||||
// eslint-disable-next-line no-new
|
// eslint-disable-next-line no-new
|
||||||
new Whisper.FontSizeView({ el: this.$el });
|
new Whisper.FontSizeView({ el: this.$el });
|
||||||
|
|
||||||
|
const ourNumber = textsecure.storage.user.getNumber();
|
||||||
|
const me = ConversationController.get(ourNumber);
|
||||||
|
this.mainHeaderView = new Whisper.ReactWrapperView({
|
||||||
|
className: 'main-header-wrapper',
|
||||||
|
Component: Signal.Components.MainHeader,
|
||||||
|
props: me.format(),
|
||||||
|
});
|
||||||
|
const update = () => this.mainHeaderView.update(me.format());
|
||||||
|
this.listenTo(me, 'change', update);
|
||||||
|
this.$('.main-header-placeholder').append(this.mainHeaderView.el);
|
||||||
|
|
||||||
this.conversation_stack = new Whisper.ConversationStack({
|
this.conversation_stack = new Whisper.ConversationStack({
|
||||||
el: this.$('.conversation-stack'),
|
el: this.$('.conversation-stack'),
|
||||||
model: { window: options.window },
|
model: { window: options.window },
|
||||||
|
|
|
@ -62,23 +62,6 @@ body {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar {
|
|
||||||
color: $color-light-90;
|
|
||||||
|
|
||||||
height: $header-height;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin-left: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: $color-light-90;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
|
@ -2045,6 +2045,25 @@
|
||||||
background-color: $color-conversation-blue_grey;
|
background-color: $color-conversation-blue_grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Module: Main Header
|
||||||
|
|
||||||
|
.module-main-header {
|
||||||
|
height: $header-height;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module-main-header__app-name {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-left: 32px;
|
||||||
|
color: $color-light-90;
|
||||||
|
}
|
||||||
|
|
||||||
// Third-party module: react-contextmenu
|
// Third-party module: react-contextmenu
|
||||||
|
|
||||||
.react-contextmenu {
|
.react-contextmenu {
|
||||||
|
|
|
@ -207,10 +207,6 @@ body.dark-theme {
|
||||||
color: $color-dark-05;
|
color: $color-dark-05;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
|
||||||
color: $color-dark-05;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.grey {
|
button.grey {
|
||||||
border: solid 1px #ccc;
|
border: solid 1px #ccc;
|
||||||
color: $grey;
|
color: $grey;
|
||||||
|
@ -1363,6 +1359,12 @@ body.dark-theme {
|
||||||
background-color: $color-conversation-blue_grey-shade;
|
background-color: $color-conversation-blue_grey-shade;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Module: Main Header
|
||||||
|
|
||||||
|
.module-main-header__app-name {
|
||||||
|
color: $color-dark-05;
|
||||||
|
}
|
||||||
|
|
||||||
// Third-party module: react-contextmenu
|
// Third-party module: react-contextmenu
|
||||||
|
|
||||||
.react-contextmenu {
|
.react-contextmenu {
|
||||||
|
|
11
ts/components/MainHeader.md
Normal file
11
ts/components/MainHeader.md
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
#### With image
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<MainHeader avatarPath={util.gifObjectUrl} i18n={util.i18n} />
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Just name
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<MainHeader name="John Smith" color="purple" i18n={util.i18n} />
|
||||||
|
```
|
46
ts/components/MainHeader.tsx
Normal file
46
ts/components/MainHeader.tsx
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Avatar } from './Avatar';
|
||||||
|
|
||||||
|
import { Localizer } from '../types/Util';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
phoneNumber: string;
|
||||||
|
isMe?: boolean;
|
||||||
|
name?: string;
|
||||||
|
color?: string;
|
||||||
|
verified: boolean;
|
||||||
|
profileName?: string;
|
||||||
|
avatarPath?: string;
|
||||||
|
i18n: Localizer;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MainHeader extends React.Component<Props> {
|
||||||
|
public render() {
|
||||||
|
const {
|
||||||
|
avatarPath,
|
||||||
|
i18n,
|
||||||
|
color,
|
||||||
|
name,
|
||||||
|
phoneNumber,
|
||||||
|
profileName,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="module-main-header">
|
||||||
|
<Avatar
|
||||||
|
avatarPath={avatarPath}
|
||||||
|
color={color}
|
||||||
|
conversationType="direct"
|
||||||
|
i18n={i18n}
|
||||||
|
name={name}
|
||||||
|
phoneNumber={phoneNumber}
|
||||||
|
profileName={profileName}
|
||||||
|
size={28}
|
||||||
|
/>
|
||||||
|
<div className="module-main-header__app-name">Signal</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue