fix(web): add some missing styling (#1279)

* comment column * fix: filter max width * asset and request header * fix: asset page
reearth · Oct 23, 2024 · c83a814 · c83a814
1 parent 06366b3
commit c83a814
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 19 deletions.
diff --git a/web/src/components/atoms/Icon/icons.ts b/web/src/components/atoms/Icon/icons.ts
@@ -51,6 +51,7 @@ import {
   ReloadOutlined,
   SortAscendingOutlined,
   FilterOutlined,
+  CommentOutlined,
 } from "@ant-design/icons";
 
 import ArrowSquareOut from "./Icons/arrowSquareOut.svg";
@@ -177,4 +178,5 @@ export default {
   editorCopy: EditorCopy,
   circle: Circle,
   rectangle: Rectangle,
+  comment: CommentOutlined,
 };
diff --git a/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx b/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx
@@ -223,6 +223,7 @@ const BodyContainer = styled.div`
   flex-direction: row;
   width: 100%;
   height: calc(100% - 72px);
+  border-top: 1px solid #00000008;
   .ant-tree-show-line .ant-tree-switcher {
     background-color: transparent;
   }
@@ -239,6 +240,7 @@ const BodyWrapper = styled.div`
 const SideBarWrapper = styled.div`
   padding: 8px;
   width: 272px;
+  background-color: #fafafa;
 `;
 
 const StyledButton = styled(Button)`

diff --git a/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx b/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx
@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
-import { CSSProperties, ReactNode } from "react";
+import { ReactNode } from "react";
 
 type Props = {
   title: string;
   children?: ReactNode;
-  style?: CSSProperties;
 };
 
-const SideBarCard: React.FC<Props> = ({ title, children, style }) => {
+const SideBarCard: React.FC<Props> = ({ title, children }) => {
   return (
-    <SideBarCardWrapper style={style}>
+    <SideBarCardWrapper>
       <CardTitle>{title}</CardTitle>
       <CardValue>{children}</CardValue>
     </SideBarCardWrapper>
@@ -23,6 +22,7 @@ const SideBarCardWrapper = styled.div`
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 4px 0 #00000025;
+  background-color: #fff;
 `;
 
 const CardTitle = styled.span`

diff --git a/web/src/components/molecules/Asset/AssetList/index.tsx b/web/src/components/molecules/Asset/AssetList/index.tsx
@@ -179,5 +179,5 @@ const Wrapper = styled.div`
 `;
 
 const StyledPageHeader = styled(PageHeader)`
-  margin: 0 8px;
+  border-bottom: 1px solid #00000008;
 `;
diff --git a/web/src/components/molecules/Common/CommentsPanel/index.tsx b/web/src/components/molecules/Common/CommentsPanel/index.tsx
@@ -42,7 +42,7 @@ const CommentsPanel: React.FC<Props> = ({
       trigger={<Icon icon={collapsed ? "panelToggleLeft" : "panelToggleRight"} />}>
       <ContentWrapper>
         {collapsed ? (
-          <StyledIcon icon="message" onClick={() => onCollapse(false)} />
+          <StyledIcon icon="comment" onClick={() => onCollapse(false)} />
         ) : (
           <>
             <ThreadWrapper>
@@ -72,7 +72,8 @@ const CommentsPanel: React.FC<Props> = ({
 export default CommentsPanel;
 
 const StyledIcon = styled(Icon)`
-  padding: 12px 20px;
+  padding-top: 12px;
+  justify-content: center;
 `;
 
 const ThreadWrapper = styled.div`
@@ -81,7 +82,8 @@ const ThreadWrapper = styled.div`
 `;
 
 const Title = styled.h3`
-  font-size: 18px;
+  font-size: 16px;
+  line-height: 1.5;
   cursor: pointer;
 `;
 

diff --git a/web/src/components/molecules/Content/Table/DropdownRender/index.tsx b/web/src/components/molecules/Content/Table/DropdownRender/index.tsx
@@ -156,6 +156,10 @@ const StyledFormItem = styled(Form.Item)`
 
 const TextWrapper = styled.span`
   min-width: 137px;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   text-align: left;
 `;
 

diff --git a/web/src/components/molecules/Content/Table/filterDropdown.tsx b/web/src/components/molecules/Content/Table/filterDropdown.tsx
@@ -77,7 +77,7 @@ const FilterDropdown: React.FC<Props> = ({
       <Badge offset={[-3, 3]} color="blue" dot>
         <StyledButton type="text">
           <Space size={10}>
-            {filter.title}
+            <Title>{filter.title}</Title>
             <div onClick={remove}>
               <StyledIcon icon="close" size={12} />
             </div>
@@ -95,6 +95,13 @@ const StyledButton = styled(Button)`
   background-color: #f8f8f8;
 `;
 
+const Title = styled.div`
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 const StyledIcon = styled(Icon)`
   color: rgba(0, 0, 0, 0.45);
   :hover {

diff --git a/web/src/components/molecules/Content/Table/index.tsx b/web/src/components/molecules/Content/Table/index.tsx
@@ -526,7 +526,7 @@ const ContentTable: React.FC<Props> = ({
   const sharedProps = useMemo(
     () => ({
       menu: { items },
-      dropdownRender: (menu: React.ReactNode): React.ReactNode => (
+      dropdownRender: (menu: React.ReactNode) => (
         <Wrapper>
           <InputWrapper>
             <Input
@@ -535,7 +535,7 @@ const ContentTable: React.FC<Props> = ({
               onChange={handleChange}
             />
           </InputWrapper>
-          {React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
+          {React.cloneElement(menu as React.ReactElement)}
         </Wrapper>
       ),
       arrow: false,
@@ -710,7 +710,7 @@ const ContentTable: React.FC<Props> = ({
     currentView.columns?.forEach((col, index) => {
       const colKey = (metaColumn as readonly string[]).includes(col.field.type)
         ? col.field.type
-        : col.field.id ?? "";
+        : (col.field.id ?? "");
       cols[colKey] = { show: col.visible, order: index, fixed: col.fixed };
     });
     return cols;
@@ -880,10 +880,15 @@ const Wrapper = styled.div`
     0 3px 6px -4px rgba(0, 0, 0, 0.12),
     0 6px 16px 0 rgba(0, 0, 0, 0.08),
     0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  .ant-dropdown-menu {
+    box-shadow: none;
+    overflow-y: auto;
+    max-height: 256px;
+    max-width: 332px;
+    .ant-dropdown-menu-title-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 `;
-
-const menuStyle: React.CSSProperties = {
-  boxShadow: "none",
-  overflowY: "auto",
-  maxHeight: "256px",
-};
diff --git a/web/src/components/molecules/Request/List/index.tsx b/web/src/components/molecules/Request/List/index.tsx
@@ -108,7 +108,7 @@ const Content = styled.div`
 `;
 
 const StyledPageHeader = styled(PageHeader)`
-  margin: 0 8px;
+  border-bottom: 1px solid #00000008;
 `;
 
 export default RequestListMolecule;