Mirrored_Repos/veloren
1
0
Fork 0
mirror of https://gitlab.com/veloren/veloren.git synced 2024-08-30 18:12:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust tooltip layout by moving title to the right of images

Browse Source
This commit is contained in:
Imbris
2019-09-01 16:30:26 -04:00
parent 3d7326b65f
commit ba186e59cc
1 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
voxygen/src/ui/widgets/tooltip.rs
View File

@ -285,9 +285,8 @@ impl<'a> Tooltip<'a> {
// self.justify(text::Justify::Right) // self.justify(text::Justify::Right)
//} //}
fn title_desc_image_width(&self, total_width: f64) -> (f64, f64, f64) { fn text_image_width(&self, total_width: f64) -> (f64, f64) {
let inner_width = (total_width - H_PAD * 2.0).max(0.0); let inner_width = (total_width - H_PAD * 2.0).max(0.0);
let title_w = inner_width;
// Image defaults to 30% of the width // Image defaults to 30% of the width
let image_w = if self.image.is_some() { let image_w = if self.image.is_some() {
match self.image_dims { match self.image_dims {
@ -297,8 +296,8 @@ impl<'a> Tooltip<'a> {
} else { } else {
0.0 0.0
}; };
// Description gets the remaining width // Text gets the remaining width
let desc_w = (inner_width let text_w = (inner_width
- if self.image.is_some() { - if self.image.is_some() {
image_w + H_PAD image_w + H_PAD
} else { } else {
@ -306,7 +305,7 @@ impl<'a> Tooltip<'a> {
}) })
.max(0.0); .max(0.0);
(title_w, desc_w, image_w) (text_w, image_w)
} }
/// Specify the font used for displaying the text. /// Specify the font used for displaying the text.
@ -357,7 +356,7 @@ impl<'a> Widget for Tooltip<'a> {
} = args; } = args;
// Widths // Widths
let (title_w, desc_w, image_w) = self.title_desc_image_width(rect.w()); let (text_w, image_w) = self.text_image_width(rect.w());
// Apply transparency // Apply transparency
let color = style.color(ui.theme()).alpha(self.transparency); let color = style.color(ui.theme()).alpha(self.transparency);
@ -371,55 +370,56 @@ impl<'a> Widget for Tooltip<'a> {
.color(color) .color(color)
.set(state.ids.image_frame, ui); .set(state.ids.image_frame, ui);
// Image
if let Some(img_id) = self.image {
widget::Image::new(img_id)
.w_h(image_w, self.image_dims.map_or(image_w, |(_, h)| h))
.graphics_for(id)
.parent(id)
.color(Some(color))
.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD)
.set(state.ids.image, ui);
}
// Spacing for overhanging text // Spacing for overhanging text
let title_space = self.style.title.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR; let title_space = self.style.title.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR;
// Title of tooltip // Title of tooltip
if !self.title_text.is_empty() { if !self.title_text.is_empty() {
widget::Text::new(self.title_text) let title = widget::Text::new(self.title_text)
.w(title_w) .w(text_w)
.graphics_for(id) .graphics_for(id)
.parent(id) .parent(id)
.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD)
.with_style(self.style.title) .with_style(self.style.title)
// Apply transparency // Apply transparency
.color(style.title.color(ui.theme()).alpha(self.transparency)) .color(style.title.color(ui.theme()).alpha(self.transparency));
.set(state.ids.title, ui);
}
// Image if self.image.is_some() {
if let Some(img_id) = self.image { title
let image = widget::Image::new(img_id) .right_from(state.ids.image, H_PAD)
.w_h(image_w, self.image_dims.map_or(image_w, |(_, h)| h)) .align_top_of(state.ids.image)
.graphics_for(id)
.parent(id)
.color(Some(color));
if !self.title_text.is_empty() {
image
.down_from(state.ids.title, V_PAD * 0.5 + title_space)
.align_left_of(state.ids.title)
} else { } else {
image.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD) title.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD)
} }
.set(state.ids.image, ui); .set(state.ids.title, ui);
} }
// Description of tooltip // Description of tooltip
let desc = widget::Text::new(self.desc_text) let desc = widget::Text::new(self.desc_text)
.w(desc_w) .w(text_w)
.graphics_for(id) .graphics_for(id)
.parent(id) .parent(id)
// Apply transparency // Apply transparency
.color(style.desc.color(ui.theme()).alpha(self.transparency)) .color(style.desc.color(ui.theme()).alpha(self.transparency))
.with_style(self.style.desc); .with_style(self.style.desc);
if self.image.is_some() { if !self.title_text.is_empty() {
desc.right_from(state.ids.image, H_PAD) desc.down_from(state.ids.title, V_PAD * 0.5 + title_space)
.align_top_of(state.ids.image) .align_left_of(state.ids.title)
} else { } else {
if !self.title_text.is_empty() { if self.image.is_some() {
desc.down_from(state.ids.title, V_PAD * 0.5 + title_space) desc.right_from(state.ids.image, H_PAD)
.align_left_of(state.ids.title) .align_top_of(state.ids.image)
} else { } else {
desc.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD) desc.top_left_with_margins_on(state.ids.image_frame, V_PAD, H_PAD)
} }
@ -437,30 +437,30 @@ impl<'a> Widget for Tooltip<'a> {
.with_style(self.style.desc) .with_style(self.style.desc)
.get_w(ui) .get_w(ui)
.unwrap_or(0.0); .unwrap_or(0.0);
let body_w = if self.image.is_some() {
let text_w = single_line_title_w.max(single_line_desc_w);
let inner_w = if self.image.is_some() {
match self.image_dims { match self.image_dims {
Some((w, _)) => w + single_line_desc_w + H_PAD, Some((w, _)) => w + text_w + H_PAD,
None => single_line_desc_w / (1.0 - IMAGE_W_FRAC) + H_PAD, None => text_w / (1.0 - IMAGE_W_FRAC) + H_PAD,
} }
} else { } else {
single_line_desc_w text_w
}; };
let width = single_line_title_w let width =
.max(body_w) inner_w.min(self.style.desc.font_size(&ui.theme) as f64 * DEFAULT_CHAR_W) + 2.0 * H_PAD;
.min(self.style.desc.font_size(&ui.theme) as f64 * DEFAULT_CHAR_W)
+ 2.0 * H_PAD;
Dimension::Absolute(width) Dimension::Absolute(width)
} }
fn default_y_dimension(&self, ui: &Ui) -> Dimension { fn default_y_dimension(&self, ui: &Ui) -> Dimension {
let (title_w, desc_w, image_w) = self.title_desc_image_width(self.get_w(ui).unwrap_or(0.0)); let (text_w, image_w) = self.text_image_width(self.get_w(ui).unwrap_or(0.0));
let title_h = if self.title_text.is_empty() { let title_h = if self.title_text.is_empty() {
0.0 0.0
} else { } else {
widget::Text::new(self.title_text) widget::Text::new(self.title_text)
.with_style(self.style.title) .with_style(self.style.title)
.w(title_w) .w(text_w)
.get_h(ui) .get_h(ui)
.unwrap_or(0.0) .unwrap_or(0.0)
+ self.style.title.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR + self.style.title.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR
@ -471,15 +471,15 @@ impl<'a> Widget for Tooltip<'a> {
} else { } else {
widget::Text::new(self.desc_text) widget::Text::new(self.desc_text)
.with_style(self.style.desc) .with_style(self.style.desc)
.w(desc_w) .w(text_w)
.get_h(ui) .get_h(ui)
.unwrap_or(0.0) .unwrap_or(0.0)
+ self.style.desc.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR + self.style.desc.font_size(&ui.theme) as f64 * TEXT_SPACE_FACTOR
}; };
// Image defaults to square shape // Image defaults to square shape
let body_h = desc_h.max(self.image_dims.map_or(image_w, |(_, h)| h)); let image_h = self.image_dims.map_or(image_w, |(_, h)| h);
// Title height + body height + padding/spacing // Title height + desc height + padding/spacing
let height = title_h + body_h + 2.0 * V_PAD; let height = (title_h + desc_h).max(image_h) + 2.0 * V_PAD;
Dimension::Absolute(height) Dimension::Absolute(height)
} }
} }