Coder Social home page Coder Social logo

la-color-picker's People

Contributors

lucasandrad avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar

Forkers

kaitomiku rafalagoon

la-color-picker's Issues

Minor improvements

Hello,

I landed on your project seeking for a simple color picker for calendar events!
Thanks for the inspiration!

I've done few tweaks and planned to do more. I don't have the material for a real pr yet but here are the ideas:

Helping the palette:

  function showColorPalette() {
    colorPalette.style.display = 'block';
    var newDiv = '\
    <div class="color-option" style="background-color:#ff0038"></div> \
    <div class="color-option" style="background-color:#ff194b"></div> \
    <div class="color-option" style="background-color:#ff325f"></div> \
    <div class="color-option" style="background-color:#ff4c73"></div> \
    <div class="color-option" style="background-color:#ff6687"></div> \
    <div class="color-option" style="background-color:#ff7f9b"></div> \
    <div class="color-option" style="background-color:#ff99af"></div> \
    <div class="color-option" style="background-color:#ffb2c3"></div> \
    <div class="color-option" style="background-color:#ffccd7"></div> \
    <div class="color-option" style="background-color:#ffe5eb"></div> \
    <div class="color-option" style="background-color:#ffffff"></div> \
    \
    <div class="color-option" style="background-color:#D97256"></div> \
    <div class="color-option" style="background-color:#E07A5E"></div> \
    <div class="color-option" style="background-color:#E68368"></div> \
    <div class="color-option" style="background-color:#EC8C72"></div> \
    <div class="color-option" style="background-color:#F0957D"></div> \
    <div class="color-option" style="background-color:#F49F88"></div> \
    <div class="color-option" style="background-color:#F8A995"></div> \
    <div class="color-option" style="background-color:#FAB4A2"></div> \
    <div class="color-option" style="background-color:#FCBFAF"></div> \
    <div class="color-option" style="background-color:#FECABD"></div> \
    <div class="color-option" style="background-color:#ffffff"></div> \
    \
    ......
    ';
    colorPalette.innerHTML = newDiv;
  }

This makes it easier for changing colors.

Struggling with rail's sprokets I added this to get rid of the onclick="chooseColor(event)" inside the html.

  document.getElementById('colorPalette').addEventListener('click', function (e) {
    if (e.target.className === 'color-option') {
      chooseColor(e)
    }
  }, false);

And finally, I changed the css to get:

Screenshot from 2019-06-08 12-15-23

On select action the background of the input is adjusted ( no more extra margin that can affect the layout). I've added border-radius to the color to look more gmail-like.

Ultimately I will try to make a cleaner api. So I can call colorPicker(target-input, default-color,[array of colors that can be selected]);

Hope this gives you new ideas!

Best,

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.