From 1426b912fd743dd3af4072e1c1e54755a14dede2 Mon Sep 17 00:00:00 2001 From: saadnoor salehin Date: Mon, 27 Dec 2021 16:08:31 +0100 Subject: [PATCH 01/12] Add - necessary files for appbar --- framework/PortalFrame/PortalFrame.bbj | 6 +++ framework/PortalFrame/PortalFrame.css | 3 +- widgets/Appbar/Appbar.bbj | 40 +++++++++++++++++++ widgets/Appbar/Appbar.css | 7 ++++ widgets/Drawer/Drawer.bbj | 2 + widgets/Drawer/Drawer.css | 3 +- .../components/DrawerHeader/DrawerHeader.css | 1 + 7 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 widgets/Appbar/Appbar.bbj create mode 100644 widgets/Appbar/Appbar.css diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index 12622277..36b2b61d 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -11,6 +11,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 @@ -182,8 +184,12 @@ REM footerMenuItem!.setCallback("onChangeTheme") main! = #window!.addChildWindow(#window!.getAvailableControlID(),0,0,100,80,"",$00100800$,sysgui!.getAvailableContext()) main!.addStyle("mainarea") + #Main! = cast(BBjChildWindow,main!) #Main!.addStyle("shrinked") + + appbar! = new Appbar(main!) + #initializeDrawer(#Menu!, #FooterMenu!, #HeaderMenu!) diff --git a/framework/PortalFrame/PortalFrame.css b/framework/PortalFrame/PortalFrame.css index 1175af28..f745079e 100644 --- a/framework/PortalFrame/PortalFrame.css +++ b/framework/PortalFrame/PortalFrame.css @@ -7,7 +7,8 @@ .mainarea{ position:absolute; - background: #F1F1F1; + /* background: #F1F1F1; */ + background: #c51616; height: 100vh; } diff --git a/widgets/Appbar/Appbar.bbj b/widgets/Appbar/Appbar.bbj new file mode 100644 index 00000000..3d99b91a --- /dev/null +++ b/widgets/Appbar/Appbar.bbj @@ -0,0 +1,40 @@ +use ::WebKit/util/DynamicLoader.bbj::DynamicLoader +use ::BBjWidget/BBjWidget.bbj::BBjWidget + +use ::WebKit/widgets/common/Divider/Divider.bbj::Divider +use ::WebKit/widgets/DashboardContainer/DashboardContainer.bbj::DashboardWidget + + +class public Appbar extends BBjWidget + + field private BBjChildWindow window! + + field private BBjChildWindow shadowWindow! + + field private Boolean open! = 0 + + field private BBjVector tiles! = new BBjVector() + + field private BBjChildWindow tilesWrapper! + + field private BBjChildWindow optionalControl! + + field private BBjChildWindow customContainer! + + + + 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") + + rem #shadowWindow! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) + rem #shadowWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onShadowTapped") + rem #shadowWindow!.addPanelStyle("drawerMobileShadowPanelStyle") + rem #shadowWindow!.addStyle("drawerShadow") + rem #drawerDataModel! = dataModel! + rem #tiles! = dataModel!.getMenuTiles() + #setCanvas(#window!) + methodend + +classend diff --git a/widgets/Appbar/Appbar.css b/widgets/Appbar/Appbar.css new file mode 100644 index 00000000..ff356627 --- /dev/null +++ b/widgets/Appbar/Appbar.css @@ -0,0 +1,7 @@ + +.appbarStyle { + position: fixed; + background: green; + height: 70px !important; +} + diff --git a/widgets/Drawer/Drawer.bbj b/widgets/Drawer/Drawer.bbj index c34f0a44..13f30362 100644 --- a/widgets/Drawer/Drawer.bbj +++ b/widgets/Drawer/Drawer.bbj @@ -141,6 +141,8 @@ class public Drawer extends BBjWidget method public void closeDrawer(BBjCustomEvent event!) #window!.addStyle("drawerClosed") + rem #window!.addStyle("appBar") + #window!.removeStyle("drawerOpen") #shadowWindow!.removeStyle("drawerShadow") #open! = !#open! diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index 076d844e..b254d701 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -145,4 +145,5 @@ .drawerClosed .bottomDivider { width: inherit -} \ No newline at end of file +} + diff --git a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css index 71f41cdc..eb3eb919 100644 --- a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css +++ b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css @@ -47,6 +47,7 @@ } .drawerCloseIcon { + background: blue; align-self: center; justify-self: right; } From 333b80561fcf5421a6ae0196dd3a4b098f1f4657 Mon Sep 17 00:00:00 2001 From: saadnoor salehin Date: Wed, 29 Dec 2021 16:55:51 +0100 Subject: [PATCH 02/12] Add - Appbar initial implementation --- framework/PortalFrame/PortalFrame.bbj | 5 +++-- framework/PortalFrame/PortalFrame.css | 5 ++--- widgets/Appbar/Appbar.bbj | 15 ++++++++++++-- widgets/Appbar/Appbar.css | 20 ++++++++++++++++--- widgets/Drawer/Drawer.css | 7 +++++-- .../components/DrawerHeader/DrawerHeader.css | 2 ++ .../DrawerMenuTile/DrawerMenuTile.css | 2 ++ 7 files changed, 44 insertions(+), 12 deletions(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index 36b2b61d..0ea5d48c 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -157,7 +157,7 @@ REM footerMenuItem!.setCallback("onChangeTheme") header!.setDockStyle("grid-row-start","1") header!.setDockStyle("height", "30px") header!.setDockStyle("margin-bottom","8px") - header!.setDockStyle("margin-top","24px") + rem header!.setDockStyle("margin-top","24px") header!.setDockStyle("margin-left","40px") header!.addTextStyle("drawerTilesTextHeaderStyle") header!.setTextStyle("display","block") @@ -183,12 +183,13 @@ REM footerMenuItem!.setCallback("onChangeTheme") main! = #window!.addChildWindow(#window!.getAvailableControlID(),0,0,100,80,"",$00100800$,sysgui!.getAvailableContext()) + appbar! = new Appbar(main!) + main!.addStyle("mainarea") #Main! = cast(BBjChildWindow,main!) #Main!.addStyle("shrinked") - appbar! = new Appbar(main!) #initializeDrawer(#Menu!, #FooterMenu!, #HeaderMenu!) diff --git a/framework/PortalFrame/PortalFrame.css b/framework/PortalFrame/PortalFrame.css index f745079e..19aa4b9b 100644 --- a/framework/PortalFrame/PortalFrame.css +++ b/framework/PortalFrame/PortalFrame.css @@ -6,9 +6,8 @@ } .mainarea{ - position:absolute; - /* background: #F1F1F1; */ - background: #c51616; + position:fixed; + background: #F1F1F1; height: 100vh; } diff --git a/widgets/Appbar/Appbar.bbj b/widgets/Appbar/Appbar.bbj index 3d99b91a..7a3d03f1 100644 --- a/widgets/Appbar/Appbar.bbj +++ b/widgets/Appbar/Appbar.bbj @@ -1,8 +1,10 @@ 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 +use ::WebKit/util/Icons.bbj::Icons class public Appbar extends BBjWidget @@ -26,8 +28,13 @@ class public Appbar extends BBjWidget 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") - + #window!.addStyle("appbarStyle") + childWindow! = #window!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) + childWindow!.addStyle("menu") + menuIcon! = Icons.getIconOnWindow(childWindow!, "menu") + childWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onMenuClick") + + rem #shadowWindow! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) rem #shadowWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onShadowTapped") rem #shadowWindow!.addPanelStyle("drawerMobileShadowPanelStyle") @@ -37,4 +44,8 @@ class public Appbar extends BBjWidget #setCanvas(#window!) methodend + method public void onMenuClick(BBjMouseDownEvent event!) + rem #fireEvent(#ON_DRAWER_TILE_PRESSED, 2) + ClientUtil.consoleLog("menu click detected") + methodend classend diff --git a/widgets/Appbar/Appbar.css b/widgets/Appbar/Appbar.css index ff356627..14d7d708 100644 --- a/widgets/Appbar/Appbar.css +++ b/widgets/Appbar/Appbar.css @@ -1,7 +1,21 @@ .appbarStyle { - position: fixed; - background: green; - height: 70px !important; + position: relative; + left: 0px; + z-index: 99999 !important; + background-color: white; + height: 40px !important; + width: 100% !important; } + +.menu { + height: 30px; + width: 30px; + margin-top: 5px; + margin-left: 40px; +} + +.hydrated { + color: var(--bbj-color-black); +} \ No newline at end of file diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index b254d701..8bf21f10 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -47,10 +47,12 @@ } .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 +62,7 @@ .drawerClosed.drawerStyle{ width: var(--drawer-closed-width) !important; + /* display: none !important; */ } .drawerClosed div.drawerFooterPanelStyle { diff --git a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css index eb3eb919..79ce00b8 100644 --- a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css +++ b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css @@ -15,6 +15,8 @@ .drawerClosed .drawerHeaderPanelStyle { gap: 0; grid-template-columns: 1fr; + display: none; + } .drawerHeaderPanelStyle { diff --git a/widgets/Drawer/components/DrawerMenuTile/DrawerMenuTile.css b/widgets/Drawer/components/DrawerMenuTile/DrawerMenuTile.css index 47959ad0..313868d4 100644 --- a/widgets/Drawer/components/DrawerMenuTile/DrawerMenuTile.css +++ b/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 { From 8c5d4206999f83ee15d1ef9d3cc7216fde68b458 Mon Sep 17 00:00:00 2001 From: saadnoor salehin Date: Thu, 30 Dec 2021 12:16:01 +0100 Subject: [PATCH 03/12] Fix - Bug related to drawer design --- widgets/Appbar/Appbar.css | 31 +++++++++++++------ widgets/Drawer/Drawer.css | 18 +++++++++-- .../components/DrawerHeader/DrawerHeader.css | 6 +++- 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/widgets/Appbar/Appbar.css b/widgets/Appbar/Appbar.css index 14d7d708..497ef755 100644 --- a/widgets/Appbar/Appbar.css +++ b/widgets/Appbar/Appbar.css @@ -1,14 +1,8 @@ .appbarStyle { - position: relative; - left: 0px; - z-index: 99999 !important; - background-color: white; - height: 40px !important; - width: 100% !important; + display: none; } - .menu { height: 30px; width: 30px; @@ -16,6 +10,25 @@ margin-left: 40px; } -.hydrated { - color: var(--bbj-color-black); +@media screen and (max-width: 425px) { + .appbarStyle { + background-color: white; + position: relative; + left: 0px; + z-index: 99999 !important; + height: 40px !important; + width: 100% !important; + display: block; + } + + .menu { + height: 30px; + width: 30px; + margin-top: 5px; + margin-left: 40px; + } + + .hydrated { + color: var(--bbj-color-black); + } } \ No newline at end of file diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index 8bf21f10..7896e108 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -109,9 +109,19 @@ display: block !important; } - .drawerClosed.drawerStyle{ + .drawerOpen.drawerStyle{ width: 0px; - } + } + .drawerPanelStyle{ + /* width: var(--drawer-closed-width) !important; */ + } + /* .drawerOpen div.drawerFooterPanelStyle { + grid-template-columns: 1fr !important; + justify-content: center; + width: 100%; + justify-items: center; + } */ + } .drawerTilesTextHeaderStyle{ @@ -150,3 +160,7 @@ width: inherit } + +.drawerHide { + display: none; +} \ No newline at end of file diff --git a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css index 79ce00b8..a8f8a252 100644 --- a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css +++ b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css @@ -15,8 +15,12 @@ .drawerClosed .drawerHeaderPanelStyle { gap: 0; grid-template-columns: 1fr; - display: none; +} +@media screen and (max-width: 425px) { + .drawerClosed .drawerHeaderPanelStyle { + display: none; + } } .drawerHeaderPanelStyle { From 1ba3b371b13af698cda6f289ad550ce69af8cfce Mon Sep 17 00:00:00 2001 From: Saadnoor Salehin Date: Thu, 6 Jan 2022 21:20:52 +0100 Subject: [PATCH 04/12] Fix - Appbar icon click detection --- framework/PortalFrame/PortalFrame.bbj | 5 +++++ widgets/Appbar/Appbar.bbj | 5 +++-- widgets/Drawer/Drawer.bbj | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index 0ea5d48c..2ded0490 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -184,6 +184,7 @@ REM footerMenuItem!.setCallback("onChangeTheme") 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") @@ -375,6 +376,10 @@ REM footerMenuItem!.setCallback("onChangeTheme") fi methodend + method public void onAppbarMenuClick(BBjCustomEvent ev!) + ClientUtil.consoleLog("SHABBASH!") + methodend + method public void onToggleMenu(BBjEvent ev!) rem drawer_status 0=open, 1=closed if #drawerOpen! then diff --git a/widgets/Appbar/Appbar.bbj b/widgets/Appbar/Appbar.bbj index 7a3d03f1..788b1a88 100644 --- a/widgets/Appbar/Appbar.bbj +++ b/widgets/Appbar/Appbar.bbj @@ -24,7 +24,8 @@ class public Appbar extends BBjWidget field private BBjChildWindow customContainer! - + 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()) @@ -45,7 +46,7 @@ class public Appbar extends BBjWidget methodend method public void onMenuClick(BBjMouseDownEvent event!) - rem #fireEvent(#ON_DRAWER_TILE_PRESSED, 2) + #fireEvent(#ON_APPBAR_TOOGLE, null()) ClientUtil.consoleLog("menu click detected") methodend classend diff --git a/widgets/Drawer/Drawer.bbj b/widgets/Drawer/Drawer.bbj index 13f30362..d4494a84 100644 --- a/widgets/Drawer/Drawer.bbj +++ b/widgets/Drawer/Drawer.bbj @@ -80,7 +80,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") From 41bf31f8a0d41f5dd8e9b840698167dcbc87b23c Mon Sep 17 00:00:00 2001 From: Saadnoor Salehin Date: Fri, 7 Jan 2022 00:10:47 +0100 Subject: [PATCH 05/12] Fix - Drawer mobile screen implementation --- framework/PortalFrame/PortalFrame.bbj | 33 +++++++++++++++------------ widgets/Drawer/Drawer.bbj | 8 ++++--- widgets/Drawer/Drawer.css | 17 +++++++------- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index 2ded0490..cf0b51b0 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -37,6 +37,7 @@ class public PortalFrame field public AccountProfile Profile! field private Boolean drawerOpen! = Boolean.FALSE + field private Boolean drawerHidden! = Boolean.FALSE field private HashMap win_list! = new HashMap() field private BBjWidget curr_win! field private MenuPanel menuPanel! @@ -177,12 +178,14 @@ 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") @@ -211,6 +214,15 @@ REM footerMenuItem!.setCallback("onChangeTheme") methodret 1 methodend + + method public void onResizeScreen(BBjResizeEvent ev!) + id$ = str(ev!.getWidth()) + if ev!.getWidth() < 425 then + #Drawer!.closeDrawer(null()) + else + #Drawer!.openDrawer(null()) + fi + methodend method public BBjWidget navigateTo(BBjString anchor$) @@ -377,20 +389,13 @@ REM footerMenuItem!.setCallback("onChangeTheme") methodend method public void onAppbarMenuClick(BBjCustomEvent ev!) - ClientUtil.consoleLog("SHABBASH!") - 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 + if #drawerHidden! then + #drawerHidden!=Boolean.FALSE + #Drawer!.addStyle("drawerShow") + else + #drawerHidden!=Boolean.TRUE + #Drawer!.removeStyle("drawerShow") + fi methodend method public void onLogout() diff --git a/widgets/Drawer/Drawer.bbj b/widgets/Drawer/Drawer.bbj index d4494a84..18a0535e 100644 --- a/widgets/Drawer/Drawer.bbj +++ b/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") @@ -137,7 +139,7 @@ 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") diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index 7896e108..1873147e 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -111,16 +111,15 @@ .drawerOpen.drawerStyle{ width: 0px; - } - .drawerPanelStyle{ - /* width: var(--drawer-closed-width) !important; */ + } + .drawerClosed.drawerStyle{ + width: 0px !important; + } + + .drawerClosed.drawerShow{ + width: var(--drawer-closed-width) !important; } - /* .drawerOpen div.drawerFooterPanelStyle { - grid-template-columns: 1fr !important; - justify-content: center; - width: 100%; - justify-items: center; - } */ + } From 8507e8409f0ad709354c7749979707d2d787ff0d Mon Sep 17 00:00:00 2001 From: Saadnoor Salehin Date: Fri, 7 Jan 2022 01:18:46 +0100 Subject: [PATCH 06/12] Fix bug related main area which casued breaking design when drawer open in desktop view --- framework/PortalFrame/PortalFrame.bbj | 10 ++++++++++ widgets/Drawer/Drawer.bbj | 13 ++++++++++--- widgets/Drawer/Drawer.css | 1 + 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index cf0b51b0..c013880b 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -217,10 +217,17 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onResizeScreen(BBjResizeEvent ev!) id$ = str(ev!.getWidth()) + ClientUtil.consoleLog(id$) if ev!.getWidth() < 425 then #Drawer!.closeDrawer(null()) + rem ClientUtil.consoleLog("EXPANDED") + rem #Main!.addStyle("expanded") + rem #Main!.removeStyle("shrinked") else + rem ClientUtil.consoleLog("SHRINKED") #Drawer!.openDrawer(null()) + rem #Main!.addStyle("shrinked") + rem #Main!.removeStyle("expanded") fi methodend @@ -379,10 +386,13 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onDrawerToggle(BBjCustomEvent ev!) state = num(str(ev!.getObject())) + ClientUtil.consoleLog(str(ev!.getObject())) if state = 1 + ClientUtil.consoleLog("SHRINKING...") #Main!.addStyle("shrinked") #Main!.removeStyle("expanded") else + ClientUtil.consoleLog("EXPANDING...") #Main!.addStyle("expanded") #Main!.removeStyle("shrinked") fi diff --git a/widgets/Drawer/Drawer.bbj b/widgets/Drawer/Drawer.bbj index 18a0535e..008fdd37 100644 --- a/widgets/Drawer/Drawer.bbj +++ b/widgets/Drawer/Drawer.bbj @@ -143,12 +143,11 @@ class public Drawer extends BBjWidget method public void closeDrawer(BBjCustomEvent event!) #window!.addStyle("drawerClosed") - rem #window!.addStyle("appBar") #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!) @@ -167,7 +166,15 @@ 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 void showDrawerOnMobile() + + methodend + + method public void hideDrawerOnMobile() + methodend method public Boolean isOpen() diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index 1873147e..fb72a1f0 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -51,6 +51,7 @@ position: fixed !important; height: 100vh; background-color: white; + z-index: 1; overflow: hidden; width: var(--drawer-width); From 14bd2c5093acf6c9b36b11b7dc0df4e285eb644a Mon Sep 17 00:00:00 2001 From: saadnoor Date: Fri, 7 Jan 2022 01:37:20 +0100 Subject: [PATCH 07/12] Refactor - Code cleanup --- framework/PortalFrame/PortalFrame.bbj | 18 ++--------- widgets/Appbar/Appbar.bbj | 30 +------------------ widgets/Drawer/Drawer.bbj | 9 +----- .../components/DrawerHeader/DrawerHeader.css | 1 - 4 files changed, 4 insertions(+), 54 deletions(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index ca7e6571..a6ba4a1b 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -158,7 +158,6 @@ REM footerMenuItem!.setCallback("onChangeTheme") header!.setDockStyle("grid-row-start","1") header!.setDockStyle("height", "30px") header!.setDockStyle("margin-bottom","8px") - rem header!.setDockStyle("margin-top","24px") header!.setDockStyle("margin-left","40px") header!.addTextStyle("drawerTilesTextHeaderStyle") header!.setTextStyle("display","block") @@ -190,12 +189,9 @@ REM footerMenuItem!.setCallback("onChangeTheme") 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") @@ -217,17 +213,10 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onResizeScreen(BBjResizeEvent ev!) id$ = str(ev!.getWidth()) - ClientUtil.consoleLog(id$) if ev!.getWidth() < 425 then #Drawer!.closeDrawer(null()) - rem ClientUtil.consoleLog("EXPANDED") - rem #Main!.addStyle("expanded") - rem #Main!.removeStyle("shrinked") else - rem ClientUtil.consoleLog("SHRINKED") #Drawer!.openDrawer(null()) - rem #Main!.addStyle("shrinked") - rem #Main!.removeStyle("expanded") fi methodend @@ -388,13 +377,10 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onDrawerToggle(BBjCustomEvent ev!) state = num(str(ev!.getObject())) - ClientUtil.consoleLog(str(ev!.getObject())) if state = 1 - ClientUtil.consoleLog("SHRINKING...") #Main!.addStyle("shrinked") #Main!.removeStyle("expanded") else - ClientUtil.consoleLog("EXPANDING...") #Main!.addStyle("expanded") #Main!.removeStyle("shrinked") fi @@ -402,8 +388,8 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onAppbarMenuClick(BBjCustomEvent ev!) if #drawerHidden! then - #drawerHidden!=Boolean.FALSE - #Drawer!.addStyle("drawerShow") + #drawerHidden!=Boolean.FALSE + #Drawer!.addStyle("drawerShow") else #drawerHidden!=Boolean.TRUE #Drawer!.removeStyle("drawerShow") diff --git a/widgets/Appbar/Appbar.bbj b/widgets/Appbar/Appbar.bbj index 788b1a88..4b08671a 100644 --- a/widgets/Appbar/Appbar.bbj +++ b/widgets/Appbar/Appbar.bbj @@ -1,29 +1,10 @@ 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 use ::WebKit/util/Icons.bbj::Icons - - class public Appbar extends BBjWidget - field private BBjChildWindow window! - - field private BBjChildWindow shadowWindow! - - field private Boolean open! = 0 - - field private BBjVector tiles! = new BBjVector() - - field private BBjChildWindow tilesWrapper! - - field private BBjChildWindow optionalControl! - - field private BBjChildWindow customContainer! - - + field private BBjChildWindow window! field public static BBjNumber ON_APPBAR_TOOGLE = 1996 method public Appbar(BBjWindow parent!) @@ -34,19 +15,10 @@ class public Appbar extends BBjWidget childWindow!.addStyle("menu") menuIcon! = Icons.getIconOnWindow(childWindow!, "menu") childWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onMenuClick") - - - rem #shadowWindow! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) - rem #shadowWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onShadowTapped") - rem #shadowWindow!.addPanelStyle("drawerMobileShadowPanelStyle") - rem #shadowWindow!.addStyle("drawerShadow") - rem #drawerDataModel! = dataModel! - rem #tiles! = dataModel!.getMenuTiles() #setCanvas(#window!) methodend method public void onMenuClick(BBjMouseDownEvent event!) #fireEvent(#ON_APPBAR_TOOGLE, null()) - ClientUtil.consoleLog("menu click detected") methodend classend diff --git a/widgets/Drawer/Drawer.bbj b/widgets/Drawer/Drawer.bbj index 008fdd37..013825bb 100644 --- a/widgets/Drawer/Drawer.bbj +++ b/widgets/Drawer/Drawer.bbj @@ -169,17 +169,10 @@ class public Drawer extends BBjWidget #fireEvent(#ON_DRAWER_STATE_CHANGED, 1) methodend - method public void showDrawerOnMobile() - - methodend - - method public void hideDrawerOnMobile() - - methodend - method public Boolean isOpen() methodret #open! methodend + method public void onLogout(BBjCustomEvent ev!) #fireEvent(#ON_LOGOUT, "") methodend diff --git a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css index a8f8a252..6a608631 100644 --- a/widgets/Drawer/components/DrawerHeader/DrawerHeader.css +++ b/widgets/Drawer/components/DrawerHeader/DrawerHeader.css @@ -53,7 +53,6 @@ } .drawerCloseIcon { - background: blue; align-self: center; justify-self: right; } From be29c0c11d1fa0a42e0e4df2dd2b2348c83ecd21 Mon Sep 17 00:00:00 2001 From: saadnoor salehin Date: Fri, 7 Jan 2022 13:13:24 +0100 Subject: [PATCH 08/12] Fix - BBj new version test and menu positioning --- widgets/Appbar/Appbar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/widgets/Appbar/Appbar.css b/widgets/Appbar/Appbar.css index 497ef755..10157974 100644 --- a/widgets/Appbar/Appbar.css +++ b/widgets/Appbar/Appbar.css @@ -6,8 +6,8 @@ .menu { height: 30px; width: 30px; - margin-top: 5px; - margin-left: 40px; + margin-top: 7px; + margin-left: 20px; } @media screen and (max-width: 425px) { From e8bc16d3b140d5ff83a5cb7602b2e006eaa27668 Mon Sep 17 00:00:00 2001 From: saadnoor Date: Mon, 24 Jan 2022 14:33:28 +0100 Subject: [PATCH 09/12] Fix - Appbar with primary color and positioning --- util/Icons.bbj | 7 ++++++- widgets/Appbar/Appbar.bbj | 4 ++-- widgets/Appbar/Appbar.css | 9 +++------ 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/util/Icons.bbj b/util/Icons.bbj index 535f7575..81103c17 100644 --- a/util/Icons.bbj +++ b/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 diff --git a/widgets/Appbar/Appbar.bbj b/widgets/Appbar/Appbar.bbj index 4b08671a..8ffbf479 100644 --- a/widgets/Appbar/Appbar.bbj +++ b/widgets/Appbar/Appbar.bbj @@ -12,8 +12,8 @@ class public Appbar extends BBjWidget #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!, "menu") + childWindow!.addStyle("menu") + menuIcon! = Icons.getIconOnWindow(childWindow!, null(), "menu", "color: white") childWindow!.setCallback(BBjAPI.ON_MOUSE_DOWN,#this!,"onMenuClick") #setCanvas(#window!) methodend diff --git a/widgets/Appbar/Appbar.css b/widgets/Appbar/Appbar.css index 10157974..2fcd5bc6 100644 --- a/widgets/Appbar/Appbar.css +++ b/widgets/Appbar/Appbar.css @@ -12,7 +12,7 @@ @media screen and (max-width: 425px) { .appbarStyle { - background-color: white; + background-color: var(--bbj-color-primary); position: relative; left: 0px; z-index: 99999 !important; @@ -24,11 +24,8 @@ .menu { height: 30px; width: 30px; - margin-top: 5px; - margin-left: 40px; + margin-top: 7px; + margin-left: 20px; } - .hydrated { - color: var(--bbj-color-black); - } } \ No newline at end of file From 94a25b3479761b0c3bd14c17be0ee4fa9215b96e Mon Sep 17 00:00:00 2001 From: saadnoor Date: Mon, 24 Jan 2022 14:38:44 +0100 Subject: [PATCH 10/12] Remove - unnecessary class overloading --- .../ChileCompanyCustomerPortal/ChileCompanyCustomerPortal.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/demo/ChileCompanyCustomerPortal/ChileCompanyCustomerPortal.css b/demo/ChileCompanyCustomerPortal/ChileCompanyCustomerPortal.css index af69105c..4936004c 100644 --- a/demo/ChileCompanyCustomerPortal/ChileCompanyCustomerPortal.css +++ b/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; From ce6cb27d1574005ee3efd5aab0d43de763e20489 Mon Sep 17 00:00:00 2001 From: saadnoor Date: Tue, 25 Jan 2022 19:53:06 +0100 Subject: [PATCH 11/12] Add - Menu hide when item clicked on phone --- framework/PortalFrame/PortalFrame.bbj | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index ec667174..836f8dc3 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -41,6 +41,7 @@ class public PortalFrame 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! @@ -220,8 +221,10 @@ REM footerMenuItem!.setCallback("onChangeTheme") method public void onResizeScreen(BBjResizeEvent ev!) id$ = str(ev!.getWidth()) if ev!.getWidth() < 425 then - #Drawer!.closeDrawer(null()) + #isMobile! = Boolean.TRUE + #Drawer!.closeDrawer(null()) else + #isMobile! = Boolean.FALSE #Drawer!.openDrawer(null()) fi methodend @@ -284,6 +287,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!) From ba3ea178ee485635350a35911a4959d3ae3ec272 Mon Sep 17 00:00:00 2001 From: saadnoor Date: Tue, 25 Jan 2022 23:46:08 +0100 Subject: [PATCH 12/12] Fix - Add necessary logics for hide menu on login --- framework/PortalFrame/PortalFrame.bbj | 8 ++++++++ widgets/Drawer/Drawer.css | 3 +++ 2 files changed, 11 insertions(+) diff --git a/framework/PortalFrame/PortalFrame.bbj b/framework/PortalFrame/PortalFrame.bbj index 836f8dc3..c2a8ef3a 100644 --- a/framework/PortalFrame/PortalFrame.bbj +++ b/framework/PortalFrame/PortalFrame.bbj @@ -219,11 +219,15 @@ REM footerMenuItem!.setCallback("onChangeTheme") 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 @@ -401,6 +405,10 @@ REM footerMenuItem!.setCallback("onChangeTheme") methodend method public void onAppbarMenuClick(BBjCustomEvent ev!) + if #isMobile! = Boolean.TRUE then + #Drawer!.removeStyle("drawerHide") + fi + if #drawerHidden! then #drawerHidden!=Boolean.FALSE #Drawer!.addStyle("drawerShow") diff --git a/widgets/Drawer/Drawer.css b/widgets/Drawer/Drawer.css index fb72a1f0..f859d6ba 100644 --- a/widgets/Drawer/Drawer.css +++ b/widgets/Drawer/Drawer.css @@ -120,6 +120,9 @@ .drawerClosed.drawerShow{ width: var(--drawer-closed-width) !important; } + .drawerClosed.drawerHide { + width: 0px !important; + } }