ajsaraujo / pablo Goto Github PK

🎨 Manage all your color palettes in one place

Home Page: https://ajsaraujo.github.io/pablo/index.html

JavaScript 6.63% TypeScript 70.56% HTML 10.84% CSS 11.83% Shell 0.13%

pablo's Introduction

Pablo

Pablo is a color palette manager. You can use it to manage multiple palettes in one place, no matter what you're working on. With Pablo, you can optimize your workflow by having a view of all the colors your working with and easily copying them to your clipboard.

Installing and Running

All you'll need is Git, Node and Angular.

# Clone the project
git clone https://github.com/ajsaraujo/pablo.git

# Navigate to project folder
cd pablo

# Install dependencies
npm i

# Serve the website
ng serve

Pablo will then be available at http://localhost:4200.

Contributing

Pablo is meant to be a simple project that anyone can contribute to and learn something by doing it. If you want to contribute to the project, just follow these steps:

Comment on the issue you want to work on. If you have an idea that isn't on an issue yet, create the issue.
Fork the repository.
Clone your fork.
Make your changes locally.
Push them to your fork.
Create a Pull Request from your fork to the repository's develop branch.

We'll then review it as soon as possible. If you're stuck with something, send an email to [email protected] and we'll try our best. Keep in mind that refactorings are more than welcome!

pablo's People

Contributors

Stargazers

Watchers

Forkers

aaronthomasdev ederlima firebirdsv lyndonjardine vibharaj lokprakash-babu sbrannstrom abhinavkriti aaushi semla mcnnowak web-dot

pablo's Issues

Fix test command

The project is configured with Jest and has some test suites, but for some reason they stopped working. npm run jest suddenly started throwing 08 03 2021 19:22:02.194:ERROR [config]: Error in config file!

Change app favicon

Currently the app uses Angular's default favicon. Replace it for a palette emoji 🎨

Create GitHub Actions lint pipeline

We need a pipeline that builds and lints the project on every pull request. If you don't know how one would go about that, you can take a look at CodeSupport's implementation.

Refactor CSS

The project's CSS has no structure overall, it's all over the place. We could use some refactoring that makes reuse easier.

Improve sidebar toggle animation

Sidebar has a little animation for open/closing - it slides in and out. However, PaletteComponent doesn't. Add a slide animation on PaletteComponent when sidebar is toggled, making it look smoother.

Fix editing dialog bug

On the editing dialog there's a text saying "Changing color #xxxxxx to #yyyyyy". However, when you change the color using the color picker, it's hexcode doesn't change (only the span's color).

Ensure hex code formatting is consistent

When a color is randomly generated (e.g, when you create a new palette), it's hexcode is written in upper case. On the other hand, when you create a new color or edit an existing one, the hexcode is shown in lower case. Please ensure that all hexcodes are shown with the same casing.

Update README

README needs 2 quick fixes:

Add a link to the project's page from GithubPages. Some people have trouble finding it in the "About" section.
In the Contributing section, add a link to the first contributions guide

Stop the user from creating palettes with duplicate names

Currently, the user can edit a palette's name to one that's already in use by another palette. This is undesired behaviour, since we use the palettes names' as keys on local storage. If the user tries to rename a palette to a name that's already in use, the app should show a red toast message saying "{{ name }} is already in use" or something like it, and cancel the operation.

Leaving a palette's name empty shouldn't be allowed either.

Give sidebar a max width

When you're editing a palette's name, if the name is long enough the sidebar grows along with it. Limit the sidebar width and wrap the text if it's too long.

Fix test script

Test script throws the following warning:

ts-jest[root] (WARN) Import setup jest file via import 'jest-preset-angular'; is deprecated and will be removed in v9.0.0. Please switch to import 'jest-preset-angular/setup-jest';

Improve mobile layout

Current mobile layout is awful. Needs fixing!

Create deploy workflow

Create a GitHub actions workflow that builds the project and deploys it to GitHub pages every time master gets updated.

Export/import palettes to/from JSON

I want to be able to use my palettes on several devices, but implementing a server would be overhead at the moment. Thus, we could use an import/export button to convert the user's data to/from JSON format, thus being able to take it anywhere. Excalidraw does this wonderfully.

The button should be placed at the left side of "Add color" button. After clicking it, it should show the options import and export.

Export generates a JSON file with all your data.
Import brings in the palettes from a selected JSON file. For now, let's not bring a palette if there is a palette with the same name already in memory.

We should be thoughtful about how we're going to implement that: I'm wondering what happens if the palette model changes (and thus it's stringified version).

Only lint staged files on pre-commit hook

Currently, the pre-commit hook calls ng lint, which can be pretty slow on some computers. Maybe it's better if we use something like lint-staged or pretty-quick, which only works on affected files, thus running faster.