Skip to content

Commit ab5da14

Browse files
panekjpanekj
authored
feat: add tab in/active, add primary button colours (lapce#1619)
* feat: add tab in/active, add primary button colours Signed-off-by: Jakub Panek <[email protected]> * fix: include svg name when unwrapping Signed-off-by: Jakub Panek <[email protected]> * feat: add hover effect for source control panel Signed-off-by: Jakub Panek <[email protected]> * feat: add colour preview in settings Signed-off-by: Jakub Panek <[email protected]> * docs: update CHANGELOG * fix: allow message concat if it fits * fix: add theme colours for plugin name/desc/author Signed-off-by: Jakub Panek <[email protected]>
1 parent dfb49a6 commit ab5da14

18 files changed

+299
-87
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44

55
### Features/Changes
66

7+
- [#1619](https://github.com/lapce/lapce/pull/1619):
8+
- Add active/inactive tab colours
9+
- Add primary button colour
10+
- Replace custom drawn checkboxes with icons in source control
11+
- Add hover effect in source control panel
12+
- Add colour preview in settings
13+
- [#1619](https://github.com/lapce/lapce/pull/1619): Add active/inactive tab colours, add primary button colour, replace custom drawn checkboxes with icons in source
714
- [#1617](https://github.com/lapce/lapce/pull/1617): Fixed a stack overflow that would crash lapce when attempting to sort a large number of PaletteItems
815
- [#1609](https://github.com/lapce/lapce/pull/1609): Add syntax highlighting for erlang
916
- [#1590](https://github.com/lapce/lapce/pull/1590): Added ability to open file and file diff from source control context menu

‎defaults/dark-theme.toml

+21-4
Original file line numberDiff line numberDiff line change
@@ -60,22 +60,38 @@ magenta = "#C678DD"
6060
"tag" = "$blue"
6161

6262
[color-theme.ui]
63-
"lapce.active_tab" = "#528BFF"
64-
"lapce.inactive_tab" = "#5C6370"
6563
"lapce.error" = "$red"
6664
"lapce.warn" = "$yellow"
6765
"lapce.dropdown_shadow" = "#000000"
6866
"lapce.border" = "#000000"
6967
"lapce.scroll_bar" = "$grey"
7068

71-
"lapce.icon_active" = "$white"
72-
"lapce.icon_inactive" = "$grey"
69+
"lapce.button.primary.background" = "#50a14f"
70+
"lapce.button.primary.foreground" = "$black"
71+
72+
# tab
73+
"lapce.tab.active.background" = "$black"
74+
"lapce.tab.active.foreground" = "$white"
75+
"lapce.tab.active.underline" = "#528BFF"
76+
77+
"lapce.tab.inactive.background" = "#1d2026"
78+
"lapce.tab.inactive.foreground" = "#7e838c"
79+
"lapce.tab.inactive.underline" = "#528BFF33"
80+
81+
"lapce.tab.separator" = ""
82+
83+
"lapce.icon.active" = "$white"
84+
"lapce.icon.inactive" = "$grey"
7385

7486
"lapce.remote.local" = "#4078F2"
7587
"lapce.remote.connected" = "#50A14F"
7688
"lapce.remote.connecting" = "#C18401"
7789
"lapce.remote.disconnected" = "#E45649"
7890

91+
"lapce.plugin.name" = "#DDDDDD"
92+
"lapce.plugin.description" = "$white"
93+
"lapce.plugin.author" = "#B0B0B0"
94+
7995
"editor.background" = "$black"
8096
"editor.foreground" = "$white"
8197
"editor.dim" = "#5C6370"
@@ -87,6 +103,7 @@ magenta = "#C678DD"
87103
"editor.visible_whitespace" = "$grey"
88104
"editor.indent_guide" = "$grey"
89105
"editor.drag_drop_background" = "#79c1fc55"
106+
"editor.drag_drop_tab_background" = "#0b0e14EE"
90107

91108
"inlay_hint.foreground" = "$white"
92109
"inlay_hint.background" = "#528abF37"

‎defaults/light-theme.toml

+20-4
Original file line numberDiff line numberDiff line change
@@ -66,21 +66,36 @@ magenta = "#A626A4"
6666
"tag" = "$blue"
6767

6868
[color-theme.ui]
69-
"lapce.active_tab" = "#526FFF"
70-
"lapce.inactive_tab" = "#A0A1A7"
7169
"lapce.error" = "#E51400"
7270
"lapce.warn" = "#E9A700"
7371
"lapce.dropdown_shadow" = "#B4B4B4"
7472
"lapce.border" = "#B4B4B4"
7573
"lapce.scroll_bar" = "#B4B4B4"
76-
"lapce.icon_active" = "$black"
77-
"lapce.icon_inactive" = "$grey"
74+
75+
"lapce.button.primary.background" = "#50a14f"
76+
"lapce.button.primary.foreground" = "$white"
77+
78+
# tab
79+
"lapce.tab.active.background" = "$white"
80+
"lapce.tab.active.foreground" = "$black"
81+
"lapce.tab.active.underline" = "#528BFF"
82+
83+
"lapce.tab.inactive.background" = "#d3d3d3"
84+
"lapce.tab.inactive.foreground" = "#17181c"
85+
"lapce.tab.inactive.underline" = ""
86+
87+
"lapce.icon.active" = "$black"
88+
"lapce.icon.inactive" = "$grey"
7889

7990
"lapce.remote.local" = "#4078F2"
8091
"lapce.remote.connected" = "#50A14F"
8192
"lapce.remote.connecting" = "#C18401"
8293
"lapce.remote.disconnected" = "#E45649"
8394

95+
"lapce.plugin.name" = "#444444"
96+
"lapce.plugin.description" = "$black"
97+
"lapce.plugin.author" = "#707070"
98+
8499
"terminal.cursor" = "$black"
85100
"terminal.foreground" = "$black"
86101
"terminal.background" = "$white"
@@ -112,6 +127,7 @@ magenta = "#A626A4"
112127
"editor.visible_whitespace" = "$grey"
113128
"editor.indent_guide" = "$grey"
114129
"editor.drag_drop_background" = "#79c1fc33"
130+
"editor.drag_drop_tab_background" = "#0b0e14EE"
115131

116132
"inlay_hint.foreground" = "$black"
117133
"inlay_hint.background" = "#528bFF55"

‎defaults/settings.toml

+20-4
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,28 @@ magenta = "#C678DD"
102102
"symbol" = "$yellow"
103103

104104
[color-theme.ui]
105-
"lapce.active_tab" = "#528BFF"
106-
"lapce.inactive_tab" = "#5C6370"
107105
"lapce.error" = "$red"
108106
"lapce.warn" = "$yellow"
109107
"lapce.dropdown_shadow" = "#000000"
110108
"lapce.border" = "#000000"
111109
"lapce.scroll_bar" = "$grey"
112-
"lapce.icon_active" = "$white"
113-
"lapce.icon_inactive" = "$grey"
110+
111+
"lapce.button.primary.background" = "#50a14f"
112+
"lapce.button.primary.foreground" = "$black"
113+
114+
# tab
115+
"lapce.tab.active.background" = "$black"
116+
"lapce.tab.active.foreground" = "$white"
117+
"lapce.tab.active.underline" = "#528BFF"
118+
119+
"lapce.tab.inactive.background" = "#1d2026"
120+
"lapce.tab.inactive.foreground" = "#7e838c"
121+
"lapce.tab.inactive.underline" = "#528BFF33"
122+
123+
"lapce.tab.separator" = ""
124+
125+
"lapce.icon.active" = "$white"
126+
"lapce.icon.inactive" = "$grey"
114127

115128
"lapce.remote.local" = "#4078F2"
116129
"lapce.remote.connected" = "#50A14F"
@@ -128,6 +141,7 @@ magenta = "#C678DD"
128141
"editor.visible_whitespace" = "#5C6370"
129142
"editor.indent_guide" = "$grey"
130143
"editor.drag_drop_background" = "#79c1fc55"
144+
"editor.drag_drop_tab_background" = "#0b0e14EE"
131145

132146
"inlay_hint.foreground" = "$white"
133147
"inlay_hint.background" = "#528bFF88"
@@ -218,6 +232,8 @@ name = ""
218232
"scm.diff.added" = "diff-added.svg"
219233
"scm.diff.removed" = "diff-removed.svg"
220234
"scm.diff.renamed" = "diff-renamed.svg"
235+
"scm.change.add" = "add.svg"
236+
"scm.change.remove" = "remove.svg"
221237

222238
"palette.menu" = "chevron-down.svg"
223239

‎icons/codicons/add.svg

+1
Loading

‎lapce-data/src/config.rs

+27-7
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,37 @@ pub struct LapceTheme {}
4141
impl LapceTheme {
4242
pub const LAPCE_WARN: &str = "lapce.warn";
4343
pub const LAPCE_ERROR: &str = "lapce.error";
44-
pub const LAPCE_ACTIVE_TAB: &str = "lapce.active_tab";
45-
pub const LAPCE_INACTIVE_TAB: &str = "lapce.inactive_tab";
4644
pub const LAPCE_DROPDOWN_SHADOW: &str = "lapce.dropdown_shadow";
4745
pub const LAPCE_BORDER: &str = "lapce.border";
4846
pub const LAPCE_SCROLL_BAR: &str = "lapce.scroll_bar";
49-
pub const LAPCE_ICON_ACTIVE: &str = "lapce.icon_active";
50-
pub const LAPCE_ICON_INACTIVE: &str = "lapce.icon_inactive";
47+
48+
pub const LAPCE_BUTTON_PRIMARY_BACKGROUND: &str =
49+
"lapce.button.primary.background";
50+
pub const LAPCE_BUTTON_PRIMARY_FOREGROUND: &str =
51+
"lapce.button.primary.foreground";
52+
53+
pub const LAPCE_TAB_ACTIVE_BACKGROUND: &str = "lapce.tab.active.background";
54+
pub const LAPCE_TAB_ACTIVE_FOREGROUND: &str = "lapce.tab.active.foreground";
55+
pub const LAPCE_TAB_ACTIVE_UNDERLINE: &str = "lapce.tab.active.underline";
56+
57+
pub const LAPCE_TAB_INACTIVE_BACKGROUND: &str = "lapce.tab.inactive.background";
58+
pub const LAPCE_TAB_INACTIVE_FOREGROUND: &str = "lapce.tab.inactive.foreground";
59+
pub const LAPCE_TAB_INACTIVE_UNDERLINE: &str = "lapce.tab.inactive.underline";
60+
61+
pub const LAPCE_TAB_SEPARATOR: &str = "lapce.tab.separator";
62+
63+
pub const LAPCE_ICON_ACTIVE: &str = "lapce.icon.active";
64+
pub const LAPCE_ICON_INACTIVE: &str = "lapce.icon.inactive";
5165

5266
pub const LAPCE_REMOTE_LOCAL: &str = "lapce.remote.local";
5367
pub const LAPCE_REMOTE_CONNECTED: &str = "lapce.remote.connected";
5468
pub const LAPCE_REMOTE_CONNECTING: &str = "lapce.remote.connecting";
5569
pub const LAPCE_REMOTE_DISCONNECTED: &str = "lapce.remote.disconnected";
5670

71+
pub const LAPCE_PLUGIN_NAME: &str = "lapce.plugin.name";
72+
pub const LAPCE_PLUGIN_DESCRIPTION: &str = "lapce.plugin.description";
73+
pub const LAPCE_PLUGIN_AUTHOR: &str = "lapce.plugin.author";
74+
5775
pub const EDITOR_BACKGROUND: &str = "editor.background";
5876
pub const EDITOR_FOREGROUND: &str = "editor.foreground";
5977
pub const EDITOR_DIM: &str = "editor.dim";
@@ -65,6 +83,8 @@ impl LapceTheme {
6583
pub const EDITOR_VISIBLE_WHITESPACE: &str = "editor.visible_whitespace";
6684
pub const EDITOR_INDENT_GUIDE: &str = "editor.indent_guide";
6785
pub const EDITOR_DRAG_DROP_BACKGROUND: &str = "editor.drag_drop_background";
86+
pub const EDITOR_DRAG_DROP_TAB_BACKGROUND: &str =
87+
"editor.drag_drop_tab_background";
6888

6989
pub const INLAY_HINT_FOREGROUND: &str = "inlay_hint.foreground";
7090
pub const INLAY_HINT_BACKGROUND: &str = "inlay_hint.background";
@@ -179,6 +199,8 @@ impl LapceIcons {
179199
pub const SCM_DIFF_ADDED: &str = "scm.diff.added";
180200
pub const SCM_DIFF_REMOVED: &str = "scm.diff.removed";
181201
pub const SCM_DIFF_RENAMED: &str = "scm.diff.renamed";
202+
pub const SCM_CHANGE_ADD: &str = "scm.change.add";
203+
pub const SCM_CHANGE_REMOVE: &str = "scm.change.remove";
182204

183205
pub const PALETTE_MENU: &str = "palette.menu";
184206

@@ -764,7 +786,7 @@ impl Default for ThemeBaseColor {
764786
}
765787

766788
impl ThemeBaseColor {
767-
fn get(&self, name: &str) -> Option<&Color> {
789+
pub fn get(&self, name: &str) -> Option<&Color> {
768790
Some(match name {
769791
"white" => &self.white,
770792
"black" => &self.black,
@@ -1046,8 +1068,6 @@ impl LapceConfig {
10461068
Self::load_icon_theme_from_str(DEFAULT_ICON_THEME).unwrap();
10471069
themes.insert(name.to_lowercase(), (name, theme, None));
10481070

1049-
log::debug!("{themes:?}");
1050-
10511071
themes
10521072
}
10531073

‎lapce-data/src/svg.rs

+3-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ impl SvgStore {
4444
let file = if name == "lapce_remote.svg" {
4545
LAPCE_ICONS_DIR.get_file(name).unwrap()
4646
} else {
47-
CODICONS_ICONS_DIR.get_file(name).unwrap()
47+
CODICONS_ICONS_DIR
48+
.get_file(name)
49+
.unwrap_or_else(|| panic!("Failed to unwrap {name}"))
4850
};
4951
let content = file.contents_utf8().unwrap();
5052
let svg = Svg::from_str(content).unwrap();

‎lapce-ui/src/app.rs

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ pub fn launch() {
8989
.level_for("sled", log::LevelFilter::Off)
9090
.level_for("tracing", log::LevelFilter::Off)
9191
.level_for("druid::core", log::LevelFilter::Off)
92+
.level_for("druid::window", log::LevelFilter::Off)
9293
.level_for("druid::box_constraints", log::LevelFilter::Off)
9394
.level_for("cranelift_codegen", log::LevelFilter::Off)
9495
.level_for("wasmtime_cranelift", log::LevelFilter::Off)

‎lapce-ui/src/editor/tab.rs

+31-18
Original file line numberDiff line numberDiff line change
@@ -643,23 +643,34 @@ impl TabRectRenderer for TabRect {
643643

644644
let is_active_tab = tab_idx == editor_tab.active;
645645
if is_active_tab {
646-
let color = if data.focus_area == FocusArea::Editor
646+
let stroke = if data.focus_area == FocusArea::Editor
647647
&& Some(widget_id) == *data.main_split.active_tab
648648
{
649649
data.config
650-
.get_color_unchecked(LapceTheme::LAPCE_ACTIVE_TAB)
650+
.get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_UNDERLINE)
651651
} else {
652652
data.config
653-
.get_color_unchecked(LapceTheme::LAPCE_INACTIVE_TAB)
653+
.get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_UNDERLINE)
654654
};
655+
ctx.fill(
656+
self.rect,
657+
data.config
658+
.get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_BACKGROUND),
659+
);
655660
ctx.stroke(
656661
Line::new(
657662
Point::new(self.rect.x0 + 2.0, self.rect.y1 - 1.0),
658663
Point::new(self.rect.x1 - 2.0, self.rect.y1 - 1.0),
659664
),
660-
color,
665+
stroke,
661666
2.0,
662667
);
668+
} else {
669+
ctx.fill(
670+
self.rect,
671+
data.config
672+
.get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_BACKGROUND),
673+
);
663674
}
664675
ctx.draw_svg(&self.svg, svg_rect, self.svg_color.as_ref());
665676
ctx.draw_text(
@@ -681,7 +692,8 @@ impl TabRectRenderer for TabRect {
681692
Point::new(x - 0.5, (size.height * 0.8).round()),
682693
Point::new(x - 0.5, size.height - (size.height * 0.8).round()),
683694
),
684-
data.config.get_color_unchecked(LapceTheme::LAPCE_BORDER),
695+
data.config
696+
.get_color_unchecked(LapceTheme::LAPCE_TAB_SEPARATOR),
685697
1.0,
686698
);
687699
if tab_idx == 0 {
@@ -698,15 +710,6 @@ impl TabRectRenderer for TabRect {
698710
);
699711
}
700712

701-
// Only show background of close button on hover
702-
if mouse_pos.map(|s| self.rect.contains(s)).unwrap_or(false) {
703-
ctx.fill(
704-
&self.close_rect,
705-
data.config
706-
.get_color_unchecked(LapceTheme::EDITOR_CURRENT_LINE),
707-
);
708-
}
709-
710713
// See if any of the children have unsaved changes
711714
let is_pristine = match &editor_tab.children[tab_idx] {
712715
EditorTabChild::Editor(editor_id, _, _) => data
@@ -719,13 +722,23 @@ impl TabRectRenderer for TabRect {
719722
};
720723

721724
let mut draw_icon = |name: &'static str| {
725+
let close_color =
726+
if mouse_pos.map(|s| self.rect.contains(s)).unwrap_or(false) {
727+
Some(druid::Color::rgba(1.0, 0.0, 0.0, 1.0))
728+
} else {
729+
None
730+
};
722731
ctx.draw_svg(
723732
&data.config.ui_svg(name),
724733
self.close_rect.inflate(-padding, -padding),
725-
Some(
726-
data.config
727-
.get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
728-
),
734+
if close_color.is_some() {
735+
close_color.as_ref()
736+
} else {
737+
Some(
738+
data.config
739+
.get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
740+
)
741+
},
729742
);
730743
};
731744

‎lapce-ui/src/editor/tab_header.rs

+6
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,12 @@ impl Widget<LapceTabData> for LapceEditorTabHeader {
357357
fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {
358358
let size = ctx.size();
359359
let rect = size.to_rect();
360+
ctx.fill(
361+
size.to_rect(),
362+
data.config
363+
.get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_BACKGROUND),
364+
);
365+
360366
let shadow_width = data.config.ui.drop_shadow_width() as f64;
361367
if shadow_width > 0.0 {
362368
ctx.with_save(|ctx| {

0 commit comments

Comments
 (0)