💄 优化调整连接按钮和主题切换按钮在拖拽改变大小时的布局样式

hczs · Oct 11, 2023 · 22ace21 · 22ace21
1 parent 5e4d09e
commit 22ace21
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/src/components/side/side.scss b/src/components/side/side.scss
@@ -11,12 +11,18 @@
   width: 100%;
 }
 
+.icon-btn {
+  float: right;
+  margin: 0 0 0 10px;
+}
+
 .conn-btn {
   width: 100%;
 }
 
 .row-container {
-  margin: 0 0 0 -10px
+  margin: 0 0 0 -10px;
+  display: flex;
 }
 
 .light-conn-row {
@@ -27,4 +33,4 @@
 .dark-conn-row {
   //background-color: #11ea40 !important;
   color: #34c3ff;
-}
+}
diff --git a/src/components/side/side.tsx b/src/components/side/side.tsx
@@ -154,25 +154,22 @@ const Side = () => {
         <div className='side-container'>
 
             <div className='connect-container'>
-                <Grid fluid>
-                    <Row className='row-container'>
-                        <Col xs={20}>
-                            <Button className='conn-btn' appearance="primary" block
-                                    onClick={handleOpen}>新建连接</Button>
-                        </Col>
-                        <Col xs={4}>
-                            <IconButton
-                                icon={
-                                    <Icon
-                                        as={context.theme === 'light' ? MdOutlineNightlight : MdOutlineLightMode}
-                                    />
-                                }
-                                onClick={changeTheme}
-                            />
-                        </Col>
-                    </Row>
-                </Grid>
-
+                <div className='row-container'>
+                    <div className='conn-btn'>
+                        <Button appearance="primary" block
+                                onClick={handleOpen}>新建连接</Button>
+                    </div>
+                    <div className={"icon-btn"}>
+                        <IconButton
+                            icon={
+                                <Icon
+                                    as={context.theme === 'light' ? MdOutlineNightlight : MdOutlineLightMode}
+                                />
+                            }
+                            onClick={changeTheme}
+                        />
+                    </div>
+                </div>
             </div>
             <div className='cluster-list'>
                 <Table
@@ -189,7 +186,7 @@ const Side = () => {
                     }}
                 >
 
-                    <Column align="center" flexGrow={1}>
+                    <Column align="left" flexGrow={1}>
                         <HeaderCell>clusterName</HeaderCell>
                         <Cell dataKey="clusterName"/>
                     </Column>