WIP: toolbox pop from buttom on mobile devices

web_assets/javascript/ChuanhuChat.js

@@ -30,6 +30,7 @@ var chuanhuPopup = null;
 var settingBox = null;
 var trainingBox = null;
 var popupWrapper = null;
+var chuanhuHeader = null;
 
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
@@ -73,6 +74,7 @@ function initialize() {
     settingBox = gradioApp().querySelector('#chuanhu-setting');
     trainingBox = gradioApp().querySelector('#chuanhu-training');
     popupWrapper = gradioApp().querySelector('#popup-wrapper');
+    chuanhuHeader = gradioApp().querySelector('#chuanhu-header');
 
 
     if (loginUserForm) {

web_assets/javascript/webui.js

@@ -120,9 +120,11 @@ function toolboxClick() {
     var toolbox = gradioApp().querySelector('#toolbox-area');
     if (toolbox.classList.contains('showSide')) {
         toolbox.classList.remove('showSide');
+        chuanhuHeader.classList.remove('under-box');
         closeSide();
     } else {
         toolbox.classList.add('showSide');
+        chuanhuHeader.classList.add('under-box');
         showSideMask();
     }
 }

web_assets/stylesheet/ChuanhuChat.css

@@ -11,6 +11,7 @@
     --switch-checkbox-color-dark: #515151;
 
     --menu-width: 300px;
+    --menu-background-fill: white;
     --toolbox-width: 280px;
 }
 
@@ -120,6 +121,7 @@ body.popup-open {
     white-space: nowrap;
 }
 
+/* masks */
 .chuanhu-mask, .chuanhu-side-mask {
     background-color: gray;
     transition: opacity 0.3s ease;
@@ -134,9 +136,16 @@ body.popup-open {
 .chuanhu-mask {
     opacity: 0.5;
 }
+
 .chuanhu-side-mask {
     opacity: 0;
 }
+.chuanhu-top-mask {
+    opacity: 0;
+    z-index: 10001;
+}
+
+
 #popup-wrapper {
     display: none;
     position: fixed;
@@ -169,13 +178,38 @@ body.popup-open {
 }
 
 
+#chuanhu-header {
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    /* padding: 6px 64px; */
+    background: var(--background-fill-primary);
+
+    @media screen and (max-width: 639px) {
+        padding: 6px 24px;
+    }
+    @media screen and (min-width: 640px) {
+        padding: 6px 48px;
+    }
+    /* @media screen and (min-width: 1024px) {
+        padding: 6px 96px;
+    } */
+}
+#chuanhu-header.under-box {
+    z-index: 995 !important;
+}
 
 #chuanhu-body {
     flex-wrap: nowrap;
     gap: 0;
     overflow: hidden;
     display: inline-flex;
+    /* margin-top: 54px; */
     /* height: calc(100vh - 72px); */
+    position: absolute;
+    top: 48px;
 }
 
 /* default invisible */
@@ -191,6 +225,10 @@ body.popup-open {
     overflow: hidden;
     flex-wrap: nowrap;
 }
+#menu-area {
+    border-radius: 0;
+    background: var(--menu-background-fill);
+}
 #menu-area > div {
     width: var(--menu-width);
 }
@@ -224,7 +262,7 @@ body.popup-open {
 
 @media screen and (max-width: 767px) {
     #menu-area {
-        position: absolute;
+        position: fixed;
         transition: left 0.3s ease, visibility 0.1s ease;
         left: calc(0px - var(--menu-width));
         z-index: 9999;
@@ -232,17 +270,28 @@ body.popup-open {
     }
     #menu-area.showSide {
         left: 0;
-        margin-left: -16px;
+        /* margin-left: -16px; */
     }
+
     #toolbox-area {
-        position: absolute;
-        transition: right 0.3s ease, visibility 0.1s ease;
-        right: calc(0px - var(--toolbox-width));
-        z-index: 9999;
+        position: fixed;
+        width: 100vw;
+        transition: top 0.3s ease, visibility 0.1s ease;
+        /* right: calc(0px - var(--toolbox-width)); */
+        z-index: 10008;
         overflow: unset;
+        top: 100vh;
+        margin: 0;
+    }
+    #toolbox-area > div {
+        width: 100vw;
+        height: calc( 90vh - 48px );
     }
     #toolbox-area.showSide {
+        width: 100vw;
         right: 0;
+        top: calc( 10vh + 48px );
+        margin: 0;
     }
     /* #menu-area.showSide, #toolbox-area.showSide {
         z-index: 9999;