kit

Colour picker

Built revision v17.10.0

Phoenix
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Colour picker

Label colour
Blue
Calendar colour
Dark slate blue
Cannot be changed
Calendar colour
Dark slate blue Only the owner can change this.
Source
<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-colour-label">
  <:label>Label colour</:label>
  <:control_set :let={binding}>
    <Kit.Phoenix.Roles.ColourPicker.colour_picker binding={binding} reader={reader()} name="label_colour" value="#2980b9" custom>
      <:swatch value="#c0392b" name="Red" />
      <:swatch value="#d35400" name="Orange" />
      <:swatch value="#f1c40f" name="Yellow" />
      <:swatch value="#27ae60" name="Green" />
      <:swatch value="#2980b9" name="Blue" />
      <:swatch value="#8e44ad" name="Purple" />
      <:swatch value="#7f8c8d" name="Grey" />
    </Kit.Phoenix.Roles.ColourPicker.colour_picker>
  </:control_set>
  <:printed_value>Blue</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-colour-calendar">
  <:label>Calendar colour</:label>
  <:control_set :let={binding}>
    <Kit.Phoenix.Roles.ColourPicker.colour_picker binding={binding} reader={reader()} name="calendar_colour" value="#483d8b" custom>
      <:swatch value="#c0392b" name="Red" />
      <:swatch value="#d35400" name="Orange" />
      <:swatch value="#f1c40f" name="Yellow" />
      <:swatch value="#27ae60" name="Green" />
      <:swatch value="#2980b9" name="Blue" />
      <:swatch value="#8e44ad" name="Purple" />
      <:swatch value="#7f8c8d" name="Grey" />
    </Kit.Phoenix.Roles.ColourPicker.colour_picker>
  </:control_set>
  <:printed_value>Dark slate blue</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-colour-calendar-disabled">
<:label>Calendar colour</:label>
<:control_set :let={binding}>
  <Kit.Phoenix.Roles.ColourPicker.colour_picker disabled binding={binding} reader={reader()} name="calendar_colour_locked" value="#483d8b" custom>
    <:swatch value="#c0392b" name="Red" />
    <:swatch value="#d35400" name="Orange" />
    <:swatch value="#f1c40f" name="Yellow" />
    <:swatch value="#27ae60" name="Green" />
    <:swatch value="#2980b9" name="Blue" />
    <:swatch value="#8e44ad" name="Purple" />
    <:swatch value="#7f8c8d" name="Grey" />
  </Kit.Phoenix.Roles.ColourPicker.colour_picker>
</:control_set>
<:help>Only the owner can change this.</:help>
<:printed_value>Dark slate blue</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>

Colour picker, open

Show it open

Source
<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-colour-tag">
  <:label>Tag colour</:label>
  <:control_set :let={binding}>
    <Kit.Phoenix.Roles.ColourPicker.colour_picker binding={binding} reader={reader()} name="tag_colour" value="#483d8b" custom>
      <:swatch value="#c0392b" name="Red" />
      <:swatch value="#d35400" name="Orange" />
      <:swatch value="#f1c40f" name="Yellow" />
      <:swatch value="#27ae60" name="Green" />
      <:swatch value="#2980b9" name="Blue" />
      <:swatch value="#8e44ad" name="Purple" />
      <:swatch value="#7f8c8d" name="Grey" />
    </Kit.Phoenix.Roles.ColourPicker.colour_picker>
  </:control_set>
  <:printed_value>Dark slate blue</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>