add codicons and custom page

espressif · brianignacio5 · Jan 4, 2021 · Aug 10, 2020 · Aug 14, 2020 · Aug 17, 2020
commit 2cd8ffdae4bf67ed2b640b4c87a785d18b8b7416
diff --git a/package.json b/package.json
@@ -835,6 +835,7 @@
     "typescript": "^3.9.5",
     "typescript-tslint-plugin": "^0.3.1",
     "vsce": "^1.52.0",
+    "vscode-codicons": "^0.0.7",
     "vscode-nls-dev": "^3.3.1",
     "vscode-test": "^1.0.0",
     "vue-class-component": "^7.1.0",

diff --git a/src/setup/SetupPanel.ts b/src/setup/SetupPanel.ts
@@ -87,6 +87,14 @@ export class SetupPanel {
         retainContextWhenHidden: true,
         localResourceRoots: [
           vscode.Uri.file(path.join(this.extensionPath, "dist", "views")),
+          vscode.Uri.file(
+            path.join(
+              this.extensionPath,
+              "node_modules",
+              "vscode-codicons",
+              "dist"
+            )
+          ),
         ],
       }
     );
@@ -96,7 +104,18 @@ export class SetupPanel {
         path.join(this.extensionPath, "dist", "views", "setup-bundle.js")
       )
     );
-    this.panel.webview.html = this.createSetupHtml(scriptPath);
+    const codiconsUri = this.panel.webview.asWebviewUri(
+      vscode.Uri.file(
+        path.join(
+          this.extensionPath,
+          "node_modules",
+          "vscode-codicons",
+          "dist",
+          "codicon.css"
+        )
+      )
+    );
+    this.panel.webview.html = this.createSetupHtml(scriptPath, codiconsUri);
 
     const espIdfPath = idfConf.readParameter("idf.espIdfPath") as string;
 
@@ -296,18 +315,22 @@ export class SetupPanel {
     vscode.window.showInformationMessage("ESP-IDF has been configured");
   }
 
-  private createSetupHtml(scriptPath: vscode.Uri): string {
+  private createSetupHtml(
+    scriptPath: vscode.Uri,
+    codiconsUri: vscode.Uri
+  ): string {
     return `<!DOCTYPE html>
       <html lang="en">
-      <head>
+        <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>ESP-IDF Setup</title>
-          </head>
-          <body>
-              <div id="app"></div>
-          </body>
-          <script src="${scriptPath}"></script>
+          <link href="${codiconsUri}" rel="stylesheet" />
+        </head>
+        <body>
+          <div id="app"></div>
+        </body>
+        <script src="${scriptPath}"></script>
       </html>`;
   }
 

diff --git a/src/views/commons/espCommons.scss b/src/views/commons/espCommons.scss
@@ -110,3 +110,11 @@ button > span.icon > i:hover {
 div.plotly-notifier {
   visibility: hidden;
 }
+
+.control .icon {
+  padding: 20px;
+}
+
+.control .icon .codicon {
+  font-size: x-large;
+}
diff --git a/src/views/setup/App.vue b/src/views/setup/App.vue
@@ -31,14 +31,4 @@ export default class App extends Vue {}
 .fade-leave-to {
   opacity: 0;
 }
-
-.open-icon {
-  color: var(--vscode-button-background);
-  margin: 0.5em 0 0 0.5em;
-  cursor: pointer;
-  font-size: larger;
-}
-.open-icon:hover {
-  color: var(--vscode-button-hoverBackground);
-}
 </style>
diff --git a/src/views/setup/Custom.vue b/src/views/setup/Custom.vue
@@ -0,0 +1,29 @@
+<template>
+  <div id="custom-setup">
+    <div class="centerize" v-if="!isInstalled">
+      <selectEspIdf></selectEspIdf>
+
+      <selectPyVersion></selectPyVersion>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { Action, Mutation, State } from "vuex-class";
+
+@Component
+export default class CustomSetup extends Vue {
+  private useExistingPyEnv: boolean = false;
+  @Mutation setToolsFolder;
+  @State("toolsFolder") private storeToolsFolder: string;
+
+  get toolsFolder() {
+    return this.storeToolsFolder;
+  }
+
+  set toolsFolder(newValue: string) {
+    this.setToolsFolder(newValue);
+  }
+}
+</script>
diff --git a/src/views/setup/components/common/folderOpen.vue b/src/views/setup/components/common/folderOpen.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="field centerize text-size">
+    <label>{{ propLabel }}</label>
+    <div class="field expanded">
+      <div class="control expanded">
+        <input type="text" class="input" v-model="propModel" />
+      </div>
+      <div class="control">
+        <div class="icon">
+          <i
+            :class="folderIcon"
+            @mouseover="folderIcon = 'codicon codicon-folder-opened'"
+            @mouseout="folderIcon = 'codicon codicon-folder'"
+            v-on:click="openMethod"
+          ></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class folderOpen extends Vue {
+  private folderIcon = "codicon codicon-folder";
+  @Prop() propLabel: string;
+  @Prop() propModel: string;
+  @Prop() openMethod: () => void;
+}
+</script>
diff --git a/src/views/setup/components/home/selectEspIdf.vue b/src/views/setup/components/home/selectEspIdf.vue
@@ -5,9 +5,12 @@
       <div class="control">
         <div class="select">
           <select v-model="selectedIdfVersion">
-            <option v-for="ver in idfVersionList" :key="ver.name" :value="ver">
-              {{ ver.name }}
-            </option>
+            <option
+              v-for="ver in idfVersionList"
+              :key="ver.name"
+              :value="ver"
+              >{{ ver.name }}</option
+            >
           </select>
         </div>
       </div>
@@ -22,13 +25,14 @@
           <input type="text" class="input" v-model="espIdf" />
         </div>
         <div class="control">
-          <font-awesome-icon
-            :icon="folderIcon"
-            class="open-icon"
-            @mouseover="folderIcon = 'folder-open'"
-            @mouseout="folderIcon = 'folder'"
-            v-on:click="openEspIdfFolder"
-          />
+          <div class="icon">
+            <i
+              :class="folderIcon"
+              @mouseover="folderIcon = 'codicon codicon-folder-opened'"
+              @mouseout="folderIcon = 'codicon codicon-folder'"
+              v-on:click="openEspIdfFolder"
+            ></i>
+          </div>
         </div>
       </div>
     </div>
@@ -42,7 +46,7 @@ import { State, Action, Mutation } from "vuex-class";
 
 @Component
 export default class SelectEspIdf extends Vue {
-  private folderIcon = "folder";
+  private folderIcon = "codicon codicon-folder";
   @Action private openEspIdfFolder;
   @Mutation setEspIdfPath;
   @Mutation setSelectedEspIdfVersion;

diff --git a/src/views/setup/components/home/selectPyVersion.vue b/src/views/setup/components/home/selectPyVersion.vue
@@ -36,13 +36,14 @@
           />
         </div>
         <div class="control">
-          <font-awesome-icon
-            :icon="folderIcon"
-            class="open-icon"
-            @mouseover="folderIcon = 'folder-open'"
-            @mouseout="folderIcon = 'folder'"
-            v-on:click="openPythonPath"
-          />
+          <div class="icon">
+            <i
+              :class="folderIcon"
+              @mouseover="folderIcon = 'codicon codicon-folder-opened'"
+              @mouseout="folderIcon = 'codicon codicon-folder'"
+              v-on:click="openPythonPath"
+            ></i>
+          </div>
         </div>
       </div>
     </div>
@@ -55,7 +56,7 @@ import { Action, Mutation, State } from "vuex-class";
 
 @Component
 export default class SelectPyVersion extends Vue {
-  private folderIcon = "folder";
+  private folderIcon = "codicon codicon-folder";
   @Action private openPythonPath;
   @Mutation setSelectedSysPython;
   @Mutation setManualPyPath;

diff --git a/src/views/setup/main.ts b/src/views/setup/main.ts
@@ -11,17 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-  faArrowCircleDown,
-  faArrowLeft,
-  faCheck,
-  faFolder,
-  faFolderOpen,
-  faTimes,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import Vue from "vue";
 import VueRouter from "vue-router";
 import { store } from "./store";
@@ -45,16 +34,6 @@ const router = new VueRouter({
   base: __dirname,
 });
 
-library.add(
-  faArrowLeft,
-  faArrowCircleDown,
-  faCheck,
-  faFolder,
-  faFolderOpen,
-  faTimes
-);
-Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 const app = new Vue({
   el: "#app",
   components: { App },

diff --git a/src/views/setup/store/index.ts b/src/views/setup/store/index.ts
@@ -35,6 +35,7 @@ export interface IState {
   pyVersionsList: string[];
   selectedEspIdfVersion: IEspIdfLink;
   selectedSysPython: string;
+  toolsFolder: string;
   toolsResults: IToolInfo[];
   virtualEnvPyPath: string;
 }
@@ -59,6 +60,7 @@ export const setupState: IState = {
     url: "",
   },
   selectedSysPython: "",
+  toolsFolder: "",
   toolsResults: [],
   virtualEnvPyPath: "",
 };
@@ -171,6 +173,11 @@ export const mutations: MutationTree<IState> = {
     newState.selectedSysPython = selectedSysPython;
     Object.assign(state, newState);
   },
+  setToolsFolder(state, toolsFolder: string) {
+    const newState = state;
+    newState.toolsFolder = toolsFolder;
+    Object.assign(state, newState);
+  },
   setToolsResult(state, toolsResults: IToolInfo[]) {
     const newState = state;
     newState.toolsResults = toolsResults;

diff --git a/yarn.lock b/yarn.lock
@@ -6291,6 +6291,11 @@ vsce@^1.52.0:
     yauzl "^2.3.1"
     yazl "^2.2.2"
 
+vscode-codicons@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/vscode-codicons/-/vscode-codicons-0.0.7.tgz#86113f001e8abf630759500ea65c9708739c76b2"
+  integrity sha512-xqYypi4Ihth3bZgoE6961FYJBrmFErC+YouSC5Tn0pHqv0QSrP0PK++EIVNBi0I9Ted1OetZ3aWlNUWq1QaMBA==
+
 vscode-debugadapter-testsupport@^1.34.0:
   version "1.41.0"
   resolved "https://registry.yarnpkg.com/vscode-debugadapter-testsupport/-/vscode-debugadapter-testsupport-1.41.0.tgz#db2b6c743ef07b1f57828168bdc5f7a5e50ae21a"