Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

♻️ Use of the SCSS variables to compute the width of the inner panels

Browse Source
This commit is contained in:
Adrien
2024-06-08 13:04:17 +02:00
parent 1ad4d444fb
commit d566a4927f
8 changed files with 132 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/components/_panel.scss
View File

@@ -1,6 +1,6 @@
@import "../base.scss";
$panel-aspect-ratio: 1/1.618;
$aspect-ratio: 0.618; // 1/1.618;
@mixin panel($padding-v: 2%, $padding-h: 2%) {
padding: $padding-v $padding-h;

2
src/ui/components/icons.rs
View File

@@ -7,7 +7,7 @@ use dioxus_free_icons::{Icon, IconShape};
turf::style_sheet!("src/ui/components/icons.scss");
include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
include!(concat!(env!("OUT_DIR"), "/style_tokens.rs"));
use style::{COLOR_PRIMARY_100, COLOR_TERNARY_100};

2
src/ui/components/login.rs
View File

@@ -19,7 +19,7 @@ use super::{
text_input::{PasswordInputState, PasswordTextInput, TextInput, TextInputState},
};
include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
include!(concat!(env!("OUT_DIR"), "/style_tokens.rs"));
use style::{
COLOR_PRIMARY_100, COLOR_PRIMARY_110, COLOR_PRIMARY_120, COLOR_PRIMARY_140, COLOR_PRIMARY_150,

2
src/ui/components/modal.rs
View File

@@ -9,7 +9,7 @@ use crate::infrastructure::services::random_svg_generators::{
generate_random_svg_avatar, AvatarConfig, AvatarFeeling,
};
include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
include!(concat!(env!("OUT_DIR"), "/style_tokens.rs"));
use style::{COLOR_CRITICAL_100, COLOR_SUCCESS_100, COLOR_WARNING_100};

18
src/ui/layouts/conversations.rs
View File

@@ -3,15 +3,18 @@ use std::rc::Rc;
use dioxus::prelude::*;
use futures::join;
use crate::ui::components::{
chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
wallpaper::Wallpaper,
};
turf::style_sheet!("src/ui/layouts/conversations.scss");
use crate::ui::components::chat_panel::ChatPanel;
use crate::ui::components::conversations::Conversations as ConversationsComponent;
use crate::ui::components::wallpaper::Wallpaper;
include!(concat!(env!("OUT_DIR"), "/style_component_panel.rs"));
include!(concat!(env!("OUT_DIR"), "/style_layout_conversations.rs"));
// TODO: Get from SCSS
const WIDGET_HEIGHT_RATIO: f64 = 0.95;
const ASPECT_RATIO: f64 = 1.0 / 1.618;
use conversations::INNER_PANEL_HEIGHT_RATIO;
use panel::ASPECT_RATIO;
async fn on_carousel_scroll(
parent_div: &Rc<MountedData>,
@@ -229,14 +232,13 @@ pub fn Conversations() -> Element {
if let Ok(size) = data.get_border_box_size() {
if let Some(size) = size.first() {
// Use LayoutBig if the layout can contain 2 panels side by side
let component_width = size.height * WIDGET_HEIGHT_RATIO * ASPECT_RATIO;
let component_width = size.height * INNER_PANEL_HEIGHT_RATIO * ASPECT_RATIO;
let breakpoint_width = component_width * 2_f64;
use_big_layout = size.width > breakpoint_width;
}
}
layout.set(rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }});
},
{layout}

14
src/ui/layouts/conversations.scss
View File

@@ -17,11 +17,13 @@
scroll-snap-align: start;
}
$inner-panel-height-ratio: 0.95;
.conversations-view {
$height: 100vh;
$width: 100vw;
$conversations-panel-height: calc($height * 0.95);
$conversations-panel-width: calc($conversations-panel-height * $panel-aspect-ratio);
$conversations-panel-height: calc($height * $inner-panel-height-ratio);
$conversations-panel-width: calc($conversations-panel-height * $aspect-ratio);
$gap: 1%;
$content-height: 95%;
$ratio: 2;
@@ -63,11 +65,11 @@
height: 100%;
// TODO: Is aspect-ratio the best criteria to defined that inner shall take all the available space ?
@media (max-aspect-ratio: $panel-aspect-ratio) {
@media (max-aspect-ratio: $aspect-ratio) {
width: 100%;
}
@media (min-aspect-ratio: $panel-aspect-ratio) {
aspect-ratio: $panel-aspect-ratio;
@media (min-aspect-ratio: $aspect-ratio) {
aspect-ratio: $aspect-ratio;
}
}
}
@@ -105,7 +107,7 @@
&__conversations-panel {
height: $content-height;
aspect-ratio: $panel-aspect-ratio;
aspect-ratio: $aspect-ratio;
}
&__conversation-panels {

8
src/ui/layouts/login.scss
View File

@@ -18,14 +18,14 @@
align-items: safe center;
&__login-panel {
@media (max-aspect-ratio: $panel-aspect-ratio) {
@media (max-aspect-ratio: $aspect-ratio) {
width: 95%;
}
@media (min-aspect-ratio: $panel-aspect-ratio) {
@media (min-aspect-ratio: $aspect-ratio) {
height: 100%;
}
aspect-ratio: $panel-aspect-ratio;
aspect-ratio: $aspect-ratio;
max-height: $panel-max-height;
flex-shrink: 0;
@@ -36,6 +36,6 @@
justify-content: center;
// Variables inherited by children
--aspect-ratio: #{$panel-aspect-ratio};
--aspect-ratio: #{$aspect-ratio};
}
}