Skip to content

Commit

Permalink
UI/block create org (#187)
Browse files Browse the repository at this point in the history 
* move IconButton for create org to a different file, draft

* Create dao button added

* add new element in dashboard and explore

* is_dao_owner restored

* manage is_chain_available and is_dao_owner ok

* update translation method
  • Loading branch information
@ail3ngrimaldi
ail3ngrimaldi authored Jan 6, 2025
1 parent 00efce0 commit 0c73b2c
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 86 deletions.
51 changes: 50 additions & 1 deletion public/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4060,4 +4060,53 @@ small.summary__item__value {
100% {
background-color: var(--fill-100);
}
}
}

.create-dao-button-wrapper {
position: relative;
}

.create-dao-tooltip-container {
position: absolute;
top: 100%;
left: 40%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}

.create-dao-tooltip {
visibility: hidden;
opacity: 0;
width: fit-content;
background-color: var(--background-modal);
color: var(--text-white);
text-align: center;
border-radius: 6px;
padding: 8px;
transition: opacity 0.3s, visibility 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 10px;
}

.create-dao-tooltip--visible {
visibility: visible;
opacity: 1;
}

.create-dao-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--background-modal) transparent;
}

.create-dao-tooltip,
.create-dao-tooltip--visible {
@extend %text-xs-font-regular;
}
75 changes: 75 additions & 0 deletions src/components/molecules/create_dao_button.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
use dioxus::prelude::*;
use dioxus_i18n::t;
use crate::{
components::atoms::{dropdown::ElementSize, IconButton, Icon, AddPlus},
hooks::{use_notification::use_notification, use_our_navigator::use_our_navigator, use_timestamp::use_timestamp, use_accounts::use_accounts},
middlewares::{is_chain_available::is_chain_available, is_dao_owner::is_dao_owner},
};

#[derive(PartialEq, Props, Clone)]
pub struct CreateDaoButtonProps {
#[props(default = "button--avatar desktop".to_string())]
pub class: String,
}

#[component]
pub fn CreateDaoButton(props: CreateDaoButtonProps) -> Element {
let nav = use_our_navigator();
let notification = use_notification();
let timestamp = use_timestamp();
let accounts = use_accounts();
let mut show_tooltip = use_signal(|| false);

let handle_click = move |_| {
nav.push(
vec![
Box::new(is_dao_owner(accounts.clone(), notification.clone())),
],
"/onboarding",
);
};

let handle_mouse_enter = move |_| {
let chain_available = is_chain_available(timestamp.clone(), notification.clone())();
let is_owner = is_dao_owner(accounts.clone(), notification.clone())();

if chain_available.is_ok() && is_owner.is_err() {
show_tooltip.set(true);
}
};

let handle_mouse_leave = move |_| {
show_tooltip.set(false);
};

rsx! {
div {
class: "create-dao-button-wrapper",
onmouseenter: handle_mouse_enter,
onmouseleave: handle_mouse_leave,
IconButton {
class: "{props.class}",
size: ElementSize::Medium,
on_click: handle_click,
body: rsx! {
Icon {
icon: AddPlus,
height: 26,
width: 26,
stroke_width: 1.5,
fill: "var(--fill-00)"
}
}
}
div {
class: "create-dao-tooltip-container",
div {
class: "create-dao-tooltip",
class: if (*show_tooltip)() { "create-dao-tooltip--visible" } else { "" },
{ t!("warnings-middleware-has_dao") },
}
}
}
}
}

2 changes: 2 additions & 0 deletions src/components/molecules/mod.rs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
pub mod action_request_list;
pub mod actions;
pub mod create_dao_button;
pub mod initiative;
pub mod onboarding;
pub mod paginator;
Expand All @@ -9,6 +10,7 @@ pub use action_request_list::ActionRequestList;
pub use actions::*;
pub use initiative::*;
pub use onboarding::*;
pub use create_dao_button::CreateDaoButton;
pub use paginator::Paginator;
pub use sidebar::Sidebar;
pub use tabs::Tabs;
1 change: 0 additions & 1 deletion src/middlewares/is_dao_owner.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ pub fn is_dao_owner(
move || {
if accounts.is_active_account_an_admin() {
warn!("User is DAO owner");
notification.handle_warning(&t!("warnings-title"), &t!("warnings-middleware-has_dao"));
Err("User is DAO owner")
} else {
Ok(())
Expand Down
45 changes: 3 additions & 42 deletions src/pages/dashboard.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ use crate::{
ArrowRight, Avatar, Badge, CardSkeleton, Compass, DynamicText, Icon, IconButton, SearchInput, Star,
Tab, UserAdd, UserGroup,
},
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator},
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator, create_dao_button::CreateDaoButton},
},
hooks::{
use_accounts::use_accounts, use_communities::{use_communities, CommunitiesError},
Expand Down Expand Up @@ -105,29 +105,7 @@ pub fn Dashboard() -> Element {
on_keypress: move |_| {},
on_click: move |_| {}
}
IconButton {
class: "button--avatar desktop",
size: ElementSize::Medium,
body: rsx! {
Icon {
icon: AddPlus,
height: 26,
width: 26,
stroke_width: 1.5,
fill: "var(--fill-00)"
}
},
on_click: move |_| {
tooltip.hide();
nav.push(
vec![
Box::new(is_chain_available(timestamp, notification)),
Box::new(is_dao_owner(accounts, notification)),
],
"/onboarding",
);
}
}
CreateDaoButton {},
}
}
div { class: "dashboard__communities",
Expand Down Expand Up @@ -283,24 +261,7 @@ pub fn Dashboard() -> Element {
}
}
div { class: "card__cta",
IconButton {
class: "button--avatar",
size: ElementSize::Big,
body: rsx!(
Icon { icon : AddPlus, height : 32, width : 32, stroke_width : 1.5, fill :
"var(--fill-00)" }
),
on_click: move |_| {
tooltip.hide();
nav.push(
vec![
Box::new(is_chain_available(timestamp, notification)),
Box::new(is_dao_owner(accounts, notification)),
],
"/onboarding",
);
}
}
CreateDaoButton {},
}
}
}
Expand Down
45 changes: 3 additions & 42 deletions src/pages/explore.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ use crate::{
ArrowRight, Avatar, Badge, CardSkeleton, DynamicText, Icon, IconButton, SearchInput,
Star, Tab, UserAdd, UserGroup,
},
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator},
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator, create_dao_button::CreateDaoButton},
},
hooks::{

Expand Down Expand Up @@ -90,29 +90,7 @@ pub fn Explore() -> Element {
on_keypress: move |_| {},
on_click: move |_| {}
}
IconButton {
class: "button--avatar desktop",
size: ElementSize::Medium,
body: rsx! {
Icon {
icon: AddPlus,
height: 26,
width: 26,
stroke_width: 1.5,
fill: "var(--fill-00)"
}
},
on_click: move |_| {
tooltip.hide();
nav.push(
vec![
Box::new(is_chain_available(timestamp, notification)),
Box::new(is_dao_owner(accounts, notification)),
],
"/onboarding",
);
}
}
CreateDaoButton {},
}
}
div { class: "dashboard__communities",
Expand Down Expand Up @@ -238,24 +216,7 @@ pub fn Explore() -> Element {
}
}
div { class: "card__cta",
IconButton {
class: "button--avatar",
size: ElementSize::Big,
body: rsx!(
Icon { icon : AddPlus, height : 32, width : 32, stroke_width : 1.5, fill :
"var(--fill-00)" }
),
on_click: move |_| {
tooltip.hide();
nav.push(
vec![
Box::new(is_chain_available(timestamp, notification)),
Box::new(is_dao_owner(accounts, notification)),
],
"/onboarding",
);
}
}
CreateDaoButton {},
}
}
}
Expand Down

0 comments on commit 0c73b2c

Please sign in to comment.