Skip to content
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.

Sign up for GitHub

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

New color selector component #2536

Merged
merged 2 commits into from
Feb 16, 2024
Merged

New color selector component #2536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27f47dd
Fix scrollbars, fix expression error overflow, clean up style sidebar
texodus Feb 15, 2024
d74cc4e
New color range selector style
texodus Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .vscode/settings.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"rust-analyzer.linkedProjects": [
"${workspaceFolder}/rust/perspective-viewer/Cargo.toml"
],
"rust-analyzer.server.extraEnv": {
"RA_LOG": "rust_analyzer::reload=info",
"CARGO_TARGET_DIR": "rust/perspective-viewer/dist/analyzer"
},
"rust-analyzer.rustfmt.overrideCommand": [
"cargo",
"run",
Expand Down
3 changes: 0 additions & 3 deletions packages/perspective-viewer-datagrid/src/less/scrollbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@

// Scrollbar styling
regular-table {
// firefox scrollbar styling
scrollbar-color: transparent transparent;
scrollbar-width: thin;
outline: none;

// webkit (chrome, safari, etc) scrollbar styling
Expand Down
5 changes: 5 additions & 0 deletions rust/perspective-viewer/src/less/column-settings-panel.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,14 @@
}

.item_title {
flex: 0 0 auto;
font-size: 9px;
}

.radio-list-item label {
margin-top: 6px;
}

input {
&[type="text"],
&[type="search"] {
Expand Down
35 changes: 29 additions & 6 deletions rust/perspective-viewer/src/less/column-style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
}

label {
font-size: 8px;
font-size: 9px;
width: 100%;
}

Expand Down Expand Up @@ -131,24 +131,47 @@
flex-wrap: wrap;
}

.color-gradient-container {
display: flex;
flex-wrap: nowrap;
flex: 1 1 auto;
.color-thermometer {
flex: 1 1 auto;
height: 24px;
}
}

input[type="color"] {
width: 36px;
height: 36px;
height: 24px;
cursor: pointer;
padding: 0;
margin-right: 4px;
font-family: inherit;
overflow: hidden;
border-radius: 3px;
border-radius: 6px;

&:hover {
opacity: 0.8;
}

&:before {
position: absolute;
font-family: var(--button--font-family, inherit);
margin-top: 4px;
margin-top: -1px;
margin-left: 12px;
font-size: 20px;
content: var(--column-style-pos-color--content, "+");
color: white;
color: var(--sign--color, white);
}

&#pos-color-param {
border-radius: 6px 0 0 6px;
margin: 0 1px 0 0;
}

&#neg-color-param {
border-radius: 0 6px 6px 0;
margin: 0 0 0 1px;
}

&#neg-color-param:before {
Expand Down
2 changes: 1 addition & 1 deletion rust/perspective-viewer/src/less/dom/checkbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
padding: 0px;
cursor: pointer;
outline: none;
margin: 0 5px;
margin: 0 5px 0 0;

&:checked:before {
-webkit-mask-image: var(--column-checkbox-on--mask-image);
Expand Down
6 changes: 6 additions & 0 deletions rust/perspective-viewer/src/less/expression-editor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
font-size: 12px;
min-height: 1.5em;
color: var(--error--color);
top: 0;
position: absolute;
width: calc(100% - 24px);
}

&.disabled {
Expand Down Expand Up @@ -54,6 +57,7 @@

.item_title {
margin-bottom: 3px;
margin-top: 4px;
}

input#expression-name {
Expand Down Expand Up @@ -102,6 +106,8 @@
flex-direction: column;
padding: 0.5em;
gap: 0.25em;
height: 24px;
position: relative;
}

#save-settings,
Expand Down
35 changes: 19 additions & 16 deletions rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,27 @@ pub struct SaveSettingsProps {
pub on_delete: Callback<()>,
pub show_danger_zone: bool,
pub disable_delete: bool,
pub is_save: bool,
}

#[function_component(SaveSettings)]
pub fn save_settings(p: &SaveSettingsProps) -> Html {
let reset = p.on_reset.reform(|_| ());
let save = p.on_save.reform(|_| ());
let delete = p.on_delete.reform(|_| ());
pub fn save_settings(props: &SaveSettingsProps) -> Html {
let reset = props.on_reset.reform(|_| ());
let save = props.on_save.reform(|_| ());
let delete = props.on_delete.reform(|_| ());
html! {
<div
id="save-settings-wrapper"
>
if p.show_danger_zone {
if props.show_danger_zone {
<div
id="danger-zone"
>
<button
id="psp-expression-editor-button-delete"
class="psp-expression-editor__button"
onmousedown={delete}
disabled={p.disable_delete}
disabled={props.disable_delete}
>
{ "Delete Column" }
</button>
Expand All @@ -49,21 +50,23 @@ pub fn save_settings(p: &SaveSettingsProps) -> Html {
<div
id="save-settings"
>
<button
id="psp-expression-editor-button-reset"
class="psp-expression-editor__button"
onmousedown={reset}
disabled={!p.reset_enabled}
>
{ "Reset" }
</button>
if props.is_save {
<button
id="psp-expression-editor-button-reset"
class="psp-expression-editor__button"
onmousedown={reset}
disabled={!props.reset_enabled}
>
{ "Reset" }
</button>
}
<button
id="psp-expression-editor-button-save"
class="psp-expression-editor__button"
onmousedown={save}
disabled={!p.save_enabled}
disabled={!props.save_enabled}
>
{ "Save" }
{ if props.is_save { "Save" } else { "Create" } }
</button>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,7 @@ impl Component for ColumnSettingsSidebar {
let save_section = SaveSettingsProps {
save_enabled: self.save_enabled,
reset_enabled: self.reset_enabled,
is_save: ctx.props().selected_column.name().is_some(),
on_reset: ctx.link().callback(ColumnSettingsMsg::OnResetAttributes),
on_save: ctx.link().callback(ColumnSettingsMsg::OnSaveAttributes),
on_delete: ctx.link().callback(ColumnSettingsMsg::OnDelete),
Expand Down
50 changes: 21 additions & 29 deletions .../perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/column_style.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ pub fn ColumnStyle(props: &ColumnStyleProps) -> Html {
let (config, attrs) = (config.unwrap(), attrs.unwrap());
let view_type = props.view_type;

let title = format!("{} Styling", view_type.to_capitalized());
let opt_html = match view_type {
Type::String => get_column_style::<_, StringColumnStyleDefaultConfig>(
config.clone(),
Expand All @@ -96,7 +95,6 @@ pub fn ColumnStyle(props: &ColumnStyleProps) -> Html {

html! {
<>
<div class="item_title">{ title.clone() }</div>
<div
class="style_contents"
>
Expand All @@ -121,19 +119,16 @@ pub fn ColumnStyle(props: &ColumnStyleProps) -> Html {
});

html! {
<>
<div class="item_title">{ title.clone() }</div>
<div
class="style_contents"
>
<DatetimeColumnStyle
{enable_time_config}
{config}
{default_config}
{on_change}
/>
</div>
</>
<div
class="style_contents"
>
<DatetimeColumnStyle
{enable_time_config}
{config}
{default_config}
{on_change}
/>
</div>
}
}),
Type::Integer | Type::Float => get_column_style::<_, NumberColumnStyleDefaultConfig>(
Expand All @@ -154,20 +149,17 @@ pub fn ColumnStyle(props: &ColumnStyleProps) -> Html {
};

html! {
<>
<div class="item_title">{ title.clone() }</div>
<div
class="style_contents"
>
<NumberColumnStyle
session={props.session.clone()}
column_name={props.column_name.clone()}
{config}
{default_config}
{on_change}
/>
</div>
</>
<div
class="style_contents"
>
<NumberColumnStyle
session={props.session.clone()}
column_name={props.column_name.clone()}
{config}
{default_config}
{on_change}
/>
</div>
}
}),
_ => Err("Booleans aren't styled yet.".into()),
Expand Down
86 changes: 66 additions & 20 deletions rust/perspective-viewer/src/rust/components/form/color_range_selector.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,44 +18,90 @@ use yew::prelude::*;
pub struct ColorRangeProps {
pub pos_color: String,
pub neg_color: String,
pub is_gradient: bool,
pub on_pos_color: Callback<String>,
pub on_neg_color: Callback<String>,
}

fn infer_fg(color: &str) -> &'static str {
let r = i32::from_str_radix(&color[1..3], 16).unwrap() as f64;
let g = i32::from_str_radix(&color[3..5], 16).unwrap() as f64;
let b = i32::from_str_radix(&color[5..7], 16).unwrap() as f64;
if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
"--sign--color:#161616"
} else {
"--sign--color:#FFFFFF"
}
}

#[function_component(ColorRangeSelector)]
pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
let on_pos_color = props.on_pos_color.reform(|event: InputEvent| {
event
.target()
.unwrap()
.unchecked_into::<HtmlInputElement>()
.value()
});

let on_neg_color = props.on_neg_color.reform(|event: InputEvent| {
event
.target()
.unwrap()
.unchecked_into::<HtmlInputElement>()
.value()
});
let gradient = use_state_eq(|| (props.pos_color.to_owned(), props.neg_color.to_owned()));
let on_pos_color = use_callback(
(gradient.clone(), props.on_pos_color.clone()),
|event: InputEvent, (gradient, on_pos_color)| {
let color = event
.target()
.unwrap()
.unchecked_into::<HtmlInputElement>()
.value();
gradient.set((color.clone(), gradient.1.to_owned()));
on_pos_color.emit(color);
},
);

let on_neg_color = use_callback(
(gradient.clone(), props.on_neg_color.clone()),
|event: InputEvent, (gradient, on_neg_color)| {
let color = event
.target()
.unwrap()
.unchecked_into::<HtmlInputElement>()
.value();
gradient.set((gradient.0.to_owned(), color.clone()));
on_neg_color.emit(color);
},
);

let fg_pos = infer_fg(&gradient.0);
let fg_neg = infer_fg(&gradient.1);

let style = if props.is_gradient {
format!(
"background:linear-gradient(to right, {} 0%, transparent 50%, {} 100%)",
gradient.0, gradient.1
)
} else {
format!(
"background:linear-gradient(to right, {} 0%, {} 50%, {} 50%, {} 100%)",
gradient.0, gradient.0, gradient.1, gradient.1
)
};

html! {
<>
<div
class="color-gradient-container"
>
<input
id="color-param"
id="pos-color-param"
style={fg_pos}
class="parameter"
type="color"
value={props.pos_color.to_owned()}
value={gradient.0.to_owned()}
oninput={on_pos_color}
/>
<div
class="color-thermometer"
{style}
/>
<input
id="neg-color-param"
style={fg_neg}
class="parameter"
type="color"
value={props.neg_color.to_owned()}
value={gradient.1.to_owned()}
oninput={on_neg_color}
/>
</>
</div>
}
}
Loading
Loading