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

Move expand composition area button into a notch

Browse source
This commit is contained in:
Ken Powers 2019-09-04 14:40:52 -04:00 • committed by Scott Nonnenberg
parent cbde0bb3d1
commit e567e25318
2 changed files with 48 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

69
stylesheets/_modules.scss
View file

@ -5023,6 +5023,10 @@
// Module: CompositionArea // Module: CompositionArea
.module-composition-area { .module-composition-area {
position: relative;
min-height: 48px;
padding-top: 12px;
&__row { &__row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -5038,18 +5042,6 @@
&--column { &--column {
flex-direction: column; flex-direction: column;
} }
&--show-on-focus {
opacity: 0;
transition: opacity 250ms ease-out;
}
}
$this: &;
&:focus-within,
&:hover {
#{$this}__row--show-on-focus {
opacity: 1;
}
} }
&__button-cell { &__button-cell {
@ -5087,34 +5079,59 @@
&__input { &__input {
flex-grow: 1; flex-grow: 1;
} }
$comp-area: &;
&__toggle-large { &__toggle-large {
width: 48px; width: 48px;
height: 24px; height: 24px;
border: none; position: absolute;
left: calc(50% - 24px);
top: -24px;
border-radius: 12px 12px 0 0;
opacity: 0;
transition: opacity 200ms ease-out;
#{$comp-area}:hover & {
opacity: 1;
}
@include light-theme() { @include light-theme() {
@include color-svg('../images/expand-up.svg', $color-gray-45, false); background-color: $color-white;
} }
@include dark-theme() { @include dark-theme() {
@include color-svg('../images/expand-up.svg', $color-gray-45, false); background-color: $color-gray-95;
} }
&--large-active { &__button {
width: 48px;
height: 24px;
border: none;
@include light-theme() { @include light-theme() {
@include color-svg( @include color-svg('../images/expand-up.svg', $color-gray-45, false);
'../images/collapse-down.svg',
$color-gray-45,
false
);
} }
@include dark-theme() { @include dark-theme() {
@include color-svg( @include color-svg('../images/expand-up.svg', $color-gray-45, false);
'../images/collapse-down.svg', }
$color-gray-45,
false &--large-active {
); @include light-theme() {
@include color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
}
@include dark-theme() {
@include color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
}
} }
} }
} }

14
ts/components/CompositionArea.tsx
View file

@ -300,17 +300,13 @@ export const CompositionArea = ({
return ( return (
<div className="module-composition-area"> <div className="module-composition-area">
<div <div className="module-composition-area__toggle-large">
className={classNames(
'module-composition-area__row',
'module-composition-area__row--center',
'module-composition-area__row--show-on-focus'
)}
>
<button <button
className={classNames( className={classNames(
'module-composition-area__toggle-large', 'module-composition-area__toggle-large__button',
large ? 'module-composition-area__toggle-large--large-active' : null large
? 'module-composition-area__toggle-large__button--large-active'
: null
)} )}
onClick={handleToggleLarge} onClick={handleToggleLarge}
/> />