mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Incremental improvements to header

Browse source
This commit is contained in:
Evan Hahn 2020-12-11 18:45:14 -06:00 committed by Josh Perez
parent 7af68ff74d
commit 1225d45ade
4 changed files with 16 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
stylesheets/_conversation.scss
View file

@ -36,9 +36,9 @@
z-index: 1; z-index: 1;
position: absolute; position: absolute;
left: 0; left: 0;
top: 48px; top: $header-height;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - $header-height);
@include light-theme() { @include light-theme() {
background-color: $color-white; background-color: $color-white;

24
stylesheets/_modules.scss
View file

@ -2846,16 +2846,18 @@ span.module-in-contacts-icon__tooltip {
} }
.module-conversation-header__back-icon { .module-conversation-header__back-icon {
$transition: 250ms ease-out;
display: inline-block; display: inline-block;
margin-left: -10px; margin-left: -10px;
margin-right: -2px; margin-right: -10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
min-width: 24px; min-width: 24px;
vertical-align: text-bottom; vertical-align: text-bottom;
border: none; border: none;
opacity: 0; opacity: 0;
transition: opacity 250ms ease-out; transition: margin-right $transition, opacity $transition;
&:disabled { &:disabled {
cursor: default; cursor: default;
@ -2863,6 +2865,7 @@ span.module-in-contacts-icon__tooltip {
&--show { &--show {
opacity: 1; opacity: 1;
margin-right: 6px;
} }
@include light-theme { @include light-theme {
@ -2885,8 +2888,7 @@ span.module-in-contacts-icon__tooltip {
min-width: 0; min-width: 0;
display: block; display: block;
text-align: center; height: $header-height;
height: 48px;
} }
.module-conversation-header__title-flex { .module-conversation-header__title-flex {
@ -2895,7 +2897,7 @@ span.module-in-contacts-icon__tooltip {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 48px; height: $header-height;
max-width: 100%; max-width: 100%;
} }
@ -2906,7 +2908,8 @@ span.module-in-contacts-icon__tooltip {
} }
.module-conversation-header__avatar { .module-conversation-header__avatar {
min-width: 28px; min-width: 32px;
margin-right: 4px;
} }
.module-conversation-header__title { .module-conversation-header__title {
@ -6856,19 +6859,12 @@ button.module-image__border-overlay:focus {
} }
.module-left-pane__archive-header { .module-left-pane__archive-header {
height: 48px; height: $header-height;
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@include light-theme {
border-bottom: 1px solid $color-gray-15;
}
@include dark-theme {
border-bottom: 1px solid $color-gray-75;
}
} }
.module-left-pane__header-row { .module-left-pane__header-row {

2
stylesheets/_variables.scss
View file

@ -191,6 +191,6 @@ $color-deep-red: #ff261f;
// -- A few layout variables used cross-file // -- A few layout variables used cross-file
$left-pane-width: 320px; $left-pane-width: 320px;
$header-height: 48px; $header-height: 52px;
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

6
ts/components/conversation/ConversationHeader.tsx
View file

@ -12,7 +12,7 @@ import {
} from 'react-contextmenu'; } from 'react-contextmenu';
import { Emojify } from './Emojify'; import { Emojify } from './Emojify';
import { Avatar } from '../Avatar'; import { Avatar, AvatarSize } from '../Avatar';
import { InContactsIcon } from '../InContactsIcon'; import { InContactsIcon } from '../InContactsIcon';
import { LocalizerType } from '../../types/Util'; import { LocalizerType } from '../../types/Util';
@ -194,7 +194,7 @@ export class ConversationHeader extends React.Component<PropsType> {
name={name} name={name}
phoneNumber={phoneNumber} phoneNumber={phoneNumber}
profileName={profileName} profileName={profileName}
size={28} size={AvatarSize.THIRTY_TWO}
/> />
</span> </span>
); );
@ -482,8 +482,8 @@ export class ConversationHeader extends React.Component<PropsType> {
</div> </div>
</div> </div>
{this.renderExpirationLength()} {this.renderExpirationLength()}
{this.renderSearchButton()}
{this.renderOutgoingCallButtons()} {this.renderOutgoingCallButtons()}
{this.renderSearchButton()}
{this.renderMoreButton(triggerId)} {this.renderMoreButton(triggerId)}
{this.renderMenu(triggerId)} {this.renderMenu(triggerId)}
</div> </div>