Calls Tab & Group Call Disposition
This commit is contained in:
Jamie Kyle
GitHub
parent
620e85ca01
commit
1eaabb6734
139 changed files with 9182 additions and 2721 deletions
|
|
@ -2445,166 +2445,6 @@ button.ConversationDetails__action-button {
|
|||
}
|
||||
}
|
||||
|
||||
// Module: Main Header
|
||||
|
||||
.module-main-header {
|
||||
-webkit-app-region: var(--draggable-app-region);
|
||||
|
||||
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
|
||||
width: 100%;
|
||||
|
||||
padding-inline: 16px;
|
||||
padding-top: var(--title-bar-drag-area-height);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.module-left-pane--width-narrow & {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-inline-end: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
&--container {
|
||||
position: relative;
|
||||
|
||||
.module-left-pane--width-narrow & {
|
||||
margin-bottom: 20px;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&--badged {
|
||||
background: $color-ultramarine;
|
||||
border-radius: 100%;
|
||||
border: 1px solid $color-white;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
display: flex;
|
||||
|
||||
.module-left-pane--width-narrow & {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
&__compose-icon {
|
||||
-webkit-app-region: no-drag;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
padding: 0px;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
border-color: $color-ultramarine;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
$icon: '../images/icons/v3/compose/compose.svg';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: '';
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-gray-75);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__stories-badge {
|
||||
@include rounded-corners;
|
||||
align-items: center;
|
||||
background-color: $color-accent-red;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
font-size: 10px;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
overflow: hidden;
|
||||
padding-block: 0;
|
||||
padding-inline: 2px;
|
||||
position: absolute;
|
||||
inset-inline-end: -6px;
|
||||
top: -4px;
|
||||
user-select: none;
|
||||
z-index: $z-index-base;
|
||||
}
|
||||
|
||||
&__stories-icon {
|
||||
-webkit-app-region: no-drag;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
margin-inline-end: 12px;
|
||||
position: relative;
|
||||
width: 28px;
|
||||
padding: 0px;
|
||||
|
||||
.module-left-pane--width-narrow & {
|
||||
margin-inline-end: 0;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
border-color: $color-ultramarine;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
$icon: '../images/icons/v3/stories/stories.svg';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: '';
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-gray-75);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Module: Image
|
||||
|
||||
.module-image {
|
||||
|
|
@ -4365,7 +4205,7 @@ button.module-image__border-overlay:focus {
|
|||
.module-conversation-list {
|
||||
$normal-row-height: 72px;
|
||||
|
||||
@include scrollbar;
|
||||
@include NavTabs__Scroller;
|
||||
padding-inline: 10px;
|
||||
|
||||
// list tiles in choose-group-members and compose extend to the edge
|
||||
|
|
@ -5045,33 +4885,18 @@ button.module-image__border-overlay:focus {
|
|||
// Module: Left Pane
|
||||
|
||||
.module-left-pane {
|
||||
border-inline-end-style: solid;
|
||||
border-inline-end-width: 1px;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
@include light-theme {
|
||||
$background-color: $color-gray-02;
|
||||
|
||||
border-color: $color-gray-15;
|
||||
background-color: $background-color;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-gray-02;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
$background-color: $color-gray-80;
|
||||
|
||||
border-color: $color-gray-65;
|
||||
background-color: $background-color;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-gray-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -5122,13 +4947,11 @@ button.module-image__border-overlay:focus {
|
|||
user-select: none;
|
||||
|
||||
&__contents {
|
||||
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
|
||||
width: 100%;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-top: var(--title-bar-drag-area-height);
|
||||
padding-block: 15px;
|
||||
|
||||
&__back-button {
|
||||
@include button-reset;
|
||||
|
|
@ -5248,6 +5071,36 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
.module-left-pane__startComposingIcon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/compose/compose.svg',
|
||||
$color-gray-75
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/compose/compose.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.module-left-pane__moreActionsIcon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v3/more/more.svg', $color-black);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
|
||||
}
|
||||
}
|
||||
|
||||
.module-left-pane__archive-helper-text {
|
||||
@include font-body-2;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue