dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Add color method for default color palette to get color by a scale number. (#447)

Browse source 
```rs
ui::red(50);
ui::blue(600);
```
This commit is contained in:
Jason Lee 2024-11-28 11:36:33 +08:00 committed by GitHub
parent a941c7b32e
commit 5468d034da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
crates/story/src/table_story.rs
View file

@ -17,6 +17,7 @@ use ui::{
popup_menu::{PopupMenu, PopupMenuExt}, popup_menu::{PopupMenu, PopupMenuExt},
prelude::FluentBuilder as _, prelude::FluentBuilder as _,
table::{ColFixed, ColSort, Table, TableDelegate, TableEvent}, table::{ColFixed, ColSort, Table, TableDelegate, TableEvent},
theme::ActiveTheme as _,
v_flex, Selectable, Size, StyleSized as _, v_flex, Selectable, Size, StyleSized as _,
}; };
@ -255,7 +256,12 @@ impl StockTableDelegate {
self.loading = false; self.loading = false;
} }
fn render_value_cell(&self, val: f64) -> AnyElement { fn render_value_cell(&self, val: f64, cx: &mut ViewContext<Table<Self>>) -> AnyElement {
let (fg_scale, bg_scale, opacity) = match cx.theme().mode.is_dark() {
true => (200, 950, 0.3),
false => (600, 50, 0.6),
};
let this = div() let this = div()
.h_full() .h_full()
.table_cell_size(self.size) .table_cell_size(self.size)
@ -265,10 +271,11 @@ impl StockTableDelegate {
let right_num = ((val - val.floor()) * 1000.).floor() as i32; let right_num = ((val - val.floor()) * 1000.).floor() as i32;
let this = if right_num % 3 == 0 { let this = if right_num % 3 == 0 {
this.text_color(ui::red_600()).bg(ui::red_50().opacity(0.6)) this.text_color(ui::red(fg_scale))
.bg(ui::red(bg_scale).opacity(opacity))
} else if right_num % 3 == 1 { } else if right_num % 3 == 1 {
this.text_color(ui::green_600()) this.text_color(ui::green(fg_scale))
.bg(ui::green_50().opacity(0.6)) .bg(ui::green(bg_scale).opacity(opacity))
} else { } else {
this this
}; };
@ -351,7 +358,7 @@ impl TableDelegate for StockTableDelegate {
&self, &self,
row_ix: usize, row_ix: usize,
col_ix: usize, col_ix: usize,
_cx: &mut ViewContext<Table<Self>>, cx: &mut ViewContext<Table<Self>>,
) -> impl IntoElement { ) -> impl IntoElement {
let stock = self.stocks.get(row_ix).unwrap(); let stock = self.stocks.get(row_ix).unwrap();
let col = self.columns.get(col_ix).unwrap(); let col = self.columns.get(col_ix).unwrap();
@ -360,33 +367,33 @@ impl TableDelegate for StockTableDelegate {
"id" => stock.id.to_string().into_any_element(), "id" => stock.id.to_string().into_any_element(),
"name" => stock.name.clone().into_any_element(), "name" => stock.name.clone().into_any_element(),
"symbol" => stock.symbol.clone().into_any_element(), "symbol" => stock.symbol.clone().into_any_element(),
"price" => self.render_value_cell(stock.price), "price" => self.render_value_cell(stock.price, cx),
"change" => self.render_value_cell(stock.change), "change" => self.render_value_cell(stock.change, cx),
"change_percent" => self.render_value_cell(stock.change_percent), "change_percent" => self.render_value_cell(stock.change_percent, cx),
"volume" => self.render_value_cell(stock.volume), "volume" => self.render_value_cell(stock.volume, cx),
"turnover" => self.render_value_cell(stock.turnover), "turnover" => self.render_value_cell(stock.turnover, cx),
"market_cap" => self.render_value_cell(stock.market_cap), "market_cap" => self.render_value_cell(stock.market_cap, cx),
"ttm" => self.render_value_cell(stock.ttm), "ttm" => self.render_value_cell(stock.ttm, cx),
"five_mins_ranking" => self.render_value_cell(stock.five_mins_ranking), "five_mins_ranking" => self.render_value_cell(stock.five_mins_ranking, cx),
"th60_days_ranking" => stock.th60_days_ranking.to_string().into_any_element(), "th60_days_ranking" => stock.th60_days_ranking.to_string().into_any_element(),
"year_change_percent" => (stock.year_change_percent * 100.0) "year_change_percent" => (stock.year_change_percent * 100.0)
.to_string() .to_string()
.into_any_element(), .into_any_element(),
"bid" => self.render_value_cell(stock.bid), "bid" => self.render_value_cell(stock.bid, cx),
"bid_volume" => self.render_value_cell(stock.bid_volume), "bid_volume" => self.render_value_cell(stock.bid_volume, cx),
"ask" => self.render_value_cell(stock.ask), "ask" => self.render_value_cell(stock.ask, cx),
"ask_volume" => self.render_value_cell(stock.ask_volume), "ask_volume" => self.render_value_cell(stock.ask_volume, cx),
"open" => stock.open.to_string().into_any_element(), "open" => stock.open.to_string().into_any_element(),
"prev_close" => stock.prev_close.to_string().into_any_element(), "prev_close" => stock.prev_close.to_string().into_any_element(),
"high" => self.render_value_cell(stock.high), "high" => self.render_value_cell(stock.high, cx),
"low" => self.render_value_cell(stock.low), "low" => self.render_value_cell(stock.low, cx),
"turnover_rate" => (stock.turnover_rate * 100.0).to_string().into_any_element(), "turnover_rate" => (stock.turnover_rate * 100.0).to_string().into_any_element(),
"rise_rate" => (stock.rise_rate * 100.0).to_string().into_any_element(), "rise_rate" => (stock.rise_rate * 100.0).to_string().into_any_element(),
"amplitude" => (stock.amplitude * 100.0).to_string().into_any_element(), "amplitude" => (stock.amplitude * 100.0).to_string().into_any_element(),
"pe_status" => stock.pe_status.to_string().into_any_element(), "pe_status" => stock.pe_status.to_string().into_any_element(),
"pb_status" => stock.pb_status.to_string().into_any_element(), "pb_status" => stock.pb_status.to_string().into_any_element(),
"volume_ratio" => self.render_value_cell(stock.volume_ratio), "volume_ratio" => self.render_value_cell(stock.volume_ratio, cx),
"bid_ask_ratio" => self.render_value_cell(stock.bid_ask_ratio), "bid_ask_ratio" => self.render_value_cell(stock.bid_ask_ratio, cx),
"latest_pre_close" => stock.latest_pre_close.to_string().into_any_element(), "latest_pre_close" => stock.latest_pre_close.to_string().into_any_element(),
"latest_post_close" => stock.latest_post_close.to_string().into_any_element(), "latest_post_close" => stock.latest_post_close.to_string().into_any_element(),
"pre_market_cap" => stock.pre_market_cap.to_string().into_any_element(), "pre_market_cap" => stock.pre_market_cap.to_string().into_any_element(),

18
crates/ui/src/colors.rs
View file

@ -172,6 +172,7 @@ where
macro_rules! color_method { macro_rules! color_method {
($color:tt, $scale:tt) => { ($color:tt, $scale:tt) => {
paste::paste! { paste::paste! {
#[inline]
#[allow(unused)] #[allow(unused)]
pub fn [<$color _ $scale>]() -> Hsla { pub fn [<$color _ $scale>]() -> Hsla {
if let Some(color) = DEFAULT_COLOR.$color.get(&($scale as usize)) { if let Some(color) = DEFAULT_COLOR.$color.get(&($scale as usize)) {
@ -186,6 +187,23 @@ macro_rules! color_method {
macro_rules! color_methods { macro_rules! color_methods {
($color:tt) => { ($color:tt) => {
paste::paste! {
/// Get color by scale number.
///
/// The possible scale numbers are:
/// 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
///
/// If the scale number is not found, it will return black color.
#[inline]
pub fn [<$color>](scale: usize) -> Hsla {
if let Some(color) = DEFAULT_COLOR.$color.get(&scale) {
return color.hsla;
}
black()
}
}
color_method!($color, 50); color_method!($color, 50);
color_method!($color, 100); color_method!($color, 100);
color_method!($color, 200); color_method!($color, 200);