Pick named Red-colors and Web-colors

named-color-picker.red

Red [
	Date: 28-Feb-2020
	Description: "Another color-picker with named Red-colors and Web-colors"
	Licence: "Public domain"
	File: %named-color-picker.red
	Idea: https://gitter.im/red/red/gui-branch?at=5e58287f4eb23e6ae179f475
]
context [
	red-colors: split replace/all lowercase trim help-string tuple! [some [#" " | #"^/"]] #" " #" "
	remove back tail red-colors
	forall red-colors [red-colors/2: load red-colors/2 red-colors: next red-colors]
	sort/skip red-colors 2

	do https://tinyurl.com/v9gwgkz;%web-colors.red

	get-color: func [face][pick face/data face/selected * 2]

	set 'pick-color func [/both /font /local clr cl tl txt pan btn fnt lay][
		view lay: layout/flags/tight [
			title "Red colors "
			on-resizing [
				pan/offset/y: face/size/y - pan/size/y
				btn/size/x: pan/size/x: face/size/x
				tl/size: as-pair face/size/x pan/offset/y
			]
			below
			tl: text-list 150 data red-colors select 1 focus font-name "Consolas"
			on-key [switch event/picked [27 [unview] 13 [clr: get-color face unview]]] 
			on-dbl-click [clr: get-color face unview] 
			react [
				cl: pick face/data face/selected * 2
				either fnt/data [
					face/font/color: cl
				][
					face/color: cl
				]
				change/part find/tail txt: face/parent/text "colors " form face/color tail txt
				change/part find/tail txt: fnt/text "Font " form face/font/color tail txt
			]
			pan: panel [
				origin 0x0 space 0x0 below
				btn: button "Web colors " with [size/x: tl/size/x][
					lay/text: copy face/text
					switch face/text [
						"Web colors " [
							tl/data: web-colors
							face/text: "Red colors "
						]
						"Red colors " [
							tl/data: red-colors
							face/text: "Web colors "
						]
					]
					tl/selected: 1
					set-focus tl
				] 
				pad 10x0 fnt: check "Font " 150 data font on-change [set-focus tl]
			]
		][modal popup resize]
		either both [reduce [tl/color tl/font/color]][clr]
	]
]