!487 设计器界面,云盘信息Ui优化

src/UI/Components/Modal/ModalStyle/Modal.less

@@ -122,6 +122,7 @@
 #modal .input-select{
     display: inline-block;
     width: @selectWidth;
+    vertical-align: bottom;
 }
 
 //select高度改变,调整切换符号位置

src/UI/Components/SourceManage/SpaceInfoBar.tsx

@@ -12,12 +12,6 @@ const BarStype: React.CSSProperties = {
     margin: 0,
     borderRadius: 5,
 }
-const SpaceProcessUseStyle: React.CSSProperties = {
-    transition: "all 0.2s",
-    height: "100%",
-    backgroundColor: "#428bca",
-    borderRadius: 5,
-}
 
 @inject('store')
 @observer
@@ -33,7 +27,12 @@ export class SpaceInfoBar extends React.Component<{ store?: TopPanelStore }, {}>
         return (
             <div style={{ width: 200 }}>
                 <div style={BarStype}>
-                    <div style={Object.assign(SpaceProcessUseStyle, { width: cloudInfo.used_percentage })}></div>
+                    <div
+                        className="space-process"
+                        style={{
+                            width: cloudInfo.used_percentage,
+                            backgroundColor: parseFloat(cloudInfo.used_percentage) > 80 ? "#db3737" : "#428bca"
+                        }} />
                 </div>
                 <div className="flex-between" style={{ alignItems: "center" }}>
                     <span>{cloudInfo.used_size}/{cloudInfo.zone_size}</span>

src/UI/Components/Template/Template.less

@@ -211,30 +211,34 @@
         width: auto;
     }
 
-    &>.bp3-dialog-body>div:first-child {
+    &>.bp3-dialog-body>div {
+        height: 100%;
 
-        input {
+        &>div:first-child {
-            width: 100px;
+            width: 60%;
-            height: 20px;
         }
 
-        button {
+        &>div:last-child {
-            height: 20px;
+            width: 40%;
-            min-height: 20px;
-            padding: 2px 8px;
-        }
         }
 
-    &>.bp3-dialog-body>div:last-child {
+    }
-        height: 100%;
 
-        &>div:first-child {
+    .buttons {
-            width: 60%;
 
+        &>button {
+            margin-right: 3px;
+            margin-bottom: 3px;
+            border-radius: 5px;
         }
 
-        &>div:last-child {
+        &>span {
-            width: 40%;
+            margin-right: 3px;
+
+            & button {
+                margin-bottom: 3px;
+                border-radius: 5px;
+            }
         }
     }
 }

src/UI/Components/Template/TemplateActionList.tsx

@@ -63,7 +63,7 @@ export default class TempalteActionList extends React.Component<ITempalteActionL
                     onNodeClick={this.handleNodeClick}
                     onNodeCollapse={(node) => this.handleNodeCollapse(node)}
                 />
-                <div>
+                <div className="buttons">
                     <Button
                         text="增加动作"
                         onClick={() => this.handleAddAction(EEditorActionType.Add)}

src/UI/Components/Template/TemplateEditor.tsx

@@ -78,15 +78,6 @@ export class TemplateEditor extends React.Component<ITemplateEditorProps, any> {
                     <div
                         className={Classes.DIALOG_BODY + " " + Classes.CARD}
                     >
-                        <div>
-                            <Label className={Classes.INLINE}>
-                                <span>模板名称</span>
-                                <input className={Classes.INPUT}
-                                    defaultValue={template.Name}
-                                    onChange={e => template.Name = e.target.value}
-                                />
-                            </Label>
-                        </div>
                         <div className="flex">
                             <TemplateParamList
                                 store={this.props.store}
@@ -102,6 +93,13 @@ export class TemplateEditor extends React.Component<ITemplateEditorProps, any> {
                             store={this.props.store}
                         />
                         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                            <Label className={Classes.INLINE}>
+                                <span style={{ fontWeight: 550 }}>模板名称:</span>
+                                <input className={Classes.INPUT}
+                                    defaultValue={template.Name}
+                                    onChange={e => template.Name = e.target.value}
+                                />
+                            </Label>
                             {
                                 this.props.tid ?
                                     <>

src/UI/Components/Template/TemplateParamList.tsx

@@ -111,7 +111,7 @@ export default class TemplateParamList extends React.Component<ITemplateParamLis
                         })
                     }
                 </ul>
-                <div>
+                <div className="buttons">
                     <Button
                         text="增加变量"
                         onClick={() => this.startAddParam.set(true)}

src/UI/Components/Template/TemplateSaveDir.tsx

@@ -37,7 +37,7 @@ export class TemplateSaveDir extends React.Component<ITemplateSaveDirProps, { no
                 }
                 target={
                     <Button
-                        text="保存到"
+                        text="保存"
                         intent={Intent.SUCCESS}
                     />}
             />

src/UI/Css/blue.less

@@ -181,3 +181,10 @@
         }
     }
 }
+
+.space-process{
+    transition: all 0.2s;
+    height: 100%;
+    background-color: #428bca;
+    border-radius: 5;
+}

src/UI/Store/TopPanelStore.ts

@@ -91,7 +91,7 @@ export class TopPanelStore extends Singleton
             });
             let zoneSize = sizeInfoToNumber(info.zone_size);
             let usedSize = sizeInfoToNumber(info.used_size);
-            this.cloudInfo.used_percentage = usedSize / zoneSize * 100 + "%";
+            this.cloudInfo.used_percentage = usedSize <= zoneSize ? usedSize / zoneSize * 100 + "%" : "100%";
         }
     }
 }