refactor: reuse prompt css (#255)

* refactor: reuse prompt css * chore: remove todo
versotile-org · Dec 5, 2024 · 6f17f66 · 6f17f66
1 parent 9701e3d
commit 6f17f66
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 127 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -108,6 +108,7 @@ headers = "0.3"
 versoview_messages = { path = "./versoview_messages" }
 serde_json = "1.0"
 serde = { workspace = true }
+mime = "0.3"
 
 [target.'cfg(any(target_os = "macos", target_os = "windows"))'.dependencies]
 muda = "0.15"

diff --git a/resources/components/prompt/alert.html b/resources/components/prompt/alert.html
@@ -1,36 +1,10 @@
 <html>
   <head>
-    <style>
-      body {
-        font-family: Arial, Helvetica, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        background-color: #7d818644;
-      }
-      .dialog {
-        display: flex;
-        background: #ffffff;
-        width: 400px;
-        min-height: 110px;
-        max-height: 300px;
-        flex-direction: column;
-        align-items: center;
-        border-radius: 10px;
-        box-shadow: 0 0 50px #ccc;
-        box-sizing: border-box;
-        padding: 8px;
-        gap: 8px;
-      }
-      .msg {
-        display: inline-block;
-        width: 100%;
-        min-height: 90px;
-        text-align: center;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="verso://resources/components/prompt/prompt.css"
+    />
   </head>
   <body>
     <div class="dialog">

diff --git a/resources/components/prompt/ok_cancel.html b/resources/components/prompt/ok_cancel.html
@@ -1,36 +1,10 @@
 <html>
   <head>
-    <style>
-      body {
-        font-family: Arial, Helvetica, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        background-color: #7d818644;
-      }
-      .dialog {
-        display: flex;
-        background: #ffffff;
-        width: 400px;
-        min-height: 110px;
-        max-height: 300px;
-        flex-direction: column;
-        align-items: center;
-        border-radius: 10px;
-        box-shadow: 0 0 50px #ccc;
-        box-sizing: border-box;
-        padding: 8px;
-        gap: 8px;
-      }
-      .msg {
-        display: inline-block;
-        width: 100%;
-        min-height: 90px;
-        text-align: center;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="verso://resources/components/prompt/prompt.css"
+    />
   </head>
   <body>
     <div class="dialog">

diff --git a/resources/components/prompt/prompt.css b/resources/components/prompt/prompt.css
@@ -0,0 +1,29 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  background-color: #7d818644;
+}
+.dialog {
+  display: flex;
+  background: #ffffff;
+  width: 400px;
+  min-height: 110px;
+  max-height: 300px;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  box-shadow: 0 0 50px #ccc;
+  box-sizing: border-box;
+  padding: 8px;
+  gap: 8px;
+}
+.msg {
+  display: inline-block;
+  width: 100%;
+  min-height: 90px;
+  text-align: center;
+}
diff --git a/resources/components/prompt/prompt.html b/resources/components/prompt/prompt.html
@@ -1,36 +1,10 @@
 <html>
   <head>
-    <style>
-      body {
-        font-family: Arial, Helvetica, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        background-color: #7d818644;
-      }
-      .dialog {
-        display: flex;
-        background: #ffffff;
-        width: 400px;
-        min-height: 110px;
-        max-height: 300px;
-        flex-direction: column;
-        align-items: center;
-        border-radius: 10px;
-        box-shadow: 0 0 50px #ccc;
-        box-sizing: border-box;
-        padding: 8px;
-        gap: 8px;
-      }
-      .msg {
-        display: inline-block;
-        width: 100%;
-        min-height: 90px;
-        text-align: center;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="verso://resources/components/prompt/prompt.css"
+    />
   </head>
   <body>
     <div class="dialog">

diff --git a/resources/components/prompt/yes_no.html b/resources/components/prompt/yes_no.html
@@ -1,36 +1,10 @@
 <html>
   <head>
-    <style>
-      body {
-        font-family: Arial, Helvetica, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        background-color: #7d818644;
-      }
-      .dialog {
-        display: flex;
-        background: #ffffff;
-        width: 400px;
-        min-height: 110px;
-        max-height: 300px;
-        flex-direction: column;
-        align-items: center;
-        border-radius: 10px;
-        box-shadow: 0 0 50px #ccc;
-        box-sizing: border-box;
-        padding: 8px;
-        gap: 8px;
-      }
-      .msg {
-        display: inline-block;
-        width: 100%;
-        min-height: 90px;
-        text-align: center;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="verso://resources/components/prompt/prompt.css"
+    />
   </head>
   <body>
     <div class="dialog">

diff --git a/src/config.rs b/src/config.rs
@@ -318,15 +318,26 @@ impl ProtocolHandler for ResourceReader {
         let path = current_url.path();
         let path = self.0.join(path.strip_prefix('/').unwrap_or(path));
 
-        let response = if let Ok(file) = fs::read(path) {
+        let response = if let Ok(file) = fs::read(path.clone()) {
             let mut response = Response::new(
                 request.current_url(),
                 ResourceFetchTiming::new(request.timing_type()),
             );
 
             // Set Content-Type header.
-            // TODO: We assume it's HTML for now. This should be updated once we have IPC interface.
-            response.headers.typed_insert(ContentType::html());
+            if let Some(ext) = path.extension() {
+                match ext.to_str() {
+                    Some("css") => response
+                        .headers
+                        .typed_insert(ContentType::from(mime::TEXT_CSS)),
+                    Some("js") => response
+                        .headers
+                        .typed_insert(ContentType::from(mime::TEXT_JAVASCRIPT)),
+                    Some("json") => response.headers.typed_insert(ContentType::json()),
+                    Some("html") => response.headers.typed_insert(ContentType::html()),
+                    _ => response.headers.typed_insert(ContentType::octet_stream()),
+                }
+            }
 
             *response.body.lock().unwrap() = ResponseBody::Done(file);