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"?> <?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"> <!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> <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> </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"> <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> </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"> <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> </mask>
</defs> </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> <g mask="url(#maskb3oIvRAxi1)">
<feFlood flood-color="#0d0e44" flood-opacity="0.5"></feFlood> <use
<feComposite in2="afterOffset" operator="in"></feComposite> xlink:href="#b6KNxjEO2"
<feMorphology operator="dilate" radius="1"></feMorphology> opacity="0.46"
<feComposite in2="SourceAlpha" operator="out"></feComposite> fill-opacity="0"
</filter> stroke="#06697d"
<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" stroke-width="22"
id="h3zi0EZA0A" fill="white" fill-opacity="1" filter="url(#shadow16022051)"></path> stroke-opacity="1"
</g> >
<use xlink:href="#b6KNxjEO2" opacity="0.46" fill="#fefefe" fill-opacity="1"></use> </use>
<g mask="url(#maskb3oIvRAxi1)"> </g>
<use xlink:href="#b6KNxjEO2" opacity="0.46" fill-opacity="0" stroke="#06697d" stroke-width="22" <path
stroke-opacity="1"></use> 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"
</g> fill-opacity="1"
<g> filter="url(#shadow16022051)"
<g> >
<filter id="shadow11664684" x="98" y="116.18" width="458" height="454" filterUnits="userSpaceOnUse" </path>
primitiveUnits="userSpaceOnUse"> <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1">
<feFlood></feFlood> </use>
<feComposite in2="SourceAlpha" operator="in"></feComposite> <g mask="url(#maskb4LRewzUS)">
<feGaussianBlur stdDeviation="1"></feGaussianBlur> <use
<feOffset dx="14" dy="10" result="afterOffset"></feOffset> xlink:href="#bDKGuSkBj"
<feFlood flood-color="#0c0e43" flood-opacity="0.5"></feFlood> opacity="0.46"
<feComposite in2="afterOffset" operator="in"></feComposite> fill-opacity="0"
<feMorphology operator="dilate" radius="1"></feMorphology> stroke="#06697d"
<feComposite in2="SourceAlpha" operator="out"></feComposite> stroke-width="22"
</filter> stroke-opacity="1"
<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> </use>
</g> </g>
<use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1"></use> <path
<g mask="url(#maskb4LRewzUS)"> 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"
<use xlink:href="#bDKGuSkBj" opacity="0.46" fill-opacity="0" stroke="#06697d" stroke-width="22" id="c16Px1v9IX"
stroke-opacity="1"></use> fill-opacity="1"
</g> filter="url(#shadow16022051)"
</g> >
<g> </path>
<g> <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="#fefefe" fill-opacity="1">
<filter id="shadow13224340" x="121.03" y="152.84" width="458" height="454" </use>
filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> <g mask="url(#maskbctn2Bw0)">
<feFlood></feFlood> <use
<feComposite in2="SourceAlpha" operator="in"></feComposite> xlink:href="#a1k8tJrWR3"
<feGaussianBlur stdDeviation="1"></feGaussianBlur> opacity="0.46"
<feOffset dx="14" dy="10" result="afterOffset"></feOffset> fill-opacity="0"
<feFlood flood-color="#0c0e43" flood-opacity="0.5"></feFlood> stroke="#06697d"
<feComposite in2="afterOffset" operator="in"></feComposite> stroke-width="22"
<feMorphology operator="dilate" radius="1"></feMorphology> stroke-opacity="1"
<feComposite in2="SourceAlpha" operator="out"></feComposite> >
</filter> </use>
<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>
</g> </g>
</svg> </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; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
}
#projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName > span {
cursor: pointer; cursor: pointer;
user-select: none; 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,
#projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName.addColumn > i { #projectSettings > .formContainer .styledForm > .formElement > .styledField > .columnsSection > .columns > .columnPreview > .columnName.addColumn > i {
color: var(--textMedium); color: var(--textMedium);

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

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.png"> <link rel="icon" href="/favicon.png">
<link rel="icon" href="/logo.svg">
<title>JIRS</title> <title>JIRS</title>
<link rel="stylesheet" type="text/css" href="/styles.css" > <link rel="stylesheet" type="text/css" href="/styles.css">
</head> </head>
<body> <body>
<main id="app"></main> <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.project_category_state.update(&msg, orders);
page.time_tracking.update(&msg); page.time_tracking.update(&msg);
page.name.update(&msg);
match msg { match msg {
Msg::StrInputChanged(FieldId::ProjectSettings(ProjectFieldId::Name), text) => { 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 name = if page.edit_column_id == Some(id) {
let blur = ev("focusout", |_| { let blur = ev("focusout", |_| {
log!("asdasdasd");
Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(None))) Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(None)))
}); });
let input = StyledInput::build(FieldId::ProjectSettings(ProjectFieldId::IssueStatusName)) let input = StyledInput::build(FieldId::ProjectSettings(ProjectFieldId::IssueStatusName))
.state(&page.name) .state(&page.name)
.primary() .primary()
.auto_focus() .auto_focus()
.on_input_ev(blur)
.build() .build()
.into_node(); .into_node();
div![class!["columnName"], input, blur] div![class!["columnName"], input]
} else { } else {
let edit = mouse_ev(Ev::Click, move |_| { let edit = mouse_ev(Ev::Click, move |_| {
Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(Some(id)))) Msg::PageChanged(PageChanged::ProjectSettings(ProjectPageChange::EditIssueStatusName(Some(id))))
}); });
div![class!["columnName"], is.name, edit] div![class!["columnName"], span![is.name], edit]
}; };
div![ div![
class!["columnPreview"], class!["columnPreview"],

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

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

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