Normalize scrollbar style with figma designs

This commit is contained in:
Jeremy Soller 2024-01-11 11:33:39 -07:00
parent 0eea366410
commit 3f09e17156
No known key found for this signature in database
GPG key ID: DCFCA852D3906975
4 changed files with 153 additions and 72 deletions

View file

@ -4,11 +4,11 @@ use cosmic::{
cosmic_config::{self, cosmic_config_derive::CosmicConfigEntry, CosmicConfigEntry},
theme,
};
use cosmic_text::{Metrics, Weight, Stretch};
use cosmic_text::{Metrics, Stretch, Weight};
use serde::{Deserialize, Serialize};
use std::sync::OnceLock;
use std::collections::BTreeMap;
use std::sync::OnceLock;
pub const CONFIG_VERSION: u64 = 1;

View file

@ -14,14 +14,20 @@ use cosmic::{
futures::SinkExt,
keyboard::{Event as KeyEvent, KeyCode, Modifiers},
subscription::{self, Subscription},
window, Event, Length, Point, Padding,
window, Event, Length, Padding, Point,
},
style,
widget::{self, segmented_button},
Application, ApplicationExt, Element,
};
use cosmic_text::{Family, Weight, Stretch, fontdb::FaceInfo};
use std::{any::TypeId, collections::{HashMap, BTreeMap, BTreeSet}, env, process, sync::Mutex, time::Duration};
use cosmic_text::{fontdb::FaceInfo, Family, Stretch, Weight};
use std::{
any::TypeId,
collections::{BTreeMap, BTreeSet, HashMap},
env, process,
sync::Mutex,
time::Duration,
};
use tokio::sync::mpsc;
use config::{AppTheme, Config, CONFIG_VERSION};
@ -267,22 +273,29 @@ impl App {
.into_iter()
.collect();
self.curr_font_stretch_names = self.curr_font_stretches.iter()
self.curr_font_stretch_names = self
.curr_font_stretches
.iter()
.map(|stretch| &self.all_font_stretches_vals_names_map[stretch])
.cloned()
.collect::<Vec<_>>();
if !self.curr_font_stretches.contains(&self.config.typed_font_stretch()) {
if !self
.curr_font_stretches
.contains(&self.config.typed_font_stretch())
{
self.config.font_stretch = Stretch::Normal.to_number();
}
let curr_weights = |conf_stretch| curr_font_faces
let curr_weights = |conf_stretch| {
curr_font_faces
.iter()
.filter(|face| face.stretch == conf_stretch)
.map(|face| face.weight.0)
.collect::<BTreeSet<_>>() // remove duplicates and sort
.into_iter()
.collect();
.collect()
};
self.curr_font_weights = curr_weights(self.config.typed_font_stretch());
@ -294,7 +307,9 @@ impl App {
self.curr_font_weights = curr_weights(self.config.typed_font_stretch());
assert!(!self.curr_font_weights.is_empty());
self.curr_font_weight_names = self.curr_font_weights.iter()
self.curr_font_weight_names = self
.curr_font_weights
.iter()
.map(|weight| &self.all_font_weights_vals_names_map[weight])
.cloned()
.collect::<Vec<_>>();
@ -303,7 +318,10 @@ impl App {
self.config.font_weight = Weight::NORMAL.0;
}
if !self.curr_font_weights.contains(&self.config.bold_font_weight) {
if !self
.curr_font_weights
.contains(&self.config.bold_font_weight)
{
self.config.bold_font_weight = Weight::BOLD.0;
}
}
@ -354,23 +372,29 @@ impl App {
let section = widget::settings::view_section("")
.add(
widget::settings::item::builder(fl!("default-font-stretch")).control(
widget::dropdown(&self.curr_font_stretch_names, font_stretch_selected, |index| {
Message::DefaultFontStretch(index)
}),
widget::dropdown(
&self.curr_font_stretch_names,
font_stretch_selected,
|index| Message::DefaultFontStretch(index),
),
),
)
.add(
widget::settings::item::builder(fl!("default-font-weight")).control(
widget::dropdown(&self.curr_font_weight_names, font_weight_selected, |index| {
Message::DefaultFontWeight(index)
}),
widget::dropdown(
&self.curr_font_weight_names,
font_weight_selected,
|index| Message::DefaultFontWeight(index),
),
),
)
.add(
widget::settings::item::builder(fl!("default-bold-font-weight")).control(
widget::dropdown(&self.curr_font_weight_names, bold_font_weight_selected, |index| {
Message::DefaultBoldFontWeight(index)
}),
widget::dropdown(
&self.curr_font_weight_names,
bold_font_weight_selected,
|index| Message::DefaultBoldFontWeight(index),
),
),
);
let padding = Padding {
@ -418,8 +442,10 @@ impl App {
)),
)
.add(
widget::settings::item::builder(fl!("advanced-font-settings"))
.toggler(self.show_advanced_font_settings, Message::ShowAdvancedFontSettings),
widget::settings::item::builder(fl!("advanced-font-settings")).toggler(
self.show_advanced_font_settings,
Message::ShowAdvancedFontSettings,
),
);
if self.show_advanced_font_settings {
@ -506,7 +532,10 @@ impl Application for App {
.families
.get(0)
.map_or_else(|| face.post_script_name.to_string(), |x| x.0.to_string());
font_name_faces_map.entry(font_name).or_default().push(face.clone());
font_name_faces_map
.entry(font_name)
.or_default()
.push(face.clone());
}
}
@ -514,8 +543,12 @@ impl Application for App {
// a `Stretch::Normal` face.
// This is important for fallbacks.
font_name_faces_map.retain(|_, v| {
let has_normal = v.iter().any(|face| face.weight == Weight::NORMAL && face.stretch == Stretch::Normal);
let has_bold = v.iter().any(|face| face.weight == Weight::BOLD && face.stretch == Stretch::Normal);
let has_normal = v
.iter()
.any(|face| face.weight == Weight::NORMAL && face.stretch == Stretch::Normal);
let has_bold = v
.iter()
.any(|face| face.weight == Weight::BOLD && face.stretch == Stretch::Normal);
has_normal && has_bold
});
font_name_faces_map
@ -907,7 +940,7 @@ impl Application for App {
}
Message::ShowAdvancedFontSettings(show) => {
self.show_advanced_font_settings = show;
},
}
Message::WindowClose => {
return window::close(window::Id::MAIN);
}
@ -1094,7 +1127,6 @@ impl Application for App {
let (event_tx, mut event_rx) = mpsc::channel(100);
output.send(Message::TermEventTx(event_tx)).await.unwrap();
// Avoid creating two tabs at startup
tokio::time::sleep(Duration::from_millis(50)).await;

View file

@ -16,7 +16,7 @@ use alacritty_terminal::{
};
use cosmic::{iced::advanced::graphics::text::font_system, widget::segmented_button};
use cosmic_text::{
Attrs, AttrsList, Buffer, BufferLine, CacheKeyFlags, Family, Metrics, Shaping, Weight, Stretch, Wrap,
Attrs, AttrsList, Buffer, BufferLine, CacheKeyFlags, Family, Metrics, Shaping, Weight, Wrap,
};
use std::{
borrow::Cow,
@ -358,7 +358,6 @@ impl Terminal {
update_cell_size = true;
}
if self.bold_font_weight.0 != config.font_weight {
self.bold_font_weight = Weight(config.bold_font_weight);
update_cell_size = true;
@ -492,7 +491,8 @@ impl Terminal {
let mut attrs = self.default_attrs;
let cell_fg = if self.use_bright_bold && indexed.cell.flags.contains(Flags::BOLD) {
let cell_fg =
if self.use_bright_bold && indexed.cell.flags.contains(Flags::BOLD) {
as_bright(indexed.cell.fg)
} else {
indexed.cell.fg

View file

@ -6,6 +6,7 @@ use alacritty_terminal::{
term::TermMode,
};
use cosmic::{
cosmic_theme::palette::{blend::Compose, WithAlpha},
iced::{
advanced::graphics::text::{font_system, Raw},
event::{Event, Status},
@ -15,13 +16,14 @@ use cosmic::{
},
iced_core::{
clipboard::Clipboard,
image,
layout::{self, Layout},
renderer::{self, Quad},
text,
renderer::{self, Quad, Renderer as _},
text::Renderer as _,
widget::{self, tree, Widget},
Shell,
},
theme::Theme,
Renderer,
};
use cosmic_text::LayoutGlyph;
use std::{
@ -86,11 +88,9 @@ where
TerminalBox::new(terminal)
}
impl<'a, Message, Renderer> Widget<Message, Renderer> for TerminalBox<'a, Message>
impl<'a, Message> Widget<Message, Renderer> for TerminalBox<'a, Message>
where
Message: Clone,
Renderer:
renderer::Renderer + image::Renderer<Handle = image::Handle> + text::Renderer<Raw = Raw>,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<State>()
@ -182,18 +182,18 @@ where
&self,
tree: &widget::Tree,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
theme: &Theme,
_style: &renderer::Style,
layout: Layout<'_>,
_cursor_position: mouse::Cursor,
cursor_position: mouse::Cursor,
viewport: &Rectangle,
) {
let instant = Instant::now();
let state = tree.state.downcast_ref::<State>();
//TODO: make this configurable
let scrollbar_w = 8.0;
let cosmic_theme = theme.cosmic();
let scrollbar_w = cosmic_theme.spacing.space_xxs as f32;
let view_position =
layout.position() + [self.padding.left as f32, self.padding.top as f32].into();
@ -334,19 +334,68 @@ where
[view_w as f32, scrollbar_y].into(),
Size::new(scrollbar_w, scrollbar_h),
);
let scrollbar_alpha = match &state.dragging {
Some(Dragging::Scrollbar { .. }) => 0.5,
_ => 0.25,
let pressed = match &state.dragging {
Some(Dragging::Scrollbar { .. }) => true,
_ => false,
};
let mut hover = false;
if let Some(p) = cursor_position.position_in(layout.bounds()) {
let x = p.x - self.padding.left;
let y = p.y - self.padding.top;
if x >= scrollbar_rect.x && x < (scrollbar_rect.x + scrollbar_rect.width) {
hover = true;
}
}
let mut scrollbar_draw = scrollbar_rect + Vector::new(view_position.x, view_position.y);
if !hover && !pressed {
// Decrease draw width and keep centered when not hovered or pressed
scrollbar_draw.width /= 2.0;
scrollbar_draw.x += scrollbar_draw.width / 2.0;
}
// neutral_6, 0.7
let base_color = cosmic_theme
.palette
.neutral_6
.without_alpha()
.with_alpha(0.7);
let scrollbar_color: Color = if pressed {
// pressed_state_color, 0.5
cosmic_theme
.background
.component
.pressed
.without_alpha()
.with_alpha(0.5)
.over(base_color)
.into()
} else if hover {
// hover_state_color, 0.2
cosmic_theme
.background
.component
.hover
.without_alpha()
.with_alpha(0.2)
.over(base_color)
.into()
} else {
base_color.into()
};
renderer.fill_quad(
Quad {
bounds: scrollbar_rect + Vector::new(view_position.x, view_position.y),
border_radius: (scrollbar_w / 2.0).into(),
bounds: scrollbar_draw,
border_radius: (scrollbar_draw.width / 2.0).into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
Color::new(1.0, 1.0, 1.0, scrollbar_alpha),
scrollbar_color,
);
state.scrollbar_rect.set(scrollbar_rect);
} else {
state.scrollbar_rect.set(Rectangle::default())
@ -728,10 +777,11 @@ where
} else if x >= scrollbar_rect.x
&& x < (scrollbar_rect.x + scrollbar_rect.width)
{
if let Some(start_scroll) = terminal.scrollbar() {
if terminal.scrollbar().is_some() {
let scroll_ratio =
terminal.with_buffer(|buffer| y / buffer.size().1);
terminal.scroll_to(scroll_ratio);
if let Some(start_scroll) = terminal.scrollbar() {
state.dragging = Some(Dragging::Scrollbar {
start_y: y,
start_scroll,
@ -739,6 +789,7 @@ where
}
}
}
}
// Update context menu state
if let Some(on_context_menu) = &self.on_context_menu {
@ -838,11 +889,9 @@ where
}
}
impl<'a, Message, Renderer> From<TerminalBox<'a, Message>> for Element<'a, Message, Renderer>
impl<'a, Message> From<TerminalBox<'a, Message>> for Element<'a, Message, Renderer>
where
Message: Clone + 'a,
Renderer:
renderer::Renderer + image::Renderer<Handle = image::Handle> + text::Renderer<Raw = Raw>,
{
fn from(terminal_box: TerminalBox<'a, Message>) -> Self {
Self::new(terminal_box)