rust/r-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar safari flex

Browse Source
This commit is contained in:
Plucky
2022-10-17 09:32:20 +08:00
parent 60d9b68dc1
commit 6e1b811c07
8 changed files with 122 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/index.html vendored
View File

@@ -6,14 +6,14 @@
<!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> --> <!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> -->
<title>Dashboard</title> <title>Dashboard</title>
<link rel="preload" href="/r-dashboard-436bab45f7450582_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/r-dashboard-62a84ba8161e70ff_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/r-dashboard-436bab45f7450582.js"></head> <link rel="modulepreload" href="/r-dashboard-62a84ba8161e70ff.js"></head>
<body> <body>
<div id="main"></div> <div id="main"></div>
<div class="lg:hidden bg-black"></div> <div class="lg:hidden bg-black"></div>
<script type="module">import init from '/r-dashboard-436bab45f7450582.js';init('/r-dashboard-436bab45f7450582_bg.wasm');</script><script>(function () { <script type="module">import init from '/r-dashboard-62a84ba8161e70ff.js';init('/r-dashboard-62a84ba8161e70ff_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

12
dist/r-dashboard-436bab45f7450582.js → dist/r-dashboard-62a84ba8161e70ff.js vendored
View File

@@ -1026,23 +1026,23 @@ imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
imports.wbg.__wbindgen_throw = function(arg0, arg1) { imports.wbg.__wbindgen_throw = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1)); throw new Error(getStringFromWasm0(arg0, arg1));
}; };
imports.wbg.__wbindgen_closure_wrapper6803 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper6804 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18); const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10414 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10415 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21); const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10416 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10417 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24); const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10969 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10970 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27); const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper11818 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper11819 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30); const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@@ -1080,7 +1080,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('r-dashboard-436bab45f7450582_bg.wasm', import.meta.url); input = new URL('r-dashboard-62a84ba8161e70ff_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/r-dashboard-436bab45f7450582_bg.wasm → dist/r-dashboard-62a84ba8161e70ff_bg.wasm vendored
View File

Binary file not shown.

4
dist/style.css vendored
View File

@@ -1035,10 +1035,6 @@ select{
width: 1.25rem; width: 1.25rem;
} }
.w-64{
width: 16rem;
}
.w-12{ .w-12{
width: 3rem; width: 3rem;
} }

2
readme.md
View File

@@ -1,4 +1,4 @@
# v-dashboard ui wasm # dashboard ui wasm
by rust + dioxus + tailwindcss by rust + dioxus + tailwindcss

15
src/components/header.rs
View File

@@ -4,8 +4,6 @@ use tracing::info;
use super::sidebar::IS_SIDEBAR_OPEN; use super::sidebar::IS_SIDEBAR_OPEN;
pub fn view(cx: Scope)->Element{ pub fn view(cx: Scope)->Element{
//const dropdownOpen = ref(false);
//const { isOpen } = useSidebar();
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN); let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
let dropdown_open = use_state(&cx, || true); let dropdown_open = use_state(&cx, || true);
@@ -66,8 +64,6 @@ pub fn view(cx: Scope)->Element{
} }
div{ div{
class:"fixed inset-0 z-10 w-full h-full",// class:"fixed inset-0 z-10 w-full h-full",//
// v-show: "dropdownOpen",
//@click=\"dropdownOpen = false\"
// 点击屏幕关闭菜单 // 点击屏幕关闭菜单
hidden: "{dropdown_open}", hidden: "{dropdown_open}",
onclick: move |_| { onclick: move |_| {
@@ -76,18 +72,8 @@ pub fn view(cx: Scope)->Element{
} }
// <transition
// enter-active-class="transition duration-150 ease-out transform"
// enter-from-class="scale-95 opacity-0"
// enter-to-class="scale-100 opacity-100"
// leave-active-class="transition duration-150 ease-in transform"
// leave-from-class="scale-100 opacity-100"
// leave-to-class="scale-95 opacity-0"
// >
div{ div{
class:"absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl {dropdown_class}", class:"absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl {dropdown_class}",
// v-show: "dropdownOpen",
hidden: "{dropdown_open}", hidden: "{dropdown_open}",
//onmouseout onmouseover //onmouseout onmouseover
onmouseout: move |_| { onmouseout: move |_| {
@@ -115,7 +101,6 @@ pub fn view(cx: Scope)->Element{
} }
} }
// </transition>
} }
} }

223
src/components/sidebar.rs
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-11 18:53:17 * @Date: 2022-10-11 18:53:17
* @LastEditTime: 2022-10-17 00:51:09 * @LastEditTime: 2022-10-17 09:22:09
* @Description: * @Description:
*/ */
@@ -27,130 +27,128 @@ pub fn view(cx:Scope)->Element{
}; };
cx.render(rsx!( cx.render(rsx!(
// class: format_args!("flex {} bg-gray-900 ",if *is_sidebar_open { "" } else { "hidden lg:block" }),
// mask
div{ div{
class: format_args!("flex {} lg:block bg-gray-900 ",if *is_sidebar_open { "block" } else { "hidden" }), onclick: move |_| {
// mask set_sidebar_open(false);
div{ },
onclick: move |_| { class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
set_sidebar_open(false); // hidden: format_args!("{}",!is_sidebar_open),
},
// class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden",
class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
// hidden: format_args!("{}",!is_sidebar_open),
} }
div{
// :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" // sidebar
// class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0", div{
class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}", class: format_args!("fixed inset-y-0 left-0 z-30 w-48 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}",
if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in" }), if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in" }),
// title // title
div {
class: "flex items-center justify-center mt-8 ",
div { div {
class: "flex items-center justify-center mt-8 ", class: "flex items-center",
div { icons::icon_1 {}
class: "flex items-center", span {
icons::icon_1 {} class: "mx-2 text-2xl font-semibold text-white",
span { "Dashboard"
class: "mx-2 text-2xl font-semibold text-white",
"Dashboard"
}
} }
} }
// menu }
nav{ // menu
class: "mt-10 ",// nav{
// router-link class: "mt-10 ",//
Link{ // router-link
class: highlight_class("dashboard"), Link{
//to="/dashboard" class: highlight_class("dashboard"),
to: "/dashboard", //to="/dashboard"
icons::icon_2 {} to: "/dashboard",
span{class:"mx-4","Dashboard"} icons::icon_2 {}
} span{class:"mx-4","Dashboard"}
Link{ }
class: highlight_class("ui-elements"), Link{
to: "/ui-elements", class: highlight_class("ui-elements"),
icons::icon_3 {} to: "/ui-elements",
span{class:"mx-4","UI Elements"} icons::icon_3 {}
} span{class:"mx-4","UI Elements"}
Link{ }
class: highlight_class("tables"), Link{
to: "/tables", class: highlight_class("tables"),
icons::icon_4 {} to: "/tables",
span{class:"mx-4","Tables"} icons::icon_4 {}
} span{class:"mx-4","Tables"}
Link{ }
class: highlight_class("forms"), Link{
to: "/forms", class: highlight_class("forms"),
icons::icon_5 {} to: "/forms",
span{class:"mx-4","Forms"} icons::icon_5 {}
} span{class:"mx-4","Forms"}
Link{ }
class: highlight_class("cards"), Link{
to: "/cards", class: highlight_class("cards"),
icons::icon_6 {} to: "/cards",
span{class:"mx-4","Cards"} icons::icon_6 {}
} span{class:"mx-4","Cards"}
Link{ }
class: highlight_class("modal"), Link{
to: "/modal", class: highlight_class("modal"),
icons::icon_7 {} to: "/modal",
span{class:"mx-4","Modal"} icons::icon_7 {}
} span{class:"mx-4","Modal"}
}
Link{
class: highlight_class("blank"), Link{
to: "/blank", class: highlight_class("blank"),
icons::icon_8 {} to: "/blank",
span{class:"mx-4","Blank"} icons::icon_8 {}
} span{class:"mx-4","Blank"}
}
// ul{li{}}
// ul{li{}}
div{
div{ div{
div{ class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer",
class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer", onclick: move |_| {
onclick: move |_| { let mut is_menu_open = is_menu_open.write();
let mut is_menu_open = is_menu_open.write(); is_menu_open[0] = !is_menu_open[0];
is_menu_open[0] = !is_menu_open[0]; },
},
div { div {
class: "flex items-center space-x-4", class: "flex items-center space-x-4",
icons::icon_2 {} icons::icon_2 {}
span { span {
"Test" "Test"
} }
div{ div{
class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} , class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} ,
icons::icon_up_down {} icons::icon_up_down {}
}
} }
} }
div{
class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
Link{
class: highlight_class("blank"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
Link{
class: highlight_class("blank2"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
}
} }
// end
div{
class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
Link{
class: highlight_class("blank"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
Link{
class: highlight_class("blank2"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
}
} }
// end
} }
} }
)) ))
@@ -304,7 +302,8 @@ mod icons{
pub fn icon_up_down(cx:Scope)->Element{ pub fn icon_up_down(cx:Scope)->Element{
cx.render(html!( cx.render(html!(
<svg class="w-3 h-3" <svg class="w-3 h-3"
view_box="0 0 12 12"> fill="currentColor"
view_box="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path> <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
</svg> </svg>
)) ))

3
src/views/dashboard.rs
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-14 12:31:43 * @Date: 2022-10-14 12:31:43
* @LastEditTime: 2022-10-14 23:48:22 * @LastEditTime: 2022-10-17 09:02:01
* @Description: * @Description:
*/ */
@@ -142,7 +142,6 @@ pub fn view(cx: Scope)->Element{
// 表格数据 // 表格数据
tbody { tbody {
class: "bg-white", class: "bg-white",
// "<tr v-for=\"(u, index) in users\" :key=\"index\">"
users.iter().map(|u|{ users.iter().map(|u|{
rsx!{ UserList{user:u}} rsx!{ UserList{user:u}}
}) })