Fix styled input css. Fix css watch mode.

jirs-client/.swcrc

@@ -0,0 +1,23 @@
+{
+  "jsc": {
+    "target": "es2018",
+    "parser": {
+      "syntax": "ecmascript",
+      "jsx": false,
+      "dynamicImport": true,
+      "numericSeparator": true,
+      "classPrivateProperty": false,
+      "privateMethod": false,
+      "classProperty": false,
+      "functionBind": false,
+      "exportDefaultFrom": true,
+      "exportNamespaceFrom": true,
+      "decorators": false,
+      "decoratorsBeforeExport": false,
+      "nullishCoalescing": true,
+      "topLevelAwait": true,
+      "importMeta": false,
+      "optionalChaining": true
+    }
+  }
+}

jirs-client/js/css/styledInput.css

@@ -22,6 +22,11 @@
     padding-left: 32px;
 }
 
+.styledInput > .inputElement.primary {
+    padding: 8px 12px 9px;
+    height: 39px;
+}
+
 .styledInput > i.styledIcon {
     font-size: 15px;
     position: absolute;

jirs-client/js/index.js

@@ -1,5 +1,3 @@
-// import "../tmp/styles.css";
-
 const getWsHostName = () => process.env.JIRS_SERVER_BIND === "0.0.0.0" ? 'localhost' : process.env.JIRS_SERVER_BIND;
 const getProtocol = () => window.location.protocol.replace(/^http/, 'ws');
 const wsUrl = () => `${ getProtocol() }//${ getWsHostName() }:${ process.env.JIRS_SERVER_PORT }/ws/`;

jirs-client/src/profile.rs

@@ -24,10 +24,13 @@ pub fn update(msg: Msg, model: &mut crate::model::Model, _orders: &mut impl Orde
         _ => (),
     }
 
-    let _project_page = match &mut model.page_content {
+    let project_page = match &mut model.page_content {
         PageContent::Profile(profile_page) => profile_page,
         _ => return,
     };
+
+    project_page.name.update(&msg);
+    project_page.email.update(&msg);
 }
 
 pub fn view(model: &Model) -> Node<Msg> {
@@ -39,6 +42,7 @@ pub fn view(model: &Model) -> Node<Msg> {
     let username = StyledInput::build(FieldId::Profile(UsersFieldId::Username))
         .state(&page.name)
         .valid(true)
+        .primary()
         .build()
         .into_node();
     let username_field = StyledField::build()
@@ -50,6 +54,7 @@ pub fn view(model: &Model) -> Node<Msg> {
     let email = StyledInput::build(FieldId::Profile(UsersFieldId::Username))
         .state(&page.email)
         .valid(true)
+        .primary()
         .build()
         .into_node();
     let email_field = StyledField::build()

jirs-client/src/shared/mod.rs

@@ -14,6 +14,7 @@ pub mod styled_checkbox;
 pub mod styled_confirm_modal;
 pub mod styled_editor;
 pub mod styled_field;
+pub mod styled_file_input;
 pub mod styled_form;
 pub mod styled_icon;
 pub mod styled_input;

jirs-client/src/shared/styled_input.rs

@@ -4,6 +4,22 @@ use crate::shared::styled_icon::{Icon, StyledIcon};
 use crate::shared::ToNode;
 use crate::{FieldId, Msg};
 
+#[derive(Clone, Debug, PartialOrd, PartialEq)]
+pub enum Variant {
+    Normal,
+    Primary,
+}
+
+impl ToString for Variant {
+    fn to_string(&self) -> String {
+        match self {
+            Variant::Normal => "normal",
+            Variant::Primary => "primary",
+        }
+        .to_string()
+    }
+}
+
 #[derive(Clone, Debug, PartialOrd, PartialEq)]
 pub struct StyledInputState {
     id: FieldId,
@@ -52,6 +68,7 @@ pub struct StyledInput {
     input_type: Option<String>,
     input_class_list: Vec<String>,
     wrapper_class_list: Vec<String>,
+    variant: Variant,
 }
 
 impl StyledInput {
@@ -64,6 +81,7 @@ impl StyledInput {
             input_type: None,
             input_class_list: vec![],
             wrapper_class_list: vec![],
+            variant: Variant::Normal,
         }
     }
 }
@@ -77,6 +95,7 @@ pub struct StyledInputBuilder {
     input_type: Option<String>,
     input_class_list: Vec<String>,
     wrapper_class_list: Vec<String>,
+    variant: Variant,
 }
 
 impl StyledInputBuilder {
@@ -118,6 +137,11 @@ impl StyledInputBuilder {
         self
     }
 
+    pub fn primary(mut self) -> Self {
+        self.variant = Variant::Primary;
+        self
+    }
+
     pub fn build(self) -> StyledInput {
         StyledInput {
             id: self.id,
@@ -127,6 +151,7 @@ impl StyledInputBuilder {
             input_type: self.input_type,
             input_class_list: self.input_class_list,
             wrapper_class_list: self.wrapper_class_list,
+            variant: self.variant,
         }
     }
 }
@@ -146,15 +171,18 @@ pub fn render(values: StyledInput) -> Node<Msg> {
         input_type,
         mut input_class_list,
         mut wrapper_class_list,
+        variant,
     } = values;
 
     wrapper_class_list.push("styledInput".to_string());
+    wrapper_class_list.push(variant.to_string());
     wrapper_class_list.push(format!("{}", id));
     if !valid {
         wrapper_class_list.push("invalid".to_string());
     }
 
     input_class_list.push("inputElement".to_string());
+    input_class_list.push(variant.to_string());
     if icon.is_some() {
         input_class_list.push("withIcon".to_string());
     }

jirs-client/webpack.config.js

@@ -3,19 +3,47 @@ const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const dotenv = require('dotenv');
 const webpack = require('webpack');
-const { execSync, exec } = require('child_process');
+const { execSync, spawn } = require('child_process');
 
 process.env.RUST_LOG = 'info';
 
-execSync('cd .. && cargo build --bin jirs-css');
+const jirDir = require('path').join(__dirname, '..').normalize();
+console.log('jir dir %s', jirDir)
 
 if (process.env.NODE_ENV === "production") {
+    execSync('cargo build --bin jirs-css --release', {
+        cwd: jirDir,
+    });
     execSync("rm -Rf ./dist");
     execSync("mkdir -p ./dist");
-    execSync('cd .. && ./target/debug/jirs-css -O ./jirs-client/dist/styles.css');
+    execSync('./target/debug/jirs-css -O ./jirs-client/dist/styles.css', {
+        cwd: jirDir,
+    });
     console.log("CSS combined");
 } else {
-    exec('cd .. && ./target/debug/jirs-css --watch -O ./jirs-client/dev/styles.css');
+    execSync('cargo build --bin jirs-css', {
+        cwd: jirDir,
+    });
+    const css = spawn('./target/debug/jirs-css', [
+        '-W',
+        '-O',
+        './jirs-client/dev/styles.css'
+    ], {
+        detached: false,
+        cwd: jirDir,
+    }).on("error", (error) => {
+        console.error(error);
+        process.exit(1);
+    }).on('close', code => {
+        console.error(`CSS watch process finished with code ${ code }`);
+        // process.exit(1);
+    });
+    // css.stdout.on('data', data => {
+    //     console.log(`stdout: ${ data }`);
+    // });
+    // css.stderr.on('data', data => {
+    //     console.log(`stdout: ${ data }`);
+    // });
     console.log("CSS combined, watching for changes...");
 }
 

jirs-css/src/main.rs

@@ -268,7 +268,7 @@ fn main() -> Result<(), String> {
                 .takes_value(true),
         )
         .arg(clap::Arg::with_name("output").short("O").takes_value(true))
-        .arg(clap::Arg::with_name("watch").short("W"))
+        .arg(clap::Arg::with_name("watch").short("W").takes_value(false))
         .arg(
             clap::Arg::with_name("prelude")
                 .short("p")
@@ -297,7 +297,7 @@ fn main() -> Result<(), String> {
         .and_then(|meta| meta.modified())
         .unwrap_or_else(|_| SystemTime::UNIX_EPOCH);
 
-    if app.check_timestamps(root, output_timestamp)? {
+    if app.check_timestamps(root, output_timestamp)? && !matches.is_present("watch") {
         return Ok(());
     }