SDK Website, Refresh of Admin Area, Previews in Marketplace

Author: FalkWolsky

client/packages/lowcoder-design/src/components/button.tsx

@@ -198,6 +198,7 @@ const TacoButton = forwardRef(
     return (
       <StyledAntdButton
         {...restProps}
+        data-button-type={buttonType ?? "normal"}
         $buttonType={props.buttonType ?? "normal"}
         $loading={!!props.loading}
         ref={ref}

client/packages/lowcoder/marketplace-preview.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex,nofollow" />
+    <title>App layout preview</title>
+    <script>
+      window.global = window;
+    </script>
+    <style>
+      html,
+      body,
+      #root {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      * {
+        animation: none !important;
+        caret-color: transparent !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/marketplace-preview.tsx"></script>
+  </body>
+</html>

client/packages/lowcoder/src/assets/fonts/UFL.txt

@@ -0,0 +1,96 @@
+-------------------------------
+UBUNTU FONT LICENCE Version 1.0
+-------------------------------
+
+PREAMBLE
+This licence allows the licensed fonts to be used, studied, modified and
+redistributed freely. The fonts, including any derivative works, can be
+bundled, embedded, and redistributed provided the terms of this licence
+are met. The fonts and derivatives, however, cannot be released under
+any other licence. The requirement for fonts to remain under this
+licence does not require any document created using the fonts or their
+derivatives to be published under this licence, as long as the primary
+purpose of the document is not to be a vehicle for the distribution of
+the fonts.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this licence and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Original Version" refers to the collection of Font Software components
+as received under this licence.
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Copyright Holder(s)" refers to all individuals and companies who have a
+copyright ownership of the Font Software.
+
+"Substantially Changed" refers to Modified Versions which can be easily
+identified as dissimilar to the Font Software by users of the Font
+Software comparing the Original Version with the Modified Version.
+
+To "Propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification and with or without charging
+a redistribution fee), making available to the public, and in some
+countries other activities as well.
+
+PERMISSION & CONDITIONS
+This licence does not grant any rights under trademark law and all such
+rights are reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to propagate the Font Software, subject to
+the below conditions:
+
+1) Each copy of the Font Software must contain the above copyright
+notice and this licence. These can be included either as stand-alone
+text files, human-readable headers or in the appropriate machine-
+readable metadata fields within text or binary files as long as those
+fields can be easily viewed by the user.
+
+2) The font name complies with the following:
+(a) The Original Version must retain its name, unmodified.
+(b) Modified Versions which are Substantially Changed must be renamed to
+avoid use of the name of the Original Version or similar names entirely.
+(c) Modified Versions which are not Substantially Changed must be
+renamed to both (i) retain the name of the Original Version and (ii) add
+additional naming elements to distinguish the Modified Version from the
+Original Version. The name of such Modified Versions must be the name of
+the Original Version, with "derivative X" where X represents the name of
+the new work, appended to that name.
+
+3) The name(s) of the Copyright Holder(s) and any contributor to the
+Font Software shall not be used to promote, endorse or advertise any
+Modified Version, except (i) as required by this licence, (ii) to
+acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
+their explicit written permission.
+
+4) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this licence, and must not be distributed
+under any other licence. The requirement for fonts to remain under this
+licence does not affect any document created using the Font Software,
+except any version of the Font Software extracted from a document
+created using the Font Software may only be distributed under this
+licence.
+
+TERMINATION
+This licence becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.

client/packages/lowcoder/src/assets/fonts/ubuntu-400.woff2

@@ -0,0 +1,7 @@
+import { Alert, Button } from "antd";
+import { trans } from "i18n";
+
+export function AdminListError({ retry }: { retry: () => void }) {
+  return <Alert type="error" showIcon message={trans("admin.loadError")}
+    action={<Button size="small" onClick={retry}>{trans("admin.retry")}</Button>} />;
+}

client/packages/lowcoder/src/assets/fonts/ubuntu-500.woff2

@@ -0,0 +1,26 @@
+import { Pagination } from "antd";
+import { trans } from "i18n";
+
+interface Props {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+  setCurrentPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  simple?: boolean;
+}
+
+export function AdminPagination({ currentPage, pageSize, total, setCurrentPage, setPageSize, simple }: Props) {
+  if (total === 0) return null;
+  return <Pagination
+    style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", padding: simple ? "12px 8px" : "20px 16px", gap: 4 }}
+    current={currentPage}
+    pageSize={pageSize}
+    total={total}
+    simple={simple}
+    responsive
+    showSizeChanger={!simple}
+    showTotal={simple ? undefined : (count, range) => trans("admin.resultCount", { start: range[0], end: range[1], total: count })}
+    onChange={(page, size) => size !== pageSize ? setPageSize(size) : setCurrentPage(page)}
+  />;
+}

client/packages/lowcoder/src/assets/fonts/ubuntu-700.woff2

@@ -12,6 +12,7 @@ import styled from "styled-components";
 import { useSelector } from "react-redux";
 import { MenuOutlined } from "@ant-design/icons";
 import { Drawer, Button } from "antd";
+import { trans } from "i18n";
 import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 type LayoutProps = {
@@ -24,26 +25,30 @@ const SideBarV2 = styled(SideBar)<{
   $activeBgColor?: string,
   $activeFontColor?: string,
 }>`
-  background: ${props => props.$bgColor ? props.$bgColor : '#f7f9fc'} !important;
+  background: ${props => props.$bgColor ? props.$bgColor : '#f8f3fb'} !important;
   ${props => props.$fontColor && `color: ${props.$fontColor}`};
-  padding: 28px 10px;
-  border-right: 1px solid #ebebeb;
+  padding: 20px 14px;
+  overflow-y: auto;
+  flex-shrink: 0;
+  border-right: 1px solid #e9e0ee;
 
   .sidebar-section:not(:last-child)::after {
     content: "";
     display: block;
-    width: 204px;
+    width: calc(100% - 24px);
     height: 1px;
-    background: #ebebeb !important;
-    margin: 0 auto 4px;
+    background: #e9e0ee;
+    margin: 12px auto;
   }
 `;
 
 const MobileMenuButton = styled(Button)`
   display: none;
   position: fixed;
-  top: 75px;
-  right: 22px;
+  top: 12px;
+  left: 12px;
+  width: 36px;
+  height: 36px;
   z-index: 1000;
 
   @media screen and (max-width: 720px) {
@@ -59,7 +64,7 @@ const DrawerContentWrapper = styled.div`
 
 export function Layout(props: LayoutProps) {
   const [drawerVisible, setDrawerVisible] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth <= 720);
   const brandingSettings = useSelector(getBrandingSetting);
 
   const toggleDrawer = () => {
@@ -100,12 +105,14 @@ export function Layout(props: LayoutProps) {
 
   return (
     <AntdLayout style={{ height: "100%" }}>
-      <AppHeader />
+      <AppHeader showBrandName />
       <HelpDropdown />
 
       {/* Mobile Hamburger Button */}
       {isMobile && (
         <MobileMenuButton
+          aria-label={trans("admin.navigation")}
+          aria-expanded={drawerVisible}
           type="primary"
           shape="circle"
           icon={<MenuOutlined />}
@@ -115,10 +122,11 @@ export function Layout(props: LayoutProps) {
 
       {/* Drawer for Mobile Sidebar */}
       <Drawer
-        width={"240px"}
-        placement="right"
+        title={trans("admin.navigation")}
+        width={280}
+        placement="left"
         closable={true}
-        onClose={toggleDrawer}
+        onClose={() => setDrawerVisible(false)}
         open={drawerVisible}
         styles={{
           body: { padding: "0px" }
@@ -127,6 +135,8 @@ export function Layout(props: LayoutProps) {
       >
         <DrawerContentWrapper>
           <SideBarV2
+            width="100%"
+            style={{ height: "100%" }}
             className={CNSidebar}
             $bgColor={brandingSettings?.config_set?.adminSidebarColor}
             $fontColor={brandingSettings?.config_set?.adminSidebarFontColor}
@@ -163,10 +173,10 @@ export function Layout(props: LayoutProps) {
               ))}
           </SideBarV2>
         )}
-        <MainContent className={CNMainContent}>
+        <MainContent id="admin-main" tabIndex={-1} className={CNMainContent}>
           <Switch>{routes}</Switch>
         </MainContent>
       </AntdLayout>
     </AntdLayout>
   );
-}
+}

client/packages/lowcoder/src/components/layout/AdminListFeedback.tsx

@@ -6,27 +6,35 @@ import { useLocation } from "react-router-dom";
 
 type SideBarSize = "medium" | "small";
 
-const Wrapper = styled.div<{
+const Wrapper = styled.button<{
   $size?: SideBarSize;
   $selected?: boolean;
   $selectedBgColor?: string;
   $selectedFontColor?: string;
 }>`
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  transition: background 150ms, color 150ms;
   width: 100%;
   height: ${(props) => (props.$size === "small" ? "36px" : "44px")};
-  border-radius: 4px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
-  padding: 0 8px 0 26px;
+  padding: 0 12px;
+  gap: 4px;
   cursor: pointer;
 
   &:hover {
     background: ${(props) => (props.$selected ? (
-      `${props.$selectedBgColor ? props.$selectedBgColor : '#ebf0f7'}`
+      `${props.$selectedBgColor ? props.$selectedBgColor : '#eadcf3'}`
     ) : (
-      `${props.$selectedBgColor ? props.$selectedBgColor : '#efeff1'}`
+      `${props.$selectedBgColor ? props.$selectedBgColor : '#f0e6f6'}`
     ))};
-    color: ${(props) => props.$selectedFontColor ? props.$selectedFontColor : '#4965f2'}
+    color: ${(props) => props.$selectedFontColor ? props.$selectedFontColor : '#683e86'}
   }
 
   svg {
@@ -36,8 +44,8 @@ const Wrapper = styled.div<{
   ${(props) =>
     props.$selected &&
     css`
-      color: ${props.$selectedFontColor ? props.$selectedFontColor : '#4965f2'};
-      background: ${props.$selectedBgColor ? props.$selectedBgColor : '#ebf0f7'};
+      color: ${props.$selectedFontColor ? props.$selectedFontColor : '#683e86'};
+      background: ${props.$selectedBgColor ? props.$selectedBgColor : '#eadcf3'};
     `}
 `;
 
@@ -47,6 +55,8 @@ export const SideBarItem = (props: SideBarItemProps) => {
   const currentPath = useLocation().pathname;
   return (
     <Wrapper
+      type="button"
+      aria-current={props.selected ? "page" : undefined}
       style={props.style}
       className={CNSidebarItem}
       $size={props.size}