diff --git a/demo/Showcase/Showcase.bbj b/demo/Showcase/Showcase.bbj index fa8c7391..4a623b1b 100644 --- a/demo/Showcase/Showcase.bbj +++ b/demo/Showcase/Showcase.bbj @@ -5,6 +5,8 @@ use ::WebKit/framework/PortalFrame/PortalFrame.bbj::PortalFrame use ::WebKit/util/ClientUtil.bbj::ClientUtil use ::WebKit/model/Menu.bbj::Menu use ::WebKit/model/Menu.bbj::MenuItem +use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents +use ::WebKit/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj::AvatarIcon use ::WebKit/demo/Showcase/components/ShowCaseFrame.bbj::ShowCaseFrame use ::WebKit/framework/LoginDialog/SampleAuthProvider.bbj::SampleAuthProvider use ::WebKit/framework/Favorites/SampleFavoritesProvider.bbj::SampleFavoritesProvider @@ -24,7 +26,6 @@ ClientUtil.addLocalCSS("WebKit/css/webkit.css") bbjutils! = new ::BBUtils.bbj::BBUtils() -REM iconPool$ = STBL("icon-pool", "fa") iconPool$ = STBL("icon-pool", "tabler") authProvider! = new SampleAuthProvider() @@ -63,6 +64,14 @@ showCaseItem!.setStartType(2) showCaseItem! = menu!.addMenuItem(showCase!,201,"Direct - Sales - Options","Direct - Sales - Options","table") showCaseItem!.setStartType(2) +menuItem! = menu!.addMenuItem(menu!.getRoot(),108,"Avatar Initial","Avatar Initial Demo","typography") +menuItem!.setProgram("::WebKit/demo/Showcase/ShowcasePanels/AvatarInitial.bbj::AvatarInitial") +menuItem!.setStartType(0) + +menuItem! = menu!.addMenuItem(menu!.getRoot(),100,"Dialog","Dialog Panel Demo","message-circle") +menuItem!.setProgram("::WebKit/demo/Showcase/ShowcasePanels/DialogShowcase.bbj::DialogShowcase") +menuItem!.setStartType(0) + showCaseSubItem! = menu!.addMenuItem(showCaseItem!,202,"Personal - Sale","Personal - Sale","table") showCaseSubItem!.setStartType(2) diff --git a/demo/Showcase/ShowcasePanels/AvatarInitial.bbj b/demo/Showcase/ShowcasePanels/AvatarInitial.bbj new file mode 100644 index 00000000..dd04c4b0 --- /dev/null +++ b/demo/Showcase/ShowcasePanels/AvatarInitial.bbj @@ -0,0 +1,68 @@ +use ::WebKit/demo/Showcase/ShowcaseWidget/ShowcaseWidget.bbj::ShowcaseWidget +use ::WebKit/widgets/InputField/InputField.bbj::InputField +use ::WebKit/framework/DialogPanel/DialogPanel.bbj::DialogPanel +use ::WebKit/util/ClientUtil.bbj::ClientUtil +use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents +use ::WebKit/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj::AvatarIcon + +class public AvatarInitial extends ShowcaseWidget + + field private BBjChildWindow window! + field private BBjHtmlView avatarWnd! + field private InputField avatarSize! + field private InputField AvatarName! + field private BBjCheckBox CbModal! + field private BBjCheckBox CbCloseIcon! + field private BBjCheckBox CbCloseOutside! + field private BBjChildWindow panel! + + method public AvatarInitial(BBjWindow wnd!) + #super!(wnd!) + + #setTitle("Avatar Initial Demo") + #setIntro("This demo shows the Avatar initial") + methodend + method public void redraw(Boolean init!) + #super!.redraw(init!) + + if init! then + + #panel! = #getContentWindow() + #panel!.setStyle("display","flex") + #panel!.setStyle("flex-direction","column") + #panel!.setStyle("row-gap","10px") + + #AvatarName! = new InputField(#panel!) + #AvatarName!.setLabel("Avatar Name") + #AvatarName!.setInput("Stephan Wald") + + #avatarSize! = new InputField(#panel!) + #avatarSize!.setLabel("Size") + #avatarSize!.setInput("50") + + BtnShow! = #panel!.addButton(#panel!.getAvailableControlID(),0,0,0,0,"Create Avatar") + BtnShow!.setStyle("display","flex") + BtnShow!.setStyle("justify-content","flex-end") + BtnShow!.setAttribute("theme","primary") + BtnShow!.setAttribute("expanse","l") + BtnShow!.setCallback(BBjAPI().ON_BUTTON_PUSH,#this!,"onShowDialog") + + endif +methodend + +method public void onShowDialog(BBjButtonPushEvent ev!) + + if #avatarWnd! <> null() then + #avatarWnd!.destroy() + endif + + webComponents! = new AvatarIcon(#panel!) + #avatarWnd! = CAST(BBjHtmlView, webComponents!.getView()) + webComponents!.setName(#AvatarName!.getInput()) + webComponents!.setSize(#avatarSize!.getInput()) + + #avatarWnd!.setStyle("margin","auto") + +methodend + +classend \ No newline at end of file diff --git a/widgets/Drawer/components/DrawerFooter/DrawerFooter.bbj b/widgets/Drawer/components/DrawerFooter/DrawerFooter.bbj index 7567fb4e..8a496ec8 100644 --- a/widgets/Drawer/components/DrawerFooter/DrawerFooter.bbj +++ b/widgets/Drawer/components/DrawerFooter/DrawerFooter.bbj @@ -52,9 +52,9 @@ class public DrawerFooter extends BBjWidget declare CircularAvatar avatar! declare BBjChildWindow wrapper! declare BBjStaticText icon! - if init! then - avatar! = new CircularAvatar(#window!, #drawerDataModel!.getAvatarSize(),#drawerDataModel!.getAvatarUrl()) + avatar! = new CircularAvatar(#window!, #drawerDataModel!.getAvatarSize(),#drawerDataModel!.getAvatarUrl(), #title!) + wrapper! = #window!.addChildWindow(#window!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) wrapper!.addPanelStyle("drawerFooterWrapperWindowClosed") wrapper!.addPanelStyle("drawerFooterWrapperWindowSmall") diff --git a/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj b/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj new file mode 100644 index 00000000..4c8b3e9a --- /dev/null +++ b/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj @@ -0,0 +1,56 @@ +use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents +use ::WebKit/util/ClientUtil.bbj::ClientUtil + +class public AvatarIcon extends WebComponents + field private static BBjTopLevelWindow Wnd! + field private static BBjWindow wnd! + field public static BBjNumber ON_AVATAR_INITIAL_CLICK = 1234 + field public static BBjHtmlView htmlView! + field public static BBjString size$ + field public static BBjString name$ + + method public AvatarIcon() + + methodend + + method public AvatarIcon(BBjWindow canvas!) + #wnd! = canvas! + #redraw(1) + methodend + + method private BBjHtmlView configureAvatarView(BBjHtmlView htmlView!) + htmlView!.setCallback(BBjAPI.ON_NATIVE_JAVASCRIPT, #this!,"onClickAvatarInitial") + htmlView!.setStyle("border","none") + htmlView!.executeScript(#script$) + methodret htmlView! + methodend + + method public void onClickAvatarInitial(BBjNativeJavaScriptEvent ev!) + #fireEvent(#ON_AVATAR_INITIAL_CLICK, ev!) + methodend + + method public void redraw(Boolean init!) + if init! > 0 then + #htmlView! = #wnd!.addHtmlView(#wnd!.getAvailableControlID(),0,0,300,300,"") + #htmlView!.setText("") + #htmlView! = #configureAvatarView(#htmlView!) + else + #htmlView!.setText("") + fi + methodend + + method public void setSize(BBjString size$) + #size$ = size$ + #redraw(0) + methodend + + method public void setName(BBjString name$) + #name$ = name$ + #redraw(0) + methodend + + method public BBjHtmlView getView() + methodret #htmlView! + methodend + +classend \ No newline at end of file diff --git a/widgets/WebComponents/WebComponents.bbj b/widgets/WebComponents/WebComponents.bbj new file mode 100644 index 00000000..1671b019 --- /dev/null +++ b/widgets/WebComponents/WebComponents.bbj @@ -0,0 +1,23 @@ +use ::BBjWidget/BBjWidget.bbj::BBjWidget + +class public WebComponents extends BBjWidget + + field public BBjString script$ + + method public WebComponents() + + webComponentLibaryURL$ = STBL("web-component-library-url", err=*next) + if webComponentLibaryURL$ = "" THEN + webComponentLibaryURL$ = "https://cdn.jsdelivr.net/npm/webkit-web-components@latest/dist/web-component/web-component.esm.js" + endif + + #script$ = "var script = document.createElement(""script"");" + + #script$ = #script$ + "script.setAttribute(""src"",""" + webComponentLibaryURL$ + """);" + + #script$ = #script$ + "script.setAttribute(""type"",""module"");" + + #script$ = #script$ + "document.head.appendChild(script)" + methodend + +classend \ No newline at end of file diff --git a/widgets/common/CircularAvatar/CircularAvatar.bbj b/widgets/common/CircularAvatar/CircularAvatar.bbj index e413e342..d1eb1423 100644 --- a/widgets/common/CircularAvatar/CircularAvatar.bbj +++ b/widgets/common/CircularAvatar/CircularAvatar.bbj @@ -1,14 +1,14 @@ use ::BBjWidget/BBjWidget.bbj::BBjWidget -use ::WebKit/util/DynamicLoader.bbj::DynamicLoader - +use ::WebKit/util/ClientUtil.bbj::ClientUtil +use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents +use ::WebKit/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj::AvatarIcon class public CircularAvatar extends BBjWidget field private BBjChildWindow window! - field private BBjString imagePath! method public CircularAvatar(BBjWindow parent!, BBjString radius!, BBjString imagePath!) - DynamicLoader.addLocalCSS("WebKit/widgets/common/CircularAvatar/CircularAvatar.css") + ClientUtil.addLocalCSS("WebKit/widgets/common/CircularAvatar/CircularAvatar.css") #window! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) #window!.addPanelStyle("circularAvatarPanelStyle") @@ -18,6 +18,27 @@ class public CircularAvatar extends BBjWidget #setCanvas(#window!) #redraw(1) methodend + + method public CircularAvatar(BBjWindow parent!, BBjString radius!, BBjString imagePath!, BBjString title!) + ClientUtil.addLocalCSS("WebKit/widgets/common/CircularAvatar/CircularAvatar.css") + + #window! = parent!.addChildWindow(parent!.getAvailableControlID(),0,0,0,0,"",$00108800$,BBjAPI().getSysGui().getAvailableContext()) + + if imagePath! = "" THEN + webComponents! = new AvatarIcon(#window!) + webComponents!.setName(title!) + webComponents!.setSize(radius!) + else + #window!.addPanelStyle("circularAvatarPanelStyle") + #window!.setPanelStyle("width", radius!) + #window!.setPanelStyle("height", radius!) + #imagePath! = imagePath! + #setCanvas(#window!) + #redraw(1) + fi + + methodend + method public void redraw(Boolean init!)