Fix bug: library manager webview should be responsive at different screens (#173)

* Fix bug: library manager webview should be responsive at different screens

* Fix bug: c_cpp_properties.json cannot be saved

* Make tslint happy

Author: testforstephen

html/app/components/BoardManager.tsx

@@ -119,12 +119,14 @@ class BoardManager extends React.Component<IBoardManagerProps, IBoardManagerStat
                 )
             }
             <div className="arduinomanager-toolbar theme-bgcolor">
-                <div className="dropdown-label">Type</div>
-                <DropdownButton id="typeselector" title={this.state.category} onSelect={this.typeUpdate}>
-                    { this.props.categories.map((c, index) => {
-                        return (<MenuItem key={index} eventKey={c} active={c === this.state.category}>{c}</MenuItem>);
-                    })}
-                </DropdownButton>
+                <div className="dropdown-filter">
+                    <span className="dropdown-label">Type</span>
+                    <DropdownButton id="typeselector" title={this.state.category} onSelect={this.typeUpdate}>
+                        { this.props.categories.map((c, index) => {
+                            return (<MenuItem key={index} eventKey={c} active={c === this.state.category}>{c}</MenuItem>);
+                        })}
+                    </DropdownButton>
+                </div>
                 <SearchInput className="search-input" placeholder="Filter your search..." onChange={this.searchUpdate} />
             </div>
             <div className="arduinomanager-container">

html/app/components/LibraryManager.tsx

@@ -145,18 +145,22 @@ class LibraryManager extends React.Component<ILibraryManagerProps, ILibraryManag
                 )
             }
             <div className="arduinomanager-toolbar theme-bgcolor">
-                <div className="dropdown-label">Type</div>
-                <DropdownButton id="typeselector" title={this.state.type} onSelect={this.typeUpdate}>
-                    { this.props.types.map((c, index) => {
-                        return (<MenuItem key={index} eventKey={c} active={c === this.state.type}>{c}</MenuItem>);
-                    })}
-                </DropdownButton>
-                <div className="dropdown-label">Topic</div>
-                <DropdownButton id="topicselector" title={this.state.topic} onSelect={this.topicUpdate}>
-                    { this.props.categories.map((c, index) => {
-                        return (<MenuItem key={index} eventKey={c} active={c === this.state.topic}>{c}</MenuItem>);
-                    })}
-                </DropdownButton>
+                <div className="dropdown-filter">
+                    <span className="dropdown-label">Type</span>
+                    <DropdownButton id="typeselector" title={this.state.type} onSelect={this.typeUpdate}>
+                        { this.props.types.map((c, index) => {
+                            return (<MenuItem key={index} eventKey={c} active={c === this.state.type}>{c}</MenuItem>);
+                        })}
+                    </DropdownButton>
+                </div>
+                <div className="dropdown-filter">
+                    <span className="dropdown-label">Topic</span>
+                    <DropdownButton id="topicselector" title={this.state.topic} onSelect={this.topicUpdate}>
+                        { this.props.categories.map((c, index) => {
+                            return (<MenuItem key={index} eventKey={c} active={c === this.state.topic}>{c}</MenuItem>);
+                        })}
+                    </DropdownButton>
+                </div>
                 <SearchInput className="search-input" placeholder="Filter your search..." onChange={this.searchUpdate} />
                 <Checkbox className="supported-checkbox" onChange={this.handleCheck}>Only show libraries supported by current board</Checkbox>
             </div>

html/app/styles/board.scss

@@ -20,19 +20,35 @@
 
 .arduinomanager-toolbar {
     min-height: 60px;
-    padding: 15px 10px;
+    padding: 10px 10px;
     position: fixed;
     width: 100%;
     z-index: 100;
+}
+
+.arduinomanager-container {
+    padding-top: 60px;
+    padding-bottom: 40px;
+}
+
+.arduinomanager-footer {
+    height: 40px;
+    line-height: 40px;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    padding: 0px 10px;
+}
+
+.dropdown-filter {
+    padding: 5px 5px;
+    display: inline-block;
 
     .dropdown-label {
-        float: left;
-        padding-top: 8px;
-        margin: 0px 5px;
+        margin-right: 5px;
     }
 
     .dropdown {
-        float: left;
         button {
             text-align: left;
             width: 150px;
@@ -54,20 +70,6 @@
     }
 }
 
-.arduinomanager-container {
-    padding-top: 60px;
-    padding-bottom: 40px;
-}
-
-.arduinomanager-footer {
-    height: 40px;
-    line-height: 40px;
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    padding: 0px 10px;
-}
-
 a {
     color: lightseagreen;
 }
@@ -154,11 +156,18 @@ a {
 }
 
 .boardmanager {
+    .dropdown-filter {
+        float: left;
+    }
+
     .search-input {
-        margin-left: 190px;
-        padding-top: 0px;
+        margin-left: 195px;
         color: #333;
     }
+
+    .arduinomanager-container {
+        padding-top: 55px;
+    }
 }
 
 .librarymanager {
@@ -167,18 +176,53 @@ a {
     }
 
     .supported-checkbox {
-        margin-top: -5px;
+        margin-top: 5px;
         margin-bottom: 0px;
         padding-left: 5px;
-    }
 
-    .arduinomanager-container {
-        padding-top: 80px;
+        label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
     }
 
     .search-input {
-        margin-left: 380px;
-        padding-top: 0px;
         color: #333;
     }
+
+    @media only screen and (min-width: 560px) {
+        .dropdown-filter {
+            float: left;
+        }
+
+        .search-input {
+            margin-left: 400px;
+        }
+
+        .arduinomanager-container {
+            padding-top: 80px;
+        }
+    }
+
+    @media only screen and (max-width: 559px) {
+        .dropdown-filter {
+            display: inline-block;
+        }
+
+        .arduinomanager-container {
+            padding-top: 123px;
+        }
+    }
+
+    @media only screen and (max-width: 405px) {
+        .dropdown-filter {
+            display: block;
+        }
+
+        .arduinomanager-container {
+            padding-top: 167px;
+        }
+    }
 }
+

html/app/styles/react-search-input.css

@@ -1,5 +1,5 @@
 .search-input {
-  padding: 10px 10px;
+  padding: 5px;
   position: relative;
 }
 

src/arduino/arduino.ts

@@ -129,7 +129,7 @@ export class ArduinoApp {
         const configFilePath = path.join(vscode.workspace.rootPath, constants.CPP_CONFIG_FILE);
         let deviceContext = null;
         if (!util.fileExistsSync(configFilePath)) {
-            util.mkdirRecursivelySync(configFilePath);
+            util.mkdirRecursivelySync(path.dirname(configFilePath));
             deviceContext = {};
         } else {
             deviceContext = util.tryParseJSON(fs.readFileSync(configFilePath, "utf8"));

src/arduino/libraryManager.ts

@@ -152,8 +152,10 @@ export class LibraryManager {
                 if (librarySet.has(sourceLib.name)) {
                     sourceLib.name = sourceLib.name + "(" + architecture + ")";
                 }
-                librarySet.add(sourceLib.name);
-                builtInLib.push(sourceLib);
+                if (!librarySet.has(sourceLib.name)) {
+                    librarySet.add(sourceLib.name);
+                    builtInLib.push(sourceLib);
+                }
             }
         }
         return builtInLib;

src/common/util.ts

@@ -69,6 +69,11 @@ export function readdirSync(dirPath: string, folderOnly: boolean = false): strin
     }
 }
 
+/**
+ * Recursively create directories. Equals to "mkdir -p"
+ * @function mkdirRecursivelySync
+ * @argument {string} dirPath
+ */
 export function mkdirRecursivelySync(dirPath: string): void {
     if (directoryExistsSync(dirPath)) {
         return ;