Media editor polish

This commit is contained in:
Josh Perez 2023-09-21 12:54:28 -04:00 committed by GitHub
parent 4d919891fb
commit 1cfc396d65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 22 deletions

View file

@ -18,8 +18,8 @@
&__container {
display: flex;
flex: 1;
padding-block: 48px;
padding-inline: 60px;
padding-block: 64px;
padding-inline: 64px;
padding-bottom: 0;
overflow: hidden;
}
@ -127,7 +127,7 @@
&--input {
margin-inline: 24px;
min-width: 410px;
min-width: 400px;
}
&--buttons {
@ -163,19 +163,38 @@
display: flex;
flex-grow: 1;
flex-wrap: wrap;
height: 20px;
height: 28px;
justify-content: center;
margin-bottom: 24px;
max-width: 596px;
}
&__tools-row-2 {
align-items: center;
display: flex;
flex-grow: 1;
flex-wrap: wrap;
height: 36px;
justify-content: center;
max-width: 596px;
min-height: 36px;
}
&__toolbar__crop {
align-items: center;
color: $color-white;
display: flex;
height: 36px;
justify-content: center;
padding-block: 14px;
padding-inline: 12px;
margin-inline: 16px;
&__button {
@include button-reset;
display: flex;
margin-block: 0;
margin-inline: 20px;
}
}
&__toolbar {
@ -189,10 +208,11 @@
padding-block: 14px;
padding-inline: 12px;
margin-inline: 16px;
min-width: 418px;
&__tool,
&__tool__button {
margin-inline-end: 14px;
margin-inline-start: 14px;
}
&__button {
@ -324,7 +344,7 @@
&__history-buttons {
inset-inline-start: 24px;
position: absolute;
top: 24px;
top: 40px;
}
&__close {
@ -334,7 +354,7 @@
height: 20px;
position: absolute;
inset-inline-end: 24px;
top: 24px;
top: 40px;
width: 20px;
&::before {
@ -342,14 +362,7 @@
display: block;
width: 100%;
height: 100%;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
}
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
}
&:hover,

View file

@ -953,10 +953,10 @@ export function MediaEditor({
>
{i18n('icu:MediaEditor__crop--reset')}
</Button>
<div className="MediaEditor__toolbar">
<div className="MediaEditor__toolbar__crop">
<button
aria-label={i18n('icu:MediaEditor__crop--rotate')}
className="MediaEditor__toolbar__tool MediaEditor__toolbar__button MediaEditor__toolbar__button--rotate"
className="MediaEditor__toolbar__crop__button MediaEditor__toolbar__button--rotate"
onClick={() => {
if (!fabricCanvas) {
return;
@ -992,7 +992,7 @@ export function MediaEditor({
/>
<button
aria-label={i18n('icu:MediaEditor__crop--flip')}
className="MediaEditor__toolbar__tool MediaEditor__toolbar__button MediaEditor__toolbar__button--flip"
className="MediaEditor__toolbar__crop__button MediaEditor__toolbar__button--flip"
onClick={() => {
if (!fabricCanvas) {
return;
@ -1012,7 +1012,7 @@ export function MediaEditor({
<button
aria-label={i18n('icu:MediaEditor__crop--lock')}
className={classNames(
'MediaEditor__toolbar__button',
'MediaEditor__toolbar__crop__button',
`MediaEditor__toolbar__button--crop-${
cropAspectRatioLock ? '' : 'un'
}locked`
@ -1283,7 +1283,7 @@ export function MediaEditor({
/>
</div>
<div className="MediaEditor__tools-row-2">
<div className="MediaEditor__tools--input">
<div className="MediaEditor__tools--input dark-theme">
<CompositionInput
draftText={draftText}
draftBodyRanges={draftBodyRanges}

View file

@ -220,7 +220,7 @@ export function StoryCreator({
ourConversationId={ourConversationId}
i18n={i18n}
me={me}
onClose={() => setDraftAttachment(undefined)}
onClose={() => setIsReadyToSend(false)}
onDeleteList={onDeleteList}
onDistributionListCreated={onDistributionListCreated}
onHideMyStoriesFrom={onHideMyStoriesFrom}

View file

@ -2,6 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import { missingCaseError } from './missingCaseError';
import { ThemeType } from '../types/Util';
export enum Theme {
Light,
@ -18,3 +19,14 @@ export function themeClassName(theme: Theme): string {
throw missingCaseError(theme);
}
}
export function themeClassName2(theme: ThemeType): string {
switch (theme) {
case ThemeType.light:
return 'light-theme';
case ThemeType.dark:
return 'dark-theme';
default:
throw missingCaseError(theme);
}
}