[client] homepage mobile support

Author: QIQI03

client/VERSION

@@ -1 +1 @@
-1.0.21
+1.1.0

client/packages/openblocks-core/package.json

@@ -31,6 +31,5 @@
     "lib/index.js",
     "lib/index.d.ts"
   ],
-  "author": "ioc",
-  "license": "MIT"
+  "author": "ioc"
 }

client/packages/openblocks-dev-utils/package.json

@@ -2,6 +2,5 @@
   "name": "openblocks-dev-utils",
   "version": "0.0.1",
   "type": "module",
-  "description": "Openblocks dev utils for openblocks build process and openblocks-cli",
-  "license": "MIT"
+  "description": "Openblocks dev utils for openblocks build process and openblocks-cli"
 }

client/packages/openblocks/src/assets/images/favicon.ico

@@ -133,12 +133,13 @@ export function newCustomColumn(): ConstructorToDataType<typeof ColumnComp> {
  */
 export function newPrimaryColumn(
   key: string,
-  title?: string
+  title?: string,
+  isTag?: boolean
 ): ConstructorToDataType<typeof ColumnComp> {
   return {
     title: title ?? key,
     dataIndex: key,
     isCustom: false,
-    render: { compType: "text", comp: { text: "{{currentCell}}" } },
+    render: { compType: isTag ? "tag" : "text", comp: { text: "{{currentCell}}" } },
   };
 }

client/packages/openblocks/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -51,7 +51,7 @@ const tableInitValue = {
 const tableData = {
   ...tableInitValue,
   data: JSON.stringify(i18nObjs.table.defaultData, null, " "),
-  columns: i18nObjs.table.columns.map(({ key, title }) => newPrimaryColumn(key, title)),
+  columns: i18nObjs.table.columns.map((t) => newPrimaryColumn(t.key, t.title, t.isTag)),
 };
 export const MockTableComp = withDefault(TableComp, tableData);
 

client/packages/openblocks/src/comps/comps/tableComp/mockTableComp.tsx

@@ -46,7 +46,7 @@ export const enObj: I18nObjects = {
       { key: "id", title: "ID" },
       { key: "name", title: "Name" },
       { key: "date", title: "Date" },
-      { key: "department", title: "Department" },
+      { key: "department", title: "Department", isTag: true },
     ],
     defaultData: [
       {

client/packages/openblocks/src/i18n/locales/enObj.tsx

@@ -7,7 +7,7 @@ export type I18nObjects = {
     defaultFormData: JSONObject;
   };
   table: {
-    columns: { key: string; title: string }[];
+    columns: { key: string; title: string; isTag?: boolean }[];
     defaultData: JSONObject[];
   };
   editorTutorials: {

client/packages/openblocks/src/i18n/locales/types.tsx

@@ -11,8 +11,9 @@ const ApplicationCardsWrapper = styled.div`
   grid-column-gap: 112px;
   margin: 48px 26px 80px;
   overflow: hidden;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     display: block;
+    margin: 48px 18px 80px;
   }
 `;
 

client/packages/openblocks/src/pages/ApplicationV2/HomeCardView.tsx

@@ -29,7 +29,7 @@ import { Layers } from "../../constants/Layers";
 import { CreateDropdown } from "./CreateDropdown";
 import { trans } from "../../i18n";
 import { isFetchingFolderElements } from "../../redux/selectors/folderSelector";
-import { isSmallScreen } from "util/commonUtils";
+import { checkIsMobile } from "util/commonUtils";
 
 const Wrapper = styled.div`
   display: flex;
@@ -45,6 +45,9 @@ const HeaderWrapper = styled.div`
   padding: 0 36px;
   align-items: center;
   flex-shrink: 0;
+  @media screen and (max-width: 500px) {
+    padding: 0 24px;
+  }
 `;
 
 const OperationWrapper = styled.div`
@@ -55,6 +58,9 @@ const OperationWrapper = styled.div`
   height: 32px;
   padding: 0 36px;
   margin: 8px 0 0;
+  @media screen and (max-width: 500px) {
+    padding: 0 24px;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -79,7 +85,7 @@ const OperationRightWrapper = styled.div`
   align-items: center;
   flex-shrink: 0;
   margin-left: auto;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     > Button {
       display: none;
     }
@@ -157,7 +163,7 @@ const SkeletonStyle = styled(Skeleton)`
       margin-right: 120px;
     }
   }
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     .ant-skeleton-content .ant-skeleton-paragraph > li {
       max-width: calc(100vw - 72px);
       min-width: calc(100vw - 72px);
@@ -174,7 +180,7 @@ const EmptyView = styled.div`
   align-items: center;
   flex-grow: 1;
   padding-top: 120px;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     > div,
     > button {
       display: none;
@@ -199,7 +205,7 @@ const LayoutSwitcher = styled.div`
     background-color: #f5f5f6;
   }
 
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     display: none;
   }
 `;
@@ -243,7 +249,7 @@ export function HomeLayout(props: HomeLayoutProps) {
   const [filterBy, setFilterBy] = useState<HomeResKey>("All");
   const [searchValue, setSearchValue] = useState("");
   const [layout, setLayout] = useState<HomeLayoutType>(
-    isSmallScreen ? "card" : getHomeLayout()
+    checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
   );
 
   useEffect(() => saveHomeLayout(layout), [layout]);

client/packages/openblocks/src/pages/ApplicationV2/HomeLayout.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../util/homeResUtils";
 import { HomeResOptions } from "./HomeResOptions";
 import { trans } from "../../i18n";
-import { isSmallScreen } from "util/commonUtils";
+import { checkIsMobile } from "util/commonUtils";
 import history from "util/history";
 import { APPLICATION_VIEW_URL } from "constants/routesURL";
 
@@ -25,7 +25,7 @@ const EditButton = styled(TacoButton)`
   height: 24px;
   padding: 5px 12px;
   margin-right: 12px;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     display: none;
   }
 `;
@@ -46,7 +46,7 @@ const ExecButton = styled(TacoButton)`
     border: 1px solid #c2d6ff;
     color: #315efb;
   }
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     margin-right: 0;
     display: none;
   }
@@ -81,10 +81,11 @@ const Card = styled.div`
       opacity: 1;
     }
   }
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     button {
       opacity: 1;
     }
+    padding: 0;
   }
 `;
 
@@ -160,7 +161,7 @@ const AppTimeOwnerInfoLabel = styled.div`
 const OperationWrapper = styled.div`
   display: flex;
   align-items: center;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     > svg {
       display: none;
     }
@@ -189,16 +190,16 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
         )}
         <CardInfo
           onClick={(e) => {
-            if (isSmallScreen) {
-              history.push(APPLICATION_VIEW_URL(res.id, "view"));
-              return;
-            }
             if (appNameEditing) {
               return;
             }
             if (res.type === HomeResTypeEnum.Folder) {
               handleFolderViewClick(res.id);
             } else {
+              if (checkIsMobile(window.innerWidth)) {
+                history.push(APPLICATION_VIEW_URL(res.id, "view"));
+                return;
+              }
               res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
             }
           }}

client/packages/openblocks/src/pages/ApplicationV2/HomeResCard.tsx

@@ -131,7 +131,7 @@ const CreateFolderIcon = styled.div`
 `;
 
 const DivStyled = styled.div`
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     .ant-layout-sider {
       visibility: hidden;
       padding: 0;

client/packages/openblocks/src/pages/ApplicationV2/index.tsx

@@ -85,7 +85,7 @@ const EditBtn = styled(TacoButton)`
 
 const Wrapper = styled.div`
   display: inherit;
-  @media screen and (max-width: 500px), (max-height: 500px) {
+  @media screen and (max-width: 500px) {
     > div:nth-of-type(1),
     > button {
       display: none;

client/packages/openblocks/src/pages/common/previewHeader.tsx

@@ -26,7 +26,7 @@ import { currentOrgAdmin, currentOrgAdminOrDev } from "util/permissionUtils";
 import { trans } from "i18n";
 import { isEE } from "util/envUtils";
 import { showSwitchOrg } from "@openblocks-ee/pages/common/customerService";
-import { isSmallScreen } from "util/commonUtils";
+import { checkIsMobile } from "util/commonUtils";
 
 const ProfileWrapper = styled.div`
   display: flex;
@@ -138,7 +138,7 @@ export default function ProfileDropdown(props: DropDownProps) {
   const handleClick = (e: any) => {
     if (e.key === "profile") {
       // click the profile, while not close the dropdown
-      if (isSmallScreen) {
+      if (checkIsMobile(window.innerWidth)) {
         return;
       }
       dispatch(profileSettingModalVisible(true));
@@ -174,7 +174,7 @@ export default function ProfileDropdown(props: DropDownProps) {
           <ProfileImage source={avatarUrl} userName={username} side={48} />
           <StyledNameLabel>
             <CommonTextLabel2 title={username}>{username}</CommonTextLabel2>
-            {!isSmallScreen && <EditIcon style={{ position: "absolute", right: 0, top: 0 }} />}
+            {!checkIsMobile(window.innerWidth) && <EditIcon style={{ position: "absolute", right: 0, top: 0 }} />}
           </StyledNameLabel>
           {currentOrg && (
             <CommonGrayLabel
@@ -192,7 +192,7 @@ export default function ProfileDropdown(props: DropDownProps) {
           )}
         </ProfileWrapper>
       </Menu.Item>
-      {!isSmallScreen && currentOrgAdminOrDev(props.user) && (
+      {!checkIsMobile(window.innerWidth) && currentOrgAdminOrDev(props.user) && (
         <Menu.Item key="setting">{trans("profile.orgSettings")}</Menu.Item>
       )}
       {orgs && orgs.length > 0 && showSwitchOrg(props.user) && (
@@ -212,7 +212,7 @@ export default function ProfileDropdown(props: DropDownProps) {
               </MenuItem>
             );
           })}
-          {!isSmallScreen && (
+          {!checkIsMobile(window.innerWidth) && (
             <>
               <Menu.Divider />
               <Menu.Item key="newOrganization" icon={<AddIcon />}>
@@ -222,7 +222,7 @@ export default function ProfileDropdown(props: DropDownProps) {
           )}
         </StyledDropdownSubMenu>
       )}
-      {!isSmallScreen && isEE() && currentOrgAdmin(props.user) && (
+      {!checkIsMobile(window.innerWidth) && isEE() && currentOrgAdmin(props.user) && (
         <Menu.Item key="audit">{trans("profile.auditLogs")}</Menu.Item>
       )}
       <Menu.Item key="logout">{trans("profile.logout")}</Menu.Item>

client/packages/openblocks/src/pages/common/profileDropdown.tsx

@@ -66,6 +66,3 @@ export async function loadScript(src: string) {
 export function checkIsMobile(width?: number) {
   return !_.isNil(width) && width <= 500;
 }
-
-// landscape orientation and portrait
-export const isSmallScreen = window.innerWidth < 500 || window.innerHeight < 500;