New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#3211 - Add colorpicker prevalue editor #3212

Merged
merged 6 commits into from Oct 23, 2018

Conversation

Projects
None yet
3 participants
@bjarnef
Copy link
Contributor

bjarnef commented Oct 9, 2018

Prerequisites

  • I have created an issue for the proposed changes in this PR, the link is: #3211
  • I have added steps to test this contribution in the description below

Description

This add a colorpicker prevalue editor, which is useful for grid settings/styles and also in prevalues for other property editors.

image

An example json of the grid editor config in settings:

[
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#D30535",
      {
        "value": "#32CD32"
      },
      "#81E6E0",
      "#109D95",
      "red",
      {
        "label": "White",
        "value": "#fff"
      },
      "#53B3AE",
      {
        "value": "#f00",
        "label": "Red"
      }
    ]
  }
]

We could use tinycolor to ensure color values (rgba(a), hex, hsl, hex) are converted to hex codes. Tinycolor has previous been used, but not sure if it has been removed from the project:

As a minimum I think we should support both 3 digit and 6 digit hex codes.

@bjarnef

This comment has been minimized.

Copy link
Contributor

bjarnef commented Oct 9, 2018

It needs a bit more testing. but I think we should ensure it works with 3 digit and 6 digit hex codes and also that it works on both grid settings/styles and as prevalue editor in custom property editors. Maybe also as macro parameter editor?

@bjarnef bjarnef changed the title WIP - Add colorpicker prevalue editor WIP - 3211 - Add colorpicker prevalue editor Oct 9, 2018

@bjarnef bjarnef changed the title WIP - 3211 - Add colorpicker prevalue editor WIP - #3211 - Add colorpicker prevalue editor Oct 9, 2018

Bjarne Fyrstenborg added some commits Oct 9, 2018

@nul800sebastiaan

This comment has been minimized.

Copy link
Member

nul800sebastiaan commented Oct 9, 2018

Looking great so far @bjarnef ! Seems to work nicely. I'll look forward to seeing this cleaned up. I'm off for a few days but I'm sure it will be in good shape when I get back!

Bjarne Fyrstenborg added some commits Oct 9, 2018

@bjarnef

This comment has been minimized.

Copy link
Contributor

bjarnef commented Oct 9, 2018

@nul800sebastiaan I have worked a bit more on this and made it work with labels as well and only add items with valid 3 digit or 6 digit hex codes.

Without labels:

[
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#D30535",
      {
        "value": "#32CD32"
      },
      "#81E6E0",
      "#109D95",
      "red",
      {
        "label": "White",
        "value": "#fff"
      },
      "#53B3AE",
      {
        "value": "#f00",
        "label": "Red"
      }
    ],
    "config": {
      "useLabel": false
    }
  }
]

image

With labels:

[
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#D30535",
      {
        "value": "#32CD32"
      },
      "#81E6E0",
      "#109D95",
      "red",
      {
        "label": "White",
        "value": "#fff"
      },
      "#53B3AE",
      {
        "value": "#f00",
        "label": "Red"
      }
    ],
    "config": {
      "useLabel": true
    }
  }
]

image

@bjarnef

This comment has been minimized.

Copy link
Contributor

bjarnef commented Oct 21, 2018

@nul800sebastiaan maybe you can have another look at this?
Not sure if it should support rgb(a) and color names.

We could une tinycolor, which has been included in core, but not sure if it is still used.
https://github.com/bgrins/TinyColor

There is also a smaller library like this:
http://honyovk.com/Colors/

If it should include a dependency to another library, it would be great, if it was something which could be useful in other parts of the backoffice.

I wonder it some developers might want to use the colorpicker prevalue editor for a custom property editor. Is there a specific format for data to the prevalues in package.manifest? e.g. previous when using radiobuttonlist in custom property editors, it didn't support assigning the values for the radiobuttons, but I think think is supported now?

@bjarnef bjarnef changed the title WIP - #3211 - Add colorpicker prevalue editor #3211 - Add colorpicker prevalue editor Oct 21, 2018

@nul800sebastiaan

This comment has been minimized.

Copy link
Member

nul800sebastiaan commented Oct 23, 2018

Works great @bjarnef ! 👍

I am not sure when we added TinyColor to core, interesting!

Let's not add TinyColor for now, seems like a bit of overkill. We should also check what it is used for now and consider if it is actually all that useful.

I am not sure about prevalue editors and what is supported, I'd be happy to get input from you if you want to investigate. :-)

@nul800sebastiaan nul800sebastiaan merged commit 20c215e into umbraco:dev-v7 Oct 23, 2018

1 of 2 checks passed

Cms Continuous #201810090034 failed
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
@madsrasmussen

This comment has been minimized.

Copy link
Contributor

madsrasmussen commented Oct 30, 2018

@bjarnef @nul800sebastiaan

No worries, I have removed them now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment