Enhance styled input. Add some stuff too rename column

jirs-client/dev/logo.svg

@@ -1,95 +1,135 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"
+<svg
-     preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640">
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 640 640"
+        width="640"
+        height="640"
+>
     <defs>
-        <path d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+        <filter
-              id="b6KNxjEO2"></path>
+                id="shadow16022051"
-        <mask id="maskb3oIvRAxi1" x="78" y="78" width="444" height="444" maskUnits="userSpaceOnUse">
+                filterUnits="userSpaceOnUse"
-            <rect x="78" y="78" width="444" height="444" fill="white"></rect>
+                primitiveUnits="userSpaceOnUse"
-            <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="black"></use>
+        >
+            <feFlood>
+            </feFlood>
+            <feComposite in2="SourceAlpha" operator="in">
+            </feComposite>
+            <feGaussianBlur stdDeviation="1">
+            </feGaussianBlur>
+            <feOffset dx="14" dy="10" result="afterOffset">
+            </feOffset>
+            <feFlood flood-color="#0d0e44" flood-opacity="0.5">
+            </feFlood>
+            <feComposite in2="afterOffset" operator="in">
+            </feComposite>
+            <feMorphology operator="dilate" radius="1">
+            </feMorphology>
+            <feComposite in2="SourceAlpha" operator="out">
+            </feComposite>
+        </filter>
+        <path
+                d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+                id="b6KNxjEO2"
+        >
+        </path>
+        <mask
+                id="maskb3oIvRAxi1"
+                x="78" y="78"
+                width="444"
+                height="444"
+                maskUnits="userSpaceOnUse"
+        >
+            <rect x="78" y="78" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="black">
+            </use>
         </mask>
-        <path d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+        <path
-              id="bDKGuSkBj"></path>
+                d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+                id="bDKGuSkBj"
+        >
+        </path>
         <mask id="maskb4LRewzUS" x="98" y="116.18" width="444" height="444" maskUnits="userSpaceOnUse">
-            <rect x="98" y="116.18" width="444" height="444" fill="white"></rect>
+            <rect x="98" y="116.18" width="444" height="444" fill="white">
-            <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="black"></use>
+            </rect>
+            <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="black">
+            </use>
         </mask>
-        <path d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+        <path
-              id="a1k8tJrWR3"></path>
+                d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+                id="a1k8tJrWR3"
+        >
+        </path>
         <mask id="maskbctn2Bw0" x="121.03" y="152.84" width="444" height="444" maskUnits="userSpaceOnUse">
-            <rect x="121.03" y="152.84" width="444" height="444" fill="white"></rect>
+            <rect x="121.03" y="152.84" width="444" height="444" fill="white">
-            <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="black"></use>
+            </rect>
+            <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="black">
+            </use>
         </mask>
     </defs>
-    <g>
+    <path
-        <g>
+            d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
-            <g>
+            id="h3zi0EZA0A"
-                <g>
+            fill-opacity="1"
-                    <filter id="shadow16022051" x="78" y="78" width="458" height="454" filterUnits="userSpaceOnUse"
+            filter="url(#shadow16022051)"
-                            primitiveUnits="userSpaceOnUse">
+    >
-                        <feFlood></feFlood>
+    </path>
-                        <feComposite in2="SourceAlpha" operator="in"></feComposite>
+    <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="#fefefe" fill-opacity="1">
-                        <feGaussianBlur stdDeviation="1"></feGaussianBlur>
+    </use>
-                        <feOffset dx="14" dy="10" result="afterOffset"></feOffset>
-                        <feFlood flood-color="#0d0e44" flood-opacity="0.5"></feFlood>
-                        <feComposite in2="afterOffset" operator="in"></feComposite>
-                        <feMorphology operator="dilate" radius="1"></feMorphology>
-                        <feComposite in2="SourceAlpha" operator="out"></feComposite>
-                    </filter>
-                    <path d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
-                          id="h3zi0EZA0A" fill="white" fill-opacity="1" filter="url(#shadow16022051)"></path>
-                </g>
-                <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="#fefefe" fill-opacity="1"></use>
     <g mask="url(#maskb3oIvRAxi1)">
-                    <use xlink:href="#b6KNxjEO2" opacity="0.46" fill-opacity="0" stroke="#06697d" stroke-width="22"
+        <use
-                         stroke-opacity="1"></use>
+                xlink:href="#b6KNxjEO2"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
     </g>
-            </g>
+    <path
-            <g>
+            d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
-                <g>
+            id="mzwSl44s1"
-                    <filter id="shadow11664684" x="98" y="116.18" width="458" height="454" filterUnits="userSpaceOnUse"
+            fill-opacity="1"
-                            primitiveUnits="userSpaceOnUse">
+            filter="url(#shadow16022051)"
-                        <feFlood></feFlood>
+    >
-                        <feComposite in2="SourceAlpha" operator="in"></feComposite>
+    </path>
-                        <feGaussianBlur stdDeviation="1"></feGaussianBlur>
+    <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1">
-                        <feOffset dx="14" dy="10" result="afterOffset"></feOffset>
+    </use>
-                        <feFlood flood-color="#0c0e43" flood-opacity="0.5"></feFlood>
-                        <feComposite in2="afterOffset" operator="in"></feComposite>
-                        <feMorphology operator="dilate" radius="1"></feMorphology>
-                        <feComposite in2="SourceAlpha" operator="out"></feComposite>
-                    </filter>
-                    <path d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
-                          id="mzwSl44s1" fill="white" fill-opacity="1" filter="url(#shadow11664684)"></path>
-                </g>
-                <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1"></use>
     <g mask="url(#maskb4LRewzUS)">
-                    <use xlink:href="#bDKGuSkBj" opacity="0.46" fill-opacity="0" stroke="#06697d" stroke-width="22"
+        <use
-                         stroke-opacity="1"></use>
+                xlink:href="#bDKGuSkBj"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
     </g>
-            </g>
+    <path
-            <g>
+            d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
-                <g>
+            id="c16Px1v9IX"
-                    <filter id="shadow13224340" x="121.03" y="152.84" width="458" height="454"
+            fill-opacity="1"
-                            filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+            filter="url(#shadow16022051)"
-                        <feFlood></feFlood>
+    >
-                        <feComposite in2="SourceAlpha" operator="in"></feComposite>
+    </path>
-                        <feGaussianBlur stdDeviation="1"></feGaussianBlur>
+    <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="#fefefe" fill-opacity="1">
-                        <feOffset dx="14" dy="10" result="afterOffset"></feOffset>
+    </use>
-                        <feFlood flood-color="#0c0e43" flood-opacity="0.5"></feFlood>
-                        <feComposite in2="afterOffset" operator="in"></feComposite>
-                        <feMorphology operator="dilate" radius="1"></feMorphology>
-                        <feComposite in2="SourceAlpha" operator="out"></feComposite>
-                    </filter>
-                    <path d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
-                          id="c16Px1v9IX" fill="white" fill-opacity="1" filter="url(#shadow13224340)"></path>
-                </g>
-                <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="#fefefe" fill-opacity="1"></use>
     <g mask="url(#maskbctn2Bw0)">
-                    <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill-opacity="0" stroke="#06697d" stroke-width="22"
+        <use
-                         stroke-opacity="1"></use>
+                xlink:href="#a1k8tJrWR3"
-                </g>
+                opacity="0.46"
-            </g>
+                fill-opacity="0"
-        </g>
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
     </g>
 </svg>

jirs-client/js/css/projectSettings.css

@@ -39,10 +39,16 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+}
+
+#projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName > span {
     cursor: pointer;
     user-select: none;
 }
 
+#projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName > .styledInput {
+}
+
 #projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName.addColumn,
 #projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName.addColumn > i {
     color: var(--textMedium);

jirs-client/js/template.ejs

@@ -4,8 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="/favicon.png">
+    <link rel="icon" href="/logo.svg">
     <title>JIRS</title>
-    <link rel="stylesheet" type="text/css" href="/styles.css" >
+    <link rel="stylesheet" type="text/css" href="/styles.css">
 </head>
 <body>
 <main id="app"></main>

jirs-client/src/project_settings.rs

@@ -55,6 +55,7 @@ pub fn update(msg: Msg, model: &mut model::Model, orders: &mut impl Orders<Msg>)
     };
     page.project_category_state.update(&msg, orders);
     page.time_tracking.update(&msg);
+    page.name.update(&msg);
 
     match msg {
         Msg::StrInputChanged(FieldId::ProjectSettings(ProjectFieldId::Name), text) => {
@@ -260,21 +261,23 @@ pub fn view(model: &model::Model) -> Node<Msg> {
 
             let name = if page.edit_column_id == Some(id) {
                 let blur = ev("focusout", |_| {
+                    log!("asdasdasd");
                     Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(None)))
                 });
                 let input = StyledInput::build(FieldId::ProjectSettings(ProjectFieldId::IssueStatusName))
                     .state(&page.name)
                     .primary()
                     .auto_focus()
+                    .on_input_ev(blur)
                     .build()
                     .into_node();
 
-                div![class!["columnName"], input, blur]
+                div![class!["columnName"], input]
             } else {
                 let edit = mouse_ev(Ev::Click, move |_| {
                     Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(Some(id))))
                 });
-                div![class!["columnName"], is.name, edit]
+                div![class!["columnName"], span![is.name], edit]
             };
             div![
                 class!["columnPreview"],

jirs-client/src/shared/styled_input.rs

@@ -70,6 +70,7 @@ pub struct StyledInput {
     wrapper_class_list: Vec<String>,
     variant: Variant,
     auto_focus: bool,
+    input_handlers: Vec<EventHandler<Msg>>,
 }
 
 impl StyledInput {
@@ -84,6 +85,7 @@ impl StyledInput {
             wrapper_class_list: vec![],
             variant: Variant::Normal,
             auto_focus: false,
+            input_handlers: vec![],
         }
     }
 }
@@ -99,6 +101,7 @@ pub struct StyledInputBuilder {
     wrapper_class_list: Vec<String>,
     variant: Variant,
     auto_focus: bool,
+    input_handlers: Vec<EventHandler<Msg>>,
 }
 
 impl StyledInputBuilder {
@@ -151,6 +154,11 @@ impl StyledInputBuilder {
         self
     }
 
+    pub fn on_input_ev(mut self, handler: EventHandler<Msg>) -> Self {
+        self.input_handlers.push(handler);
+        self
+    }
+
     pub fn build(self) -> StyledInput {
         StyledInput {
             id: self.id,
@@ -162,6 +170,7 @@ impl StyledInputBuilder {
             wrapper_class_list: self.wrapper_class_list,
             variant: self.variant,
             auto_focus: self.auto_focus,
+            input_handlers: self.input_handlers,
         }
     }
 }
@@ -183,6 +192,7 @@ pub fn render(values: StyledInput) -> Node<Msg> {
         mut wrapper_class_list,
         variant,
         auto_focus,
+        mut input_handlers,
     } = values;
 
     wrapper_class_list.push("styledInput".to_string());
@@ -203,17 +213,21 @@ pub fn render(values: StyledInput) -> Node<Msg> {
         _ => empty![],
     };
     let field_id = id.clone();
-    let change_handler = ev(Ev::Input, move |event| {
+    input_handlers.push(ev(Ev::Input, move |event| {
         event.stop_propagation();
         let target = event.target().unwrap();
         let input = seed::to_input(&target);
         let value = input.value();
         Msg::StrInputChanged(field_id, value)
-    });
+    }));
-    let key_handler = ev(Ev::KeyUp, move |event| {
+    input_handlers.push(ev(Ev::KeyUp, move |event| {
         event.stop_propagation();
         Msg::NoOp
-    });
+    }));
+    input_handlers.push(ev(Ev::Click, move |event| {
+        event.stop_propagation();
+        Msg::NoOp
+    }));
 
     div![
         attrs!(At::Class => wrapper_class_list.join(" ")),
@@ -226,8 +240,7 @@ pub fn render(values: StyledInput) -> Node<Msg> {
                 At::Type => input_type.unwrap_or_else(|| "text".to_string()),
                 At::AutoFocus => auto_focus,
             ],
-            change_handler,
+            input_handlers,
-            key_handler,
         ],
     ]
 }

jirs-client/static/logo2.svg

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 640 640"
+        width="28"
+        height="28"
+>
+    <defs>
+        <filter
+                id="shadow16022051"
+                filterUnits="userSpaceOnUse"
+                primitiveUnits="userSpaceOnUse"
+        >
+            <feFlood>
+            </feFlood>
+            <feComposite in2="SourceAlpha" operator="in">
+            </feComposite>
+            <feGaussianBlur stdDeviation="1">
+            </feGaussianBlur>
+            <feOffset dx="14" dy="10" result="afterOffset">
+            </feOffset>
+            <feFlood flood-color="#0d0e44" flood-opacity="0.5">
+            </feFlood>
+            <feComposite in2="afterOffset" operator="in">
+            </feComposite>
+            <feMorphology operator="dilate" radius="1">
+            </feMorphology>
+            <feComposite in2="SourceAlpha" operator="out">
+            </feComposite>
+        </filter>
+        <path
+                d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+                id="b6KNxjEO2"
+        >
+        </path>
+        <mask
+                id="maskb3oIvRAxi1"
+                x="78" y="78"
+                width="444"
+                height="444"
+                maskUnits="userSpaceOnUse"
+        >
+            <rect x="78" y="78" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="black">
+            </use>
+        </mask>
+        <path
+                d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+                id="bDKGuSkBj"
+        >
+        </path>
+        <mask id="maskb4LRewzUS" x="98" y="116.18" width="444" height="444" maskUnits="userSpaceOnUse">
+            <rect x="98" y="116.18" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="black">
+            </use>
+        </mask>
+        <path
+                d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+                id="a1k8tJrWR3"
+        >
+        </path>
+        <mask id="maskbctn2Bw0" x="121.03" y="152.84" width="444" height="444" maskUnits="userSpaceOnUse">
+            <rect x="121.03" y="152.84" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="black">
+            </use>
+        </mask>
+    </defs>
+    <path
+            d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+            id="h3zi0EZA0A"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskb3oIvRAxi1)">
+        <use
+                xlink:href="#b6KNxjEO2"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+    <path
+            d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+            id="mzwSl44s1"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskb4LRewzUS)">
+        <use
+                xlink:href="#bDKGuSkBj"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+    <path
+            d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+            id="c16Px1v9IX"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskbctn2Bw0)">
+        <use
+                xlink:href="#a1k8tJrWR3"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+</svg>