Giter VIP home page Giter VIP logo

shapy's Introduction

Shapy

Shapy is a CSS gradient editor that helps you explore the power of CSS gradients. Create custom shapes or images using gradients only.

Contributions welcome!
Check out the guidelines for more info.

Have an idea for Shapy? Submit a Feature Request!
Found a bug? Submit a Bug Report!

Demo

Project screenshot

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

shapy's People

Contributors

dependabot[bot] avatar humeira avatar iamstratos avatar lekoarts avatar mikeesto avatar saravieira avatar vicmeow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

shapy's Issues

Undo only undos added gradients

Describe the bug
The undo button undos only the addition of a gradient. A user should also be able to undo the deletion of a gradient.

To Reproduce
Steps to reproduce the behavior:

  1. Add a gradient by clicking “add”
  2. Delete the added gradient by clicking “delete”
  3. Click “undo” to undo the deletion
  4. See error, only undos the adding of a gradient

Expected behavior
Should undo the latest action, not just the add action

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Image Gallery

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
Add a add to gallery button where users can submit what they've created and it will be displayed in a gallery for others to see and be inspired by.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Custom canvas background colour

Is your feature request related to a problem? Please describe.
Would be nice to add a custom background colour input for the canvas.

Describe the solution you'd like
Add color to the canvas object and color input in the fieldset.

Describe alternatives you've considered

Additional context

Copy CSS code button

Is your feature request related to a problem? Please describe.
A button to copy the CSS code generated

Describe the solution you'd like
Add a button next the list or somewhere to copy the gradients that have been added to the canvas.

Describe alternatives you've considered

Additional context

Sharable links

Is your feature request related to a problem? Please describe.
As discussed on Discord, it'd be great for folks to play with other people's creations (like the Vue logo).

Describe the solution you'd like
A query param that contains the gradients in base64 or the likes, which then get parsed on page load?

Describe alternatives you've considered
Only alternative to this is the public gallery, but it'd be cumbersome to wait for your gradient to get submitted, etc.

Additional context
Would be happy to help out with this :)

Edit a gradient that has already been added

Is your feature request related to a problem? Please describe.
An edit button on the gradient item in the list that makes it active so you can edit it further.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Wrong max/min values on ranges/sizes

Describe the bug
When the size unit is px, the max and min size values on range inputs are wrong.

To Reproduce
Steps to reproduce the behavior:

  1. Go to box details
  2. In width, click on % to switch to px
  3. Max value is 100
  4. See error.

Expected behavior
Max value should be the max value of the canvas, not just 100px.
And this applies not just to width, but to the height, x and y positions on box and shape.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Make the shapy instance forkable

Is your feature request related to a problem? Please describe.
No problem. Just a feature I would like!

Describe the solution you'd like
I would like a button to fork the shapy instance, so I can sort of version it.

Describe alternatives you've considered
The share feature is sort of like forking, but not really, because I want to be able to have a copy of the shapy instance, and keep working from the new point.

Additional context
None.

Show a random image on initial load

Is your feature request related to a problem? Please describe.
To show off what shapy is capable of creating, show random images on load on the canvas.

Describe the solution you'd like
Whenever the app is loaded for the first time, show an image/shape made with Shapy for inspiration.

Store images in array and choose one randomly.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Gradient type radios not working in Safari

Describe the bug
It doesn't work changing the gradient type radio buttons (linear vs radial, repeat vs. no-repeat

To Reproduce
Steps to reproduce the behavior:

  1. Go to the generator using the safari browser
  2. Click on radial or linear gradient
  3. Preview does not update

Expected behavior
Gradient type should change. Works in Firefox and chrome.
Checked if the @input event was at fault, but an event is fired.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac
  • Browser [e.g. chrome, safari] Safari
  • Version [e.g. 22] 12.0.1

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Canvas Border Radius

Is your feature request related to a problem? Please describe.
Would be nice to add custom border radius to the canvas.

Describe the solution you'd like
Add border radius to the canvas object and input fields in the canvas fields.

Describe alternatives you've considered

Additional context

Add repeating-linear and -radial gradients option

Is your feature request related to a problem? Please describe.
Add option to choose repeating-linear-gradient or repeating-radial-gradient, because using just background-repeat: repeat on a linear or radial gradient isn’t enough sometimes.

Describe the solution you'd like
Add repeating-linear-gradient and repeating-radial-gradient to the gradient type fieldset.

Describe alternatives you've considered
(:

Additional context
(:

Reverse Color Stops & 45degree presets

Describe the solution you'd like
-Ability to reverse the color stops like you can in http://www.colorzilla.com/gradient-editor/ would be great.

  • Radio buttons for 45° presets
  • Keyboard control for sliders with up / down arrows once selected for fine control

Describe alternatives you've considered

  • Sticky slider for radio buttons

Additional context
Add any other context or screenshots about the feature request here.

Drawing mode

Is your feature request related to a problem? Please describe.
A drawing mode where you can draw the gradient using your mouse (or finger on touch devices).

Describe the solution you'd like
Add a drawing mode slider on/off, with a set of presets.

Describe alternatives you've considered

Additional context

Conical Gradients

Is your feature request related to a problem? Please describe.
Make conical gradients an option like radial and linear gradients.

Describe the solution you'd like
Use the polyfill

Describe alternatives you've considered

Additional context

Paste my own CSS into the CSS box

Is your feature request related to a problem? Please describe.
No problem.

Describe the solution you'd like
I would like to paste my own CSS into the CSS box, and have it populate all the appropriate Shapy fields.

Describe alternatives you've considered
I could fill in all the shapy fields myself.

Additional context
None.

Export to/Open in Codepen Button

Is your feature request related to a problem? Please describe.
Would be nice to open what you're working on in codepen

Describe the solution you'd like
A export to/open in codepen button

Describe alternatives you've considered

Additional context

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.