fix: ui issues when switching between tabs

luin · luin · commit 330f52f2532a · 2016-12-03T15:26:22.000+08:00
closes #1
diff --git a/client/components/main/Main/Database/Content/KeyContent/Editor.jsx b/client/components/main/Main/Database/Content/KeyContent/Editor.jsx
@@ -197,33 +197,37 @@ class Editor extends React.Component {
       viewer = <div></div>;
     }
     return <div
-      style={ { flex: 1, display: 'flex' } }
+      style={ { flex: 1, display: 'flex', width: '100%', flexDirection: 'column' } }
       className="Editor"
       onKeyDown={this.handleKeyDown.bind(this)}
     >
-      <label className="wrap-selector" ref="wrapSelector">
-        <input
-          type="checkbox"
-          checked={this.state.wrapping}
-          onChange={evt => this.setState({ wrapping: evt.target.checked })}
-        />
-        <span>Wrapping</span>
-      </label>
-      <select
-        className="mode-selector"
-        value={this.state.currentMode}
-        onChange={this.updateMode.bind(this)}
-      >
-        <option value="raw" disabled={typeof this.state.modes.raw !== 'string'}>Raw</option>
-        <option value="json" disabled={typeof this.state.modes.json !== 'string'}>JSON</option>
-        <option value="messagepack" disabled={typeof this.state.modes.messagepack !== 'string'}>MessagePack</option>
-      </select>
-      <button
-        className="nt-button"
-        disabled={!this.state.changed}
-        onClick={this.save.bind(this)}
-      >Save Changes</button>
       { viewer }
+      <div
+        className="operation-pannel"
+      >
+        <label className="wrap-selector" ref="wrapSelector">
+          <input
+            type="checkbox"
+            checked={this.state.wrapping}
+            onChange={evt => this.setState({ wrapping: evt.target.checked })}
+          />
+          <span>Wrapping</span>
+        </label>
+        <select
+          className="mode-selector"
+          value={this.state.currentMode}
+          onChange={this.updateMode.bind(this)}
+        >
+          <option value="raw" disabled={typeof this.state.modes.raw !== 'string'}>Raw</option>
+          <option value="json" disabled={typeof this.state.modes.json !== 'string'}>JSON</option>
+          <option value="messagepack" disabled={typeof this.state.modes.messagepack !== 'string'}>MessagePack</option>
+        </select>
+        <button
+          className="nt-button"
+          disabled={!this.state.changed}
+          onClick={this.save.bind(this)}
+        >Save Changes</button>
+      </div>
     </div>;
   }
 }
diff --git a/client/components/main/Main/Database/Content/KeyContent/Editor.scss b/client/components/main/Main/Database/Content/KeyContent/Editor.scss
@@ -21,6 +21,7 @@
     position: relative;
     flex: 1;
     display: flex;
+    width: 100%;
 
     &:before {
       content: '';
diff --git a/package.json b/package.json
@@ -20,11 +20,11 @@
     "url": "git://github.com/luin/medis.git"
   },
   "dependencies": {
-    "codemirror": "^5.10.0",
+    "codemirror": "^5.18.0",
     "fixed-data-table-contextmenu": "^0.6.3",
     "form-generator-react": "^1.0.5",
     "human-format": "^0.5.0",
-    "immutable": "^3.7.5",
+    "immutable": "^3.8.1",
     "ioredis": "^1.11.1",
     "jquery": "^2.1.4",
     "json-editor": "^0.7.23",
@@ -34,11 +34,11 @@
     "msgpack5": "^3.3.0",
     "react": "^0.14.0",
     "react-addons-css-transition-group": "^0.14.3",
-    "react-codemirror": "^0.2.0",
+    "react-codemirror": "^0.3.0",
     "react-document-title": "^2.0.1",
     "react-dom": "^0.14.0",
     "react-draggable": "^1.1.3",
-    "react-redux": "^4.0.0",
+    "react-redux": "^4.4.6",
     "react-split-pane": "0.1.16",
     "redis-commands": "^1.0.1",
     "redis-splitargs": "^1.0.0",
