Skip to content

Commit

Permalink
New color range selector style
Browse files Browse the repository at this point in the history
  • Loading branch information
@texodus
texodus committed Feb 16, 2024
1 parent 27f47dd commit d74cc4e
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 51 deletions.
4 changes: 4 additions & 0 deletions rust/perspective-viewer/src/less/column-settings-panel.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@
font-size: 9px;
}

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

input {
&[type="text"],
&[type="search"] {
Expand Down
33 changes: 28 additions & 5 deletions rust/perspective-viewer/src/less/column-style.less
View file
Original file line number Diff line number Diff line change
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
1 change: 1 addition & 0 deletions rust/perspective-viewer/src/less/expression-editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@

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

input#expression-name {
Expand Down
35 changes: 19 additions & 16 deletions rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs
View file
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
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
86 changes: 66 additions & 20 deletions rust/perspective-viewer/src/rust/components/form/color_range_selector.rs
View file
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>
}
}
13 changes: 7 additions & 6 deletions rust/perspective-viewer/src/rust/components/number_column_style.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@ impl Component for NumberColumnStyle {
<div
class="row inner_section"
>
<ColorRangeSelector ..self.color_props(Fg, ctx) />
<ColorRangeSelector ..self.color_props(Fg, false, ctx) />
</div>
}
</>
Expand All @@ -373,7 +373,7 @@ impl Component for NumberColumnStyle {
<div
class="row inner_section"
>
<ColorRangeSelector ..self.color_props(Fg, ctx) />
<ColorRangeSelector ..self.color_props(Fg, false, ctx) />
<NumberInput ..self.max_value_props(Fg, ctx) />
</div>
}
Expand All @@ -387,7 +387,7 @@ impl Component for NumberColumnStyle {
<div
class="row inner_section"
>
<ColorRangeSelector ..self.color_props(Bg, ctx) />
<ColorRangeSelector ..self.color_props(Bg,false, ctx) />
</div>
}
</>
Expand All @@ -400,7 +400,7 @@ impl Component for NumberColumnStyle {
<div
class="row inner_section"
>
<ColorRangeSelector ..self.color_props(Bg, ctx) />
<ColorRangeSelector ..self.color_props(Bg, true, ctx) />
<NumberInput ..self.max_value_props(Bg, ctx) />
</div>
}
Expand All @@ -414,7 +414,7 @@ impl Component for NumberColumnStyle {
<div
class="row inner_section"
>
<ColorRangeSelector ..self.color_props(Bg, ctx) />
<ColorRangeSelector ..self.color_props(Bg, true, ctx) />
</div>
}
</>
Expand Down Expand Up @@ -567,7 +567,7 @@ impl NumberColumnStyle {
ctx.props().on_change.emit(config);
}

fn color_props(&self, side: Side, ctx: &Context<Self>) -> ColorRangeProps {
fn color_props(&self, side: Side, is_gradient: bool, ctx: &Context<Self>) -> ColorRangeProps {
let on_pos_color = ctx
.link()
.callback(move |x| NumberColumnStyleMsg::PosColorChanged(side, x));
Expand All @@ -576,6 +576,7 @@ impl NumberColumnStyle {
.callback(move |x| NumberColumnStyleMsg::NegColorChanged(side, x));

props!(ColorRangeProps {
is_gradient,
pos_color: if side == Fg {
&self.pos_fg_color
} else {
Expand Down
9 changes: 5 additions & 4 deletions rust/perspective-viewer/test/js/column_settings.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,11 @@ test.describe("Plugin Styles", () => {
await page.locator("tbody tr").nth(1).waitFor();
await expect(view.columnSettingsSidebar.container).toBeVisible();
});
test("Column settings should not shrink", async ({ page }) => {

test("Column settings should not expand", async ({ page }) => {
let view = new PageView(page);

const MAX_WIDTH = 300;
const MAX_WIDTH = 200;
let checkWidth = async () => {
let width = await view.columnSettingsSidebar.container.evaluate(
(sidebar) => sidebar.getBoundingClientRect().width
Expand All @@ -155,15 +156,15 @@ test.describe("Plugin Styles", () => {
let editor = view.columnSettingsSidebar.attributesTab.expressionEditor;
await editor.textarea.focus();
await editor.textarea.clear();
// NOTE: We should find another way to test this as the trick used here is probably not a desired feature.
// This creates an error which then expands the sidebar to max width.

await editor.textarea.type(
"'0000000000000000000000000000000000000000000000000000000000"
);
await checkWidth();
await editor.textarea.clear();
await checkWidth();
});

test("Selected tab stays selected when manipulating column", async ({
page,
}) => {
Expand Down
Binary file modified tools/perspective-test/results.tar.gz
View file
Binary file not shown.

0 comments on commit d74cc4e

Please sign in to comment.