Merge pull request #1816 from zed-industries/letterbox-background

Antonio Scandurra created 3 years ago

Use the same background color as the editor for `SharedScreen`

Change summary

crates/theme/src/theme.rs             | 1 +
crates/workspace/src/shared_screen.rs | 5 ++++-
styles/src/styleTree/app.ts           | 2 ++
styles/src/styleTree/sharedScreen.ts  | 9 +++++++++
4 files changed, 16 insertions(+), 1 deletion(-)

Detailed changes

crates/theme/src/theme.rs

@@ -28,6 +28,7 @@ pub struct Theme {
     pub search: Search,
     pub project_diagnostics: ProjectDiagnostics,
     pub breadcrumbs: ContainedText,
+    pub shared_screen: ContainerStyle,
     pub contact_notification: ContactNotification,
     pub update_notification: UpdateNotification,
     pub project_shared_notification: ProjectSharedNotification,

crates/workspace/src/shared_screen.rs

@@ -8,6 +8,7 @@ use gpui::{
     geometry::{rect::RectF, vector::vec2f},
     Entity, ModelHandle, MouseButton, RenderContext, Task, View, ViewContext,
 };
+use settings::Settings;
 use smallvec::SmallVec;
 use std::{
     path::PathBuf,
@@ -67,7 +68,7 @@ impl View for SharedScreen {
         enum Focus {}
 
         let frame = self.frame.clone();
-        MouseEventHandler::<Focus>::new(0, cx, |_, _| {
+        MouseEventHandler::<Focus>::new(0, cx, |_, cx| {
             Canvas::new(move |bounds, _, cx| {
                 if let Some(frame) = frame.clone() {
                     let size = constrain_size_preserving_aspect_ratio(
@@ -81,6 +82,8 @@ impl View for SharedScreen {
                     });
                 }
             })
+            .contained()
+            .with_style(cx.global::<Settings>().theme.shared_screen)
             .boxed()
         })
         .on_down(MouseButton::Left, |_, cx| cx.focus_parent_view())

styles/src/styleTree/app.ts

@@ -8,6 +8,7 @@ import search from "./search";
 import picker from "./picker";
 import workspace from "./workspace";
 import contextMenu from "./contextMenu";
+import sharedScreen from "./sharedScreen";
 import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
 import updateNotification from "./updateNotification";
@@ -38,6 +39,7 @@ export default function app(colorScheme: ColorScheme): Object {
     contactFinder: contactFinder(colorScheme),
     contactList: contactList(colorScheme),
     search: search(colorScheme),
+    sharedScreen: sharedScreen(colorScheme),
     breadcrumbs: {
       ...text(colorScheme.highest, "sans", "variant"),
       padding: {

styles/src/styleTree/sharedScreen.ts

@@ -0,0 +1,9 @@
+import { ColorScheme } from "../themes/common/colorScheme";
+import { background } from "./components";
+
+export default function sharedScreen(colorScheme: ColorScheme) {
+  let layer = colorScheme.highest;
+  return {
+    background: background(layer)
+  }
+}