fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-28 11:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revamp the ColorPicker popover and ColorInput widget (#830)

Browse Source 
* Add cancel hint to Eyedropper tool

* Improve eyedropper overlay CSS

* Make CSS for transparent checkered background reusable

* Add color choice preview to color picker

* Draw text and markers as contrasting white or black

* Add reactive color updating and new/initial swapping

* Add Hex, RGB, HSV, and Opacity inputs

* Add none color and preset buttons

* Add eyedropper button and fix alignment (now visually done)

* Wire up none colors through the backend and style the ColorInput widget

* Add color info chip to ColorInput widget

* Fix all UX bugs

* Add more tooltips

* Fix FloatingMenu recursive loop

* Prevent mouse stray from closing color picker while dragging pickers

Closes #703

* Fix deselect all layers shortcut

* Add temporary eyedropper for Chromium browsers and a coming soon fallback
This commit is contained in:
Keavon Chambers
2022-10-28 18:36:04 -07:00
committed by GitHub
parent 803fa4a045
commit 7d2bdf11e1
23 changed files with 830 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editor/src/messages/layout/layout_message_handler.rs
+18 -2
View File
@@ -4,6 +4,7 @@ use crate::messages::layout::utility_types::layout_widget::Layout;
use crate::messages::layout::utility_types::layout_widget::Widget;
use crate::messages::prelude::*;
use graphene::color::Color;
use graphene::layers::text_layer::Font;
use serde_json::Value;
@@ -60,8 +61,23 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
responses.push_back(callback_message);
}
Widget::ColorInput(color_input) => {
let update_value = value.as_str().map(String::from);
color_input.value = update_value;
let update_value = value.as_object().expect("ColorInput update was not of type: object");
let parsed_color = (|| {
let is_none = update_value.get("none")?.as_bool()?;
if !is_none {
Some(Some(Color::from_rgbaf32(
update_value.get("red")?.as_f64()? as f32,
update_value.get("green")?.as_f64()? as f32,
update_value.get("blue")?.as_f64()? as f32,
update_value.get("alpha")?.as_f64()? as f32,
)?))
} else {
Some(None)
}
})()
.unwrap_or_else(|| panic!("ColorInput update was not able to be parsed with color data: {:?}", color_input));
color_input.value = parsed_color;
let callback_message = (color_input.on_update.callback)(color_input);
responses.push_back(callback_message);
}
editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+5 -4
View File
@@ -39,13 +39,12 @@ impl Default for CheckboxInput {
#[derive(Clone, Derivative, Serialize, Deserialize)]
#[derivative(Debug, PartialEq, Default)]
pub struct ColorInput {
pub value: Option<String>,
pub label: Option<String>,
pub value: Option<Color>,
// TODO: Add allow_none
#[serde(rename = "noTransparency")]
#[derivative(Default(value = "true"))]
pub no_transparency: bool,
pub no_transparency: bool, // TODO: Rename allow_transparency (and invert usages)
pub disabled: bool,
@@ -295,6 +294,8 @@ pub struct TextInput {
pub tooltip: String,
pub centered: bool,
#[serde(rename = "minWidth")]
pub min_width: u32,