Add image editor
This commit is contained in:
Josh Perez
GitHub
parent
86d09917a3
commit
7affe313f0
58 changed files with 4261 additions and 173 deletions
116
stylesheets/components/ContextMenu.scss
Normal file
116
stylesheets/components/ContextMenu.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.ContextMenu {
|
||||
&__popper {
|
||||
@extend %module-composition-popper;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font-body-1-bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include button-reset();
|
||||
align-items: center;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
width: 32px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
opacity: 1;
|
||||
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
@include button-reset();
|
||||
@include font-body-2;
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
min-width: 150px;
|
||||
|
||||
&--container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
height: 12px;
|
||||
margin: 0 6px;
|
||||
width: 16px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/check-24.svg', $color-black);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v2/check-24.svg', $color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
@include font-body-2;
|
||||
}
|
||||
|
||||
&--description {
|
||||
@include font-subtitle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include light-theme() {
|
||||
background-color: $color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background-color: $color-gray-65;
|
||||
}
|
||||
}
|
||||
|
||||
&--focused,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 1px 1px $color-ultramarine;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
340
stylesheets/components/MediaEditor.scss
Normal file
340
stylesheets/components/MediaEditor.scss
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.MediaEditor {
|
||||
background: $color-gray-95;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
z-index: 2;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 22px 60px;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__media {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&--canvas {
|
||||
border-radius: 12px;
|
||||
transition: border-radius 200ms ease-out;
|
||||
|
||||
&--cropping {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__control {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
border-radius: 32px;
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
margin: 0 15px;
|
||||
opacity: 1;
|
||||
width: 32px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&--crop::after {
|
||||
@include color-svg('../images/icons/v2/crop-24.svg', $color-white);
|
||||
}
|
||||
|
||||
&--pen::after {
|
||||
@include color-svg('../images/icons/v2/draw-24.svg', $color-white);
|
||||
}
|
||||
|
||||
&--redo {
|
||||
&::after {
|
||||
@include color-svg('../images/icons/v2/redo-24.svg', $color-white);
|
||||
}
|
||||
&:disabled::after {
|
||||
@include color-svg('../images/icons/v2/redo-24.svg', $color-gray-45);
|
||||
}
|
||||
}
|
||||
|
||||
&--sticker.module-sticker-button__button::after {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/sticker-smiley-24.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--text::after {
|
||||
@include color-svg('../images/icons/v2/text-24.svg', $color-white);
|
||||
}
|
||||
|
||||
&--undo {
|
||||
&::after {
|
||||
@include color-svg('../images/icons/v2/undo-24.svg', $color-white);
|
||||
}
|
||||
&:disabled::after {
|
||||
@include color-svg('../images/icons/v2/undo-24.svg', $color-gray-45);
|
||||
}
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: $color-white;
|
||||
|
||||
&::after {
|
||||
background-color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-80;
|
||||
|
||||
&::after {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 22px;
|
||||
width: 100%;
|
||||
|
||||
&--buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--space {
|
||||
height: 36px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 596px;
|
||||
}
|
||||
|
||||
&__tools {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: center;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
&__crop-toolbar {
|
||||
align-items: center;
|
||||
background-color: $color-gray-90;
|
||||
border-radius: 10px;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
|
||||
&--button {
|
||||
@include button-reset;
|
||||
margin: 0 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&--rotate {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/rotate-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&--flip {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/flip-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&--locked {
|
||||
@include color-svg('../images/icons/v2/crop-lock-24.svg', $color-white);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&--unlocked {
|
||||
@include color-svg('../images/icons/v2/crop-unlock-24.svg', $color-white);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&--reset {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&--crop {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hue-slider.Slider {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
hsl(0, 0%, 100%),
|
||||
hsl(0, 0%, 0%),
|
||||
hsl(0, 100%, 50%),
|
||||
hsl(45, 100%, 50%),
|
||||
hsl(90, 100%, 50%),
|
||||
hsl(135, 100%, 50%),
|
||||
hsl(180, 100%, 50%),
|
||||
hsl(225, 100%, 50%),
|
||||
hsl(270, 100%, 50%),
|
||||
hsl(315, 100%, 50%),
|
||||
hsl(360, 100%, 50%)
|
||||
);
|
||||
border-radius: 4px;
|
||||
height: 8px;
|
||||
margin-right: 7px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
&__hue-slider__handle.Slider__handle {
|
||||
background-color: transparent;
|
||||
border: 7px solid $color-white;
|
||||
margin-top: -7px;
|
||||
margin-left: -11px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@mixin button($svg) {
|
||||
height: 20px;
|
||||
margin: 0 7px;
|
||||
opacity: 1;
|
||||
width: 20px;
|
||||
|
||||
&::after {
|
||||
@include color-svg($svg, $color-white);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-80;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include button('../images/icons/v2/edit-solid-16.svg');
|
||||
}
|
||||
|
||||
&--draw-pen {
|
||||
@include button('../images/icons/v2/pen-20.svg');
|
||||
}
|
||||
|
||||
&--draw-highlighter {
|
||||
@include button('../images/icons/v2/pen-highlighter-20.svg');
|
||||
}
|
||||
|
||||
&--text-regular {
|
||||
@include button('../images/icons/v2/text-regular-20.svg');
|
||||
}
|
||||
|
||||
&--text-highlight {
|
||||
@include button('../images/icons/v2/text-highlight-20.svg');
|
||||
}
|
||||
|
||||
&--text-outline {
|
||||
@include button('../images/icons/v2/text-outline-20.svg');
|
||||
}
|
||||
|
||||
&--width-thin {
|
||||
@include button('../images/icons/v2/pen-light-20.svg');
|
||||
}
|
||||
|
||||
&--width-regular {
|
||||
@include button('../images/icons/v2/pen-regular-20.svg');
|
||||
}
|
||||
|
||||
&--width-medium {
|
||||
@include button('../images/icons/v2/pen-medium-20.svg');
|
||||
}
|
||||
|
||||
&--width-heavy {
|
||||
@include button('../images/icons/v2/pen-heavy-20.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
&--draw-pen {
|
||||
@include color-svg('../images/icons/v2/pen-20.svg', $color-white);
|
||||
}
|
||||
|
||||
&--draw-highlighter {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/pen-highlighter-20.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--text-regular {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/text-regular-20.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--text-highlight {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/text-highlight-20.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--text-outline {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/text-outline-20.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--width-thin {
|
||||
@include color-svg('../images/icons/v2/pen-light-20.svg', $color-white);
|
||||
}
|
||||
|
||||
&--width-regular {
|
||||
@include color-svg('../images/icons/v2/pen-regular-20.svg', $color-white);
|
||||
}
|
||||
|
||||
&--width-medium {
|
||||
@include color-svg('../images/icons/v2/pen-medium-20.svg', $color-white);
|
||||
}
|
||||
|
||||
&--width-heavy {
|
||||
@include color-svg('../images/icons/v2/pen-heavy-20.svg', $color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue