Merge pull request #143 from BBj-Plugins/implement-AppBar-for-Phone-u…

…sage-#134

Implement app bar for phone usage #134

demo/ChileCompanyCustomerPortal/ChileCompanyCustomerPortal.css

@@ -30,10 +30,6 @@
     background-color: var(--bbj-color-white);
 }
 
-.hydrated{
-    color: var(--bbj-color-gray);
-}
-
 @media screen and (max-width: 425px) {
     .listWindow{
         margin: 40px 20px 80px 20px;

framework/PortalFrame/PortalFrame.bbj

@@ -13,6 +13,8 @@ use ::WebKit/util/Icons.bbj::Icons
 use ::AuthKit/profile/AccountProfile.bbj::AccountProfile
 
 use ::WebKit/widgets/Drawer/Drawer.bbj::Drawer
+use ::WebKit/widgets/Appbar/Appbar.bbj::Appbar
+
 use ::WebKit/model/DrawerMenuTileEntry.bbj::DrawerMenuTileEntry
 use ::WebKit/widgets/TilesTextHeader/TilesTextHeader.bbj::TilesTextHeader
 use ::WebKit/model/DrawerModel.bbj::DrawerModel
@@ -38,6 +40,8 @@ class public PortalFrame
     field public AccountProfile Profile!
 
     field private Boolean drawerOpen! = Boolean.FALSE
+    field private Boolean drawerHidden! = Boolean.FALSE
+    field private Boolean isMobile! = Boolean.FALSE
     field private HashMap win_list! = new HashMap()
     field public BBjWidget curr_win! 
 
@@ -158,7 +162,6 @@ REM         footerMenuItem!.setCallback("onChangeTheme")
         header!.setDockStyle("grid-row-start","1")
         header!.setDockStyle("height", "30px")
         header!.setDockStyle("margin-bottom","8px")
-        header!.setDockStyle("margin-top","24px")
         header!.setDockStyle("margin-left","40px")
         header!.addTextStyle("drawerTilesTextHeaderStyle")
         header!.setTextStyle("display","block")
@@ -178,16 +181,21 @@ REM         footerMenuItem!.setCallback("onChangeTheme")
             sysgui! =BBjAPI().openSysGui("X0")
 
             #window! = CAST(BBjTopLevelWindow, sysgui!.addWindow(sysgui!.getAvailableContext(),25,25,1200,750,#Title!,$01101083$))
+            #window!.setCallback(BBjAPI().ON_RESIZE, #this!, "onResizeScreen")
 
             rem add one invisible button to force the BASIS variables to be loaded for CSS            
             #window!.addButton(1000,0,0,0,0,"TEST",$0010$ )
 
 
             main! = #window!.addChildWindow(#window!.getAvailableControlID(),0,0,100,80,"",$00100800$,sysgui!.getAvailableContext())
+
+            appbar! = new Appbar(main!)
+            appbar!.setCallback(Appbar.ON_APPBAR_TOOGLE, #this!, "onAppbarMenuClick")
+
             main!.addStyle("mainarea")
             #Main! = cast(BBjChildWindow,main!)
             #Main!.addStyle("shrinked")
-             
+
             #initializeDrawer(#Menu!, #FooterMenu!, #HeaderMenu!)
 
             BBjAPI().setCustomEventCallback("logout","logout")
@@ -209,6 +217,21 @@ REM         footerMenuItem!.setCallback("onChangeTheme")
                 methodret 1
 
     methodend
+
+    method public void onResizeScreen(BBjResizeEvent ev!)
+
+        id$ = str(ev!.getWidth())
+        if ev!.getWidth() < 425 then
+            #isMobile! = Boolean.TRUE 
+            #drawerHidden!=Boolean.TRUE
+            #Drawer!.closeDrawer(null())
+            #Drawer!.addStyle("drawerHide")  
+        else 
+            #Drawer!.removeStyle("drawerHide")
+            #isMobile! = Boolean.FALSE 
+            #Drawer!.openDrawer(null())
+        fi
+    methodend
 
     method public BBjWidget navigateTo(BBjString anchor$)
 
@@ -268,6 +291,11 @@ REM         footerMenuItem!.setCallback("onChangeTheme")
    methodend   
 
     method public void onMenuItemClick(BBjCustomEvent ev!)
+
+        if #isMobile! = Boolean.TRUE then 
+            #onAppbarMenuClick(null())
+        fi
+
         nodeId=num(str(ev!.getObject()))
         item! = #Menu!.getItem(nodeId)
         #navigateTo(item!)
@@ -376,17 +404,18 @@ REM         footerMenuItem!.setCallback("onChangeTheme")
        fi
     methodend
 
-    method public void onToggleMenu(BBjEvent ev!)
-    rem drawer_status 0=open, 1=closed
-    if #drawerOpen! then
-         #drawerOpen!=Boolean.FALSE
-         #Drawer!.addStyle("drawerclosed")
-         #Drawer!.removeStyle("draweropen")
-    else
-         #drawerOpen!=Boolean.TRUE
-         #Drawer!.addStyle("draweropen")
-         #Drawer!.removeStyle("drawerclosed")
-    fi
+    method public void onAppbarMenuClick(BBjCustomEvent ev!)
+        if #isMobile! = Boolean.TRUE then 
+            #Drawer!.removeStyle("drawerHide")  
+        fi
+
+        if #drawerHidden! then
+            #drawerHidden!=Boolean.FALSE
+            #Drawer!.addStyle("drawerShow")
+        else
+            #drawerHidden!=Boolean.TRUE
+            #Drawer!.removeStyle("drawerShow")  
+        fi
     methodend
 
     method public void onLogout()

framework/PortalFrame/PortalFrame.css

@@ -6,7 +6,7 @@
 }
 
 .mainarea {
-    position: absolute;
+    position:fixed;
     background: #F1F1F1;
     height: 100vh;
 }

util/Icons.bbj

@@ -3,6 +3,7 @@ rem  * BBj icons helper class
 rem  *
 rem  */
 use java.util.Formatter
+use ::WebKit/util/ClientUtil.bbj::ClientUtil
 
 class public Icons
 
@@ -65,6 +66,10 @@ class public Icons
 
     method public static BBjStaticText getIconOnWindow(BBjWindow window!, String poolName!, String icon!)
         methodret window!.addStaticText(window!.getAvailableControlID(),0,0,0,0, #get(poolName!, icon!))        
-     methodend
+    methodend
+
+    method public static BBjStaticText getIconOnWindow(BBjWindow window!, String poolName!, String icon!, String style!)
+        methodret window!.addStaticText(window!.getAvailableControlID(),0,0,0,0, #get(poolName!, icon!, style!))        
+    methodend
 
 classend

widgets/Appbar/Appbar.bbj

@@ -0,0 +1,24 @@
+use ::WebKit/util/DynamicLoader.bbj::DynamicLoader
+use ::BBjWidget/BBjWidget.bbj::BBjWidget
+use ::WebKit/util/ClientUtil.bbj::ClientUtil
+use ::WebKit/util/Icons.bbj::Icons
+class public Appbar extends BBjWidget 
+
+    field private BBjChildWindow window!    
+    field public static BBjNumber ON_APPBAR_TOOGLE = 1996
+
+    method public Appbar(BBjWindow parent!)
+        DynamicLoader.addLocalCSS("WebKit/widgets/Appbar/Appbar.css")
+        #window! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext())
+        #window!.addStyle("appbarStyle") 
+        childWindow! = #window!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext())
+        childWindow!.addStyle("menu")
+        menuIcon! = Icons.getIconOnWindow(childWindow!, null(), "menu", "color: white")
+        childWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onMenuClick")
+        #setCanvas(#window!)
+    methodend
+
+    method public void onMenuClick(BBjMouseDownEvent event!)
+        #fireEvent(#ON_APPBAR_TOOGLE, null()) 
+    methodend
+classend

widgets/Appbar/Appbar.css

@@ -0,0 +1,31 @@
+
+.appbarStyle {
+    display: none;
+}
+
+.menu {
+    height: 30px;
+    width: 30px;
+    margin-top: 7px;
+    margin-left: 20px;
+}
+
+@media screen and (max-width: 425px) {
+    .appbarStyle {
+        background-color: var(--bbj-color-primary);
+        position: relative;
+        left: 0px;
+        z-index: 99999 !important;
+        height: 40px !important;
+        width: 100% !important;
+        display: block;
+    } 
+
+    .menu {
+        height: 30px;
+        width: 30px;
+        margin-top: 7px;
+        margin-left: 20px;
+    }
+
+}

widgets/Drawer/Drawer.bbj

@@ -1,6 +1,6 @@
 use ::WebKit/util/DynamicLoader.bbj::DynamicLoader
 use ::BBjWidget/BBjWidget.bbj::BBjWidget
-
+use ::WebKit/util/ClientUtil.bbj::ClientUtil
 use ::WebKit/widgets/common/Divider/Divider.bbj::Divider
 use ::WebKit/widgets/DashboardContainer/DashboardContainer.bbj::DashboardWidget
 
@@ -44,9 +44,11 @@ class public Drawer extends BBjWidget
     field public static BBjNumber ON_LOGOUT = 14441
 
     method public Drawer(BBjWindow parent!, DrawerModel dataModel!)
+        rem parent!.setCallback(BBjAPI().ON_RESIZE, #this!, "onResizeScreen")
         DynamicLoader.addLocalCSS("WebKit/widgets/Drawer/Drawer.css")
         #window! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext())
-        #window!.addStyle("drawerStyle")        
+        #window!.addStyle("drawerStyle") 
+        #window!.addStyle("drawerShow")       
         #window!.addStyle("drawerOpen")
         #window!.addPanelStyle("drawerPanelStyle")
         #window!.addPanelStyle("drawerAnimationOpen")
@@ -80,7 +82,7 @@ class public Drawer extends BBjWidget
 
             #open! = 1
             header! = new DrawerHeader(#window!, #drawerDataModel!)
-            header!.setCallback(DrawerHeader.ON_DRAWER_CLOSE_ICON_PUSH,#this!,"closeDrawer")
+            header!.setCallback(DrawerHeader.ON_DRAWER_CLOSE_ICON_PUSH, #this!,"closeDrawer")
             header!.setCallback(DrawerHeader.ON_DRAWER_OPEN_ICON_PUSH, #this!,"openDrawer")
 
             header!.setCallback(DrawerHeader.ON_DRAWER_HEADER_TILE_PRESSED, #this!, "onHeaderMenuItemClick")
@@ -137,14 +139,15 @@ class public Drawer extends BBjWidget
         #shadowWindow!.removeStyle("drawerShadow")
         #closeDrawer(null())
         #fireEvent(#ON_DRAWER_STATE_CHANGED, #open!)
-    methodend   
+    methodend  
 
     method public void closeDrawer(BBjCustomEvent event!)
         #window!.addStyle("drawerClosed")
+
         #window!.removeStyle("drawerOpen")
         #shadowWindow!.removeStyle("drawerShadow")
         #open! = !#open!
-        #fireEvent(#ON_DRAWER_STATE_CHANGED, #open!)
+        #fireEvent(#ON_DRAWER_STATE_CHANGED, 0)
     methodend
 
     method public void onMenuItemClick(BBjCustomEvent event!)
@@ -163,12 +166,13 @@ class public Drawer extends BBjWidget
         #window!.addStyle("drawerOpen")
         #window!.removeStyle("drawerClosed")
         #open! = !#open!
-        #fireEvent(#ON_DRAWER_STATE_CHANGED, #open!)
+        #fireEvent(#ON_DRAWER_STATE_CHANGED, 1)
     methodend
-    
+
     method public Boolean isOpen()
         methodret #open!
     methodend
+
     method public void onLogout(BBjCustomEvent ev!)
        #fireEvent(#ON_LOGOUT, "") 
     methodend

widgets/Drawer/Drawer.css

@@ -47,10 +47,13 @@
 }
 
 .drawerPanelStyle{
+    margin-top: 40px;
+    position: fixed !important;
     height: 100vh;
     background-color: white;
-    z-index: 99;
-    overflow: visible;
+
+    z-index: 1;
+    overflow: hidden;
     width: var(--drawer-width);
 }
 
@@ -60,6 +63,7 @@
 
 .drawerClosed.drawerStyle{
     width: var(--drawer-closed-width) !important;
+    /* display: none !important; */
 }
 
 .drawerClosed div.drawerFooterPanelStyle {
@@ -106,9 +110,21 @@
       display: block !important;
         }
 
-	.drawerClosed.drawerStyle{
+	.drawerOpen.drawerStyle{
 	    width: 0px;
-	}          
+	}
+    .drawerClosed.drawerStyle{
+	    width: 0px !important;
+	}
+
+    .drawerClosed.drawerShow{
+        width: var(--drawer-closed-width) !important;
+    }
+    .drawerClosed.drawerHide {
+         width: 0px !important;
+    }
+
+
 }
 
 .drawerTilesTextHeaderStyle{
@@ -145,4 +161,9 @@
 
 .drawerClosed .bottomDivider {
     width: inherit
+}
+
+
+.drawerHide {
+    display: none;
 }

widgets/Drawer/components/DrawerHeader/DrawerHeader.css

@@ -17,6 +17,12 @@
     grid-template-columns: 1fr;
 }
 
+@media screen and (max-width: 425px) {
+    .drawerClosed .drawerHeaderPanelStyle {
+        display: none; 
+    }       
+}
+
 .drawerHeaderPanelStyle {
     display: grid;
     grid-template-columns: 1fr 1fr;

widgets/Drawer/components/DrawerMenuTile/DrawerMenuTile.css

@@ -75,6 +75,7 @@
 
 /* .drawerOpen  .drawerMenuTilePanelStyle { */
 .drawerMenuTilePanelStyle {
+    margin-top: 7px;
     display: grid;
     grid-template-columns: 64px auto;
     height: 48px;
@@ -87,6 +88,7 @@
     grid-column-start: 1;
     justify-self: end;
     align-self: center;
+
 }
 
 .drawerMenuTileTextStyle {