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-composition-area {
position: relative;
min-height: 48px;
padding-top: 12px;
&__row {
display: flex;
flex-direction: row;
@ -5038,18 +5042,6 @@
&--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 {
@ -5087,34 +5079,59 @@
&__input {
flex-grow: 1;
}
$comp-area: &;
&__toggle-large {
width: 48px;
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 color-svg('../images/expand-up.svg', $color-gray-45, false);
background-color: $color-white;
}
@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 color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
@include color-svg('../images/expand-up.svg', $color-gray-45, false);
}
@include dark-theme() {
@include color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
@include color-svg('../images/expand-up.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 (
<div className="module-composition-area">
<div
className={classNames(
'module-composition-area__row',
'module-composition-area__row--center',
'module-composition-area__row--show-on-focus'
)}
>
<div className="module-composition-area__toggle-large">
<button
className={classNames(
'module-composition-area__toggle-large',
large ? 'module-composition-area__toggle-large--large-active' : null
'module-composition-area__toggle-large__button',
large
? 'module-composition-area__toggle-large__button--large-active'
: null
)}
onClick={handleToggleLarge}
/>