lmcjt37 / kulor-reactify Goto Github PK

Recently adding the button bar has cause the screen to be too tall to fit on the screen without scrolling.

A decision needs to be made in order to either present the buttons better at the bottom of the screen, show only icons, or have a single button that hides/shows all the buttons as and when they are needed.

• You can cause the HEX hint text to overlap the RGB one by deleting the initial value in the HEX input field.

• Opacity is not being applied correctly to the hint text when deleting the text.

• It should be "#" not "HEX#"

Need validation to prevent commas(and other allowed punctuation) as first characters in the RGB input field.

Certain extremes of alpha against certain colours (if not all) causes the "Octocat" to display incorrectly

Not enough clearance from the logo when viewing the page on responsive mobile.

The gooey navitem ripple effect is currently done using (s)css. This could actually be swapped for the react toolbox version.

The example - http://react-toolbox.com/#/components/ripple - can be used as a guide

When inputting values, adding spaces will break the converter or not give the correct returned value/colour.

https://medium.com/@wesharehoodies/webpack-dashboard-with-create-react-app-vue-cli-and-custom-configs-49166e1a69de

Include some sort of coverage reporter for tests to be extra thorough - maybe Istanbul

Find a solution to be able to specify the value of which you lighten and darken the colour by each time you click the button.

RGB values for each primary colour(red, green, blue) should be limited to 255. The fix for this could simply be to introduce tooltips sooner to help flag user input errors rather than handle this in the code.

Not causing a major or critical issue that is breaking. But something isn't being bundled correctly and is causing this issue:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://lmcjt.com/__webpack_hmr

The page will continue to try and GET the resource and fail each time.

** Can be seen in the console

There are a number of different ways this could be done.

Thinking about it, the simplest way would be to add another slider which if anything other than 1.0 then we would add a 4th segment to RGB and HEX. Where the HSL/HSV values could simply use the slider pattern as is.

The idea would be to create something like a colour palette which could either store saved colours to, or suggestive colours could be generated in place/as well as.

Seen on iPhone 6S, double-tap on the background caused the screen to zoom in and again back out.

This functionality should be disabled and/or not happen.

Initial Unit Tests need to be added, this will help identify ongoing issues or potential gotchas.

• Unit
• Integration
• Contract (If necessary)

MOR

• Add alpha value to rgb
• Remove alpha from rgb
• See background colour not affected

The reason for this is that the mechanism used to work out the theme (isDark), doesn't factor in alpha to it's calculations. Therefore as we change the background, readability is poor. So the decision to leave this change out was made.

Add the ability to click and copy each value.

• RGB
• HEX
• HSL (concat the 3 sources to one value)

• 3 characters allows the fullstop and 2 characters doesn't
  expect(ColourHelper.trimRgb("123.")).to.equal("123,.");

• not excluding all unwanted characters
  expect(ColourHelper.trimRgb("rgba(123,123,123)")).to.equal("123,123,123");

• shouldn't allow initial fullstop
  expect(ColourHelper.trimRgb(".")).to.equal("");

• shouldn't allow initial space or replace space with comma
  expect(ColourHelper.trimRgb(" ")).to.equal(",");

• zeros shouldn't be allowed in first 3 sections
  expect(ColourHelper.trimRgb("255,255,0")).to.equal("255,255,0");

• Copy buttons too close
• Buttons not expanding to full width

Update documentation around testing and other available scripts which can be found in package.json

With the introduction of the alpha value, it is possible for the input text to overlap the prefix or suffix of the input.

See attachment.

Using the tinyColor library, we could use what is already available to us and expand on functionality to include the following; triad, complementary, and tetrad.

If you empty the RGB field so that the prefix and suffix disappear, then change the HEX field so that a value is inserted into the RGB field. This change event doesn't cause the prefix/suffix opacity to react or change for the new value.

Needs a check in place for change events across the board.