Главная Обзор Помощь
Регистрация Вход
yf_nkx
/
agmp_iot_jetlinks_ui
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Modify the style

jim 7 лет назад
Родитель
93267fc782
Сommit
7eb045c651
2 измененных файлов с 117 добавлено и 118 удалено
Разделённый вид Показать статистику Diff
  1. 81 83
      src/components/Sidebar/index.js
  2. 36 35
      src/components/Sidebar/index.less

+ 81 - 83
src/components/Sidebar/index.js
Просмотреть файл 

@@ -1,5 +1,6 @@
 
 import React, { PureComponent, Fragment } from 'react';
 
 import { Select, List, Switch, Divider, Radio } from 'antd';
 
+import DrawerMenu from 'rc-drawer-menu';
 
 import styles from './index.less';
 
 import ThemeColor from './ThemeColor';
 
 import LayoutSeting from './LayoutSetting';
 
@@ -90,16 +91,11 @@ class Sidebar extends PureComponent {
 
       {
 
         title: 'Fix Siderbar',
 
         isShow: layout === 'sidemenu',
 
-        action: [
 
-          <Switch
 
-            checked={!!this.state.fixSiderbar}
 
-            onChange={this.fixSiderbar}
 
-          />,
 
-        ],
 
+        action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
 
       },
 
     ].filter(item => item.isShow);
 
   };
 
-  fixSiderbar = (checked) => {
 
+  fixSiderbar = checked => {
 
     this.changeSetting('fixSiderbar', checked);
 
   };
 
   changeSetting = (key, value) => {
 
@@ -118,9 +114,9 @@ class Sidebar extends PureComponent {
 
       }
 
     });
 
   };
 
-  propsToState = (props) => {
 
+  propsToState = props => {
 
     const nextState = {};
 
-    Object.keys(props).forEach((key) => {
 
+    Object.keys(props).forEach(key => {
 
       if (props[key] && this.defaultstate[key] !== undefined) {
 
         nextState[key] = props[key];
 
       }
 
@@ -135,82 +131,84 @@ class Sidebar extends PureComponent {
 
       display: 'block',
 
     };
 
     return (
 
-      <div
 
-        className={`${styles.sidebar} ${
 
-          this.state.collapse ? styles.show : ''
 
-        }`}
 
-      >
 
-        <div className={styles.mini_bar} onClick={this.togglerContent}>
 
-          <img
 
-            alt="logo"
 
-            src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
 
-          />
 
-        </div>
 
-        <div className={styles.content}>
 
-          <Body
 
-            title="整体风格设置"
 
-            style={{
 
-              paddingBottom: 10,
 
-            }}
 
-          >
 
-            <RadioGroup
 
-              onChange={({ target }) =>
 
-                this.changeSetting('silderTheme', target.value)
 
-              }
 
-              value={this.state.silderTheme}
 
-            >
 
-              <Radio style={radioStyle} value="dark">
 
-                <ColorBlock color="#002140" title="深色导航" />
 
-              </Radio>
 
-              <Radio style={radioStyle} value="ligth">
 
-                <ColorBlock color="#E9E9E9" title="浅色导航" />
 
-              </Radio>
 
-            </RadioGroup>
 
-            <ThemeColor
 
-              value={this.state.themeColor}
 
-              onChange={color => this.changeSetting('themeColor', color)}
 
-            />
 
-          </Body>
 
-          <Divider style={{ margin: 0 }} />
 
-          <Body title="导航设置 ">
 
-            <LayoutSeting
 
-              value={this.state.layout}
 
-              onChange={layout => this.changeSetting('layout', layout)}
 
-            />
 
-            <List
 
-              split={false}
 
-              dataSource={this.getLayOutSetting()}
 
-              renderItem={item => (
 
-                <List.Item actions={item.action}>{item.title}</List.Item>
 
-              )}
 
+      <>
 
+        <div className={styles.sidebar}>
 
+          <div className={styles.mini_bar} onClick={this.togglerContent}>
 
+            <img
 
+              alt="logo"
 
+              src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
 
             />
 
-          </Body>
 
-          <Divider style={{ margin: 0 }} />
 
-          <Body title="其他设置">
 
-            <List
 
-              split={false}
 
-              dataSource={[
 
-                {
 
-                  title: '色弱模式',
 
-                  action: [
 
-                    <Select
 
-                      value={this.state.colorWeak}
 
-                      onSelect={value => this.changeSetting('colorWeak', value)}
 
-                      style={{ width: 120 }}
 
-                    >
 
-                      <Select.Option value="open">打开</Select.Option>
 
-                      <Select.Option value="colse">关闭</Select.Option>
 
-                    </Select>,
 
-                  ],
 
-                },
 
-              ]}
 
-              renderItem={item => (
 
-                <List.Item actions={item.action}>{item.title}</List.Item>
 
-              )}
 
-            />
 
-          </Body>
 
+          </div>
 
         </div>
 
-      </div>
 
+        <DrawerMenu
 
+          parent={null}
 
+          level={null}
 
+          iconChild={null}
 
+          open={this.state.collapse}
 
+          placement="right"
 
+          width="336px"
 
+          onMaskClick={this.togglerContent}
 
+        >
 
+          <div className={styles.content}>
 
+            <Body
 
+              title="整体风格设置"
 
+              style={{
 
+                paddingBottom: 10,
 
+              }}
 
+            >
 
+              <RadioGroup
 
+                onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
 
+                value={this.state.silderTheme}
 
+              >
 
+                <Radio style={radioStyle} value="dark">
 
+                  <ColorBlock color="#002140" title="深色导航" />
 
+                </Radio>
 
+                <Radio style={radioStyle} value="ligth">
 
+                  <ColorBlock color="#E9E9E9" title="浅色导航" />
 
+                </Radio>
 
+              </RadioGroup>
 
+              <ThemeColor
 
+                value={this.state.themeColor}
 
+                onChange={color => this.changeSetting('themeColor', color)}
 
+              />
 
+            </Body>
 
+            <Divider style={{ margin: 0 }} />
 
+            <Body title="导航设置 ">
 
+              <LayoutSeting
 
+                value={this.state.layout}
 
+                onChange={layout => this.changeSetting('layout', layout)}
 
+              />
 
+              <List
 
+                split={false}
 
+                dataSource={this.getLayOutSetting()}
 
+                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
 
+              />
 
+            </Body>
 
+            <Divider style={{ margin: 0 }} />
 
+            <Body title="其他设置">
 
+              <List
 
+                split={false}
 
+                dataSource={[
 
+                  {
 
+                    title: '色弱模式',
 
+                    action: [
 
+                      <Select
 
+                        value={this.state.colorWeak}
 
+                        onSelect={value => this.changeSetting('colorWeak', value)}
 
+                        style={{ width: 120 }}
 
+                      >
 
+                        <Select.Option value="open">打开</Select.Option>
 
+                        <Select.Option value="colse">关闭</Select.Option>
 
+                      </Select>,
 
+                    ],
 
+                  },
 
+                ]}
 
+                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
 
+              />
 
+            </Body>
 
+          </div>
 
+        </DrawerMenu>
 
+      </>
 
     );
 
   }
 
 }

+ 36 - 35
src/components/Sidebar/index.less
Просмотреть файл 

@@ -16,47 +16,48 @@
 
     text-align: center;
 
     font-size: 24px;
 
     background: white;
 
+    position: fixed;
 
+    bottom: 50px;
 
+    right: 50px;
 
     box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
 
     img {
 
       width: 28px;
 
       height: 28px;
 
     }
 
   }
 
-  .content {
 
-    width: 336px;
 
-    background: white;
 
-    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
 
-    box-shadow: -3px 0 10px 3px rgba(183, 183, 183, 0.3);
 
-    :global {
 
-      .ant-switch-checked {
 
-        background-color: #87d068;
 
-      }
 
-      .ant-list-item {
 
-        padding-top: 7px;
 
-        padding-bottom: 7px;
 
-      }
 
+}
 
+
 
+.content {
 
+  width: 336px;
 
+  :global {
 
+    .ant-switch-checked {
 
+      background-color: #87d068;
 
+    }
 
+    .ant-list-item {
 
+      padding-top: 7px;
 
+      padding-bottom: 7px;
 
     }
 
   }
 
-  .color_block {
 
-    width: 38px;
 
-    height: 22px;
 
-    margin: 4px;
 
-    margin-right: 12px;
 
-    display: inline-block;
 
-    vertical-align: middle;
 
-    background: #002140;
 
-    border-radius: 2px;
 
-  }
 
-  .color_block_title {
 
-    display: inline-block;
 
-    font-size: 14px;
 
-    color: rgba(0, 0, 0, 0.65);
 
-    line-height: 22px;
 
-  }
 
-  .bodyTitle {
 
-    font-size: 14px;
 
-    color: rgba(0, 0, 0, 0.85);
 
-    line-height: 22px;
 
-    margin-bottom: 10px;
 
-  }
 
+}
 
+.color_block {
 
+  width: 38px;
 
+  height: 22px;
 
+  margin: 4px;
 
+  margin-right: 12px;
 
+  display: inline-block;
 
+  vertical-align: middle;
 
+  background: #002140;
 
+  border-radius: 2px;
 
+}
 
+.color_block_title {
 
+  display: inline-block;
 
+  font-size: 14px;
 
+  color: rgba(0, 0, 0, 0.65);
 
+  line-height: 22px;
 
+}
 
+.bodyTitle {
 
+  font-size: 14px;
 
+  color: rgba(0, 0, 0, 0.85);
 
+  line-height: 22px;
 
+  margin-bottom: 10px;
 
 }