Add aside
This commit is contained in:
Adrian Woźniak
parent
2786fa645a
commit
c58d9fb9f1
BIN
jirs-client/dev/feedback.png
Normal file
BIN
jirs-client/dev/feedback.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
106
jirs-client/js/css/aside.css
Normal file
106
jirs-client/js/css/aside.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
aside#navbar-left {
|
||||||
|
z-index: var(--navLeft);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
width: var(--appNavBarLeftWidth);
|
||||||
|
background: var(--backgroundDarkPrimary);
|
||||||
|
transition: all 0.1s;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left:hover {
|
||||||
|
width: 200px;
|
||||||
|
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .logoLink {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
transition: left 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .logoLink > .styledLogo {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .item {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
padding-left: 64px;
|
||||||
|
color: #deebff;
|
||||||
|
transition: color 0.1s;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .item > .styledIcon {
|
||||||
|
position: absolute;
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .item > .styledIcon.search {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #DEEBFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .item > .styledIcon.plus {
|
||||||
|
font-size: 27px;
|
||||||
|
color: #DEEBFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .item > .styledIcon.help {
|
||||||
|
font-size: 27px;
|
||||||
|
color: #DEEBFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .item > .itemText {
|
||||||
|
position: relative;
|
||||||
|
right: 12px;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: all 0.1s;
|
||||||
|
font-family: var(--font-bold);
|
||||||
|
font-size: 12px;
|
||||||
|
transition-property: right, visibility, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left > .bottom > .aboutTooltip {}
|
||||||
|
|
||||||
|
aside#navbar-left:hover .item > .itemText {
|
||||||
|
right: 0;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#navbar-left .styledTooltip {
|
||||||
|
z-index: calc(var(--modal) + 1);
|
||||||
|
position: fixed;
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #fff;
|
||||||
|
transform: translateZ(0);
|
||||||
|
box-shadow: rgba(9, 30, 66, 0.25) 0 4px 8px -2px, rgba(9, 30, 66, 0.31) 0 0 1px;
|
||||||
|
}
|
||||||
@ -46,9 +46,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root /* sizes */ {
|
:root /* sizes */ {
|
||||||
--appNavBarLeftWidth: 64;
|
--appNavBarLeftWidth: 64px;
|
||||||
--secondarySideBarWidth: 230;
|
--secondarySideBarWidth: 230px;
|
||||||
--minViewportWidth: 1000;
|
--minViewportWidth: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root /* z-index */ {
|
:root /* z-index */ {
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
@import "css/variables.css";
|
@import "css/variables.css";
|
||||||
@import "css/global.css";
|
@import "css/global.css";
|
||||||
@import "css/sidebar.css";
|
@import "css/sidebar.css";
|
||||||
|
@import "css/aside.css";
|
||||||
@import "css/icon.css";
|
@import "css/icon.css";
|
||||||
@import "css/shared.css";
|
@import "css/shared.css";
|
||||||
@import "css/app.css";
|
@import "css/app.css";
|
||||||
|
|||||||
@ -7,22 +7,58 @@ use jirs_data::FullProjectResponse;
|
|||||||
use crate::model::{Icon, Model, Page};
|
use crate::model::{Icon, Model, Page};
|
||||||
use crate::Msg;
|
use crate::Msg;
|
||||||
|
|
||||||
|
pub fn navbar_left(model: &Model) -> Node<Msg> {
|
||||||
|
let mut logo_svg = Node::from_html(include_str!("../static/logo.svg"));
|
||||||
|
|
||||||
|
aside![
|
||||||
|
id!["navbar-left"],
|
||||||
|
a![
|
||||||
|
attrs![At::Class => "logoLink", At::Href => "/"],
|
||||||
|
div![attrs![At::Class => "styledLogo"], logo_svg]
|
||||||
|
],
|
||||||
|
navbar_left_item(model, "Search issues", Icon::Search),
|
||||||
|
navbar_left_item(model, "Create Issue", Icon::Plus),
|
||||||
|
div![
|
||||||
|
attrs![At::Class => "bottom"],
|
||||||
|
about_tooltip(model, navbar_left_item(model, "About", Icon::Help))
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
fn navbar_left_item(_model: &Model, text: &str, logo: Icon) -> Node<Msg> {
|
||||||
|
div![
|
||||||
|
attrs![At::Class => "item"],
|
||||||
|
i![attrs![At::Class => format!("styledIcon {}", logo)]],
|
||||||
|
span![attrs![At::Class => "itemText"], text]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn about_tooltip(_model: &Model, children: Node<Msg>) -> Node<Msg> {
|
||||||
|
div![attrs![At::Class => "aboutTooltip"], children]
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn styled_tooltip() -> Node<Msg> {
|
||||||
|
div![attrs![At::Class => "styledTooltip"]]
|
||||||
|
}
|
||||||
|
|
||||||
pub fn sidebar(model: &Model) -> Node<Msg> {
|
pub fn sidebar(model: &Model) -> Node<Msg> {
|
||||||
|
let project_icon = Node::from_html(include_str!("../static/project-avatar.svg"));
|
||||||
let project_info = match model.project.as_ref() {
|
let project_info = match model.project.as_ref() {
|
||||||
Some(project) => li![
|
Some(project) => li![
|
||||||
id!["projectInfo"],
|
id!["projectInfo"],
|
||||||
|
project_icon,
|
||||||
div![
|
div![
|
||||||
attrs![At::Class => ".projectTexts";],
|
attrs![At::Class => "projectTexts";],
|
||||||
div![attrs![At::Class => ".projectName";], project.name],
|
div![attrs![At::Class => "projectName";], project.name],
|
||||||
div![attrs![At::Class => ".projectCategory";], project.category]
|
div![attrs![At::Class => "projectCategory";], project.category]
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
_ => li![
|
_ => li![
|
||||||
id!["projectInfo"],
|
id!["projectInfo"],
|
||||||
div![
|
div![
|
||||||
attrs![At::Class => ".projectTexts";],
|
attrs![At::Class => "projectTexts";],
|
||||||
div![attrs![At::Class => ".projectName";], ""],
|
div![attrs![At::Class => "projectName";], ""],
|
||||||
div![attrs![At::Class => ".projectCategory";], ""]
|
div![attrs![At::Class => "projectCategory";], ""]
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -71,7 +107,12 @@ pub fn divider() -> Node<Msg> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pub fn inner_layout(model: &Model, children: Node<Msg>) -> Node<Msg> {
|
pub fn inner_layout(model: &Model, children: Node<Msg>) -> Node<Msg> {
|
||||||
article![id!["inner-layout"], sidebar(model), children,]
|
article![
|
||||||
|
id!["inner-layout"],
|
||||||
|
navbar_left(model),
|
||||||
|
sidebar(model),
|
||||||
|
children,
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn host_client(host_url: String, path: &str) -> Result<Request, String> {
|
pub fn host_client(host_url: String, path: &str) -> Result<Request, String> {
|
||||||
|
|||||||
45
jirs-client/static/logo.svg
Normal file
45
jirs-client/static/logo.svg
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 75.76 75.76"
|
||||||
|
width="28"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="linear-gradient"
|
||||||
|
x1="34.64"
|
||||||
|
y1="15.35"
|
||||||
|
x2="19"
|
||||||
|
y2="30.99"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop offset="0.18" stop-color="rgba(0, 82, 204, 0.2)"/>
|
||||||
|
<stop offset="1" stop-color="#DEEBFE"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linear-gradient-2"
|
||||||
|
x1="38.78"
|
||||||
|
y1="60.28"
|
||||||
|
x2="54.39"
|
||||||
|
y2="44.67"
|
||||||
|
xlink:href="#linear-gradient"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<title>Jira Software-blue</title>
|
||||||
|
<g id="Layer_2" data-name="Layer 2">
|
||||||
|
<g id="Blue">
|
||||||
|
<path
|
||||||
|
style="fill: #DEEBFE;"
|
||||||
|
d="M72.4,35.76,39.8,3.16,36.64,0h0L12.1,24.54h0L.88,35.76A3,3,0,0,0,.88,40L23.3,62.42,36.64,75.76,61.18,51.22l.38-.38L72.4,40A3,3,0,0,0,72.4,35.76ZM36.64,49.08l-11.2-11.2,11.2-11.2,11.2,11.2Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style="fill: url(#linear-gradient)"
|
||||||
|
d="M36.64,26.68A18.86,18.86,0,0,1,36.56.09L12.05,24.59,25.39,37.93,36.64,26.68Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style="fill: url(#linear-gradient-2)"
|
||||||
|
d="M47.87,37.85,36.64,49.08a18.86,18.86,0,0,1,0,26.68h0L61.21,51.19Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
95
jirs-client/static/project-avatar.svg
Normal file
95
jirs-client/static/project-avatar.svg
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 128 128"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<rect id="path-1" x="0" y="0" width="128" height="128" fill="#FF5630" />
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="project_avatar_settings">
|
||||||
|
<g>
|
||||||
|
<rect id="path-1" x="0" y="0" width="128" height="128" fill="#FF5630" />
|
||||||
|
<g id="Settings" fill-rule="nonzero">
|
||||||
|
<g transform="translate(20.000000, 17.000000)">
|
||||||
|
<path
|
||||||
|
d="M74.578,84.289 L72.42,84.289 C70.625,84.289 69.157,82.821 69.157,81.026 L69.157,16.537 C69.157,14.742 70.625,13.274 72.42,13.274 L74.578,13.274 C76.373,13.274 77.841,14.742 77.841,16.537 L77.841,81.026 C77.842,82.82 76.373,84.289 74.578,84.289 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14.252,84.289 L12.094,84.289 C10.299,84.289 8.831,82.821 8.831,81.026 L8.831,16.537 C8.831,14.742 10.299,13.274 12.094,13.274 L14.252,13.274 C16.047,13.274 17.515,14.742 17.515,16.537 L17.515,81.026 C17.515,82.82 16.047,84.289 14.252,84.289 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
id="Rectangle-path"
|
||||||
|
fill="#153A56"
|
||||||
|
x="8.83"
|
||||||
|
y="51.311"
|
||||||
|
width="8.685"
|
||||||
|
height="7.763"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M13.173,53.776 L13.173,53.776 C6.342,53.776 0.753,48.187 0.753,41.356 L0.753,41.356 C0.753,34.525 6.342,28.936 13.173,28.936 L13.173,28.936 C20.004,28.936 25.593,34.525 25.593,41.356 L25.593,41.356 C25.593,48.187 20.004,53.776 13.173,53.776 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M18.021,43.881 L8.324,43.881 C7.453,43.881 6.741,43.169 6.741,42.298 L6.741,41.25 C6.741,40.379 7.453,39.667 8.324,39.667 L18.021,39.667 C18.892,39.667 19.604,40.379 19.604,41.25 L19.604,42.297 C19.605,43.168 18.892,43.881 18.021,43.881 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
opacity="0.2"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
id="Rectangle-path"
|
||||||
|
fill="#153A56"
|
||||||
|
x="69.157"
|
||||||
|
y="68.307"
|
||||||
|
width="8.685"
|
||||||
|
height="7.763"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M73.499,70.773 L73.499,70.773 C66.668,70.773 61.079,65.184 61.079,58.353 L61.079,58.353 C61.079,51.522 66.668,45.933 73.499,45.933 L73.499,45.933 C80.33,45.933 85.919,51.522 85.919,58.353 L85.919,58.353 C85.919,65.183 80.33,70.773 73.499,70.773 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M78.348,60.877 L68.651,60.877 C67.78,60.877 67.068,60.165 67.068,59.294 L67.068,58.247 C67.068,57.376 67.781,56.664 68.651,56.664 L78.348,56.664 C79.219,56.664 79.931,57.377 79.931,58.247 L79.931,59.294 C79.931,60.165 79.219,60.877 78.348,60.877 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
opacity="0.2"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M44.415,84.289 L42.257,84.289 C40.462,84.289 38.994,82.821 38.994,81.026 L38.994,16.537 C38.994,14.742 40.462,13.274 42.257,13.274 L44.415,13.274 C46.21,13.274 47.678,14.742 47.678,16.537 L47.678,81.026 C47.678,82.82 46.21,84.289 44.415,84.289 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
id="Rectangle-path"
|
||||||
|
fill="#153A56"
|
||||||
|
x="38.974"
|
||||||
|
y="23.055"
|
||||||
|
width="8.685"
|
||||||
|
height="7.763"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M43.316,25.521 L43.316,25.521 C36.485,25.521 30.896,19.932 30.896,13.101 L30.896,13.101 C30.896,6.27 36.485,0.681 43.316,0.681 L43.316,0.681 C50.147,0.681 55.736,6.27 55.736,13.101 L55.736,13.101 C55.736,19.932 50.147,25.521 43.316,25.521 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M48.165,15.626 L38.468,15.626 C37.597,15.626 36.885,14.914 36.885,14.043 L36.885,12.996 C36.885,12.125 37.597,11.413 38.468,11.413 L48.165,11.413 C49.036,11.413 49.748,12.125 49.748,12.996 L49.748,14.043 C49.748,14.913 49.036,15.626 48.165,15.626 Z"
|
||||||
|
id="Shape"
|
||||||
|
fill="#2A5083"
|
||||||
|
opacity="0.2"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
Loading…
Reference in New Issue
Block a user