Normalize scrollbar style with figma designs
This commit is contained in:
parent
0eea366410
commit
3f09e17156
4 changed files with 153 additions and 72 deletions
|
|
@ -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;
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ impl Config {
|
|||
static NUM_TO_TYPED_MAP: OnceLock<BTreeMap<u16, Stretch>> = OnceLock::new();
|
||||
|
||||
NUM_TO_TYPED_MAP.get_or_init(|| {
|
||||
populate_num_typed_map!{
|
||||
populate_num_typed_map! {
|
||||
UltraCondensed, ExtraCondensed, Condensed, SemiCondensed,
|
||||
Normal, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded,
|
||||
}
|
||||
|
|
|
|||
102
src/main.rs
102
src/main.rs
|
|
@ -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,34 +273,43 @@ 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
|
||||
.iter()
|
||||
.filter(|face| face.stretch == conf_stretch)
|
||||
.map(|face| face.weight.0)
|
||||
.collect::<BTreeSet<_>>() // remove duplicates and sort
|
||||
.into_iter()
|
||||
.collect();
|
||||
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()
|
||||
};
|
||||
|
||||
self.curr_font_weights = curr_weights(self.config.typed_font_stretch());
|
||||
|
||||
if self.curr_font_weights.is_empty() {
|
||||
// stretch fallback
|
||||
self.config.font_stretch = Stretch::Normal.to_number();
|
||||
self.config.font_stretch = Stretch::Normal.to_number();
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
@ -500,13 +526,16 @@ impl Application for App {
|
|||
for face in font_system.raw().db().faces() {
|
||||
// only monospace fonts and weights that match named constants.
|
||||
let weight = face.weight.0;
|
||||
if face.monospaced && {1..9}.contains(&{weight / 100}) && weight % 100 == 0 {
|
||||
if face.monospaced && { 1..9 }.contains(&{ weight / 100 }) && weight % 100 == 0 {
|
||||
//TODO: get localized name if possible
|
||||
let font_name = face
|
||||
.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
|
||||
|
|
@ -543,12 +576,12 @@ impl Application for App {
|
|||
};
|
||||
}
|
||||
|
||||
populate_font_weights!{
|
||||
populate_font_weights! {
|
||||
THIN, EXTRA_LIGHT, LIGHT, NORMAL, MEDIUM,
|
||||
SEMIBOLD, BOLD, EXTRA_BOLD, BLACK,
|
||||
};
|
||||
|
||||
let mut all_font_stretches_vals_names_map= BTreeMap::new();
|
||||
let mut all_font_stretches_vals_names_map = BTreeMap::new();
|
||||
|
||||
macro_rules! populate_font_stretches {
|
||||
($($stretch:ident,)+) => {
|
||||
|
|
@ -560,7 +593,7 @@ impl Application for App {
|
|||
};
|
||||
}
|
||||
|
||||
populate_font_stretches!{
|
||||
populate_font_stretches! {
|
||||
UltraCondensed, ExtraCondensed, Condensed, SemiCondensed,
|
||||
Normal, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded,
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -349,16 +349,15 @@ impl Terminal {
|
|||
let mut update = false;
|
||||
|
||||
if self.default_attrs.stretch != config.typed_font_stretch() {
|
||||
self.default_attrs = self.default_attrs.stretch(config.typed_font_stretch());
|
||||
self.default_attrs = self.default_attrs.stretch(config.typed_font_stretch());
|
||||
update_cell_size = true;
|
||||
}
|
||||
|
||||
if self.default_attrs.weight.0 != config.font_weight {
|
||||
self.default_attrs = self.default_attrs.weight(Weight(config.font_weight));
|
||||
self.default_attrs = self.default_attrs.weight(Weight(config.font_weight));
|
||||
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;
|
||||
|
|
@ -437,7 +436,7 @@ impl Terminal {
|
|||
// This will be added to the beginning of lines to force the shaper to treat detected RTL
|
||||
// lines as LTR. RTL text would still be rendered correctly. But this fixes the wrong
|
||||
// behavior of it being aligned to the right.
|
||||
const LRI:char = '\u{2066}';
|
||||
const LRI: char = '\u{2066}';
|
||||
|
||||
let instant = Instant::now();
|
||||
|
||||
|
|
@ -492,11 +491,12 @@ impl Terminal {
|
|||
|
||||
let mut attrs = self.default_attrs;
|
||||
|
||||
let cell_fg = if self.use_bright_bold && indexed.cell.flags.contains(Flags::BOLD) {
|
||||
as_bright(indexed.cell.fg)
|
||||
} else {
|
||||
indexed.cell.fg
|
||||
};
|
||||
let cell_fg =
|
||||
if self.use_bright_bold && indexed.cell.flags.contains(Flags::BOLD) {
|
||||
as_bright(indexed.cell.fg)
|
||||
} else {
|
||||
indexed.cell.fg
|
||||
};
|
||||
|
||||
let (mut fg, mut bg) = if indexed.cell.flags.contains(Flags::INVERSE) {
|
||||
(
|
||||
|
|
|
|||
|
|
@ -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,14 +777,16 @@ 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);
|
||||
state.dragging = Some(Dragging::Scrollbar {
|
||||
start_y: y,
|
||||
start_scroll,
|
||||
});
|
||||
if let Some(start_scroll) = terminal.scrollbar() {
|
||||
state.dragging = Some(Dragging::Scrollbar {
|
||||
start_y: y,
|
||||
start_scroll,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue