Better select
This commit is contained in:
parent
41fe733be5
commit
801f07648d
@ -28,6 +28,27 @@
|
|||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.issueDetails > .topActions .styledSelect > .dropDown > .options > .option > .type {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issueDetails > .topActions .styledSelect > .dropDown > .options > .option > .type > .styledIcon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issueDetails > .topActions .styledSelect > .dropDown > .options > .option > .type > .typeLabel {
|
||||||
|
padding: 0 5px 0 7px;
|
||||||
|
font-size: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.issueDetails > .topActions .styledSelect > .valueContainer > .value {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--textMedium);
|
||||||
|
font-size: 13px
|
||||||
|
}
|
||||||
|
|
||||||
.issueDetails > .sectionTitle {
|
.issueDetails > .sectionTitle {
|
||||||
margin: 24px 0 5px;
|
margin: 24px 0 5px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
@ -35,7 +35,29 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .dropDownInput {
|
.styledSelect > .valueContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.styledSelect > .valueContainer.normal {
|
||||||
|
min-height: 32px;
|
||||||
|
padding: 5px 5px 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.styledSelect > .dropDown {
|
||||||
|
z-index: var(--dropdown);
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.styledSelect > .dropDown > .dropDownInput {
|
||||||
padding: 10px 14px 8px;
|
padding: 10px 14px 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
@ -43,7 +65,7 @@
|
|||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .dropDownInput:focus {
|
.styledSelect > .dropDown > .dropDownInput:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,34 +76,38 @@
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options::-webkit-scrollbar {
|
.styledSelect > .dropDown > .options::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options::-webkit-scrollbar-track {
|
.styledSelect > .dropDown > .options::-webkit-scrollbar-track {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options::-webkit-scrollbar-thumb {
|
.styledSelect > .dropDown > .options::-webkit-scrollbar-thumb {
|
||||||
border-radius: 99px;
|
border-radius: 99px;
|
||||||
background: var(--backgroundMedium);
|
background: var(--backgroundMedium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options > .option {
|
.styledSelect > .dropDown > .options > .option {
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options > .option:last-of-type {
|
.styledSelect > .dropDown > .options > .option:last-of-type {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .options > .option.jira-select-option-is-active {
|
.styledSelect > .dropDown > .options > .option.jira-select-option-is-active {
|
||||||
background: var(--backgroundLightPrimary);
|
background: var(--backgroundLightPrimary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.styledSelect > .noOptions {
|
.styledSelect > .dropDown > .options > .option:hover {
|
||||||
|
background: var(--backgroundLightPrimary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.styledSelect > .dropDown > .noOptions {
|
||||||
padding: 5px 15px 15px;
|
padding: 5px 15px 15px;
|
||||||
color: var(--textLight);
|
color: var(--textLight);
|
||||||
}
|
}
|
||||||
|
@ -142,6 +142,15 @@ pub enum Icon {
|
|||||||
ArrowRight,
|
ArrowRight,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
impl Icon {
|
||||||
|
pub fn to_color(self) -> Option<String> {
|
||||||
|
match self {
|
||||||
|
Icon::Bug | Icon::Task | Icon::Story => Some(format!("var(--{})", self)),
|
||||||
|
_ => None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
impl std::fmt::Display for Icon {
|
impl std::fmt::Display for Icon {
|
||||||
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
||||||
let code = match self {
|
let code = match self {
|
||||||
|
@ -9,7 +9,7 @@ use crate::shared::styled_button::{StyledButton, Variant as ButtonVariant};
|
|||||||
use crate::shared::styled_input::StyledInput;
|
use crate::shared::styled_input::StyledInput;
|
||||||
use crate::shared::styled_select::StyledSelect;
|
use crate::shared::styled_select::StyledSelect;
|
||||||
use crate::shared::{drag_ev, find_issue, inner_layout, ToNode};
|
use crate::shared::{drag_ev, find_issue, inner_layout, ToNode};
|
||||||
use crate::Msg;
|
use crate::{IssueId, Msg};
|
||||||
|
|
||||||
pub fn update(msg: Msg, model: &mut crate::model::Model, orders: &mut impl Orders<Msg>) {
|
pub fn update(msg: Msg, model: &mut crate::model::Model, orders: &mut impl Orders<Msg>) {
|
||||||
match msg {
|
match msg {
|
||||||
@ -177,6 +177,7 @@ fn header() -> Node<Msg> {
|
|||||||
text: Some("Github Repo".to_string()),
|
text: Some("Github Repo".to_string()),
|
||||||
icon: Some(Icon::Github),
|
icon: Some(Icon::Github),
|
||||||
on_click: None,
|
on_click: None,
|
||||||
|
children: vec![],
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
div![
|
div![
|
||||||
@ -208,6 +209,7 @@ fn project_board_filters(model: &Model) -> Node<Msg> {
|
|||||||
text: Some("Only My Issues".to_string()),
|
text: Some("Only My Issues".to_string()),
|
||||||
icon: None,
|
icon: None,
|
||||||
on_click: Some(mouse_ev(Ev::Click, |_| Msg::ProjectToggleOnlyMy)),
|
on_click: Some(mouse_ev(Ev::Click, |_| Msg::ProjectToggleOnlyMy)),
|
||||||
|
children: vec![],
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
|
|
||||||
@ -219,6 +221,7 @@ fn project_board_filters(model: &Model) -> Node<Msg> {
|
|||||||
text: Some("Recently Updated".to_string()),
|
text: Some("Recently Updated".to_string()),
|
||||||
icon: None,
|
icon: None,
|
||||||
on_click: Some(mouse_ev(Ev::Click, |_| Msg::ProjectToggleRecentlyUpdated)),
|
on_click: Some(mouse_ev(Ev::Click, |_| Msg::ProjectToggleRecentlyUpdated)),
|
||||||
|
children: vec![],
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
|
|
||||||
@ -392,23 +395,58 @@ fn project_issue(model: &Model, project: &FullProject, issue: &Issue) -> Node<Ms
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
impl ToNode for IssueType {
|
#[derive(PartialOrd, PartialEq, Debug)]
|
||||||
fn into_node(self) -> Node<Msg> {
|
struct IssueTypeOption(IssueId, IssueType);
|
||||||
div![self.to_string()]
|
|
||||||
|
impl crate::shared::styled_select::SelectOption for IssueTypeOption {
|
||||||
|
fn into_option(self) -> Node<Msg> {
|
||||||
|
let name = self.1.to_label().to_owned();
|
||||||
|
|
||||||
|
let mut icon = crate::shared::styled_icon(self.1.into());
|
||||||
|
icon.add_class("issueTypeIcon");
|
||||||
|
|
||||||
|
div![
|
||||||
|
attrs![At::Class => "type"],
|
||||||
|
icon,
|
||||||
|
div![attrs![At::Class => "typeLabel"], name]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
fn into_value(self) -> Node<Msg> {
|
||||||
|
let issue_id = self.0;
|
||||||
|
let name = self.1.to_label().to_owned();
|
||||||
|
|
||||||
|
StyledButton {
|
||||||
|
variant: ButtonVariant::Empty,
|
||||||
|
icon_only: true,
|
||||||
|
disabled: false,
|
||||||
|
active: false,
|
||||||
|
text: None,
|
||||||
|
icon: Some(self.1.into()),
|
||||||
|
on_click: None,
|
||||||
|
children: vec![span![format!("{}-{}", name, issue_id)]],
|
||||||
|
}
|
||||||
|
.into_node()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn issue_details(_model: &Model, _issue: &Issue) -> Node<Msg> {
|
fn issue_details(_model: &Model, issue: &Issue) -> Node<Msg> {
|
||||||
|
let issue_id = issue.id;
|
||||||
let issue_type_select = StyledSelect {
|
let issue_type_select = StyledSelect {
|
||||||
on_change: mouse_ev(Ev::Click, |_| Msg::NoOp),
|
on_change: mouse_ev(Ev::Click, |_| Msg::NoOp),
|
||||||
variant: crate::shared::styled_select::Variant::Empty,
|
variant: crate::shared::styled_select::Variant::Empty,
|
||||||
width: 150,
|
dropdown_width: Some(150),
|
||||||
name: None,
|
name: Some("type".to_string()),
|
||||||
placeholder: None,
|
placeholder: None,
|
||||||
valid: false,
|
valid: true,
|
||||||
is_multi: false,
|
is_multi: false,
|
||||||
allow_clear: true,
|
allow_clear: false,
|
||||||
options: vec![IssueType::Story, IssueType::Task, IssueType::Bug],
|
options: vec![
|
||||||
|
IssueTypeOption(issue_id, IssueType::Story),
|
||||||
|
IssueTypeOption(issue_id, IssueType::Task),
|
||||||
|
IssueTypeOption(issue_id, IssueType::Bug),
|
||||||
|
],
|
||||||
|
selected: Some(IssueTypeOption(issue_id, IssueType::Story)),
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
|
|
||||||
|
@ -27,7 +27,14 @@ pub trait ToNode {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pub fn styled_icon(icon: Icon) -> Node<Msg> {
|
pub fn styled_icon(icon: Icon) -> Node<Msg> {
|
||||||
i![attrs![At::Class => format!("styledIcon {}", icon)], ""]
|
let style = icon
|
||||||
|
.to_color()
|
||||||
|
.map(|s| format!("color: {}", s))
|
||||||
|
.unwrap_or_default();
|
||||||
|
i![
|
||||||
|
attrs![At::Class => format!("styledIcon {}", icon), At::Style => style],
|
||||||
|
""
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn divider() -> Node<Msg> {
|
pub fn divider() -> Node<Msg> {
|
||||||
|
@ -51,6 +51,7 @@ fn about_tooltip_popup(model: &Model) -> Node<Msg> {
|
|||||||
icon_only: false,
|
icon_only: false,
|
||||||
icon: None,
|
icon: None,
|
||||||
on_click: None,
|
on_click: None,
|
||||||
|
children: vec![],
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
let github_repo = StyledButton {
|
let github_repo = StyledButton {
|
||||||
@ -61,6 +62,7 @@ fn about_tooltip_popup(model: &Model) -> Node<Msg> {
|
|||||||
icon_only: false,
|
icon_only: false,
|
||||||
icon: Some(Icon::Github),
|
icon: Some(Icon::Github),
|
||||||
on_click: None,
|
on_click: None,
|
||||||
|
children: vec![],
|
||||||
}
|
}
|
||||||
.into_node();
|
.into_node();
|
||||||
|
|
||||||
|
@ -34,6 +34,7 @@ pub struct StyledButton {
|
|||||||
pub text: Option<String>,
|
pub text: Option<String>,
|
||||||
pub icon: Option<Icon>,
|
pub icon: Option<Icon>,
|
||||||
pub on_click: Option<EventHandler<Msg>>,
|
pub on_click: Option<EventHandler<Msg>>,
|
||||||
|
pub children: Vec<Node<Msg>>,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl ToNode for StyledButton {
|
impl ToNode for StyledButton {
|
||||||
@ -51,6 +52,7 @@ pub fn render(values: StyledButton) -> Node<Msg> {
|
|||||||
active,
|
active,
|
||||||
icon,
|
icon,
|
||||||
on_click,
|
on_click,
|
||||||
|
children,
|
||||||
} = values;
|
} = values;
|
||||||
let mut class_list = vec!["styledButton".to_string(), variant.to_string()];
|
let mut class_list = vec!["styledButton".to_string(), variant.to_string()];
|
||||||
if icon_only {
|
if icon_only {
|
||||||
@ -72,7 +74,7 @@ pub fn render(values: StyledButton) -> Node<Msg> {
|
|||||||
Some(i) => styled_icon(i),
|
Some(i) => styled_icon(i),
|
||||||
};
|
};
|
||||||
|
|
||||||
button![
|
seed::button![
|
||||||
attrs![
|
attrs![
|
||||||
At::Class => class_list.join(" "),
|
At::Class => class_list.join(" "),
|
||||||
],
|
],
|
||||||
@ -82,6 +84,10 @@ pub fn render(values: StyledButton) -> Node<Msg> {
|
|||||||
false => vec![],
|
false => vec![],
|
||||||
},
|
},
|
||||||
icon_node,
|
icon_node,
|
||||||
span![attrs![At::Class => "text"], text.unwrap_or_default()],
|
span![
|
||||||
|
attrs![At::Class => "text"],
|
||||||
|
text.unwrap_or_default(),
|
||||||
|
children
|
||||||
|
],
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -9,24 +9,40 @@ pub enum Variant {
|
|||||||
Normal,
|
Normal,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
impl std::fmt::Display for Variant {
|
||||||
|
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
||||||
|
match self {
|
||||||
|
Variant::Empty => f.write_str("empty"),
|
||||||
|
Variant::Normal => f.write_str("normal"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub trait SelectOption {
|
||||||
|
fn into_option(self) -> Node<Msg>;
|
||||||
|
|
||||||
|
fn into_value(self) -> Node<Msg>;
|
||||||
|
}
|
||||||
|
|
||||||
pub struct StyledSelect<Child>
|
pub struct StyledSelect<Child>
|
||||||
where
|
where
|
||||||
Child: ToNode,
|
Child: SelectOption + PartialEq,
|
||||||
{
|
{
|
||||||
pub on_change: EventHandler<Msg>,
|
pub on_change: EventHandler<Msg>,
|
||||||
pub variant: Variant,
|
pub variant: Variant,
|
||||||
pub width: usize,
|
pub dropdown_width: Option<usize>,
|
||||||
pub name: Option<String>,
|
pub name: Option<String>,
|
||||||
pub placeholder: Option<String>,
|
pub placeholder: Option<String>,
|
||||||
pub valid: bool,
|
pub valid: bool,
|
||||||
pub is_multi: bool,
|
pub is_multi: bool,
|
||||||
pub allow_clear: bool,
|
pub allow_clear: bool,
|
||||||
pub options: Vec<Child>,
|
pub options: Vec<Child>,
|
||||||
|
pub selected: Option<Child>,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<Child> ToNode for StyledSelect<Child>
|
impl<Child> ToNode for StyledSelect<Child>
|
||||||
where
|
where
|
||||||
Child: ToNode,
|
Child: SelectOption + PartialEq,
|
||||||
{
|
{
|
||||||
fn into_node(self) -> Node<Msg> {
|
fn into_node(self) -> Node<Msg> {
|
||||||
render(self)
|
render(self)
|
||||||
@ -35,41 +51,67 @@ where
|
|||||||
|
|
||||||
pub fn render<Child>(values: StyledSelect<Child>) -> Node<Msg>
|
pub fn render<Child>(values: StyledSelect<Child>) -> Node<Msg>
|
||||||
where
|
where
|
||||||
Child: ToNode,
|
Child: SelectOption + PartialEq,
|
||||||
{
|
{
|
||||||
let StyledSelect {
|
let StyledSelect {
|
||||||
on_change,
|
on_change,
|
||||||
variant,
|
variant,
|
||||||
width,
|
dropdown_width,
|
||||||
name,
|
name,
|
||||||
placeholder,
|
placeholder: _,
|
||||||
valid,
|
valid,
|
||||||
is_multi,
|
is_multi: _,
|
||||||
allow_clear,
|
allow_clear,
|
||||||
options,
|
options,
|
||||||
|
selected,
|
||||||
} = values;
|
} = values;
|
||||||
|
|
||||||
let select_style = format!("width: {width}px", width = width);
|
let dropdown_style = dropdown_width
|
||||||
let mut select_class = vec!["styledSelect"];
|
.map(|n| format!("width: {}px", n))
|
||||||
|
.unwrap_or_default();
|
||||||
|
let mut select_class = vec!["styledSelect".to_string(), format!("{}", variant)];
|
||||||
if !valid {
|
if !valid {
|
||||||
select_class.push("invalid");
|
select_class.push("invalid".to_string());
|
||||||
}
|
}
|
||||||
|
|
||||||
let children: Vec<Node<Msg>> = options
|
let children: Vec<Node<Msg>> = options
|
||||||
.into_iter()
|
.into_iter()
|
||||||
.map(|child| render_option(child.into_node()))
|
.filter(|o| Some(o) != selected.as_ref())
|
||||||
|
.map(|child| render_option(child.into_option()))
|
||||||
.collect();
|
.collect();
|
||||||
|
|
||||||
|
let value = selected
|
||||||
|
.map(|m| render_value(m.into_value()))
|
||||||
|
.unwrap_or_else(|| empty![]);
|
||||||
|
|
||||||
let clear_icon = match allow_clear {
|
let clear_icon = match allow_clear {
|
||||||
true => crate::shared::styled_icon(crate::model::Icon::Close),
|
true => crate::shared::styled_icon(crate::model::Icon::Close),
|
||||||
false => empty![],
|
false => empty![],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let option_list = if children.is_empty() {
|
||||||
|
seed::div![attrs![At::Class => "noOptions"], "No results"]
|
||||||
|
} else {
|
||||||
|
seed::div![
|
||||||
|
attrs![
|
||||||
|
At::Class => "options",
|
||||||
|
],
|
||||||
|
children
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
seed::div![
|
seed::div![
|
||||||
on_change.clone(),
|
on_change.clone(),
|
||||||
attrs![At::Class => "styledSelect", At::Style => select_style],
|
attrs![At::Class => select_class.join(" ")],
|
||||||
|
div![
|
||||||
|
attrs![At::Class => format!("valueContainer {}", variant)],
|
||||||
|
value
|
||||||
|
],
|
||||||
|
div![
|
||||||
|
attrs![At::Class => "dropDown", At::Style => dropdown_style],
|
||||||
seed::input![
|
seed::input![
|
||||||
attrs![
|
attrs![
|
||||||
|
At::Name => name.unwrap_or_default(),
|
||||||
At::Class => "dropDownInput",
|
At::Class => "dropDownInput",
|
||||||
At::Type => "text"
|
At::Type => "text"
|
||||||
At::Placeholder => "Search"
|
At::Placeholder => "Search"
|
||||||
@ -78,16 +120,16 @@ where
|
|||||||
on_change,
|
on_change,
|
||||||
],
|
],
|
||||||
clear_icon,
|
clear_icon,
|
||||||
seed::div![
|
option_list
|
||||||
attrs![
|
]
|
||||||
At::Class => "options",
|
|
||||||
],
|
|
||||||
children
|
|
||||||
],
|
|
||||||
seed::div![attrs![At::Class => "noOptions"], "No results"]
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn render_option(content: Node<Msg>) -> Node<Msg> {
|
fn render_option(content: Node<Msg>) -> Node<Msg> {
|
||||||
seed::div![attrs![At::Class => "option"], content,]
|
div![attrs![At::Class => "option"], content]
|
||||||
|
}
|
||||||
|
|
||||||
|
fn render_value(mut content: Node<Msg>) -> Node<Msg> {
|
||||||
|
content.add_class("value");
|
||||||
|
content
|
||||||
}
|
}
|
||||||
|
@ -28,15 +28,12 @@ pub enum IssueType {
|
|||||||
Story,
|
Story,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl FromStr for IssueType {
|
impl IssueType {
|
||||||
type Err = String;
|
pub fn to_label(&self) -> &str {
|
||||||
|
match self {
|
||||||
fn from_str(s: &str) -> Result<Self, Self::Err> {
|
IssueType::Task => "Task",
|
||||||
match s.to_lowercase().as_str() {
|
IssueType::Bug => "Bug",
|
||||||
"task" => Ok(IssueType::Task),
|
IssueType::Story => "Story",
|
||||||
"bug" => Ok(IssueType::Bug),
|
|
||||||
"story" => Ok(IssueType::Story),
|
|
||||||
_ => Err(format!("Unknown type {:?}", s)),
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,11 +6,6 @@ import { IssueTypeIcon, Select } from '../../../../shared/components';
|
|||||||
|
|
||||||
import { Type, TypeButton, TypeLabel } from './Styles';
|
import { Type, TypeButton, TypeLabel } from './Styles';
|
||||||
|
|
||||||
const propTypes = {
|
|
||||||
issue: PropTypes.object.isRequired,
|
|
||||||
updateIssue: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
|
const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
|
||||||
<Select
|
<Select
|
||||||
variant="empty"
|
variant="empty"
|
||||||
@ -37,6 +32,9 @@ const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
ProjectBoardIssueDetailsType.propTypes = propTypes;
|
ProjectBoardIssueDetailsType.propTypes = {
|
||||||
|
issue: PropTypes.object.isRequired,
|
||||||
|
updateIssue: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
export default ProjectBoardIssueDetailsType;
|
export default ProjectBoardIssueDetailsType;
|
||||||
|
@ -96,7 +96,7 @@ export const Dropdown = styled.div`
|
|||||||
left: 0;
|
left: 0;
|
||||||
border-radius: 0 0 4px 4px;
|
border-radius: 0 0 4px 4px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
${mixin.boxShadowDropdown}
|
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
|
||||||
${props => (props.width ? `width: ${props.width}px;` : 'width: 100%;')}
|
${props => (props.width ? `width: ${props.width}px;` : 'width: 100%;')}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user