chase-manning / react-photo-studio

React Photo Studio is a free online photo editor for photography and design

react-photo-studio's Issues

Add Tracking for Ability to Resize Windows Section

Add Screenshot to Readme

Setup Redux

Improve Brush Settings Icon

Currently the Brush Settings Icon looks like this:

The brush and cutout in the top right are not transparent, but have a solid color that matches the background.
This leads to some visual artefacts on the icon.
Instead, the SVG should be changed so that these sections are transparent and the only color is the main icon color.
Ultimately, it should look like this:

Add Quick Mask Mode to Tools

There should be a Quick Mask Mode item.
This is currently not showing on the toolbar.
It is the second to bottom item in this screenshot:

This should be added to the Tools menu.
Not fully implemented, but with tracking added to it.

Add Ability to Change Menu Headers By Hovering

If one of the header menus is already open, and you hover over a different one, then the first one should close and the new one will open.
For example, if you had the File context menu open, and then you hovered over Edit.
Then File would close and Edit would open.
This functionality should be implemented in React Photo Studio.

Add Hover Videos for Tools Feature Request Tracking

Move some packages to dev dependencies

Some packages are added as a core dependency but really only need to be a dev dependency.
An audit should be done on the packages and which ones can be moved to a dev dependency instead.
An example of one that can be moved is the types file for styled components.

Change Options Arrow to SVG

Currently in the options panel there is an arrow used for some of the elements.
For example, the Percentage Selector:

Currently it is using the character > for the arrow and rotating it.
Instead, this should be switched to using an SVG.
And the final version should look like this:

Change Pressure for Opacity to SVG

The Pressure for Opacity Asset is currently a PNG.
It should instead be converted into an SVG.

Path: src/assets/options/pressure-for-opacity.png.

It should look like this:

Implement Buttons for All Clickables

Fix Gradient Icon Coloring and Rotation

The gradient icon should look like this:

But the current React Photo Studio version is a little bit lighter, and also is going in the wrong direction:

This should be changed so they are both the same

Fix Stroke Position of Path Selection Icon

The Path Selection Icon should have the stroke of the SVG on the inside of the path:

On React Photo Studio it currently is on the outside:

This should be changed so that they look the same

Change Symmetry to SVG

The Symmetry Asset is currently a PNG.
It should instead be converted into an SVG.

Path: src/assets/options/symmetry.png.

It should look like this:

But should still exclude the triangle in the bottom right as that is added in separately

Change Layer Setting Picture Asset to SVG

The Layer Setting Picture Asset is currently a PNG.
It looks like this:

This should be changed to an SVG.
The path for the current image is: assets/pngs/picture.png

Add Tracking to Tools

Change Airbrush to SVG

The Airbrush Asset is currently a PNG.
It should instead be converted into an SVG.

Path: src/assets/options/airbrush.png.

It should look like this:

Setup Hosting

Add Highlight to Zoom Icon

The zoom icon should have a highlight on the glass:

But in the current version it is not there:

This should be added in.

Add Change Screen Mode to Tools

There should be a Change Screen Mode item.
This is currently not showing on the toolbar.
It is the bottom item in this screenshot:

This should be added to the Tools menu.
Not fully implemented, but with tracking added to it.

Update Favicon

Improve Layer Lock SVG

The Layer Lock SVG currently looks like this:

However, it looks too dense and attention grabbing.
It should be softened a bit so that the inside is more transparent.

It should be changed to look like this:

When updating this, the asset should be created as a new one.
Because the existing lock asset is already being used correctly in the Layer Settings, and we don't want to change that one also.

Fix Issue with Inconsistant Tool Icon Sizes

Some of the Tool Icons are showing as the wrong size.
And example of this is the Move Tool, it is showing as too small.
This looks to be because the svg viewport of the move icon is too large and so when setting the width it is not taking up the whole area.
Each tool icon should be looked at and corrected so that the svgs always take up the whole viewport.

Setup CI/CD

Implement Color Window

The Color Window Should be implemented and enabled by default.
It should look like this:

Fix Lint Error in Package.json

Add Home Button

The Options Section should have a home button that shows for all options.
It should look like this:

This should be added in, including tracking for navigation to the home screen.

Add Keyboard Shortcuts

Add Keyboard Shortcut Icon Indicators

Fix Spot Healing Brush Coloring

The Spot Healing Brush should look like this:

But in React Photo Studio it looks like this:

This should be changed so they both look the same.

Add Options Side Buttons

On the Options section, there should be some additional buttons to the side.
They should look like this:

These should be added in with full tracking.

Create Color Theme

Add Loading Screen

A loading screen should be added that will show as soon as theindex.html is loaded.
This should show while the web app is loading and stop showing once it has finished loading.
There is no design yet for the loading screen.

Improve Brush Cursor Design

The Brush Cursor currently looks like this:

There are a few issues with this:

• The dark brush is hard to see on a darker background
• The brush is thick which obscures what is behind it

To fix this we should make some changes to it as per below:

• The brush should be thinner
• The brush should change between dark and light depending on the background
• The brush should have an aura/shadow/outline of the opposite color so it can be seen on mixed backgrounds

The final cursor should look like this:

Remove Redundant Packages

An audit should be done on all packages and any that are unused should be removed.
An example of an unused package is Jest.

Add GitHub Tags

Implement Windows Section

Purchase Domain Name

Add Tool Right Click Context Menu Tracking

Change Expandable Button to be actual Icon

On most of the core components there is an expandable option.
It should look like this:

And the button is an actual Icon.
Currently in React Photo Studio it looks like this:

And it just uses text to create the button.

This should be changed to instead use an SVG Icon and should match the intended one.
Or it should use a different font so that it matches the intended one without needing an SVG.

Implement Documents Section

Redesign Menu Dropdowns

Currently the Menu Dropdowns are a unique design that is a merge of how they look on Mac and some elements used.
Instead they should be redesigned to match the PC menus exactly.

Implement Options Section

Update Settings SVG

The Settings SVG currently looks like this:

But it should look like this:

The SVG should be updated to match the target.

The path of it is src/assets/options/settings.svg

Add Unimplemented Feature Popup

A popup should be added for when a user tries to use a feature that is not yet implemented.

Add Edit Toolbar to Tools

There should be a Edit Toolbar item.
This is currently not showing on the toolbar.
It is the middle item in this screenshot:

This should be added to the Tools menu.
Not fully implemented, but with tracking added to it.

Change Pressure for Size to SVG

The Pressure for Size Asset is currently a PNG.
It should instead be converted into an SVG.

Path: src/assets/options/pressure-for-size.png.

It should look like this:

Add Tool Arrow to Bottom Right

Add Google Analytics Tracking for Unimplemented Features

Add Google Analytics