Tsumanu/bitque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance styled input. Add some stuff too rename column

Browse Source
This commit is contained in:
Adrian Woźniak 2020-05-08 20:34:54 +02:00
parent 914702325a
commit 84fc86cec7
7 changed files with 291 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
jirs-client/dev/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 77 KiB

208
jirs-client/dev/logo.svg
View File

@ -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"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640">
<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="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"
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>
<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>
<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>
<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>
<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>
<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>
<g>
<g>
<g>
<g>
<filter id="shadow16022051" x="78" y="78" width="458" height="454" 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="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"
stroke-opacity="1"></use>
</g>
</g>
<g>
<g>
<filter id="shadow11664684" x="98" y="116.18" width="458" height="454" 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="#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"
stroke-opacity="1"></use>
</g>
</g>
<g>
<g>
<filter id="shadow13224340" x="121.03" y="152.84" width="458" height="454"
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="#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"
stroke-opacity="1"></use>
</g>
</g>
</g>
<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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

6
jirs-client/js/css/projectSettings.css
View File

@ -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);

3
jirs-client/js/template.ejs
View File

@ -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>

7
jirs-client/src/project_settings.rs
View File

@ -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"],

25
jirs-client/src/shared/styled_input.rs
View File

@ -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,
key_handler,
input_handlers,
],
]
}

135
jirs-client/static/logo2.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB