public inbox for pmg-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pmg-devel] [PATCH pmg-gui/pmg-yew-quarantine-gui 0/2] quarantine: allow switching between mobile and desktop ui
@ 2025-09-23 13:20 Dominik Csapak
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view Dominik Csapak
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu Dominik Csapak
  0 siblings, 2 replies; 5+ messages in thread
From: Dominik Csapak @ 2025-09-23 13:20 UTC (permalink / raw)
  To: pmg-devel

by introducing an option in the desktop gui in the drop down menu on the
top right, and adding such a menu on the mobile view too (which also
adds a logout and language selection option)

pmg-gui:

Dominik Csapak (1):
  quarantine view: add option to switch to mobile view

 js/QuarantineView.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)


pmg-yew-quarantine-gui:

Dominik Csapak (1):
  spam list: add option menu

 src/page_spam_list.rs | 81 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 3 deletions(-)


Summary over all repositories:
  2 files changed, 92 insertions(+), 3 deletions(-)

-- 
Generated by git-murpp 0.8.1


_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel


^ permalink raw reply	[flat|nested] 5+ messages in thread

* [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view
  2025-09-23 13:20 [pmg-devel] [PATCH pmg-gui/pmg-yew-quarantine-gui 0/2] quarantine: allow switching between mobile and desktop ui Dominik Csapak
@ 2025-09-23 13:20 ` Dominik Csapak
  2025-09-23 15:21   ` Thomas Lamprecht
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu Dominik Csapak
  1 sibling, 1 reply; 5+ messages in thread
From: Dominik Csapak @ 2025-09-23 13:20 UTC (permalink / raw)
  To: pmg-devel

by appending '?mobile=1' to the url

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/QuarantineView.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/js/QuarantineView.js b/js/QuarantineView.js
index 496ed38..6a740b0 100644
--- a/js/QuarantineView.js
+++ b/js/QuarantineView.js
@@ -161,6 +161,12 @@ Ext.define('PMG.QuarantineView', {
             PMG.Utils.doQuarantineAction(qa.action, qa.cselect);
         },
 
+        switchToMobile: function () {
+            let params = new URLSearchParams(document.location.search);
+            params.set('mobile', '1');
+            document.location.search = params.toString();
+        },
+
         control: {
             '[reference=logoutButton]': {
                 click: 'logout',
@@ -171,6 +177,9 @@ Ext.define('PMG.QuarantineView', {
             '[reference=themeButton]': {
                 click: 'changeTheme',
             },
+            '[reference=mobileButton]': {
+                click: 'switchToMobile',
+            },
         },
 
         init: function (view) {
@@ -263,6 +272,11 @@ Ext.define('PMG.QuarantineView', {
                             text: gettext('Language'),
                             reference: 'languageButton',
                         },
+                        {
+                            iconCls: 'fa fa-mobile',
+                            text: gettext('Switch to Mobile View'),
+                            reference: 'mobileButton',
+                        },
                         '-',
                         {
                             reference: 'logoutButton',
-- 
2.47.3



_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel


^ permalink raw reply	[flat|nested] 5+ messages in thread

* [pmg-devel] [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu
  2025-09-23 13:20 [pmg-devel] [PATCH pmg-gui/pmg-yew-quarantine-gui 0/2] quarantine: allow switching between mobile and desktop ui Dominik Csapak
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view Dominik Csapak
@ 2025-09-23 13:20 ` Dominik Csapak
  2025-09-23 14:46   ` [pmg-devel] applied: " Thomas Lamprecht
  1 sibling, 1 reply; 5+ messages in thread
From: Dominik Csapak @ 2025-09-23 13:20 UTC (permalink / raw)
  To: pmg-devel

this contains options to
* change the language
* switch to the desktop view (by appending mobile=0 to the url)
* logout

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/page_spam_list.rs | 81 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 3 deletions(-)

diff --git a/src/page_spam_list.rs b/src/page_spam_list.rs
index bdea7a8..58d2541 100644
--- a/src/page_spam_list.rs
+++ b/src/page_spam_list.rs
@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
 use anyhow::Error;
+use gloo_utils::document;
 use js_sys::Date;
 use wasm_bindgen::JsValue;
 
@@ -9,11 +10,12 @@ use yew::prelude::*;
 use yew::virtual_dom::{VComp, VNode};
 use yew_router::scope_ext::RouterScopeExt;
 
-use pwt::css::{ColorScheme, FlexFit, JustifyContent};
+use pwt::css::{AlignItems, ColorScheme, FlexFit, JustifyContent};
 use pwt::prelude::*;
 use pwt::touch::{ApplicationBar, Fab, Scaffold};
 use pwt::widget::form::{Field, Form, FormContext, InputType};
-use pwt::widget::{Button, Column, Dialog, Image, Row, ThemeModeSelector};
+use pwt::widget::menu::{Menu, MenuButton, MenuItem};
+use pwt::widget::{Button, Column, Dialog, Image, LanguageSelector, Row, ThemeModeSelector};
 
 use proxmox_subscription::{SubscriptionInfo, SubscriptionStatus};
 use proxmox_yew_comp::http_get;
@@ -40,6 +42,7 @@ pub enum ViewState {
     Normal,
     ShowDialog,
     ShowSubscriptionNotice,
+    ShowLanguageSelect,
 }
 pub struct PmgPageSpamList {
     state: ViewState,
@@ -56,6 +59,9 @@ pub enum Msg {
     CloseDialog,
     ApplyDate,
     SubscriptionResult(Result<SubscriptionInfo, Error>),
+    SwitchToDesktop,
+    ShowLanguageSelect,
+    Logout,
 }
 
 fn epoch_to_date_string(epoch: f64) -> String {
@@ -177,6 +183,27 @@ impl Component for PmgPageSpamList {
                 self.subscription_result = Some(valid);
                 true
             }
+            Msg::SwitchToDesktop => {
+                let location = document().location().unwrap();
+                let param = match location.search() {
+                    Ok(search) => web_sys::UrlSearchParams::new_with_str(&search).unwrap(),
+                    Err(_) => web_sys::UrlSearchParams::new().unwrap(),
+                };
+                param.set("mobile", "0");
+                let search: String = param.to_string().into();
+                if let Err(err) = location.set_search(&search) {
+                    log::error!("could not set location parameter: {err:?}");
+                }
+                false
+            }
+            Msg::ShowLanguageSelect => {
+                self.state = ViewState::ShowLanguageSelect;
+                true
+            }
+            Msg::Logout => {
+                proxmox_yew_comp::http_clear_auth();
+                true
+            }
         }
     }
 
@@ -209,6 +236,18 @@ impl Component for PmgPageSpamList {
                     )
                     .on_close(ctx.link().callback(|_| Msg::CloseDialog)),
             ),
+            ViewState::ShowLanguageSelect => Some(
+                Dialog::new(tr!("Select Language"))
+                    .with_child(
+                        Row::new()
+                            .class(AlignItems::Center)
+                            .padding(4)
+                            .gap(2)
+                            .with_child(tr!("Language"))
+                            .with_child(LanguageSelector::new()),
+                    )
+                    .on_close(ctx.link().callback(|_| Msg::CloseDialog)),
+            ),
         };
 
         let fab = Fab::new("fa fa-calendar").on_activate(ctx.link().callback(|_| Msg::ShowDialog));
@@ -240,7 +279,43 @@ impl Component for PmgPageSpamList {
                             .class("pwt-navbar-brand"),
                     )
                     .title("Mail")
-                    .with_action(ThemeModeSelector::new()),
+                    .with_action(
+                        Row::new()
+                            .gap(1)
+                            .with_child(ThemeModeSelector::new())
+                            .with_child(
+                                MenuButton::new("")
+                                    .class("circle")
+                                    .icon_class("fa fa-bars")
+                                    .menu(
+                                        Menu::new()
+                                            .with_item(
+                                                MenuItem::new(tr!("Language"))
+                                                    .icon_class("fa fa-language")
+                                                    .on_select(
+                                                        ctx.link()
+                                                            .callback(|_| Msg::ShowLanguageSelect),
+                                                    ),
+                                            )
+                                            .with_item(
+                                                MenuItem::new(tr!("Switch to Desktop View"))
+                                                    .icon_class("fa fa-desktop")
+                                                    .on_select(
+                                                        ctx.link()
+                                                            .callback(|_| Msg::SwitchToDesktop),
+                                                    ),
+                                            )
+                                            .with_separator()
+                                            .with_item(
+                                                MenuItem::new(tr!("Logout"))
+                                                    .icon_class("fa fa-sign-out")
+                                                    .on_select(
+                                                        ctx.link().callback(|_| Msg::Logout),
+                                                    ),
+                                            ),
+                                    ),
+                            ),
+                    ),
             )
             .body(
                 Column::new()
-- 
2.47.3



_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel


^ permalink raw reply	[flat|nested] 5+ messages in thread

* [pmg-devel] applied: [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu Dominik Csapak
@ 2025-09-23 14:46   ` Thomas Lamprecht
  0 siblings, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2025-09-23 14:46 UTC (permalink / raw)
  To: pmg-devel, Dominik Csapak

On Tue, 23 Sep 2025 15:20:08 +0200, Dominik Csapak wrote:
> this contains options to
> * change the language
> * switch to the desktop view (by appending mobile=0 to the url)
> * logout
> 
> 

Applied, thanks!

One thing to improve would be to navigate to the spam quarantine list in the
ExtJS UI if the route in the hash is empty, as otherwise one sees a blank panel
when clicking the link here. While we could also set the hash to
'#pmgSpamQuarantine' here in the Yew UI, IMO it would be a slightly better fit
to adapt the ExtJS one, to avoid coupling between them.

[1/1] spam list: add option menu
      commit: c5ce8a49c8f266df103b44dd255345fbda0fa499


_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel


^ permalink raw reply	[flat|nested] 5+ messages in thread

* Re: [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view
  2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view Dominik Csapak
@ 2025-09-23 15:21   ` Thomas Lamprecht
  0 siblings, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2025-09-23 15:21 UTC (permalink / raw)
  To: pmg-devel, Dominik Csapak

On Tue, 23 Sep 2025 15:20:07 +0200, Dominik Csapak wrote:
> by appending '?mobile=1' to the url
> 
> 

Applied, thanks!

Also made a follow-up to listen to the 'unmatchedroute' event [0] and redirect
that to the default 'pmgSpamQuarantine' route, which addresses the comment I
made on the yew patch of this series.

[0]: https://docs.sencha.com/extjs/7.0.0/classic/Ext.app.ViewController.html#cfg-routes

[1/1] quarantine view: add option to switch to mobile view
      commit: 92901e9120f79522b9d4115b49a0527df08b9531


_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel


^ permalink raw reply	[flat|nested] 5+ messages in thread

end of thread, other threads:[~2025-09-23 15:24 UTC | newest]

Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-09-23 13:20 [pmg-devel] [PATCH pmg-gui/pmg-yew-quarantine-gui 0/2] quarantine: allow switching between mobile and desktop ui Dominik Csapak
2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-gui 1/1] quarantine view: add option to switch to mobile view Dominik Csapak
2025-09-23 15:21   ` Thomas Lamprecht
2025-09-23 13:20 ` [pmg-devel] [PATCH pmg-yew-quarantine-gui 1/1] spam list: add option menu Dominik Csapak
2025-09-23 14:46   ` [pmg-devel] applied: " Thomas Lamprecht

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal