WebUI maybe later

clevert-app · Apr 4, 2022 · 0c4ee0d · 0c4ee0d
1 parent 630de54
commit 0c4ee0d
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 17 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -17,5 +17,5 @@ serde = { version = "1.0.136", features = ["derive"] }
 shared_child = "1.0.0"
 toml = "0.5.8"
 yansi = "0.5.1"
-tiny_http = "0.11.0"
+# tiny_http = "0.11.0"
 # vc-ltl = "5.0.4"
diff --git a/src/gui.html b/src/gui.html
@@ -5,10 +5,213 @@
   <title>Clevert</title>
 </head>
 
-<style></style>
+<style>
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    transition: 0.3s;
+  }
+
+  side_bar_ {
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: #eee;
+    width: 50px;
+  }
+  side_bar_ i_ {
+    display: block;
+    position: relative;
+    height: 50px;
+  }
+  side_bar_ > * > * {
+    position: absolute;
+    fill: #333;
+    color: #333;
+    background: #eee;
+  }
+  side_bar_ j_ {
+    font-size: 13px;
+    line-height: 22px;
+    margin: 15px 0 0 55px;
+    border-radius: 4px;
+    padding: 0 5px;
+  }
+  side_bar_ i_:not(:hover) j_ {
+    opacity: 0;
+    visibility: hidden;
+  }
+  side_bar_ svg {
+    display: inline-block;
+    height: 100%;
+    padding: 10px;
+  }
+
+  tab_ {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    display: grid;
+    grid: 1fr / none;
+    padding: 25px;
+    gap: 25px;
+    padding-left: 75px;
+  }
+  tab_:not([on_]) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  presets_ {
+    overflow: overlay;
+    overflow: auto;
+    background: #aaa3;
+    border-radius: 8px;
+  }
+  presets_ > * {
+    line-height: 40px;
+    display: block;
+    border-radius: 8px;
+    padding-left: 12px;
+  }
+  presets_ > [on_] {
+    background: #aaa4;
+  }
+
+  input_ {
+    line-height: 40px;
+    display: block;
+    border-radius: 8px;
+    background: #bbb4;
+    overflow: hidden;
+  }
+  input_ i_ {
+    width: 80px;
+    display: inline-block;
+    text-align: center;
+    background: #aaa4;
+  }
+  input_ input {
+    border: none;
+    outline: none;
+    line-height: 20px;
+    font-size: 14px;
+    margin: 10px;
+    width: calc(100% - 120px);
+    vertical-align: top;
+    background: none;
+    font-family: monospace;
+  }
+
+  launch_ {
+    line-height: 40px;
+    position: relative;
+    background: #aaa4;
+    height: 40px;
+    text-align: center;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  launch_:active {
+    background: #aaa7;
+    transition: 0.1s;
+  }
+  launch_::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    transform: translateX(var(--v));
+    left: -100%;
+    height: 100%;
+    display: block;
+    background: #aaa4;
+  }
+  launch_ j_ {
+    position: absolute;
+    left: 12px;
+    font-size: 12px;
+    color: #777;
+  }
+
+  /* @media (prefers-color-scheme: dark) {
+    html {
+      background: #111;
+      color: #eee;
+    }
+    side_bar_ {
+      background: #333;
+    }
+    side_bar_ * {
+      background: #333;
+      color: #eee;
+      fill: #eee;
+    }
+  } */
+</style>
 
 <body>
-  <h1>Hi</h1>
+  <tab_ on_>
+    <presets_>
+      <i_ on_>ffmpeg_m4a</i_>
+      <i_>pngquant</i_>
+    </presets_>
+    <input_>
+      <i_>Input</i_>
+      <input value="D:\Code\clevert" />
+    </input_>
+    <input_>
+      <i_>Output</i_>
+      <input />
+    </input_>
+    <launch_>
+      <i_>Launch</i_>
+      <j_>20 / 100</j_>
+    </launch_>
+  </tab_>
+
+  <tab_>
+    <input_>
+      <i_>Socket</i_>
+      <input />
+    </input_>
+  </tab_>
+
+  <side_bar_>
+    <i_>
+      <j_>Dashboard</j_>
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z"
+        />
+      </svg>
+    </i_>
+    <i_>
+      <j_>Settings</j_>
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+        />
+      </svg>
+    </i_>
+  </side_bar_>
 </body>
 
-<script></script>
+<script>
+  const $ = (s) => document.querySelector(s);
+  $("presets_").onpointerdown = function ({ target }) {
+    if (target === this) return;
+    for (const el of this.children) el.removeAttribute("on_");
+    target.setAttribute("on_", "");
+  };
+  $("launch_").style.setProperty("--v", "20%");
+</script>
+
+<!-- 
+  tag name always has "_" suffix, and use "_" as hyphen
+  the name "i_", "j_" etc: A single letter is reserved, meaningless,
+  and cannot be used as a component name
+ -->
diff --git a/src/gui.rs b/src/gui.rs
@@ -3,7 +3,7 @@ use tiny_http::{Header, Response, Server};
 
 pub fn run(addr: &str) {
     let server = Server::http(addr).unwrap();
-
+    println!("gui::run()");
     for request in server.incoming_requests() {
         println!(
             "received request! method: {:?}, url: {:?}",

diff --git a/src/main.rs b/src/main.rs
@@ -1,6 +1,6 @@
 mod action;
 mod config;
-mod gui;
+// mod gui;
 mod utils;
 pub use action::Action;
 pub use config::{Config, Profile};
@@ -16,10 +16,10 @@ use std::time::{Duration, Instant};
 fn run() -> Result<(), Error> {
     let profile = Profile::from_default_file()?;
 
-    if let Some(v) = profile.gui {
-        gui::run(&v);
-        return Ok(());
-    }
+    // if let Some(v) = profile.gui {
+    //     gui::run(&v);
+    //     return Ok(());
+    // }
 
     if profile.current.is_none() {
         return Err(Error {
@@ -31,9 +31,9 @@ fn run() -> Result<(), Error> {
 
     let mut config = profile.get_current()?;
 
-    let args = env::args().skip(1);
-    if args.size_hint().0 != 0 {
-        config.input_list = Some(args.collect());
+    let input_list = env::args().skip(1);
+    if input_list.size_hint().0 != 0 {
+        config.input_list = Some(input_list.collect());
     }
 
     // the Action is one-off, change Config and then new an Action
@@ -98,13 +98,12 @@ fn main() {
         yansi::Paint::disable()
     }
 
-    let args: Vec<String> = env::args().skip(1).collect();
     #[cfg(windows)] // linux x11?
-    if !args.contains(&"--no-wrap".into()) && env::var("PROMPT").is_err() {
+    if env::var("PROMPT").is_err() {
         // manually panic handling, because the `catch_unwind` is not always
-        // stable and it's inapplicable when `panic='abort'` on `Cargo.toml`
+        // stable and it's inapplicable when panic='abort'
         let mut cmd = Command::new(env::current_exe().unwrap());
-        let _ = cmd.arg("--no-wrap").args(args).status();
+        let _ = cmd.args(env::args().skip(1)).env("PROMPT", "$P$G").status();
         log!("press <enter> key to exit");
         io::stdin().read_line(&mut String::new()).unwrap();
         return;