feat: Use System fonts (#661)

* feat: Use System fonts * simplify editing tests * simplify more editing tests * design improvements * update test * update test * fmt * Update crates/core/src/style.rs * fix tests for mac * fix test for mac * fix tests for mac * fix test for mac * update test * update test
marc2332 · Jun 17, 2024 · beabc7a · beabc7a
1 parent 14ca744
commit beabc7a
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 138 deletions.
diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
@@ -191,6 +191,7 @@ pub fn Button(
             text_align: "center",
             main_align: "center",
             cross_align: "center",
+            line_height: "1",
             {&children}
         }
     )

diff --git a/crates/core/src/lib.rs b/crates/core/src/lib.rs
@@ -7,6 +7,7 @@ pub mod platform_state;
 pub mod plugins;
 pub mod render;
 pub mod skia;
+pub mod style;
 pub mod types;
 
 pub mod prelude {
@@ -20,6 +21,7 @@ pub mod prelude {
         plugins::*,
         render::*,
         skia::*,
+        style::*,
         types::*,
     };
 }
diff --git a/crates/core/src/style.rs b/crates/core/src/style.rs
@@ -0,0 +1,12 @@
+pub fn default_fonts() -> Vec<String> {
+    let mut fonts = vec!["Noto Sans".to_string(), "Arial".to_string()];
+    if cfg!(target_os = "windows") {
+        fonts.insert(0, "Segoe UI".to_string());
+        fonts.insert(1, "Segoe UI Emoji".to_string());
+    } else if cfg!(target_os = "macos") {
+        fonts.insert(0, ".AppleSystemUIFont".to_string());
+    } else if cfg!(target_os = "linux") {
+        fonts.insert(0, "Ubuntu".to_string());
+    }
+    fonts
+}
diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs
@@ -228,6 +228,8 @@ builder_constructors! {
         opacity: String,
         #[doc = include_str!("_docs/attributes/content.md")]
         content: String,
+        #[doc = include_str!("_docs/attributes/line_height.md")]
+        line_height: String,
 
         name: String,
         focusable: String,

diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
@@ -25,7 +25,7 @@ pub const LIGHT_THEME: Theme = Theme {
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
         focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
         shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
-        padding: cow_borrowed!("8 16"),
+        padding: cow_borrowed!("10 16"),
         margin: cow_borrowed!("4"),
         corner_radius: cow_borrowed!("8"),
         width: cow_borrowed!("auto"),

diff --git a/crates/hooks/tests/use_editable.rs b/crates/hooks/tests/use_editable.rs
@@ -77,12 +77,8 @@ pub async fn multiple_lines_single_editor() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(1).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -96,17 +92,8 @@ pub async fn multiple_lines_single_editor() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello! Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell!o Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello! Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Move cursor to the begining
     utils.push_event(PlatformEvent::Mouse {
@@ -275,12 +262,8 @@ pub async fn single_line_mulitple_editors() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(2).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -295,17 +278,8 @@ pub async fn single_line_mulitple_editors() {
     let cursor = root.get(2).get(0);
     let content = root.get(0).get(0).get(0);
 
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello! Rustaceans\n"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell!o Rustaceans\n"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello! Rustaceans\n"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Second line
     let content = root.get(1).get(0).get(0);
@@ -391,18 +365,11 @@ pub async fn highlight_multiple_lines_single_editor() {
     utils.wait_for_update().await;
 
     let highlights = root.child(0).unwrap().state().cursor.highlights.clone();
+    #[cfg(not(target_os = "macos"))]
+    assert_eq!(highlights, Some(vec![(5, 28)]));
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 28;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 27;
-
-    assert_eq!(highlights, Some(vec![(start, end)]))
+    #[cfg(target_os = "macos")]
+    assert_eq!(highlights, Some(vec![(5, 27)]));
 }
 
 #[tokio::test]
@@ -510,32 +477,14 @@ pub async fn highlights_single_line_mulitple_editors() {
     utils.wait_for_update().await;
 
     let highlights_1 = root.child(0).unwrap().state().cursor.highlights.clone();
-
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 16;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 16;
-
-    assert_eq!(highlights_1, Some(vec![(start, end)]));
+    assert_eq!(highlights_1, Some(vec![(5, 16)]));
 
     let highlights_2 = root.child(1).unwrap().state().cursor.highlights.clone();
+    #[cfg(not(target_os = "macos"))]
+    assert_eq!(highlights_2, Some(vec![(0, 11)]));
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 0;
-    #[cfg(not(target_os = "linux"))]
-    let end = 11;
-
-    #[cfg(target_os = "linux")]
-    let start = 0;
-    #[cfg(target_os = "linux")]
-    let end = 10;
-
-    assert_eq!(highlights_2, Some(vec![(start, end)]));
+    #[cfg(target_os = "macos")]
+    assert_eq!(highlights_2, Some(vec![(0, 10)]));
 }
 
 #[tokio::test]
@@ -801,12 +750,8 @@ pub async fn backspace_remove() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(1).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -821,17 +766,8 @@ pub async fn backspace_remove() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello🦀 Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell🦀o Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello🦀 Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Remove text
     utils.push_event(PlatformEvent::Keyboard {
@@ -847,17 +783,8 @@ pub async fn backspace_remove() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:4"));
-    }
+    assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:5"));
 }
 
 #[tokio::test]
@@ -965,18 +892,11 @@ pub async fn highlight_shift_click_multiple_lines_single_editor() {
     utils.wait_for_update().await;
 
     let highlights = root.child(0).unwrap().state().cursor.highlights.clone();
+    #[cfg(not(target_os = "macos"))]
+    assert_eq!(highlights, Some(vec![(5, 28)]));
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 28;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 27;
-
-    assert_eq!(highlights, Some(vec![(start, end)]))
+    #[cfg(target_os = "macos")]
+    assert_eq!(highlights, Some(vec![(5, 27)]));
 }
 
 #[tokio::test]
@@ -1099,31 +1019,15 @@ pub async fn highlights_shift_click_single_line_mulitple_editors() {
 
     let highlights_1 = root.child(0).unwrap().state().cursor.highlights.clone();
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 16;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 16;
-
-    assert_eq!(highlights_1, Some(vec![(start, end)]));
+    assert_eq!(highlights_1, Some(vec![(5, 16)]));
 
     let highlights_2 = root.child(1).unwrap().state().cursor.highlights.clone();
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 0;
-    #[cfg(not(target_os = "linux"))]
-    let end = 11;
-
-    #[cfg(target_os = "linux")]
-    let start = 0;
-    #[cfg(target_os = "linux")]
-    let end = 10;
+    #[cfg(not(target_os = "macos"))]
+    assert_eq!(highlights_2, Some(vec![(0, 11)]));
 
-    assert_eq!(highlights_2, Some(vec![(start, end)]));
+    #[cfg(target_os = "macos")]
+    assert_eq!(highlights_2, Some(vec![(0, 10)]));
 }
 
 #[tokio::test]
@@ -1291,12 +1195,8 @@ pub async fn replace_text() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(1).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Click cursor
     utils.push_event(PlatformEvent::Mouse {
         name: EventName::MouseDown,
@@ -1348,15 +1248,15 @@ pub async fn replace_text() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
+    #[cfg(not(target_os = "macos"))]
     {
         assert_eq!(content.text(), Some("Hello🦀ceans\nHello Rustaceans"));
         assert_eq!(cursor.text(), Some("0:6"));
     }
 
-    #[cfg(target_os = "linux")]
+    #[cfg(target_os = "macos")]
     {
-        assert_eq!(content.text(), Some("Hell🦀aceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
+        assert_eq!(content.text(), Some("Hello🦀aceans\nHello Rustaceans"));
+        assert_eq!(cursor.text(), Some("0:6"));
     }
 }
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
@@ -92,7 +92,7 @@ impl Application {
         }
 
         let font_mgr: FontMgr = provider.into();
-        font_collection.set_default_font_manager(def_mgr, "Fira Sans");
+        font_collection.set_default_font_manager(def_mgr, None);
         font_collection.set_dynamic_font_manager(font_mgr.clone());
 
         let (event_emitter, event_receiver) = mpsc::unbounded_channel();

diff --git a/crates/renderer/src/config.rs b/crates/renderer/src/config.rs
@@ -3,9 +3,12 @@ use std::{
     sync::Arc,
 };
 
-use freya_core::plugins::{
-    FreyaPlugin,
-    PluginsManager,
+use freya_core::{
+    plugins::{
+        FreyaPlugin,
+        PluginsManager,
+    },
+    style::default_fonts,
 };
 use freya_engine::prelude::Color;
 use freya_node_state::Parse;
@@ -88,7 +91,7 @@ impl<'a, T: Clone> Default for LaunchConfig<'a, T> {
             window_config: Default::default(),
             embedded_fonts: Default::default(),
             plugins: Default::default(),
-            default_fonts: vec!["Fira Sans".to_string()],
+            default_fonts: default_fonts(),
         }
     }
 }

diff --git a/crates/testing/src/launch.rs b/crates/testing/src/launch.rs
@@ -47,7 +47,7 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
     let mut font_collection = FontCollection::new();
     let font_mgr = FontMgr::default();
     font_collection.set_dynamic_font_manager(font_mgr.clone());
-    font_collection.set_default_font_manager(font_mgr, "Fira Sans");
+    font_collection.set_default_font_manager(font_mgr, None);
 
     let mut handler = TestingHandler {
         vdom,

diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
@@ -204,7 +204,7 @@ impl TestingHandler {
             },
             &mut self.font_collection,
             SCALE_FACTOR as f32,
-            &["Fira Sans".to_string()],
+            &default_fonts(),
         );
 
         let dom = &self.utils.sdom().get_mut();