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

Fix editor style. Fix render graph

Browse Source
This commit is contained in:
Adrian Wozniak 2020-05-31 22:47:48 +02:00
parent 71e7839b68
commit 454e5ccfda
4 changed files with 178 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,5 +1,7 @@
# A simplified Jira clone built with seed.rs and actix
![JIRS](https://raw.githubusercontent.com/Eraden/jirs/master/jirs-client/static/project-icon.svg)
Server: [![builds.sr.ht status](https://builds.sr.ht/~tsumanu/jirs/server.yml.svg)](https://builds.sr.ht/~tsumanu/jirs/server.yml?)
Client: [![builds.sr.ht status](https://builds.sr.ht/~tsumanu/jirs/client.yml.svg)](https://builds.sr.ht/~tsumanu/jirs/client.yml?)

16
jirs-client/js/css/styledEditor.css
View File

@ -1,6 +1,8 @@
.styledEditor {
display: grid;
grid-template-areas: "tab1 tab2" "view view";
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 100%;
}
.styledEditor > input[type="radio"] {
@ -45,12 +47,12 @@
border-color: var(--borderInputFocus);
}
.styledEditor > .navbar.editor {
grid-area: tab1;
.styledEditor > .navbar.editorTab {
min-width: 50%;
}
.styledEditor > .navbar.view {
grid-area: tab2;
.styledEditor > .navbar.viewTab {
min-width: 50%;
}
.styledEditor > .styledTextArea {
@ -59,7 +61,7 @@
}
.styledEditor > .view {
grid-area: view;
min-width: 100%;
display: none;
min-height: 40px;
padding-top: 15px;

57
jirs-client/src/reports/view.rs
View File

@ -43,11 +43,19 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
}
}
// take log10 from largest amount of issue to calculate how long text will be
let legend_margin_width = (dominant as f64).log10() * SVG_MARGIN_X as f64;
let mut columns: Vec<Node<Msg>> = vec![];
// shapes, groups and texts
let mut svg_parts: Vec<Node<Msg>> = vec![];
// each piece is part of column drawable view where number of parts depends on number of issues which have largest amount of issues
let piece_height = SVG_DRAWABLE_HEIGHT as f64 / dominant as f64;
let piece_width = (SVG_WIDTH as f64 - (legend_margin_width + SVG_MARGIN_X as f64))
// width reduces by legend divided by number of days
let piece_width = (SVG_WIDTH as f64
- legend_margin_width
- SVG_MARGIN_X as f64
- (SVG_BAR_MARGIN as f64 * page.last_day.day() as f64))
/ page.last_day.day() as f64;
let resolution = 10;
@ -71,13 +79,10 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
At::Style => "fill: var(--textLight);",
],]);
}
columns.push(seed::g![legend_parts]);
svg_parts.push(seed::g![legend_parts]);
for day in (page.first_day.day0())..(page.last_day.day()) {
let num_issues = issues.get(&day).map(|v| v.len()).unwrap_or_default() as u32;
if num_issues == 0 {
continue;
}
let x = (piece_width * day as f64)
+ (SVG_BAR_MARGIN * day) as f64
+ (legend_margin_width + SVG_MARGIN_X as f64);
@ -96,25 +101,27 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
)))
});
columns.push(seed::rect![
on_hover,
on_blur,
attrs![
At::X => x,
At::Y => SVG_DRAWABLE_HEIGHT as f64 - height, // reverse draw origin
At::Width => piece_width,
At::Height => height,
At::Style => "fill: rgb(255, 0, 0);",
At::Title => format!("Number of issues: {}", num_issues),
]
]);
columns.push(seed::text![
attrs![
At::X => x,
At::Y => SVG_HEIGHT,
At::Style => "fill: var(--textLight); font-family: var(--font-regular); font-size: 10px;",
svg_parts.push(seed::g![
seed::rect![
on_hover,
on_blur,
attrs![
At::X => x,
At::Y => SVG_DRAWABLE_HEIGHT as f64 - height, // reverse draw origin
At::Width => piece_width,
At::Height => height,
At::Style => "fill: rgb(255, 0, 0);",
At::Title => format!("Number of issues: {}", num_issues),
]
],
day.format("%d/%m").to_string(),
seed::text![
attrs![
At::X => x,
At::Y => SVG_HEIGHT,
At::Style => "fill: var(--textLight); font-family: var(--font-regular); font-size: 10px;",
],
day.format("%d/%m").to_string(),
]
]);
}
@ -123,7 +130,7 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
h5![class!["graphHeader"], "Last updated"],
svg![
attrs![At::Height => SVG_HEIGHT, At::Width => SVG_WIDTH],
columns,
svg_parts,
],
]
}

135
jirs-client/static/project-icon.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="256"
height="256"
>
<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